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