koha-tmpl/intranet-tmpl/prog/en/modules/pos/pay.tt

   1 [% USE raw %]
   2 [% USE Asset %]
   3 [% USE Koha %]
   4 [% USE Price %]
   5 [% SET footerjs = 1 %]
   6 [% PROCESS 'payments.inc' %]
   7 [% INCLUDE 'doc-head-open.inc' %]
   8 <title>Koha &rsaquo; Payments</title>
   9 [% INCLUDE 'doc-head-close.inc' %]
  10 </head>
  11
  12 <body id="payments" class="pos">
  13 [% INCLUDE 'header.inc' %]
  14 [% INCLUDE 'circ-search.inc' %]
  15
  16 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; Point of sale</div>
  17
  18 <div class="main container-fluid">
  19     <div class="row">
  20         <div class="col-sm-10 col-sm-push-2">
  21
  22         [% IF ( error_registers ) %]
  23         <div id="error_message" class="dialog alert">
  24             You must have at least one cash register associated with this branch before you can record payments.
  25         </div>
  26         [% ELSE %]
  27
  28         [% IF payment_id && !Koha.Preference('FinePaymentAutoPopup') %]
  29         <div class="dialog alert audio-alert-action">
  30             Payment received: <a target="_blank" href="/cgi-bin/koha/pos/printreceipt.pl?action=print&accountlines_id=[% payment_id | uri %]&collected=[% collected | uri %]&change=[% change | uri %]" class="btn btn-default btn-xs"><i class="fa fa-print"></i> Print receipt</a>
  31         </div>
  32         [% END %]
  33
  34         <form name="payForm" id="payForm" method="post" action="/cgi-bin/koha/pos/pay.pl">
  35             <div class="row">
  36
  37                 <div class="col-sm-6">
  38                     <fieldset class="rows">
  39                         <legend>Items for purchase</legend>
  40                             Please select items from below to add to this transaction:
  41                             [% IF invoice_types %]
  42                             <table id="invoices">
  43                             <thead>
  44                                 <tr>
  45                                     <th>Code</th>
  46                                     <th>Description</th>
  47                                     <th>Cost</th>
  48                                     <th>Action</th>
  49                                 </tr>
  50                             </thead>
  51                             <tbody>
  52                             [% FOREACH invoice IN invoice_types %]
  53                                 <tr>
  54                                     <td>[% invoice.code | html %]</td>
  55                                     <td>[% invoice.description | html %]</td>
  56                                     <td>[% invoice.default_amount | $Price %]</td>
  57                                     <td>
  58                                         <button type="button" class="add_button" data-invoice-code="[% invoice.code | html %]" data-invoice-title="[% invoice.description | html %]" data-invoice-price="[% invoice.default_amount | html %]"><i class="fa fa-plus"></i> Add</button>
  59                                     </td>
  60                                 </tr>
  61                             [% END %]
  62                             </table>
  63                             [% ELSE %]
  64                             You have no manual invoice types defined
  65                             [% END %]
  66                     </fieldset>
  67                 </div>
  68
  69                 <div class="col-sm-6">
  70
  71                     <fieldset class="rows">
  72                         <legend>This sale</legend>
  73                         <p>Click to edit item cost or quantities</p>
  74                         <table id="sale" class="table_sale">
  75                             <thead>
  76                                 <tr>
  77                                     <th>Item</th>
  78                                     <th>Cost</th>
  79                                     <th>Quantity</th>
  80                                     <th>Total</th>
  81                                     <th>Action</th>
  82                                     <th>CODE</th>
  83                                 </tr>
  84                             </thead>
  85                             <tbody>
  86                             </tbody>
  87                             <tfoot>
  88                                 <tr>
  89                                     <td colspan="3">Total payable:</td>
  90                                     <td></td>
  91                                     <td></td>
  92                                     <td></td>
  93                                 </tr>
  94                             </tfoot>
  95                         </table>
  96                     </fieldset>
  97
  98                     <fieldset class="rows">
  99                         <legend>Collect payment</legend>
 100                         <ol>
 101                             <li>
 102                                 <label for="paid">Amount being paid: </label>
 103                                 <input type="number" min="0.00" max="10000.00" step="0.01" name="paid" id="paid" value="[% amountoutstanding | $Price on_editing => 1 %]" readonly/>
 104                             </li>
 105                             <li>
 106                                 <label for="collected">Amount tendered: </label>
 107                                 <input type="number" min="0.00" max="10000.00" step="0.01" name="collected" id="collected" value=""/>
 108                             </li>
 109                             <li>
 110                                 <label>Change to give: </label>
 111                                 <span id="change">[% 0 | $Price %]</span>
 112                                 <input type="hidden" name="change" value="[% 0 | $Price %]"/>
 113                             </li>
 114
 115                             [% PROCESS account_payment_types %]
 116
 117                             <li>
 118                                 <label for="registerid">Cash register: </label>
 119                                 <select name="registerid" id="registerid">
 120                                     [% FOREACH register IN registers %]
 121                                       [% IF register.id == default_register %]
 122                                     <option value="[% register.id | html %]" selected="selected">[% register.name | html %]</option>
 123                                       [% ELSE %]
 124                                     <option value="[% register.id | html %]">[% register.name | html %]</option>
 125                                       [% END %]
 126                                     [% END %]
 127                                 </select>
 128                             </li>
 129                         </ol>
 130
 131                     </fieldset>
 132
 133                     <div class="action">
 134                         <input type="submit" id="submitbutton" name="submitbutton" value="Confirm" />
 135                         <a class="cancel" href="/cgi-bin/koha/pos/pay.pl">Cancel</a>
 136                     </div>
 137                 </div>
 138             </div>
 139         </form>
 140         [% END %]
 141     </div>
 142
 143     <div class="col-sm-2 col-sm-pull-10">
 144         <aside>
 145             [% INCLUDE 'pos-menu.inc' %]
 146         </aside>
 147     </div>
 148 </div> <!-- /.row -->
 149
 150 <!-- Modal -->
 151 <div id="confirm_change_form" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
 152     <div class="modal-dialog">
 153         <div class="modal-content">
 154             <div class="modal-header">
 155                 <h3>The amount collected is more than the outstanding charge</h3>
 156             </div>
 157             <div class="modal-body">
 158                 <p>The amount collected from the patron is higher than the amount to be paid.</p>
 159                 <p>The change to give is <b><span id="modal_change">[% 0 | $Price %]</span></b>.</p>
 160                 <p>Confirm this payment?</p>
 161             </div>
 162             <div class="modal-footer">
 163                 <button class="btn btn-default approve" id="modal_submit" type="button"><i class="fa fa-check"></i> Yes</button>
 164                 <button class="btn btn-default deny cancel" href="#" data-dismiss="modal" aria-hidden="true" type="button"><i class="fa fa-times"></i> No</button>
 165             </div>
 166         </div>
 167     </div>
 168 </div>
 169
 170 [% IF payment_id && Koha.Preference('FinePaymentAutoPopup') %]
 171 <!-- Automatic Print Receipt -->
 172       <a id="printReceipt" style="display: none" href="#"></a>
 173 [% END %]
 174
 175 [% MACRO jsinclude BLOCK %]
 176     [% INCLUDE 'format_price.inc' %]
 177     [% INCLUDE 'datatables.inc' %]
 178     [% Asset.js("lib/jquery/plugins/jquery.jeditable.mini.js") | $raw %]
 179     <script>
 180     function moneyFormat(textObj) {
 181         var newValue = textObj.value;
 182         var decAmount = "";
 183         var dolAmount = "";
 184         var decFlag   = false;
 185         var aChar     = "";
 186
 187         for(var i=0; i < newValue.length; i++) {
 188             aChar = newValue.substring(i, i+1);
 189             if (aChar >= "0" && aChar <= "9") {
 190                 if(decFlag) {
 191                     decAmount = "" + decAmount + aChar;
 192                 }
 193                 else {
 194                     dolAmount = "" + dolAmount + aChar;
 195                 }
 196             }
 197             if (aChar == ".") {
 198                 if (decFlag) {
 199                     dolAmount = "";
 200                     break;
 201                 }
 202                 decFlag = true;
 203             }
 204         }
 205
 206         if (dolAmount == "") {
 207             dolAmount = "0";
 208         }
 209     // Strip leading 0s
 210         if (dolAmount.length > 1) {
 211             while(dolAmount.length > 1 && dolAmount.substring(0,1) == "0") {
 212                 dolAmount = dolAmount.substring(1,dolAmount.length);
 213             }
 214         }
 215         if (decAmount.length > 2) {
 216             decAmount = decAmount.substring(0,2);
 217         }
 218     // Pad right side
 219         if (decAmount.length == 1) {
 220            decAmount = decAmount + "0";
 221         }
 222         if (decAmount.length == 0) {
 223            decAmount = decAmount + "00";
 224         }
 225
 226         textObj.value = dolAmount + "." + decAmount;
 227     }
 228
 229     function fnClickAddRow( table, invoiceCode, invoiceTitle, invoicePrice ) {
 230       var defaultPrice = { value: invoicePrice };
 231       moneyFormat(defaultPrice);
 232       table.fnAddData( [
 233         invoiceTitle,
 234         defaultPrice.value,
 235         1,
 236         null,
 237         '<button class="btn btn-default btn-xs drop" type="button"><i class="fa fa-trash"></i> ' + _("Remove") + '</button>',
 238         invoiceCode
 239         ]
 240       );
 241     }
 242
 243     function updateChangeValues() {
 244         var change = $('#change')[0];
 245         var zero_formatted = "[% 0 | $Price %]";
 246         change.innerHTML = Math.round(($('#collected')[0].value - $('#paid')[0].value) * 100) / 100;
 247         if (change.innerHTML <= 0) {
 248             var paid = $('#paid')[0];
 249             moneyFormat(paid);
 250             $('#collected').rules( "add", { min: Number(paid.value) });
 251             $("#payForm").valid()
 252             change.innerHTML = zero_formatted;
 253             $(':input[name="change"]').val(zero_formatted);
 254         } else {
 255             change.value = change.innerHTML;
 256             moneyFormat(change);
 257             change.innerHTML = change.value;
 258             $(':input[name="change"]').val(change.value);
 259         }
 260
 261         $('#modal_change').html(change.innerHTML);
 262     }
 263
 264     $(document).ready(function() {
 265         var sale_table = $("#sale").dataTable($.extend(true, {}, dataTablesDefaults, {
 266             "bPaginate": false,
 267             "bFilter": false,
 268             "bInfo": false,
 269             "aoColumnDefs": [{
 270                 "aTargets": [-2],
 271                 "bSortable": false,
 272                 "bSearchable": false,
 273             }, {
 274                 "aTargets": [-3],
 275                 "mRender": function ( data, type, full ) {
 276                     var price = Number.parseFloat(data);
 277                     return price.format_price();
 278                 }
 279             }, {
 280                 "aTargets": [-5],
 281                 "sClass" : "editable",
 282             }, {
 283                 "aTargets": [-4],
 284                 "sClass" : "editable_int",
 285             }, {
 286                 "targets": [-1],
 287                 "visible": false,
 288                 "searchable": false
 289             }],
 290             "aaSorting": [],
 291             "fnDrawCallback": function (oSettings) {
 292                 var local = this;
 293                 local.$('.editable').editable( function(value, settings) {
 294                     var aPos = local.fnGetPosition( this );
 295                     local.fnUpdate( value, aPos[0], aPos[1], true, false );
 296                     return value;
 297                 },{
 298                     type    : 'number',
 299                     step    : '0.01',
 300                     min     : '0',
 301                     onblur  : 'submit'
 302                 });
 303                 local.$('.editable_int').editable( function(value, settings) {
 304                     var aPos = local.fnGetPosition( this );
 305                     local.fnUpdate( value, aPos[0], aPos[1], true, false );
 306                     return value;
 307                 },{
 308                     type    : 'number',
 309                     step    : '1',
 310                     min     : '0',
 311                     onblur  : 'submit'
 312                 });
 313             },
 314             "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
 315                 var iTotal = aData[1] * aData[2];
 316                 this.fnUpdate( iTotal, nRow, 3, false, false );
 317             },
 318             "fnFooterCallback": function(nFoot, aData, iStart, iEnd, aiDisplay) {
 319                 var iTotalPrice = 0;
 320                 for ( var i=0 ; i<aData.length ; i++ )
 321                 {
 322                     iTotalPrice += aData[i][3]*1;
 323                 }
 324                 nFoot.getElementsByTagName('td')[1].innerHTML = iTotalPrice.format_price();
 325                 $('#paid').val(iTotalPrice);
 326                 $('#paid').trigger('change');
 327             }
 328         }));
 329
 330         $("#sale").on("click", "button.drop", function(){
 331                 sale_table.DataTable().row($(this).parents('tr')).remove().draw(false);
 332         });
 333
 334         var items_table = $("#invoices").dataTable($.extend(true,{}, dataTablesDefaults, {
 335                "aoColumnDefs": [
 336                   { "aTargets": [ -1, -2 ], "bSortable": false, "bSearchable":false },
 337                ],
 338                "aaSorting": [[ 0, "asc" ]],
 339                "paginationType": "full",
 340         }));
 341
 342         $("#invoices").on("click", ".add_button", function(e) {
 343             e.preventDefault();
 344             fnClickAddRow(sale_table, $( this ).data('invoiceCode'), $( this ).data('invoiceTitle'), $( this ).data('invoicePrice') );
 345             if($('#invoices_filter').find('input[type=search]').val() !== ''){
 346                 items_table.fnFilter( '' );
 347             }
 348         });
 349
 350         // Change calculation and modal
 351         var change = $('#change')[0];
 352         $("#paid, #collected").on("change",function() {
 353             moneyFormat( this );
 354             if (change != undefined) {
 355                 updateChangeValues();
 356             }
 357         });
 358
 359         var checked = false;
 360         $('#modal_submit').click(function() {
 361             checked = true;
 362             $('#payForm').submit();
 363         });
 364
 365         $( "#payForm" ).validate({
 366             rules: {
 367                 paid: { required: true },
 368                 collected: {
 369                     required: true
 370                 }
 371             }
 372         });
 373
 374         $('#payForm').submit(function(e){
 375             if (change != undefined && change.innerHTML > 0.00 && !checked) {
 376                 e.preventDefault();
 377                 $("#confirm_change_form").modal("show");
 378             } else {
 379                 var rows = sale_table.fnGetData();
 380                 rows.forEach(function (row, index) {
 381                     var sale = {
 382                         code: row[5],
 383                         price: row[1],
 384                         quantity: row[2]
 385                     };
 386                     $('<input>').attr({
 387                         type: 'hidden',
 388                         name: 'sales',
 389                         value: JSON.stringify(sale)
 390                     }).appendTo('#payForm');
 391                 });
 392                 return true;
 393             }
 394         });
 395
 396         [% IF payment_id && Koha.Preference('FinePaymentAutoPopup') %]
 397             $("#printReceipt").click(function() {
 398                 var win = window.open('/cgi-bin/koha/pos/printreceipt.pl?action=print&accountlines_id=[% payment_id | uri %]&collected=[% collected | uri %]&change=[% change | uri %]', '_blank');
 399                 win.focus();
 400             });
 401             $("#printReceipt").click();
 402         [% END %]
 403     });
 404     </script>
 405 [% END %]
 406
 407 [% INCLUDE 'intranet-bottom.inc' %]