Bug 11622 [QA Followup] - Show amount to be paid near make payment button
[koha.git] / koha-tmpl / opac-tmpl / bootstrap / en / modules / opac-account.tt
1 [% USE Koha %]
2 [% USE KohaDates %]
3 [% SET ENABLE_OPAC_PAYMENTS = Koha.Preference('EnablePayPalOpacPayments') %]
4
5 [% INCLUDE 'doc-head-open.inc' %]
6 <title>[% IF ( LibraryNameTitle ) %][% LibraryNameTitle %][% ELSE %]Koha online[% END %] catalog &rsaquo; Your fines and charges</title>
7 [% INCLUDE 'doc-head-close.inc' %]
8 [% BLOCK cssinclude %][% END %]
9 </head>
10 <body id="opac-account" class="scrollto">
11 [% INCLUDE 'bodytag.inc' bodyid='opac-account' bodyclass='scrollto' %]
12 [% INCLUDE 'masthead.inc' %]
13
14 <div class="main">
15     <ul class="breadcrumb">
16         <li><a href="/cgi-bin/koha/opac-main.pl">Home</a> <span class="divider">&rsaquo;</span></li>
17         <li>[% IF BORROWER_INFO %]<a href="/cgi-bin/koha/opac-user.pl">[% BORROWER_INFO.firstname %] [% BORROWER_INFO.surname %]</a>[% END %] <span class="divider">&rsaquo;</span></li>
18         <li><a href="#">Your fines and charges</a></li>
19     </ul>
20
21     <div class="container-fluid">
22         <div class="row-fluid">
23             <div class="span2">
24                 <div id="navigation">
25                     [% INCLUDE 'navigation.inc' IsPatronPage=1 %]
26                 </div>
27             </div>
28             <div class="span10">
29                 <div id="useraccount" class="maincontent">
30
31                     [% IF message %]
32                         <div class="alert alert-info">
33                             [% IF message == 'valid_payment' %]
34                                 <p>Your payment of $[% message_value %] has been processed sucessfully!</p>
35                             [% ELSIF message == 'duplicate_payment' %]
36                                 <p>A payment with the transaction id <i>[% message_value %]</i> has already been posted to an account.</p>
37                                 <p>Please contact a librarian for details.</p>
38                             [% ELSIF message == 'invalid_payment' %]
39                                 <p>The transaction id <i>[% message_value %]</i> for this payment is invalid.</p>
40                                 <p>Please contact a librarian for details.</p>
41                             [% END %]
42                         </div>
43                     [% END %]
44
45                     <h3>Fines and charges</h3>
46
47                     [% IF ( ACCOUNT_LINES ) %]
48                         <form method="post" action="opac-account-pay.pl" class="form-horizontal">
49                         <table class="table table-bordered table-striped">
50                             <thead>
51                                 <tr>
52                                     [% IF ENABLE_OPAC_PAYMENTS %]<th>&nbsp;</th>[% END %]
53                                     <th>Date</th>
54                                     <th>Description</th>
55                                     <th>Fine amount</th>
56                                     <th>Amount outstanding</th>
57                                 </tr>
58                             </thead>
59
60                             <tfoot>
61                             <tr>
62                                 [%- IF ENABLE_OPAC_PAYMENTS -%]
63                                     [%- SET COLSPAN = 4 -%]
64                                 [%- ELSE -%]
65                                     [%- SET COLSPAN = 3 -%]
66                                 [%- END -%]
67                                 <th class="sum" colspan="[% COLSPAN %]">Total due</th>
68                                 <td class="sum">[% total %]</td>
69                             </tr>
70                             </tfoot>
71
72                             <tbody>
73                                 [% FOREACH ACCOUNT_LINE IN ACCOUNT_LINES %]
74                                     [% IF ( ACCOUNT_LINE.odd ) %]<tr class="highlight">[% ELSE %]<tr>[% END %]
75                                         [% IF ENABLE_OPAC_PAYMENTS %]
76                                             <td>
77                                                 [% IF ACCOUNT_LINE.amountoutstanding > 0 %]
78                                                     <input name="accountline" type="checkbox" class="checkbox-pay" id="checkbox-pay-[% ACCOUNT_LINE.accountlines_id %]" value="[% ACCOUNT_LINE.accountlines_id %]">
79                                                     <input type="hidden" id="amount-[% ACCOUNT_LINE.accountlines_id %]" value="[% ACCOUNT_LINE.amountoutstanding %]" />
80                                                 [% END %]
81                                             </td>
82                                         [% END %]
83                                         <td>[% ACCOUNT_LINE.date | $KohaDates %]</td>
84                                         <td>
85                                             [% SWITCH ACCOUNT_LINE.accounttype %]
86                                             [% CASE 'Pay' %]Payment, thanks
87                                             [% CASE 'Pay00' %]Payment, thanks (cash via SIP2)
88                                             [% CASE 'Pay01' %]Payment, thanks (VISA via SIP2)
89                                             [% CASE 'Pay02' %]Payment, thanks (credit card via SIP2)
90                                             [% CASE 'N' %]New card
91                                             [% CASE 'F' %]Fine
92                                             [% CASE 'A' %]Account management fee
93                                             [% CASE 'M' %]Sundry
94                                             [% CASE 'L' %]Lost item
95                                             [% CASE 'W' %]Writeoff
96                                             [% CASE 'FU' %]Accruing fine
97                                             [% CASE 'Rent' %]Rental fee
98                                             [% CASE 'FOR' %]Forgiven
99                                             [% CASE 'LR' %]Lost item fee refund
100                                             [% CASE 'PAY' %]Payment
101                                             [% CASE 'WO' %]Writeoff
102                                             [% CASE 'C' %]Credit
103                                             [% CASE 'CR' %]Credit
104                                             [% CASE %][% ACCOUNT_LINE.accounttype %]
105                                           [%- END -%]
106                                           [%- IF ACCOUNT_LINE.description %], [% ACCOUNT_LINE.description %][% END %]
107                                           [% IF ACCOUNT_LINE.title %]([% ACCOUNT_LINE.title %])[% END %]
108                                         </td>
109                                         [% IF ( ACCOUNT_LINE.amountcredit ) %]<td class="credit">[% ELSE %]<td class="debit">[% END %][% ACCOUNT_LINE.amount %]</td>
110                                         [% IF ( ACCOUNT_LINE.amountoutstandingcredit ) %]<td class="credit">[% ELSE %]<td class="debit">[% END %][% ACCOUNT_LINE.amountoutstanding %]</td>
111                                     </tr>
112                                 [% END %]
113                             </tbody>
114
115                         </table>
116
117                             [% IF ENABLE_OPAC_PAYMENTS %]
118                                 <fieldset>
119                                     <legend>Pay selected fines and charges</legend>
120                                         <span class="help-block"><h3>Payment method</h3></span>
121                                         <div class="control-group">
122                                             <label class="radio">
123                                                 <input type="radio" name="payment_method" id="payment_method-paypal" value="paypal" checked="checked">
124                                                 <!-- PayPal Logo --><a href="https://www.paypal.com/webapps/mpp/paypal-popup" title="How PayPal Works" onclick="javascript:window.open('https://www.paypal.com/webapps/mpp/paypal-popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;"><img src="https://www.paypalobjects.com/webstatic/mktg/logo/AM_SbyPP_mc_vs_dc_ae.jpg" border="0" alt="PayPal Acceptance Mark"></a><!-- PayPal Logo -->
125                                             </label>
126                                         </div>
127                                         <!-- look to the future
128                                         <div class="control-group">
129                                             <label class="radio">
130                                                 <input type="radio" name="payment_method" id="payment_method-paypal" value="paypal" checked="checked">
131                                                 PayPal
132                                             </label>
133                                         </div>
134                                         -->
135
136                                         <div class="control-group">
137                                             <input type="hidden" id="payment-amount" name="payment_amount" value="0" />
138                                             <button id="submit-pay" type="submit" class="btn" disabled="disabled">Make payment</button>
139                                             <span id="amount-to-pay-label">
140                                                 Amount to pay: <span id="amount-to-pay">0.00</span>
141                                             </span>
142                                         </div>
143                                 </fieldset>
144                             [% END %]
145                         </form>
146                     [% ELSE %]
147                         <h4>You have no fines or charges</h4>
148                     [% END %]
149                 </div> <!-- / #useraccount -->
150             </div> <!-- / .span10 -->
151         </div> <!-- / .row-fluid -->
152     </div> <!-- / .container-fluid -->
153 </div> <!-- / .main -->
154
155 [% INCLUDE 'opac-bottom.inc' %]
156 [% BLOCK jsinclude %]
157 <script type="text/javascript">
158 $( document ).ready(function() {
159     $("#amount-to-pay-label").hide();
160
161     $(".checkbox-pay").change( function() {
162         // Disable the pay button if no fees are selected
163         $("#submit-pay").prop("disabled", ! $(".checkbox-pay:checked").length );
164
165         // Calculate the total amount to be paid based on selected fees
166         var total = 0;
167         $(".checkbox-pay").each( function() {
168             if ( $(this).is(":checked") ) {
169                 var id = this.id.split("checkbox-pay-")[1];
170                 total += parseFloat( $("#amount-" + id).val() );
171             }
172         });
173
174         if ( total ) {
175             $("#amount-to-pay").html( total.toFixed(2) );
176             $("#amount-to-pay-label").show();
177         } else {
178             $("#amount-to-pay-label").hide();
179         }
180     });
181 });
182 </script>
183 [% END %]