LP#1688398: revamp public catalog bill payment page
authorSuzanne Paterno <paterno@noblenet.org>
Thu, 10 Aug 2017 17:15:39 +0000 (13:15 -0400)
committerGalen Charlton <gmc@equinoxinitiative.org>
Fri, 1 Sep 2017 19:04:24 +0000 (15:04 -0400)
- Changed table layout of the credit card charges on the Account screen.
  Moved checkbox to left of screen, added a column for Billing Type.
- Add button to Pay Selected vs All Charges.
- Include image of credit cards accepted (need to update with one with
  AmEx)
- Reformatted page for inputting credit card
- Updated confirmation screen to bold amount, and list the titles as
  the ones the user is paying for.
- Changed Print reciept template in seed data to look more readable and
  like other itemized reciepts.

Signed-off-by: Suzanne Paterno <paterno@noblenet.org>
Signed-off-by: Cesar Velez <cesar.velez@equinoxinitiative.org>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Open-ILS/src/sql/Pg/950.data.seed-values.sql
Open-ILS/src/templates/opac/css/style.css.tt2
Open-ILS/src/templates/opac/myopac/main.tt2
Open-ILS/src/templates/opac/myopac/main_pay.tt2
Open-ILS/src/templates/opac/myopac/main_payment_form.tt2
Open-ILS/src/templates/opac/parts/myopac/main_base.tt2
Open-ILS/web/images/credit_card_logo.png [new file with mode: 0644]

index cad9960..0c1e7c9 100644 (file)
         'xact.usr',
         'print-on-demand',
 $$
+
 [%- USE date -%][%- SET user = target.0.xact.usr -%]
-<div style="li { padding: 8px; margin 5px; }">
-    <div>[% date.format %]</div><br/>
+<div style="font-family: Arial, Helvetica, sans-serif;">
+   
+   <!-- Header aligned left -->
+   <div style="text-align:left;">
+       <img src="https://evergreen.noblenet.org/opac/images/noble_logo.jpg" style="width:30%; "/> <br />
+       <span style="padding-top:1em;">[% date.format %]</span>
+    </div><br/>
+    
+     [% SET grand_total = 0.00 %]
     <ol>
     [% SET xact_mp_hash = {} %]
