Open-ILS/web/opac/skin/kcls/xml/myopac/myopac_summary.xml

   1
   2
   3 <![CDATA[<!-- ****************** myopac_summary.xml ***************************** -->]]>
   4 <div id='myopac_summary_div' xmlns:xi="http://www.w3.org/2001/XInclude" style="padding:0px;">
   5  <div id="acct_sum">
   6   <div style="width:742px;float:left;">
   7         <div class="header_middle">Account Summary</div>
   8   </div>
   9         <div id="myopac_sum_fines">
  10         <div style="position:absolute;"><div style="position:relative;top:-15px;left:-23px;"><img src="<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/acct_sum_fines_tl.png" /></div></div>
  11         <div style="position:absolute;"><div style="position:relative;top:-15px;left:172px;"><img src="<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/acct_sum_fines_tr.png" /></div></div>
  12         <div style="position:absolute;"><div style="position:relative;top:161px;left:-23px;"><img src="<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/acct_sum_fines_bl.png" /></div></div>
  13         <div style="position:absolute;"><div style="position:relative;top:161px;left:172px;"><img src="<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/acct_sum_fines_br.png" /></div></div>
  14           Fines: <span id="myopac_sum_fines_bal">$0.00</span><br />
  15       <!--
  16           <a class="hide_me" href="javascript:;" id="pay_fines_btn1" onclick="showPaymentForm();"><img alt="Pay Fines" onmouseover="this.src='<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn-hover.png';" onmouseout="this.src='<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn.png';" src="<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn.png" style="position:relative;top:5px;" /></a>
  17     -->
  18         </div>
  19
  20   <div style="width:662px;">
  21         <div style="float:left;">
  22           <div style="padding:10px 0px;" id="myopac_sum_name"></div>
  23           <div class="acct_sum_row"><table width="100%" cellspacing="0" cellpadding="0"><tr><td>Items Currently Checked out <span id="myopac_sum_checked" class="view_link">(0)</span></td><td align="right" class="view_link"><a href="javascript:;" onclick="swapTabs($('acct_checked_out'));myOPACChangePage('checked');" rel="myopac_checked_div">View All</a></td></tr></table></div>
  24           <div class="acct_sum_row"><table width="100%" cellspacing="0" cellpadding="0"><tr><td>Items Currently on Hold <span id="myopac_sum_holds" class="view_link">(0)</span></td><td align="right" class="view_link"><a href="javascript:;" onclick="swapTabs($('acct_holds'));myOPACChangePage('holds');" rel="myopac_holds_div">View All</a></td></tr></table></div>
  25           <div class="acct_sum_row"><table width="100%" cellspacing="0" cellpadding="0"><tr><td>Items ready for pickup <span id="myopac_sum_pickup" class="view_link">(0)</span></td><td align="right" class="view_link"><a href="javascript:;" onclick="swapTabs($('acct_holds'));myOPACChangePage('holds');" rel="myopac_holds_div">View All</a></td></tr></table></div>
  26           <div class="acct_sum_row" id="myopac_sum_fines_slim"><table width="100%" cellspacing="0" cellpadding="0"><tr><td>Fees &amp; Fines</td><td align="right" class="view_link"><a class="hide_me" id="show_fines_link" href="javascript:;" onclick="showFinesDiv(this);">Show Overdue Materials</a></td></tr></table></div>
  27         </div>
  28   </div>
  29  <div style="clear:both;"></div>
  30  <div id='myopac_fines_div' xmlns:xi="http://www.w3.org/2001/XInclude" >
  31
  32         <table width='100%' class='data_grid data_grid_center hide_me'>
  33                 <thead class='color_3'>
  34                         <tr><td colspan='3' style='padding: 6px'><b>&myopac.fines.title;</b></td></tr>
  35                         <tr>
  36                                 <td width='33%'>&myopac.fines.owed;</td>
  37                                 <td width='33%'>&myopac.fines.paid;</td>
  38                                 <td width='33%'>&myopac.fines.balance;</td>
  39                         </tr>
  40                 </thead>
  41
  42                 <tbody id='myopac_fines_summary_tbody'>
  43                         <tr id='myopac_fines_summary_loading'><td>&myopac.fines.status;</td></tr>
  44                         <tr id='myopac_fines_summary_row' class='hide_me'>
  45                                 <td id='myopac_fines_summary_total' >&common.currency;</td>
  46                                 <td id='myopac_fines_summary_paid' >&common.currency;</td>
  47                                 <td id='myopac_fines_summary_balance' style='color:red;font-weight: bold;'>&common.currency;</td>
  48                         </tr>
  49                 </tbody>
  50         </table>
  51
  52     <!-- tab-like options for selection Fines or Payments view -->
  53     <div id='fines_payments_wrapper' style='padding-left: 5px; padding-right: 5px;'>
  54         <div id='acct_fines_tabs'>
  55             <a id='acct_fines_tab' href='javascript:;' onclick='showFinesTab();'></a>
  56             <a id='acct_payments_tab' href='javascript:;' onclick='myopacDrawPayments();'></a>
  57         </div>
  58     </div>
  59
  60     <!-- Payments History -->
  61     <style>#myopac_payments_table th { text-align: left; }</style>
  62     <div id='myopac_payments_div' class='hide_me'>
  63         <div><b>Payments</b></div>
  64                 <table width='100%' class='data_grid' id='myopac_payments_table'>
  65             <thead><tr>
  66                 <th>Payment Date</th>
  67                 <th>Payment For</th>
  68                 <th>Amount</th>
  69                 <th>Receipt</th>
  70             </tr></thead>
  71             <tbody id='myopac_payments_tbody'>
  72                 <tr id='myopac_payments_tmpl'>
  73                     <td name='date'/>
  74                     <td name='for'/> <!-- title links? -->
  75                     <td name='amount'>$</td>
  76                     <td>
  77                         <a href='javascript:;' name='print_recpt'>Print</a> / <a href='javascript:;' name='email_recpt'>Email</a>
  78                     </td>
  79                 </tr>
  80             </tbody>
  81         </table>
  82     </div>
  83     <!-- /Payments History -->
  84
  85         <!--
  86         <div id='accrue_explanation' class='hide_me'>
  87                 <span>Transactions whose balances are marked with a</span>
  88                 <span style='color:red; font-weight: bold'>*</span>
  89                 <span>will continue to accrue fines until the checked out item is returned.</span>
  90         </div>
  91         -->
  92
  93         <!-- Table for circulation transactions only -->
  94         <div id='myopac_circ_trans_div' class='hide_me'>
  95                 <br/><hr/><br/>
  96         <style>#myopac_circ_trans_table th { text-align: left; }</style>
  97                 <table width='100%' class='data_grid' id='myopac_circ_trans_table'>
  98                         <thead>
  99                 <!-- <tr><td colspan='10' style='padding: 6px'><b>Fines</b></td></tr> -->
 100                                 <tr>
 101                                         <th>&common.title;</th>
 102                                         <th>&common.author;</th>
 103                                         <th>&myopac.fines.checkout;</th>
 104                                         <th>&myopac.fines.due;</th>
 105                                         <th>&myopac.fines.returned;</th>
 106                                         <th>&myopac.fines.balance;</th>
 107                                         <th align="center" nowrap="nowrap" style="white-space:nowrap;" class='hide_me'> <!-- XXX: hide_me -->
 108                         <div style='text-align:center'>Pay Fines<br/><input id="pay_fines_box1" type="checkbox"
 109                             onclick="checkAll($('myopac_circ_trans_tbody'), this, 'selector');" class="" title="Click to (un)select all fines" />
 110                         </div>
 111                     </th>
 112                                 </tr>
 113                         </thead>
 114                         <tbody id='myopac_circ_trans_tbody'>
 115                                 <tr id='myopac_circ_trans_row'>
 116                                         <td><a class='classic_link' name='myopac_circ_trans_title'> </a></td>
 117                                         <td name='myopac_circ_trans_author'> </td>
 118                                         <td name='myopac_circ_trans_start'> </td>
 119                                         <td name='myopac_circ_trans_due'> </td>
 120                                         <td name='myopac_circ_trans_finished'><span style='color:red;'>&myopac.fines.accruing;</span></td>
 121                                         <td><span style='color: red; font-weight: bold;' name='myopac_circ_trans_balance'>&common.currency;</span></td>
 122
 123                     <!-- XXX: hide_me -->
 124                                         <td class='hide_me' align="center"><input type="checkbox" class="" name="selector" title="pay this fine" /></td>
 125                                 </tr>
 126                         </tbody>
 127                 </table>
 128         </div>
 129
 130         <!-- Table for all non-circulation transactions -->
 131         <div id='myopac_trans_div' class='hide_me'>
 132                 <br/><hr style="border-bottom:none;*height:0px;" color="#dcdbdb" /><br/>
 133         <style>#myopac_trans_table th { text-align: left; }</style>
 134                 <table width='100%' class='data_grid' id='myopac_trans_table'>
 135                         <thead>
 136                                 <tr><td colspan='8' style='padding: 6px'><b>&myopac.fines.other;</b></td></tr>
 137                                 <tr>
 138                                         <th width='16%'>Date Applied</th>
 139                                         <th width='16%'>&myopac.fines.time.paid;</th>
 140                                         <th width='16%'>&myopac.fines.owed.initial;</th>
 141                                         <th width='16%'>&myopac.fines.paid.amount;</th>
 142                                         <th width='16%'>&myopac.fines.balance;</th>
 143                                         <th width='16%'>&myopac.fines.type;</th>
 144
 145                     <!-- XXX: hide_me -->
 146                                         <th width='4%' align="center" nowrap="nowrap" style="white-space:nowrap;" class='hide_me'>
 147                         <div style='text-align:center'>Pay Fines<br/>
 148                             <input id="pay_fines_box2" class="" type="checkbox" onclick="checkAll($('myopac_trans_tbody'), this, 'selector');" title="Click to (un)select all fines" />
 149                         </div>
 150                     </th>
 151                                 </tr>
 152                         </thead>
 153
 154                         <tbody id='myopac_trans_tbody'>
 155                                 <tr id='myopac_trans_row'>
 156                                         <td name='myopac_trans_start'> </td>
 157                                         <td name='myopac_trans_last_payment'> </td>
 158                                         <td name='myopac_trans_init_amount'>&common.currency;</td>
 159                                         <td name='myopac_trans_total_paid'>&common.currency;</td>
 160                                         <td style='color:red; font-weight: bold;'>
 161                                                 <span name='myopac_trans_balance_recur' class='hide_me'> * </span>
 162                                                 <span name='myopac_trans_balance'>&common.currency;</span>
 163                                         </td>
 164                                         <td name='myopac_trans_bill_type'> </td>
 165
 166                     <!-- XXX: hide_me -->
 167                                         <td align="center" class='hide_me'><input type="checkbox" name='selector' title='pay this fine' /></td>
 168                                 </tr>
 169                         </tbody>
 170                 </table>
 171         </div>
 172     <!--
 173         <a id='pay-fines-image' href="javascript:;" onclick="showPaymentForm();"><img alt="Pay Fines" onmouseover="this.src='<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn-hover.png';" src="<!--#echo var="OILS_SKIN_BASE"-->/kcls/graphics/pay-fines-btn.png" style="position:relative;top:5px;" /></a>
 174     -->
 175
 176         <br/>
 177 </div>
 178 </div>
 179
 180 <!--
 181 <div id='receipt-print-frame-wrapper' class='hide_me'>
 182 -->
 183 <div dojoType='dijit.Dialog' jsId='receiptPrintDialog'>
 184     <div>
 185         <button id='receipt-view-print-button'>Print</button>
 186         <button id='receipt-view-print-cancel'>Cancel</button>
 187     </div>
 188     <iframe name='receipt-frame' style='border:1px solid #888; overflow:auto; width:500px; height:500px;'></iframe>
 189 </div>
 190
 191 <div id='pay_fines_confirm' class='hide_me' style='font-size: 120%; width:100%; text-align: center; padding-top: 20px;'>
 192     Amount to pay: $<strong id='pay_fines_confirm_amount'/>.  Are you sure?<br/><br/>
 193     <button jsId='payConfirmSubmit' dojoType='dijit.form.Button'>Submit Payment</button>
 194     <button jsId='payConfirmCancel' dojoType='dijit.form.Button'>Cancel</button>
 195 </div>
 196 <div id="pay_fines_now" class="hide_me">
 197 <div id='cc-payment-error-message' style='font-weight: bold; color: red; padding: 10px; border: 1px solid #888' class='hide_me'/>
 198 <table id='oils-selfck-cc-payment-table'>
 199     <tbody>
 200                 <tr>
 201                         <td colspan="2"><div style="width:324px;"><strong>KCLS only accepts Visa or MasterCard<br/><br/></strong></div></td>
 202                         <td><div style="width:324px;"></div></td>
 203                 </tr>
 204                 <tr>
 205                   <td colspan='2'><strong>Billing Information</strong></td>
 206                   <td rowspan='13' valign='top'>
 207                     Selected fines you are paying for:
 208                         <table cellpadding="0" cellspacing="5" border="0">
 209                         <thead><tr><td><strong>Name</strong></td><td><strong>Amount</strong></td></tr></thead>
 210                         <tbody id="selectedFines"></tbody></table><br />
 211                         <div id='oils-selfck-cc-payment-summary'>
 212                 Total amount to pay: <strong>$<span></span></strong>
 213                         </div><br />
 214                         Click <strong>Cancel</strong> to go back and (un)select other fines.
 215                   </td>
 216                 </tr>
 217         <tr>
 218             <td>First Name</td>
 219             <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckCCFName' required='true'/></td>
 220         </tr>
 221         <tr>
 222             <td>Last Name</td>
 223             <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckCCLName' required='true'/></td>
 224         </tr>
 225         <tr>
 226             <td>Email Address</td>
 227             <td>
 228                 <span id='myopac-cc-email'/>
 229                 <span style='margin-left:5px;'>
 230                     <a href='javascript:' onclick='myopacReturnToPayment=true;myOPACChangePage("prefs");'>Update</a>
 231                 </span>
 232             </td>
 233         </tr>
 234         <tr>
 235             <td>Street Address</td>
 236             <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckCCStreet' required='true'/></td>
 237         </tr>
 238         <tr>
 239             <td>City</td>
 240             <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckCCCity' required='true'/></td>
 241         </tr>
 242         <tr>
 243             <td>State or Province</td>
 244             <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckCCState' required='true'/></td>
 245         </tr>
 246         <tr>
 247             <td>ZIP or Postal Code</td>
 248             <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckCCZip' required='true'/></td>
 249         </tr>
 250                 <tr>
 251                   <td colspan='2'><strong>Credit Card Information</strong></td>
 252                 </tr>
 253         <!-- Technically not needed since card type is derived from the CC number
 254         <tr>
 255             <td>Type of Card</td>
 256             <td>
 257                 <select dojoType='dijit.form.FilteringSelect' jsId='oilsSelfckCCType' required='true'>
 258                     <option value='VISA'>VISA</option>
 259                     <option value='MasterCard'>MasterCard</option>
 260                     <option value='American Express'>American Express</option>
 261                 </select>
 262             </td>
 263         </tr>
 264         -->
 265         <tr>
 266             <td>Credit Card #</td>
 267             <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckCCNumber' required='true'/></td>
 268         </tr>
 269         <tr>
 270             <td><div style="position:absolute;"><div style="position:relative;left:80px;"><a href="javascript:;" onclick="alert('Also known as a CVV2 code, it is the 3-digit number on the back of the card next to your signature.\nKCLS only accpets VISA and MasterCard.');"><img src="/opac/skin/kcls/graphics/question-mark.png" /></a></div></div> Security Code</td>
 271             <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckCCCVV' required='true'/></td>
 272         </tr>
 273         <tr>
 274             <td>Exipration Month</td>
 275             <td>
 276                 <select dojoType='dijit.form.FilteringSelect' jsId='oilsSelfckCCMonth' required='true'>
 277                     <option value='01' selected='selected'>January</option>
 278                     <option value='02'>February</option>
 279                     <option value='03'>March</option>
 280                     <option value='04'>April</option>
 281                     <option value='05'>May</option>
 282                     <option value='06'>June</option>
 283                     <option value='07'>July</option>
 284                     <option value='08'>August</option>
 285                     <option value='09'>September</option>
 286                     <option value='10'>October</option>
 287                     <option value='11'>November</option>
 288                     <option value='12'>December</option>
 289                 </select>
 290             </td>
 291         </tr>
 292         <tr>
 293             <td>Expiration Year</td>
 294             <td>
 295                           <select dojoType='dijit.form.FilteringSelect' jsId='oilsSelfckCCYear' required='true'>
 296                                 <option value='2011'>2011</option>
 297                                 <option value='2012'>2012</option>
 298                                 <option value='2013'>2013</option>
 299                                 <option value='2014'>2014</option>
 300                                 <option value='2015'>2015</option>
 301                                 <option value='2016'>2016</option>
 302                                 <option value='2017'>2017</option>
 303                                 <option value='2018'>2018</option>
 304                                 <option value='2019'>2019</option>
 305                           </select>
 306                           <!-- <input dojoType='dijit.form.NumberSpinner' constraints='{pattern:"0000", places:0, maxlength:4}' jsId='oilsSelfckCCYear' required='true'/> -->
 307                         </td>
 308         </tr>
 309         <tr class="hide_me">
 310             <td>Edit Billing Address</td>
 311             <td><input dojoType='dijit.form.CheckBox' jsId='oilsSelfckEditDetails'/></td>
 312         </tr>
 313         <tr>
 314             <td colspan='2' align="center">
 315                 <button dojoType='dijit.form.Button' jsId='oilsSelfckCCSubmit'>Submit Payment</button>
 316                                 <button dojoType='dijit.form.Button' onclick="location.href = location.href; /*hideMe($('pay_fines_now'));unHideMe($('acct_sum'));*/">Cancel</button>
 317             </td>
 318         </tr>
 319                 <tr>
 320                   <td colspan="3"><br />
 321                         <strong style="color:red;font-size:16px;">Important! You must have a printed receipt to be eligible for a refund on lost items (regulations allow for no exceptions).</strong><br /><br />
 322                     <strong>To ensure your necessary receipt information is not lost, enter your email address above and a receipt will be emailed to you. Otherwise, make certain you have a printed receipt in hand before closing the payment receipt screen.</strong><br />Refunds are not available for parts and pieces, overdue fines, or items that do not display a specific title in My Account. For a full list of refundable and non-refundable items, visit <a href="http://www.kcls.org/usingthelibrary/borrowing/refundable.cfm">http://www.kcls.org/usingthelibrary/borrowing/refundable.cfm</a><br /><br />This site uses VeriSign SSL encryption to ensure your privacy.
 323                   </td>
 324                 </tr>
 325     </tbody>
 326 </table>
 327 </div>
 328 </div>
 329
 330 <!--#include virtual="myopac_fines.xml"-->
 331 <![CDATA[<!-- ****************** end: myopac_summary.xml ***************************** -->]]>
 332