Improvements to public catalog bill payment screens

[Kathy Lussier]

NOBLE has made some custom changes to the public catalog screens used for paying by credit card, and we would like to move some of these changes into the core code.

I'm sharing screenshots and highlighting some of the specific changes before they begin moving the code into a git branch. We're trying to get a handle on what should be moved into core for general use and what should remain custom in our own catalog.

Below are screenshots from the initial account summary screen

Stock:

http://www.screencast.com/t/nC1NwXtkctZs
http://www.screencast.com/t/r0M1I3DiNPVW

Proposed changes:

http://www.screencast.com/t/ZK19YpWFHH
http://www.screencast.com/t/TAsy4SXu4Zk

* The upper part of the screen displays a graphic with credit card logos, which provides a clear visual cue that the user can pay by credit card (and also lets them know which credit cards are accepted). It's a graphic that could be replaced by Evergreen sites if they accept a different set of credit cards.

* We also add a new 'View Charges' button because the charges often display 'below the fold' on this screen, particularly when using a mobile device.

* In the list of charges, we remove the checkout date and author from the table because they didn't seem to be critical pieces of information for the purposes of viewing a bill.

* We also removed the (fines accruing) text for titles that are still checked out because we didn't think that information was particularly useful for users.

* Date Returned is renamed as Returned/Renewed since the date listed here is sometimes the date that a particular overdue item was renewed.

* We also added a Billing Type column so that the user know why they were charged.

* We tried to make the other fees/charges section more similar to the fines section and also removed fields we didn't think were necessary for the user to see (Last Payment Time, Initial Amount Owed, Total Amount Paid). We also added the Note field to provide further explanation on why the user was charged.

* Also note that we've changed the order of the columns so that the select box, total owed, and "pay" button are on the left. This order seemed to fit better with the convention we see on other web sites.

* We're also recommending a label change from fines/fees to charges. The stock Fines section includes a mix of overdue fines, lost book fees, damage fees, etc. The word 'charge' is a label that covers all of the different types of fines/fees that appear here.

* Although the screenshot also shows the removal of the Payments tab, we are not planning to submit that change to the community for inclusion in the core code.

Screenshots of the credit card entry screens are below:
Stock:
http://www.screencast.com/t/Eu9O36HcYLi

Proposed:
http://www.screencast.com/t/STah4ob1N

* With the proposed changes, the billing and credit card information are split into different columns and wrap as expected when viewed on mobile.

* The month selector also displays the numeric value for the month along with the name. The number is what displays on the credit card, and providing the number here may be easier for users.

* We also removed the block that displays the details of the charges. Instead, we'll see it on the next screen where user confirms the charge. The block wasn't wrapping properly on mobile devices, and its placement on the confirmation page is consistent with what we see on other online shopping sites.

The before and after for the confirmation page can be seen here:
Stock:
http://www.screencast.com/t/FgTedoGUAQfn

Proposed:
http://www.screencast.com/t/5KXj4fieUA7m

The final proposed changes can be seen in the receipt that's generated after payment is made. These changes provide a cleaner display and also address an issue with numbering.

Stock:
http://www.screencast.com/t/4kcnjh7tgsAY

Proposed:
http://www.screencast.com/t/7KhCgTZGU

We do not plan to include the change to the date format because it assumes a mm/dd/yyyy is desired, which may not be true for all Evergreen sites. Since this formatting comes from an action trigger, we'll include the changes in the seed data, but I don't think we should include it in an upgrade script because there are probably sites out there that have already customized their receipts.

As of now, I'm looking for feedback to see if any of these proposed changes are things that should not be included in core when we submit a branch.

Also, just adding a note that when I said 'we' in all the above comments, I mean several clever people at NOBLE who do not include me, but I do support getting these changes into master.

[Galen Charlton (gmc)]

> * The upper part of the screen displays a graphic with credit card
> logos, which provides a clear visual cue that the user can pay by credit
> card (and also lets them know which credit cards are accepted). It's a
> graphic that could be replaced by Evergreen sites if they accept a
> different set of credit cards.

+1

> * We also add a new 'View Charges' button because the charges often
> display 'below the fold' on this screen, particularly when using a
> mobile device.

What would this button do? Jump below the fold?

> * In the list of charges, we remove the checkout date and author from
> the table because they didn't seem to be critical pieces of information
> for the purposes of viewing a bill.

Agree that author could be removed (or maybe combined with the title
column?), not sure about removing the checkout date column, given that
a patron may potentially have accrued fines during multiple checkouts
of the same back and may want to disambiguate them. I do think there
would be potential for combining checkout date and due date into a

