Open-ILS/web/templates/default/opac/myopac/main.tt2

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