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

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