> * We also removed the (fines accruing) text for titles that are still
> checked out because we didn't think that information was particularly
> useful for users.

Are there circumstances where a user might pay a fine, then be
surprised and/or indignant that they're getting charged again?

> * Date Returned is renamed as Returned/Renewed since the date listed
> here is sometimes the date that a particular overdue item was renewed.

+1

> * We also added a Billing Type column so that the user know why they
> were charged.

+1

> * We tried to make the other fees/charges section more similar to the
> fines section and also removed fields we didn't think were necessary for
> the user to see (Last Payment Time, Initial Amount Owed, Total Amount
> Paid). We also added the Note field to provide further explanation on
> why the user was charged.

+1

> * Also note that we've changed the order of the columns so that the
> select box, total owed, and "pay" button are on the left. This order
> seemed to fit better with the convention we see on other web sites.

+1

> * We're also recommending a label change from fines/fees to charges. The
> stock Fines section includes a mix of overdue fines, lost book fees,
> damage fees, etc. The word 'charge' is a label that covers all of the
> different types of fines/fees that appear here.

Is "Circulation charge" a piece of library jargon that patrons would
be able to identify? I think this change would be better discussed in
a separate bug and not folded into this omnibus.

> * The month selector also displays the numeric value for the month along
> with the name. The number is what displays on the credit card, and
> providing the number here may be easier for users.

+1

> * We also removed the block that displays the details of the charges.
> Instead, we'll see it on the next screen where user confirms the charge.
> The block wasn't wrapping properly on mobile devices, and its placement
> on the confirmation page is consistent with what we see on other online
> shopping sites.

+1

> We do not plan to include the change to the date format because it
> assumes a mm/dd/...

[Kathy Lussier (klussier)]

I just realized I left some questions unanswered.

> What would this button do? Jump below the fold?

Yes, exactly. The 'View Charges' button does bring users below the fold in case they didn't scroll far enough to see they are there.

> Are there circumstances where a user might pay a fine, then be
> surprised and/or indignant that they're getting charged again?

That's a good point. We'll keep it in then. If there are other sites like ours that don't want to see it, it's easy enough to remove as a customization.

> Is "Circulation charge" a piece of library jargon that patrons would
> be able to identify? I think this change would be better discussed in
> a separate bug and not folded into this omnibus.

Is it just the place where we say 'circulation' charges where you have concerns or all other instances of charges? We have several places where we added the word charge, and I'm wondering if those should be covered in a separate bug too. Or maybe we can remove the word circulations? Here are the other places where we made that change:

Pay fines button is changed to Pay all charges
The fines tab is changed to charges
The other fees tab is changed to Pay selected other charges

The reason behind this change is that we tend to have a mix of fines and fees in all of these places.

Thanks Galen!

[Michele Morgan (mmorgan)]

Just want to point out that lp 1464083 confirms that the "fines accruing" text is not always accurate.

[Terran McCanna (tmccanna)]

+1 to these changes from me

[Dawn Dale (ddale)]

+1 to these changes.

[Suzanne Paterno (paterno)]

working branch at http://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/spaterno/lp1688398_credit_card_improvements

[Cesar V (cesardv)]

I'm testing these changes, and so far they look great. I did note a couple minor things though, which might or might not be issues:

1. the View Charges button didn't seem to do anything for me. As there's no section with id = selected_fines.

2. The div in which the View Charges and Pay All buttons are in, aka #myopac_sum_fines, disappears when the viewport width < ~600px. It looks like there's a media query that is doing that explicitly on line 2271 of the styles.css.tt2. Not sure if that is something we want to change.

Other than that +1 from me.

[Cesar V (cesardv)]

Actually, I just noticed that the there was a hardcoded img url for the noble logo added to the seed.data.sql template:

http://git.evergreen-ils.org/?p=working/Evergreen.git;a=commitdiff;h=70781b9e4f4427452bfd84779b654a8fb3798920#patch1

This probably should be removed. It's possible we can add the ability for anyone to add an event param for this i.e say a "logo_url" param that has a url pointing to the desired logo, and wrapping the div for that logo img in a template IF conditional block, so that if the logo_url is supplied then it displays.

[Cesar V (cesardv)]

I've pushed a signoff branch that includes everything except the hardcoded url, so this can make the 3.0 deadline. This way we can add the param.logo_url feature later on if desired.

http://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/cesardv/lp1688398_credit_card_improvements-fix-imgurl-signoff

[Galen Charlton (gmc)]

Pushed to master, along with a couple follow-ups. Thanks, Suzanne and Cesar!