Open-ILS/web/templates/default/kcls-wire/myopac/main.tt2

   1 [%  WRAPPER "default/kcls-wire/parts/base.tt2" +
   2         "default/kcls-wire/parts/myopac/base.tt2";
   3     myopac_page = "main"  %]
   4 <div id='myopac_summary_div' 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;">
  11                 <div style="position:relative;top:-15px;left:-23px;">
  12                     <img src="/opac/skin/kcls/graphics/acct_sum_fines_tl.png" />
  13                 </div>
  14             </div>
  15             <div style="position:absolute;">
  16                 <div style="position:relative;top:-15px;left:172px;">
  17                     <img src="/opac/skin/kcls/graphics/acct_sum_fines_tr.png" />
  18                 </div>
  19             </div>
  20             <div style="position:absolute;">
  21                 <div style="position:relative;top:161px;left:-23px;">
  22                     <img src="/opac/skin/kcls/graphics/acct_sum_fines_bl.png" />
  23                 </div>
  24             </div>
  25             <div style="position:absolute;">
  26                 <div style="position:relative;top:161px;left:172px;">
  27                     <img src="/opac/skin/kcls/graphics/acct_sum_fines_br.png" />
  28                 </div>
  29             </div>
  30             Fines: <span id="myopac_sum_fines_bal">$0.00</span><br />
  31             <a class="hide_me" href="javascript:;" id="pay_fines_btn1"
  32                 onclick="showPaymentForm();"><img alt="Pay Fines"
  33                 onmouseover="this.src='/opac/skin/kcls/graphics/pay-fines-btn-hover.png';"
  34                 onmouseout="this.src='/opac/skin/kcls/graphics/pay-fines-btn.png';"
  35                 src="/opac/skin/kcls/graphics/pay-fines-btn.png"
  36                 style="position:relative;top:5px;" /></a>
  37         </div>
  38         <div style="width:662px;">
  39             <div style="float:left;">
  40                 <div style="padding:10px 0px;" id="myopac_sum_name"></div>
  41                 <div class="acct_sum_row">
  42                     <table width="100%" cellspacing="0" cellpadding="0">
  43                         <tr>
  44                             <td>
  45                                 Items Currently Checked out
  46                                 <span id="myopac_sum_checked" class="view_link">
  47                                     (0)
  48                                 </span>
  49                             </td>
  50                             <td align="right" class="view_link">
  51                                 <a href="circs">View All</a>
  52                             </td>
  53                         </tr>
  54                     </table>
  55                 </div>
  56                 <div class="acct_sum_row">
  57                     <table width="100%" cellspacing="0" cellpadding="0">
  58                         <tr>
  59                             <td>
  60                                 Items Currently on Hold
  61                                 <span id="myopac_sum_holds" class="view_link">
  62                                     (0)
  63                                 </span>
  64                             </td>
  65                             <td align="right" class="view_link">
  66                                 <a href="holds">View All</a>
  67                             </td>
  68                         </tr>
  69                     </table>
  70                 </div>
  71                 <div class="acct_sum_row">
  72                     <table width="100%" cellspacing="0" cellpadding="0">
  73                         <tr>
  74                             <td>
  75                                 Items ready for pickup
  76                                 <span id="myopac_sum_pickup" class="view_link">
  77                                     (0)
  78                                 </span>
  79                             </td>
  80                             <td align="right" class="view_link">
  81                                 <a href="javascript:alert('XXX TODO');">View All</a>
  82                             </td>
  83                         </tr>
  84                     </table>
  85                 </div>
  86                 <div class="acct_sum_row" id="myopac_sum_fines_slim">
  87                     <table width="100%" cellspacing="0" cellpadding="0">
  88                         <tr>
  89                             <td>Fees &amp; Fines</td>
  90                             <td align="right" class="view_link">
  91                                 <a class="hide_me"
  92                                     id="show_fines_link"
  93                                     href="javascript:;"
  94                                     onclick="showFinesDiv(this);">Show Overdue Materials</a>
  95                             </td>
  96                         </tr>
  97                     </table>
  98                 </div>
  99             </div>
 100         </div>
 101         <div style="clear:both;"></div>
 102         <div id='myopac_fines_div'>
 103             <table width='100%' class='data_grid data_grid_center'>
 104                 <thead class='color_3'>
 105                     <tr>
 106                         <td colspan='3' style='padding: 6px'>
 107                             <b>&myopac.fines.title;</b>
 108                         </td>
 109                     </tr>
 110                     <tr>
 111                         <td width='33%'>&myopac.fines.owed;</td>
 112                         <td width='33%'>&myopac.fines.paid;</td>
 113                         <td width='33%'>&myopac.fines.balance;</td>
 114                     </tr>
 115                 </thead>
 116                 <tbody id='myopac_fines_summary_tbody'>
 117                     <tr id='myopac_fines_summary_loading'>
 118                         <td>&myopac.fines.status;</td>
 119                     </tr>
 120                     <tr id='myopac_fines_summary_row' class='hide_me'>
 121                         <td id='myopac_fines_summary_total' >&common.currency;</td>
 122                         <td id='myopac_fines_summary_paid' >&common.currency;</td>
 123                         <td id='myopac_fines_summary_balance' style='color:red;font-weight: bold;'>&common.currency;</td>
 124                     </tr>
 125                 </tbody>
 126             </table>
 127         <!--
 128         <div id='accrue_explanation' class='hide_me'>
 129             <span>Transactions whose balances are marked with a</span>
 130             <span style='color:red; font-weight: bold'>*</span>
 131             <span>will continue to accrue fines until the checked out item is returned.</span>
 132         </div>
 133         -->
 134         <!-- Table for circulation transactions only -->
 135             <div id='myopac_circ_trans_div' class='hide_me'>
 136                 <br/><hr/><br/>
 137                 <table width='100%' class='data_grid data_grid_center'
 138                     id='myopac_circ_trans_table'>
 139                     <thead>
 140                     <!--<tr><td colspan='10' style='padding: 6px'><b>&myopac.fines.overdue;</b></td></tr>-->
 141                         <tr>
 142                             <td colspan='10' style='padding: 6px'>
 143                                 <b>Fines</b>
 144                             </td>
 145                         </tr>
 146                         <tr>
 147                             <td>&common.title;</td>
 148                             <td>&common.author;</td>
 149                             <td>&myopac.fines.checkout;</td>
 150                             <td>&myopac.fines.due;</td>
 151                             <td>&myopac.fines.returned;</td>
 152                             <td>&myopac.fines.balance;</td>
 153                             <td align="center" nowrap="nowrap"
 154                                 style="white-space:nowrap;">
 155                                 <label for="pay_fines_box1">Pay Fines</label>
 156                                 <br />
 157                                 <input id="pay_fines_box1" checked="checked"
 158                                     type="checkbox"
 159                                     onclick="checkAll($('myopac_circ_trans_tbody'), this, 'selector');"
 160                                     title="Click to (un)select all fines" />
 161                             </td>
 162                         </tr>
 163                     </thead>
 164                     <tbody id='myopac_circ_trans_tbody'>
 165                         <tr id='myopac_circ_trans_row'>
 166                             <td>
 167                                 <a class='classic_link' name='myopac_circ_trans_title'> </a>
 168                             </td>
 169                             <td name='myopac_circ_trans_author'> </td>
 170                             <td name='myopac_circ_trans_start'> </td>
 171                             <td name='myopac_circ_trans_due'> </td>
 172                             <td name='myopac_circ_trans_finished'>
 173                                 <span style='color:red;'>&myopac.fines.accruing;</span>
 174                             </td>
 175                             <td>
 176                                 <span style='color: red; font-weight: bold;'
 177                                     name='myopac_circ_trans_balance'>&common.currency;</span>
 178                             </td>
 179                             <td align="center">
 180                                 <input type="checkbox" checked="checked"
 181                                     name="selector" title="pay this fine" />
 182                             </td>
 183                         </tr>
 184                     </tbody>
 185                 </table>
 186             </div>
 187
 188             <!-- Table for all non-circulation transactions -->
 189             <div id='myopac_trans_div' class='hide_me'>
 190                 <br/>
 191                 <hr style="border-bottom:none;*height:0px;" color="#dcdbdb" />
 192                 <br/>
 193                 <table width='100%' class='data_grid data_grid_center'
 194                     id='myopac_trans_table'>
 195                     <thead>
 196                         <tr>
 197                             <td colspan='8' style='padding: 6px'>
 198                                 <b>&myopac.fines.other;</b>
 199                             </td>
 200                         </tr>
 201                         <tr>
 202                             <td width='16%'>&myopac.fines.time.start;</td>
 203                             <td width='16%'>&myopac.fines.time.paid;</td>
 204                             <td width='16%'>&myopac.fines.owed.initial;</td>
 205                             <td width='16%'>&myopac.fines.paid.amount;</td>
 206                             <td width='16%'>&myopac.fines.balance;</td>
 207                             <td width='16%'>&myopac.fines.type;</td>
 208                             <td width='4%' align="center" nowrap="nowrap"
 209                                 style="white-space:nowrap;">
 210                                 <label for="pay_fines_box2">Pay Fines</label>
 211                                 <br />
 212                                 <input id="pay_fines_box2" checked="checked"
 213                                     type="checkbox"
 214                                     onclick="checkAll($('myopac_trans_tbody'), this, 'selector');"
 215                                     title="Click to (un)select all fines" />
 216                             </td>
 217                         </tr>
 218                     </thead>
 219                     <tbody id='myopac_trans_tbody'>
 220                         <tr id='myopac_trans_row'>
 221                             <td name='myopac_trans_start'> </td>
 222                             <td name='myopac_trans_last_payment'> </td>
 223                             <td name='myopac_trans_init_amount'>
 224                                 &common.currency;
 225                             </td>
 226                             <td name='myopac_trans_total_paid'>
 227                                 &common.currency;
 228                             </td>
 229                             <td style='color:red; font-weight: bold;'>
 230                                 <span name='myopac_trans_balance_recur'
 231                                     class='hide_me'> * </span>
 232                                 <span name='myopac_trans_balance'>
 233                                     &common.currency;
 234                                 </span>
 235                             </td>
 236                             <td name='myopac_trans_bill_type'></td>
 237                             <td align="center">
 238                                 <input type="checkbox" name='selector'
 239                                     title='pay this fine' checked="checked" />
 240                             </td>
 241                         </tr>
 242                     </tbody>
 243                 </table>
 244             </div>
 245             <a href="javascript:;"
 246                 onclick="showPaymentForm();"><img alt="Pay Fines"
 247                 onmouseover="this.src='/opac/skin/kcls/graphics/pay-fines-btn-hover.png';"
 248                 src="/opac/skin/kcls/graphics/pay-fines-btn.png"
 249                 style="position:relative;top:5px;" /></a>
 250             <br/>
 251         </div>
 252     </div>
 253     <div id="pay_fines_now" class="hide_me">
 254         <table id='oils-selfck-cc-payment-table'>
 255             <tbody>
 256                 <tr>
 257                     <td><div style="width:129px;"></div></td>
 258                     <td><div style="width:195px;"></div></td>
 259                     <td><div style="width:324px;"></div></td>
 260                 </tr>
 261                 <tr>
 262                     <td colspan='2'><strong>Billing Information</strong></td>
 263                     <td rowspan='13' valign='top'>
 264                         Selected fines you are paying for:
 265                         <table cellpadding="0" cellspacing="5" border="0">
 266                             <thead>
 267                                 <tr>
 268                                     <td>
 269                                         <strong>Name</strong>
 270                                     </td>
 271                                     <td>
 272                                         <strong>Amount</strong>
 273                                     </td>
 274                                 </tr>
 275                             </thead>
 276                             <tbody id="selectedFines">
 277                             </tbody>
 278                         </table>
 279                         <br />
 280                         <div id='oils-selfck-cc-payment-summary'>
 281                             Total amount to pay:
 282                             <strong>$<span></span></strong>
 283                         </div>
 284                         <br />
 285                         Click <strong>Cancel</strong> to go back and (un)select
 286                         other fines.
 287                     </td>
 288                 </tr>
 289                 <tr>
 290                     <td>First Name</td>
 291                     <td><input jsId='oilsSelfckCCFName' /></td>
 292                 </tr>
 293                 <tr>
 294                     <td>Last Name</td>
 295                     <td><input jsId='oilsSelfckCCLName' /></td>
 296                 </tr>
 297                 <tr>
 298                     <td>Street Address</td>
 299                     <td><input jsId='oilsSelfckCCStreet' /></td>
 300                 </tr>
 301                 <tr>
 302                     <td>City</td>
 303                     <td><input jsId='oilsSelfckCCCity' /></td>
 304                 </tr>
 305                 <tr>
 306                     <td>State or Province</td>
 307                     <td><input jsId='oilsSelfckCCState' /></td>
 308                 </tr>
 309                 <tr>
 310                     <td>ZIP or Postal Code</td>
 311                     <td><input jsId='oilsSelfckCCZip' /></td>
 312                 </tr>
 313                 <tr>
 314                   <td colspan='2'><strong>Credit Card Information</strong></td>
 315                 </tr>
 316                 <!-- Technically not needed since card type is derived from the CC number
 317                 <tr>
 318                     <td>Type of Card</td>
 319                     <td>
 320                         <select jsId='oilsSelfckCCType' required='true'>
 321                             <option value='VISA'>VISA</option>
 322                             <option value='MasterCard'>MasterCard</option>
 323                             <option value='American Express'>American Express</option>
 324                         </select>
 325                     </td>
 326                 </tr>
 327                 -->
 328                 <tr>
 329                     <td>Credit Card #</td>
 330                     <td><input jsId='oilsSelfckCCNumber' /></td>
 331                 </tr>
 332                 <tr>
 333                     <td>
 334                         <div style="position:absolute;">
 335                             <div style="position:relative;left:80px;">
 336                                 <a href="javascript:;"
 337                                     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
 338                                     src="/opac/skin/kcls/graphics/question-mark.png" /></a>
 339                             </div>
 340                         </div>
 341                         Security Code
 342                     </td>
 343                     <td>
 344                         <input jsId='oilsSelfckCCCVV' />
 345                     </td>
 346                 </tr>
 347                 <tr>
 348                     <td>Exipration Month</td>
 349                     <td>
 350                         <select jsId='oilsSelfckCCMonth'>
 351                             <option value='01' selected='selected'>January</option>
 352                             <option value='02'>February</option>
 353                             <option value='03'>March</option>
 354                             <option value='04'>April</option>
 355                             <option value='05'>May</option>
 356                             <option value='06'>June</option>
 357                             <option value='07'>July</option>
 358                             <option value='08'>August</option>
 359                             <option value='09'>September</option>
 360                             <option value='10'>October</option>
 361                             <option value='11'>November</option>
 362                             <option value='12'>December</option>
 363                         </select>
 364                     </td>
 365                 </tr>
 366                 <tr>
 367                     <td>Expiration Year</td>
 368                     <td>
 369                       <select jsId='oilsSelfckCCYear'>
 370                         <option value='2011'>2011</option>
 371                         <option value='2012'>2012</option>
 372                         <option value='2013'>2013</option>
 373                         <option value='2014'>2014</option>
 374                         <option value='2015'>2015</option>
 375                         <option value='2016'>2016</option>
 376                         <option value='2017'>2017</option>
 377                         <option value='2018'>2018</option>
 378                         <option value='2019'>2019</option>
 379                       </select>
 380                     </td>
 381                 </tr>
 382                 <tr class="hide_me">
 383                     <td>Edit Billing Address</td>
 384                     <td>
 385                         <input jsId='oilsSelfckEditDetails'/>
 386                     </td>
 387                 </tr>
 388                 <tr>
 389                     <td colspan='2' align="center">
 390                         <button jsId='oilsSelfckCCSubmit'>
 391                             Submit Payment
 392                         </button>
 393                         <button onclick="hideMe($('pay_fines_now'));unHideMe($('acct_sum'));">
 394                             Cancel
 395                         </button>
 396                     </td>
 397                 </tr>
 398                 <tr>
 399                     <td colspan="3">
 400                         <br />
 401                         Important! You must have a printed receipt to be
 402                         eligible for a refund on lost items (regulations allow
 403                         for no exceptions).
 404                         <br />
 405                         <strong>
 406                             To ensure your necessary receipt information is
 407                             not lost, enter your email address above and a
 408                             receipt will be emailed to you. Otherwise, make
 409                             certain you have a printed receipt in hand before
 410                             closing the payment receipt screen.
 411                         </strong>
 412                         <br />
 413                         Refunds are not available for parts and pieces, overdue
 414                         fines, or items that do not display a specific title in
 415                         My Account. For a full list of refundable and
 416                         non-refundable items, visit
 417                         <a href="http://www.kcls.org/usingthelibrary/borrowing/refundable.cfm">http://www.kcls.org/usingthelibrary/borrowing/refundable.cfm</a><br /><br />
 418                         This site uses VeriSign SSL encryption to ensure your
 419                         privacy.
 420                     </td>
 421                 </tr>
 422             </tbody>
 423         </table>
 424     </div>
 425 </div>
 426 [% END %]