-    [% FOR mp IN target %][%# Template is hooked around payments, but let us make the receipt focused on transactions %]
+    [% FOR mp IN target %][%# Create an array of transactions/amount paid for each payment made %]
         [% SET xact_id = mp.xact.id %]
-        [% IF ! xact_mp_hash.defined( xact_id ) %][% xact_mp_hash.$xact_id = { 'xact' => mp.xact, 'payments' => [] } %][% END %]
-        [% xact_mp_hash.$xact_id.payments.push(mp) %]
+        [% SET amount = mp.amount %]
+        [% IF ! xact_mp_hash.defined( xact_id ) %]
+           [% xact_mp_hash.$xact_id = { 'xact' => mp.xact, 'payment' => amount } %]
+        [% END %]
     [% END %]
+    
     [% FOR xact_id IN xact_mp_hash.keys.sort %]
         [% SET xact = xact_mp_hash.$xact_id.xact %]
-        <li>Transaction ID: [% xact_id %]
-            [% IF xact.circulation %][% helpers.get_copy_bib_basics(xact.circulation.target_copy).title %]
-            [% ELSE %]Miscellaneous
-            [% END %]
-            Line item billings:<ol>
-                [% SET mb_type_hash = {} %]
-                [% FOR mb IN xact.billings %][%# Group billings by their btype %]
-                    [% IF mb.voided == 'f' %]
-                        [% SET mb_type = mb.btype.id %]
-                        [% IF ! mb_type_hash.defined( mb_type ) %][% mb_type_hash.$mb_type = { 'sum' => 0.00, 'billings' => [] } %][% END %]
-                        [% IF ! mb_type_hash.$mb_type.defined( 'first_ts' ) %][% mb_type_hash.$mb_type.first_ts = mb.billing_ts %][% END %]
-                        [% mb_type_hash.$mb_type.last_ts = mb.billing_ts %]
-                        [% mb_type_hash.$mb_type.sum = mb_type_hash.$mb_type.sum + mb.amount %]
-                        [% mb_type_hash.$mb_type.billings.push( mb ) %]
-                    [% END %]
-                [% END %]
-                [% FOR mb_type IN mb_type_hash.keys.sort %]
-                    <li>[% IF mb_type == 1 %][%# Consolidated view of overdue billings %]
-                        $[% mb_type_hash.$mb_type.sum %] for [% mb_type_hash.$mb_type.billings.0.btype.name %] 
-                            on [% mb_type_hash.$mb_type.first_ts %] through [% mb_type_hash.$mb_type.last_ts %]
-                    [% ELSE %][%# all other billings show individually %]
-                        [% FOR mb IN mb_type_hash.$mb_type.billings %]
-                            $[% mb.amount %] for [% mb.btype.name %] on [% mb.billing_ts %] [% mb.note %]
-                        [% END %]
-                    [% END %]</li>
-                [% END %]
-            </ol>
-            Line item payments:<ol>
-                [% FOR mp IN xact_mp_hash.$xact_id.payments %]
-                    <li>Payment ID: [% mp.id %]
-                        Paid [% mp.amount %] via [% SWITCH mp.payment_type -%]
-                            [% CASE "cash_payment" %]cash
-                            [% CASE "check_payment" %]check
-                            [% CASE "credit_card_payment" %]credit card
-                            [%- IF mp.credit_card_payment.cc_number %] ([% mp.credit_card_payment.cc_number %])[% END %]
-                            [% CASE "credit_payment" %]credit
-                            [% CASE "forgive_payment" %]forgiveness
-                            [% CASE "goods_payment" %]goods
-                            [% CASE "work_payment" %]work
-                        [%- END %] on [% mp.payment_ts %] [% mp.note %]
-                    </li>
-                [% END %]
-            </ol>
+        <li>
+          Transaction ID: [% xact_mp_hash.$xact_id.xact.id %]<br /> 
+          [% IF xact.circulation %]
+             Title: "[% helpers.get_copy_bib_basics(xact.circulation.target_copy).title %]" <br />                
+          [% END %]
+          
+           [%# Go get all the date needed from xact_summary %]
+           
+           [% SET mbts = xact.summary %]
+
+           Transaction Type: [% mbts.last_billing_type%]<br />
+           Date: [% mbts.last_billing_ts %] <br />
+
+           Note: [% mbts.last_billing_note %] <br />
+
+           Amount: $[% xact_mp_hash.$xact_id.payment | format("%.2f") %]
+           [% grand_total = grand_total + xact_mp_hash.$xact_id.payment %]
         </li>
+        <br />
     [% END %]
     </ol>
+    
+    <div> <!-- Summary of all the information -->
+       Payment Type: Credit Card <br />
+       Total:<strong> $[% grand_total | format("%.2f") %] </strong>  
+    </div>
+
 </div>
 $$
     )
index bdbb2d3..aade957 100644 (file)
@@ -1214,9 +1214,17 @@ div.result_table_utils_cont {
     float:right;
     padding: 15px 0px 0px 23px;
     [% END -%]
-    background-color: [% css_colors.accent_ultralight %];
     width: 177px;
-    height: 166px;
+}
+
+.cc_logo_img
+{
+   width: 79%;
+    [% IF rtl == 't' -%]
+      padding-right: .5em;
+    [% ELSE -%]
+       padding-left: .5em;
+    [% END -%]
 }
 
 #myopac_sum_fines_placehold {
@@ -1245,23 +1253,91 @@ div.result_table_utils_cont {
     [% END -%]
 }
 
-#acct_checked_main_header, #acct_holds_main_header, #acct_checked_hist_header, #acct_holds_hist_header, #acct_list_header, #acct_list_header_anon, #temp_list_holds, #acct_messages_main_header, #ebook_circs_main_table, #ebook_holds_main_table {
+#acct_checked_main_header, #acct_holds_main_header, #acct_fines_main_header, #acct_fees_main_header, #acct_checked_hist_header, #acct_holds_hist_header, #acct_list_header, #acct_list_header_anon, #temp_list_holds, #acct_messages_main_header, #ebook_circs_main_table, #ebook_holds_main_table {
     border-collapse: collapse;
 }
 
+.acct_fines_header
+{
+   width: 100%;
+   padding-bottom:1em;
+   [% IF rtl == 't' -%]
+   float: right;
+   [% ELSE -%]
+   float:left;
+   [% END -%]
+}
+
+/* tables for entering payment information */
+#acct_fines_main_header, 
+#acct_fees_main_header
+{
+   width: 100%;
+}
+
+/* tables for entering payment information */
+#billing_info_table
+{
+    width: auto;
+    [% IF rtl == 't' -%]
+    float: right;
+    [% ELSE -%]
+    float:left;
+    [% END -%]
+    display:inline;
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+/* tables for entering payment information */
+#credit_card_info_table
+{
+    width: auto;
+    display: block;
+}
+
+/* tables for entering payment information */
+#billing_info_table td,
+#credit_card_info_table td
+{
+   [% IF rtl == 't' -%]
+    padding-right: .5em;
+    [% ELSE -%]
+    padding-left: .5em;
+    [% END -%]
+   
+}
+
+/* div for the payment buttons with the total */
+#payment_actions
+{
+   width: auto;
+   display: block;
+   padding: 1em 0 0 1em;
+   text-align:center;
+}
+
+/* text to state what is seen on cc statement */
+.cc_disclaimer
+{
+   font-style:italic;
+   font-size: 90%;
+   color:[% css_colors.primary_fade %];
+}
+
 .hold_notes {
     text-transform: none;
     font-weight: normal;
 }
 
 .hold_note_title { font-weight: bold; }
-
-#acct_checked_main_header td, #acct_holds_main_header td, #acct_checked_hist_header td, #acct_holds_hist_header td, #acct_list_header td, #acct_list_header_anon td, #temp_list_holds td, #acct_messages_main_header, #ebook_circs_main_table td, #ebook_holds_main_table td {
-    background-color: [% css_colors.accent_lighter2 %];
+#acct_checked_main_header td, #acct_holds_main_header td, #acct_fines_main_header td, #acct_fines_confirm_header td, #acct_fees_main_header td,#acct_checked_hist_header td, #acct_holds_hist_header td, #acct_list_header td, #acct_list_header_anon td, #temp_list_holds td, #acct_messages_main_header td, #ebook_circs_main_table td, #ebook_holds_main_table td {
+    background-color: [% css_colors.background %]; 
     padding: 10px;
-}
+        border: 1px solid #d3d3d3; 
+} 
 
-#acct_checked_main_header th, #acct_holds_main_header th, #acct_checked_hist_header th, acct_holds_hist_header th, #acct_list_header th, #acct_list_header_anon th, #temp_list_holds th, #acct_messages_main_header, #ebook_circs_main_table th, #ebook_holds_main_table th {
+#acct_checked_main_header th, #acct_holds_main_header th, #acct_fines_main_header th, #acct_fines_confirm_header th, #acct_fees_main_header th, #acct_checked_hist_header th, #acct_holds_hist_header th, #acct_list_header th, #acct_list_header_anon th, #temp_list_holds th, #acct_messages_main_header th, #ebook_holds_main_table th {
     [% IF rtl == 't' -%]
     text-align: right;
     [% ELSE -%]
@@ -1324,6 +1400,12 @@ div.result_table_utils_cont {
 .myopac_payments_table form { display: inline; }
 .myopac_payments_table input[type="submit"] { padding: 1px; }
 
+.cc_header
+{
+   padding-top:1em;
+   background-color: [% css_colors.accent_lighter %];
+}
+
 .payment-error {
     font-weight: bold; color: [% css_colors.text_alert %];
     padding: 10px; border: 1px solid [% css_colors.accent_medium_dark %];
index 8c5aa3c..efe9453 100644 (file)
 [%  IF myopac_cc_allowed;
     # http://www.w3.org/TR/WCAG20-TECHS/H32.html
     # avoid forms w/ no submit action %]
-<form action="[% ctx.opac_root %]/myopac/main_payment_form" method="get">
+<form action="[% ctx.opac_root %]/myopac/main_payment_form#payment" method="get">
 [% END %]
 
     [% IF ctx.fines.circulation.size > 0 %]
     <div id='myopac_circ_trans_div'>
-        <table width='100%' class='data_grid' title="[% l('Items Checked Out') %]">
+      <!--moved tables heading to outside of the table itself - took internal styling -->
+        <div class="header_middle">
+           <span class="acct_fines_header">
+           <!-- Different heading when not able to pay -->
+             [% IF myopac_cc_allowed %]
+                [% l("Pay Selected Circulation Charges") %]
+            [% ELSE %] 
+                [% l("Circulation Charges") %]
+             [% END %]
+           </span>
+           
+        </div>
+    
+        <table id="acct_fines_main_header" class="table_no_border_space table_no_cell_pad" title="[% l('Items Checked Out') %]">
             <thead>
+               
                 <tr>
-                    <td colspan='10' style='padding: 6px'>
-                        <strong>[% l("Pay Selected Circulation Charges") %]</strong>
-                    </td>
-                </tr>
-                <tr>
-                    <td>[% l("Title") %]</td>
-                    <td>[% l("Author") %]</td>
-                    <td>[% l("Checkout Date") %]</td>
-                    <td>[% l("Due Date") %]</td>
-                    <td>[% l("Date Returned") %]</td>
-                    <td>[% l("Balance Owed") %]</td>
-                    [% IF myopac_cc_allowed %]
-                    <td nowrap="nowrap" style="white-space:nowrap;">
+
+                   [% IF myopac_cc_allowed %]
+                    <th nowrap="nowrap" style="white-space:nowrap;">
                         <input id="pay_fines_box1" checked="checked"
                             type="checkbox" onclick="select_all_checkboxes('xact', this.checked)"
-                            title="[% l('Click to (un)select all fines') %]" />
-                        <label for="pay_fines_box1">[% l('Pay Charges') %]</label>
-                    </td>
+                            title="[% l('Click to (un)select all charges') %]" />
+                    </th>
                     [% END %]
+                    <th>[% l("Owed") %]</th>
+                    <th class="mobile_hide">[% l("Billing Type") %]</th>
+                    <th>[% l("Title") %]</th>
+                    <th class='mobile_hide'>[% l("Checkout") %]</th> 
+                    <th>[% l(" Due ") %]</th> 
+                    <th>
+                       <span class="mobile_hide">[% l(" Returned/Renewed") %]</span>
+                       <span class="mobile_view">[% l(" Returned&#42;") %]</span>
+                    </th>
+                    
                 </tr>
             </thead>
             <tbody id='myopac_circ_trans_tbody'>
                         attrs.title = f.xact.reservation.target_resource_type.name;
                     END %]
                 <tr id='myopac_circ_trans_row'>
+                    [% IF myopac_cc_allowed %]
+                    <td>
+                        <input type="checkbox" checked="checked" 
+                            title="[% l('Pay this fine') %]" name="xact"
+                            value="[% f.xact.id %]" />
+                    </td>
+                    [% END %]
+                    
+                    <td>
+                        <strong class="alert">
+                            [% money(f.xact.balance_owed)%]
+                        </strong>
+                    </td>
+                    
+                    <td class="mobile_hide">
+                       [% f.xact.last_billing_type %]
+                    </td>
+                                  
                     <td>
                         [% recid = f.xact.circulation.target_copy.call_number.record.id || f.xact.reservation.target_resource_type.record.id;
                         IF recid; %]
                         [% attrs.title | html %]
                         [% END %]
                     </td>
-                    <td>[%- author_query = attrs.author.replace('[,\.:;]', ''); %]
-                        <a href="[% mkurl(ctx.opac_root _ '/results',
-                            {qtype => 'author', query => author_query,
-                            loc => ctx.search_ou}) %]">[% attrs.author | html %]</a>
-                    </td>
-                    <td name='myopac_circ_trans_start'>
+                    
+                   <td name='myopac_circ_trans_start' class='mobile_hide'>
                         [% ts = f.xact.circulation.xact_start || f.xact.reservation.start_time || 0;
                         IF ts;
                             date.format(ctx.parse_datetime(ts), DATE_FORMAT);
                         END %]
                     </td>
-                    <td name='myopac_circ_trans_due'>
+                    
+                    <td name='myopac_circ_trans_due' >
                         [% ts = f.xact.circulation.due_date || f.xact.reservation.end_time || 0;
                            due_org = f.xact.circulation.circ_lib || f.xact.reservation.pickup_lib;
                         IF ts;
                             date.format(ctx.parse_datetime(ts, due_org), DATE_FORMAT);
                         END %]
                     </td>
-                    <td name='myopac_circ_trans_finished'>
+                    
+                    <td name='myopac_circ_trans_finished' >
                         [%  ts = f.xact.circulation.checkin_time || f.xact.reservation.return_time || 0;
                             IF ts;
                                 date.format(ctx.parse_datetime(ts), DATE_FORMAT);
                             ELSE %]
                             <!-- XXX TODO fines aren't really accruing
                                 if circ has hit maxfines. more clarity
-                                here? -->
+                                here? --> 
                             <span class="alert">[% l('(fines accruing)') %]</span>
                         [%  END %]
                     </td>
-                    <td>
-                        <strong class="alert">
-                            [% money(f.xact.balance_owed) %]
-                        </strong>
-                    </td>
-                    [% IF myopac_cc_allowed %]
-                    <td>
-                        <input type="checkbox" checked="checked" 
-                            title="[% l('Pay this fine') %]" name="xact"
-                            value="[% f.xact.id %]" />
-                    </td>
-                    [% END %]
+                   
                 </tr>
                 [% END %]
             </tbody>
         </table>
+        <!-- Disclaimer for mobile -->
+        <span class="mobile_view cc_disclaimer"> <strong>&#42;</strong>Items may have been renewed. </span>
     </div>
     [% END %]
 
     [% IF ctx.fines.grocery.size > 0 %]
     <!-- Table for all non-circulation transactions -->
     <div id='myopac_trans_div'>
-        <br/>
-        <hr class='opac-auto-013'  color="#dcdbdb" />
-        <br/>
-        <table width='100%' class='data_grid data_grid_center'
-            id='myopac_trans_table' title="[% l('Other Charges and Fees') %]">
+     <br/><br/>
+      <div class="header_middle">
+        <span class="acct_fines_header">
+
+         [% IF myopac_cc_allowed %]
+                [% l("Pay Selected Other Charges") %]
+             [% ELSE %]
+                [% l("Other Charges") %]
+             [% END %]
+
+        </span>
+        </div>
+        
+         <table id="acct_fees_main_header" class="table_no_border_space table_no_cell_pad"title="[% l('Other Fines and Fees') %]">
             <thead>
                 <tr>
-                    <td colspan='8' style='padding: 6px'>
-                        <span class="bold">[% l("Pay Selected Other Charges") %]</span>
-                    </td>
-                </tr>
-                <tr>
-                    <td width='16%'>[% l("Transaction Start Time") %]</td>
-                    <td width='16%'>[% l("Last Payment Time") %]</td>
-                    <td width='16%'>[% l("Initial Amount Owed") %]</td>
-                    <td width='16%'>[% l("Total Amount Paid") %]</td>
-                    <td width='16%'>[% l("Balance Owed") %]</td>
-                    <td width='16%'>[% l("Billing Type") %]</td>
-                    [% IF myopac_cc_allowed %]
-                    <td width='4%' align="center" nowrap="nowrap"
-                        style="white-space:nowrap;">
+                
+                     [% IF myopac_cc_allowed %]
+                    <th  nowrap="nowrap" style="white-space:nowrap;">
                         <input id="pay_fines_box2" checked="checked"
                             type="checkbox" onclick="select_all_checkboxes('xact_misc', this.checked)"
-                            title="[% l('Click to (un)select all charges') %]" />
-                        <label for="pay_fines_box2">[% l("Pay Charges") %]</label>
-                    </td>
+                            title="[% l('Click to (un)select all fines') %]" />
+                    </th>
                     [% END %]
+                    <th >[% l("Owed") %]</th><!-- NOBLE - Removed  word balance -->
+                    <th >[% l("Billing Type") %]</th><!-- added style for mobile - NOBLE -->
+                    <th >[% l("Note") %]</th> <!-- NOBLE - added -->
+                    <th >[% l("Date") %]</th><!-- NOBLE - Changed wording of "Transation Start time" -->
+                    
+
                 </tr>
             </thead>
             <tbody id='myopac_trans_tbody'>
                 [% FOR f IN ctx.fines.grocery %]
                 <tr id='myopac_trans_row'>
-                    <td>[% date.format(
-                            ctx.parse_datetime(f.xact.xact_start),
-                            DATE_FORMAT
-                    ) %]</td>
-                    <td>
-                        [%  IF f.xact.last_payment_ts;
-                                date.format(
-                                    ctx.parse_datetime(
-                                        f.xact.last_payment_ts
-                                    ), DATE_FORMAT
-                                );
-                            END %]
+                
+                   [% IF myopac_cc_allowed %]
+                    <td >
+                        <input type="checkbox" title='[% l("Pay this fine") %]'
+                            name="xact_misc" value="[% f.xact.id %]"
+                            checked="checked" />
                     </td>
-                    <td>[% money(f.xact.total_owed) %]</td>
-                    <td>[% money(f.xact.total_paid) %]</td>
+                    [% END %]
+                    
                     <td class="alert">
                         <strong>
                             [% money(f.xact.balance_owed) %]
                         </strong>
                     </td>
+                    
                     <td>[% f.xact.last_billing_type %]</td>
-                    [% IF myopac_cc_allowed %]
+                    
                     <td>
-                        <input type="checkbox" title='[% l("Pay this fine") %]'
-                            name="xact_misc" value="[% f.xact.id %]"
-                            checked="checked" />
+                       [% f.xact.last_billing_note %]
                     </td>
-                    [% END %]
+                    
+                    <td>[% date.format(
+                            ctx.parse_datetime(f.xact.xact_start),
+                            DATE_FORMAT
+                    ) %]</td>
+
                 </tr>
                 [% END %]
             </tbody>
         </table>
+   
     </div>
     [% END %]
     [% UNLESS ctx.fines.grocery.size OR ctx.fines.circulation.size %]
     <div>[% l('You have no current fines.') %]</div>
     [% ELSIF myopac_cc_allowed %]
-    <div class="text-right pad-top-ten">
+    <div class="text-left pad-top-ten">
         <input type="submit"
             value="[% l('Pay selected charges') %]"
             title="[% l('Pay selected charges') %]"
index e96f833..a3b6f4d 100644 (file)
@@ -25,9 +25,9 @@
                 retry_url =  mkurl(ctx.opac_root _ '/myopac/main_payment_form', url_args, 1);
             %]
             <br/>
-            <a href="[% retry_url %]">[%
-                l('Go back to try again or to cancel this payment attempt.')
-            %]</a>
+            
+             <a href="[% mkurl(ctx.opac_root _ '/myopac/main', {}, 1) %]" class="opac-button">[% l('Account Home') %]</a> 
+             <a href="[% retry_url %]" class="opac-button">[% l('Try Payment Again') %]</a>
         </p>
     [% ELSE %]
         <p><big>[% l('Your payment has been approved.') %]</big></p>
             END %]
         <p>[ <a href="[% ctx.opac_root %]/myopac/receipt_print?[% print_args.join('&amp;') %]"
             target="_egrecpt"
+            class="opac-button"
             onclick="try { print_node('printable-receipt'); } catch (e) { window.print(); } return false;">[% l('Print receipt') %]</a> ]</p>
         <tt id="printable-receipt">
             [% ctx.printable_receipt.template_output.data %]
+            <br />
         </tt>
         [% ELSE %]
         <div class="payment-error">
@@ -52,7 +54,7 @@
                 ) | html %]
         </div>
         [% END %]
