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

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