-        <p>[ <a href="[% ctx.opac_root %]/myopac/main">[%
+        <p>[ <a href="[% ctx.opac_root %]/myopac/main" class="opac-button">[%
             l("Back to Account Summary") %]</a> ]</p>
     [% END %]
 </div>
index 54d0792..455af6a 100644 (file)
         ctx.get_org_setting(ctx.user.home_ou.id, 'credit.processor.stripe.enabled') AND ctx.get_org_setting(ctx.user.home_ou.id, 'credit.processor.default') == 'Stripe';
         ctx.use_stripe = 1;
     END %]
+
+<a name="payment"> </a>    
 <h3 class="sr-only">[% l('Pay Charges') %]</h3>
 [% IF ctx.fines.balance_owed <= 0 %]
 <div>
-    [% l("You either have no fines to pay or you have selected fines whose " _
-        "total is non-positive.  We cannot process non-positive amounts.") %]
+    [% l("The minimum amount you can pay is \$0.01.") %]
 </div>
 [% ELSE %]
 [% IF ctx.use_stripe %]
 [% END %]
 <div id="pay_fines_now"[% IF ctx.use_stripe %] class="hide_me"[% END %]>
     [% IF last_chance %]
-    <p><big>[% l("Are you sure you are ready to charge [_1] to your credit card?", money(ctx.fines.balance_owed)) %]</big></p>
+    
+    <p><big>[% l("Are you sure you are ready to charge ") %]
+         <strong> [% l("[_1] ", money(ctx.fines.balance_owed))%]</strong>
+        [% l("to your credit card?") %]</big></p>
     <form action="[% ctx.opac_root %]/myopac/main_pay_init" method="post">
         [% FOR k IN CGI.Vars;
             NEXT UNLESS k;
             FOR val IN CGI.param(k) %]
         <input type="hidden" name="[% k | html %]" value="[% val | html %]" />
         [% END; END %]
-        <input type="submit" value="[% l('Submit Payment') %]" />
-        <a href="[% mkurl(ctx.opac_root _ '/myopac/main', {}, 1) %]">[% l('Cancel') %]</a>
+        
+        <input type="submit" value="[% l('Submit') %]" class="opac-button"/>
+        <a href="[% mkurl(ctx.opac_root _ '/myopac/main#selected_fines', {}, 1) %]" class="opac-button">[% l('Cancel') %]</a>
+
+     <table title="[% l('List of Transactions') %]" id="acct_fines_confirm_header"
+        class="table_no_border_space table_no_cell_pad" style="padding-top:1em;">
+   <thead>
+      <tr>
+        <th>[% l('Charge/Fee') %]</th>
+        <th>[% l('Amount') %]</th>
+     </tr>
+   </thead>
+   <tbody>
+      [%
+       FOR f IN ctx.fines.circulation;
+         NEXT IF CGI.param('xact').size &&
+            !CGI.param('xact').grep(f.xact.id).size;
+         attrs = {marc_xml => f.marc_xml};
+         IF f.marc_xml;
+             PROCESS get_marc_attrs args=attrs;
+         ELSIF f.xact.reservation;
+              attrs.title = f.xact.reservation.target_resource_type.name;
+         END %]
+         <tr>
+            <td>[% attrs.title | html %]</td>
+            <td class="text-right">[% money(f.xact.balance_owed) %]</td>
+         </tr>
+          [%
+          END;
+          FOR f IN ctx.fines.grocery;
+              NEXT IF CGI.param('xact_misc').size &&
+                  !CGI.param('xact_misc').grep(f.xact.id).size %]
+              <tr>
+                 <td>[% f.xact.last_billing_type | html %]</td>
+                 <td class="text-right">[% money(f.xact.balance_owed) %]</td>
+            </tr>
+        [% END %]
+     </tbody>
+   </table> 
+     
+    <p style="padding-top: 2em;">
+    <big>[% l("Are you sure you are ready to charge ") %]
+         <strong> [% l("[_1] ", money(ctx.fines.balance_owed))%]</strong>
+        [% l("to your credit card?") %]</big></p>        
+        <input type="submit" value="[% l('Submit') %]" class="opac-button"/>
+        <a href="[% mkurl(ctx.opac_root _ '/myopac/main#selected_fines', {}, 1) %]" class="opac-button">[% l('Cancel') %]</a>
     [% ELSE %]
-    <form method="post" id="payment_form"
+    
+    <form method="post" id="payment_form" action='#payment'
     [% IF ctx.use_stripe %]
     onsubmit="return stripe_onsubmit();"
     [% END %]
         <input type="hidden" name="stripe_token" id="stripe_token" />
         [% END %]
 
-        <table title="[% l('Billing Information') %]">
-            <tbody>
-                <tr>
-                    <td colspan='2'><strong>[% l('Billing Information') %]</strong></td>
-                    <td rowspan='13' valign='top'>
-                        <p>[% l('Selected fines you are paying for:') %]</p>
-                        <table title="[% l('List of Transactions') %]"
-                            class="table_no_border_space table_no_cell_pad myopac_payments_table">
-                            <thead>
-                                <tr>
-                                    <th>[% l('Name') %]</th>
-                                    <th>[% l('Amount') %]</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                            [%
-                            FOR f IN ctx.fines.circulation;
-                                NEXT IF CGI.param('xact').size &&
-                                    !CGI.param('xact').grep(f.xact.id).size;
-                                attrs = {marc_xml => f.marc_xml};
-                                IF f.marc_xml;
-                                    PROCESS get_marc_attrs args=attrs;
-                                ELSIF f.xact.reservation;
-                                    attrs.title = f.xact.reservation.target_resource_type.name;
-                                END %]
-                                <tr>
-                                    <td>[% attrs.title | html %]</td>
-                                    <td class="text-right">[% money(f.xact.balance_owed) %]</td>
-                                </tr>
-                            [%
-                            END;
-                            FOR f IN ctx.fines.grocery;
-                                NEXT IF CGI.param('xact_misc').size &&
-                                    !CGI.param('xact_misc').grep(f.xact.id).size %]
-                                <tr>
-                                    <td>[% f.xact.last_billing_type | html %]</td>
-                                    <td class="text-right">[% money(f.xact.balance_owed) %]</td>
-                                </tr>
-                            [% END %]
-                            </tbody>
-                        </table>
-                        <br />
-                        <div>
-                            [% l('Total amount to pay:') %]
-                            <strong>[% money(ctx.fines.balance_owed) %]</strong>
-                        </div>
-                        <br />
-                        [% | l('<strong>', '</strong>') %]Click [_1]Cancel[_2] to go back and (un)select other fines.[% END %]
-                    </td>
-                </tr>
-                <tr>
-                    <td><label for="payment-first-name">[% l('First Name') %]</label></td>
+         <table id="billing_info_table">
+          <tbody>
+              <tr>
+                  <td colspan='2' class="cc_header"><strong>[% l('Billing Information') %]</strong></td>
+               </tr>
+               <tr> 
+                <td><label for="payment-first-name">[% l('First Name') %]</label></td>
                     <td><input type="text"  name="billing_first" id="payment-first-name" 
                         value="[% ctx.user.first_given_name | html %]" /></td>
                 </tr>
                     <td><input type="text" name="billing_last" id="payment-last-name" 
                         value="[% ctx.user.family_name | html %]" /></td>
                 </tr>
+
                 <tr>
                     <td><label for="payment-email-addr">[% l('Email Address') %]</label></td>
                     <td>
-                        <input id="payment-email-addr" type="text" disabled="disabled" 
-                            readonly="readonly" value="[% ctx.user.email | html %]" />
+                        
+                        <input id="payment-email-addr" type="text" 
+                             value="[% ctx.user.email | html %]" disabled="disabled" 
+                            readonly="readonly" />   
                         <a title="[% l('Update Email Address') %]"
                             href="[% ctx.opac_root %]/myopac/update_email?return_to_referer=1">[% l("Update") %]</a>
-                    </td>
+                    </td
                 </tr>
                 <tr>
                     <td><label for="payment-billing-address">[% l('Street Address') %]</label></td>
                 </tr>
                 <tr>
                     <td><label for="paymenet-billing-zip">[% l('ZIP or Postal Code') %]</label></td>
-                    <td><input type="text" name="billing_zip" id="paymenet-billing-zip"
-                        value="[% ctx.user.billing_address.post_code | html %]" /></td>
+                    [% USE zip=String(ctx.user.billing_address.post_code) %]
+                    <td><input type="tel" pattern="[0-9]*" maxlength="5" size="5" name="billing_zip" id="paymenet-billing-zip"
+                        value="[% zip.truncate(5)  %]" /></td>
                 </tr>
+               </tbody>
+               </table>
+               
+               <table id="credit_card_info_table">
+               <tbody>
                 <tr>
-                  <td colspan='2'><strong>[% l('Credit Card Information') %]</strong></td>
+                  <td colspan='2' class="cc_header"><strong>[% l('Credit Card Information') %]</strong></td>
                 </tr>
                 <tr>
                     <td><label for="payment-credit-card">[% l('Credit Card #') %]</label></td>
-                    <td><input type="text" maxlength="16" id="payment-credit-card"
+                    
+                     <!-- Make type tel, which prompts for numbers in mobile -->
+                    <td><input type="tel" pattern="[0-9]*" maxlength="16" id="payment-credit-card" required 
                     [% IF ctx.use_stripe %]
                     data-stripe="number"
                     [% ELSE %]
                 <tr>
                     <td><label for="payment-security-code">[% l('Security Code') %]</label></td>
                     <td>
-                        <input type="text" size="4" maxlength="5" id="payment-security-code"
+                         <!-- Make type tel, which prompts for numbers in mobile -->
+                        <input type="tel" pattern="[0-9]*" size="4" maxlength="5" id="payment-security-code"
                         [% IF ctx.use_stripe %]
                         data-stripe="cvc"
                         [% ELSE %]
                 <tr>
                     <td><label for="payment-expire-month">[% l('Expiration Month') %]</label></td>
                     <td>
-                        <select id="payment-expire-month"
+                        <select id="payment-expire-month" required
                         [% IF ctx.use_stripe %]
                         data-stripe="exp_month"
                         [% ELSE %]
                         name="expire_month"
                         [% END %]
                         >
-                            <option value="01">[% l("January") %]</option>
-                            <option value="02">[% l("February") %]</option>
-                            <option value="03">[% l("March") %]</option>
-                            <option value="04">[% l("April") %]</option>
-                            <option value="05">[% l("May") %]</option>
-                            <option value="06">[% l("June") %]</option>
-                            <option value="07">[% l("July") %]</option>
-                            <option value="08">[% l("August") %]</option>
-                            <option value="09">[% l("September") %]</option>
-                            <option value="10">[% l("October") %]</option>
-                            <option value="11">[% l("November") %]</option>
-                            <option value="12">[% l("December") %]</option>
+                            <option value="-1"></option>
+                            <option value="01">[% l("January (1)") %]</option>
+                            <option value="02">[% l("February (2)") %]</option>
+                            <option value="03">[% l("March (3)") %]</option>
+                            <option value="04">[% l("April (4)") %]</option>
+                            <option value="05">[% l("May (5)") %]</option>
+                            <option value="06">[% l("June (6)") %]</option>
+                            <option value="07">[% l("July (7)") %]</option>
+                            <option value="08">[% l("August (8)") %]</option>
+                            <option value="09">[% l("September (9)") %]</option>
+                            <option value="10">[% l("October (10)") %]</option>
+                            <option value="11">[% l("November (11)") %]</option>
+                            <option value="12">[% l("December (12)") %]</option>
                         </select>
                     </td>
                 </tr>
                     </td>
                 </tr>
                 <tr>
-                    <td colspan='2' align="center">
-                        <input type="submit" id="payment_submit" value="[% l('Next') %]" />
-                        <a href="[% mkurl(ctx.opac_root _ '/myopac/main', {}, 1) %]">[% l('Cancel') %]</a>
-                    </td>
+                   <td colspan='2'>
+                       <div id="payment_actions">
+                          [% l('Total amount:') %]
+                           <strong>[% money(ctx.fines.balance_owed) %]</strong><br />
+          
+                         <input type="submit" id="payment_submit" value="[% l('Next') %]" class="opac-button" />
+                         <a href="[% mkurl(ctx.opac_root _ '/myopac/main', {}, 1) %]" class="opac-button">[% l('Cancel') %]</a> 
+                         <br/>
+                         
+                          
+                       </div>
+                   </td>
                 </tr>
-                [% INCLUDE "opac/parts/myopac/main_refund_policy.tt2" %]
-            </tbody>
+                
+          </tbody>
         </table>
+         [% INCLUDE "opac/parts/myopac/main_refund_policy.tt2" %]
+        
     [% END %]
     </form>
 </div>
index ded6021..ea434ec 100644 (file)
             [% money(ctx.user_stats.fines.balance_owed) %]
         </span><br />
         [% IF (ctx.fines.grocery.size OR ctx.fines.circulation.size) AND ctx.get_org_setting(ctx.user.home_ou, 'credit.payments.allow') == 1 %]
-        <form action="[% ctx.opac_root %]/myopac/main_payment_form" method="get"><input
-            type="submit" title="[% l('Pay Charges') %]"
-            value="[% l('Pay Charges') %]" class="pos-rel-top-5 opac-button" /></form>
-        [% END %]
+       <form action="[% ctx.opac_root %]/myopac/main_payment_form" method="get"><input
+            type="submit" title="[% l('Pay All Charges') %]"
+            value="[% l('Pay All Charges') %]" class="pos-rel-top-5 opac-button" /></form>
+        <br />
+          <a href="#selected_fines" class="opac-button">[% l('View Charges') %]</a>
+          <img alt="[% l('Credit Card Logo') %]" src="[% ctx.media_prefix %]/images/credit_card_logo.png" class="cc_logo_img"/>
+         <!--added next two lines to add spacing when not accepting credit card payments -->
+       [% ELSE %]
+          <br />
+       [% END %]
     </div>
     [% END %]
 
diff --git a/Open-ILS/web/images/credit_card_logo.png b/Open-ILS/web/images/credit_card_logo.png
new file mode 100644 (file)
index 0000000..7dc238b
Binary files /dev/null and b/Open-ILS/web/images/credit_card_logo.png differ