Attachment 151258 Details for Bug 30979 – Bug 30979: Add checkout modal to the OPAC

[patch] Bug 30979: Add checkout modal to the OPAC

Bug-30979-Add-checkout-modal-to-the-OPAC.patch (text/plain), 16.54 KB, created by Martin Renvoize (ashimema) on 2023-05-16 09:55:37 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Martin Renvoize (ashimema)

Created: 2023-05-16 09:55:37 UTC

Size: 16.54 KB

patch

obsolete

>From d5655e3da6f75f124fa726b5a80c6cec33e65f91 Mon Sep 17 00:00:00 2001
>From: Martin Renvoize <martin.renvoize@ptfs-europe.com>
>Date: Mon, 15 Aug 2022 12:19:31 +0100
>Subject: [PATCH] Bug 30979: Add checkout modal to the OPAC
>
>This patch adds a new self checkout modal to the OPAC when
>OpacTrustedCheckout is enabled and a user is logged in.
>
>The new modal allows an end user to scan an item barcode to checkout.
>We check for item existance and availability and then check the item
>out after any confirmations have been displayed.
>
>Signed-off-by: Silvia Meakins <smeakins@eso.org>
>Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
>---
> .../bootstrap/en/includes/masthead.inc        |   7 +
> .../bootstrap/en/includes/modals/checkout.inc |  40 +++
> .../bootstrap/en/includes/opac-bottom.inc     |   8 +
> .../opac-tmpl/bootstrap/js/modals/checkout.js | 249 ++++++++++++++++++
> 4 files changed, 304 insertions(+)
> create mode 100644 koha-tmpl/opac-tmpl/bootstrap/en/includes/modals/checkout.inc
> create mode 100644 koha-tmpl/opac-tmpl/bootstrap/js/modals/checkout.js
>
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
>index 941805f7a6..20b34bce95 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
>@@ -81,6 +81,13 @@
>                         </div> 
>                     </li> 
>                 [% END # / IF virtualshelves %]
>+                [% IF ( Koha.Preference( 'OpacTrustedCheckout' ) && loggedinusername ) %]
>+                    <li class="nav-item">
>+                        <a href="#" class="nav-link" title="Self check out" id="comenulink" role="button" data-toggle="modal" data-target="#checkoutModal">
>+                            <i id="checkout-icon" class="fa fa-barcode fa-icon-black" aria-hidden="true"></i> <span class="checkout-label">Self checkout</span>
>+                        </a>
>+                    </li>
>+                [% END %]
>             </ul> 
> 
>             [% IF Koha.Preference( 'opacuserlogin' ) == 1 ||  Koha.Preference( 'EnableOpacSearchHistory') || Koha.Preference( 'opaclanguagesdisplay' ) %]
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/modals/checkout.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/modals/checkout.inc
>new file mode 100644
>index 0000000000..6a19e717de
>--- /dev/null
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/modals/checkout.inc
>@@ -0,0 +1,40 @@
>+
>+<div class="modal" id="checkoutModal" tabindex="-1" role="dialog" aria-labelledby="checkoutModalLabel" aria-hidden="true">
>+    <div class="modal-dialog">
>+        <div class="modal-content">
>+            <div class="modal-header">
>+                <h3 class="modal-title" id="checkoutModalLabel">Self checkout</h3>
>+                <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close">
>+                    <span aria-hidden="true">&times;</span>
>+                </button>
>+            </div>
>+            <div class="modal-body">
>+                <div id="checkoutResults"></div>
>+                <div id="availabilityResult"></div>
>+                <div class="form-group">
>+                    <label for="checkout_barcode">Enter item barcode: </label>
>+                    <input type="text" name="checkout_barcode" id="checkout_barcode" required="required"></input>
>+                </div>
>+                <table id="checkoutsTable" class="table table-bordered table-striped" style="width:100%;">
>+                    <thead>
>+                      <tr>
>+                          <th>Barcode</th>
>+                          <th>Due date</th>
>+                      </tr>
>+                    </thead>
>+                    <tbody>
>+                    </tbody>
>+                    <tfoot>
>+                      <tr>                    
>+                        <td colspan="2" class="text-right"><span id="checkoutsCount"></span> items checked out</td>
>+                      </tr>
>+                    </tfoot>
>+                </table>
>+            </div>
>+            <div class="modal-footer">
>+                <button type="submit" id="checkoutSubmit" class="btn btn-primary">Submit</button>
>+                <button type="button" id="checkoutClose" class="btn btn-default" data-dismiss="modal">Close</button>
>+            </div>
>+        </div>
>+    </div>
>+</div>
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
>index aba60fc502..65360234cf 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-bottom.inc
>@@ -117,6 +117,10 @@
>     [% END # /IF OpacLangSelectorMode == 'both' || OpacLangSelectorMode == 'footer' %]
> [% END # / UNLESS is_popup %]
> 
>+[% IF ( Koha.Preference( 'OpacTrustedCheckout' ) && loggedinusername ) %]
>+    [% INCLUDE 'modals/checkout.inc' %]
>+[% END %]
>+
> 
> [% Asset.js("lib/jquery/jquery-3.6.0.min.js") | $raw %]
> [% Asset.js("lib/jquery/jquery-migrate-3.3.2.min.js") | $raw %]
>@@ -290,6 +294,7 @@ $(document).ready(function() {
>     }
> });
> </script>
>+[% INCLUDE 'js-date-format.inc' %]
> [% PROCESS jsinclude %]
> [% IF ( Koha.Preference('OPACUserJS') ) %]
>     <script>
>@@ -306,6 +311,9 @@ $(document).ready(function() {
>         </script>
>     [% END %]
> [% END %]
>+[% IF ( Koha.Preference( 'OpacTrustedCheckout' ) && loggedinusername ) %]
>+    [% Asset.js("js/modals/checkout.js") | $raw %]
>+[% END %]
> [% KohaPlugins.get_plugins_opac_js | $raw %]
> </body>
> </html>
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/modals/checkout.js b/koha-tmpl/opac-tmpl/bootstrap/js/modals/checkout.js
>new file mode 100644
>index 0000000000..0c666c55e7
>--- /dev/null
>+++ b/koha-tmpl/opac-tmpl/bootstrap/js/modals/checkout.js
>@@ -0,0 +1,249 @@
>+$(document).ready(function() {
>+
>+    let checkouts_count = 0;
>+    let current_item;
>+
>+    function addResult(type, code, data) {
>+        let result = '';
>+        if (type == 'danger') {
>+            result += '<div class="alert alert-danger">';
>+        } else if (type == 'warning') {
>+            result += '<div class="alert alert-warning">';
>+        } else if (type == 'info') {
>+            result += '<div class="alert alert-info">';
>+        } else {
>+            result += '<div class="alert alert-success">';
>+        }
>+
>+        if (code == 'NOT_FOUND') {
>+            result += _("Item '%s' not found").format(data);
>+        } else if (code == 'RENEW_ISSUE') {
>+            result += _("Item will be renewed").format(data);
>+        } else if (code == 'OTHER_CHARGES') {
>+            result += _("Your account currently has outstanding charges of '%s'").format(data);
>+        } else if (code == 'DEBT') {
>+            result += _("Your account is currently in debt by '%s'").format(data);
>+        } else if (code == 'ISSUED_TO_ANOTHER') {
>+            result += _("This item appears to be checked out to another patron, please return it to the desk");
>+        } else if (code == 'RESERVED' || code == 'RESERVED_WAITING') {
>+            result += _("This item appears to be reserved for another patron, please return it to the desk");
>+        } else if (code == 'TOO_MANY') {
>+            result += _("You have reached the maximum number of checkouts allowed on your account");
>+        } else if (code == 'AGE_RESTRICTION') {
>+            result += _("This item is age restricted");
>+        } else if (code == 'NO_MORE_RENEWALS') {
>+            result += _("Maximum renewals reached for this item");
>+        } else if (code == 'NOT_FOR_LOAN') {
>+            result += _("This item is not normally for loan, please select another or ask at the desk");
>+        } else if (code == 'WTHDRAWN') {
>+            result += _("This item is marked withdrawn, please select another or ask at the desk");
>+        } else if (code == 'EMPTY') {
>+            result += _("Please enter the barcode for the item you wish to checkout");
>+        } else {
>+            result += _("Message code '%s' with data '%s'").format(code, data);
>+        }
>+
>+        result += '</div>';
>+        $('#availabilityResult').append(result);
>+    };
>+
>+    function addCheckout(checkout) {
>+        // Alert that checkout was successful
>+        $('#checkoutResults').replaceWith('<div id="checkoutResults" class="alert alert-success">' + _("Item '%s' was checked out").format(current_item.external_id) + '</div>');
>+        // Cleanup input and unset readonly
>+        $('#checkout_barcode').val("").prop("readonly", false).focus();
>+        // Display checkouts table if not already visible
>+        $('#checkoutsTable').show();
>+        // Add checkout to checkouts table
>+        $('#checkoutsTable > tbody').append('<tr><td>' + current_item.external_id +'</td><td>'+ $date(checkout.due_date) +'</td></tr>');
>+        $('#checkoutsCount').html(++checkouts_count);
>+        // Reset to submission
>+        $('#checkoutConfirm').replaceWith('<button type="submit" id="checkoutSubmit" class="btn btn-primary">Submit</button>');
>+    };
>+
>+    // On modal show, clear any prior results and set focus
>+    $('#checkoutModal').on('shown.bs.modal', function(e) {
>+        $('#checkoutResults').replaceWith('<div id="checkoutResults"></div>');
>+        $('#availabilityResult').replaceWith('<div id="availabilityResult"></div>');
>+        $('#checkoutsTable').hide();
>+        $('#checkout_barcode').val("").focus();
>+    });
>+
>+    // On modal submit
>+    $('#checkoutModal').on('click', '#checkoutSubmit', function(e) {
>+
>+        // Get item from barcode
>+        let external_id = $('#checkout_barcode').val();
>+        if ( external_id === '' ) {
>+            addResult('warning', 'EMPTY');
>+            return;
>+        }
>+
>+        let item_id;
>+        let items = $.ajax({
>+            url: '/api/v1/public/items?external_id=' + external_id,
>+            dataType: 'json',
>+            type: 'GET'
>+        });
>+
>+        $('#availabilityResult').replaceWith('<div id="availabilityResult"></div>');
>+
>+        // Get availability of the item
>+        let availability = items.then(
>+            function(data, textStatus, jqXHR) {
>+                if (data.length == 1) {
>+                    current_item = data[0];
>+                    item_id = current_item.item_id;
>+                    return $.ajax({
>+                        url: '/api/v1/public/checkouts/availability?item_id=' + item_id + '&patron_id=' + logged_in_user_id,
>+                        type: 'GET',
>+                        contentType: "json"
>+                    });
>+                } else {
>+                    addResult('danger', 'NOT_FOUND', external_id);
>+                }
>+            },
>+            function(data, textStatus, jqXHR) {
>+                addResult('danger', 'NOT_FOUND', external_id);
>+                console.log('Items request failed with: ' + textStatus);
>+            }
>+        );
>+
>+        let checkout = availability.then(
>+            function(data, textStatus, jqXHR) {
>+                let result;
>+                // blocked
>+                if (Object.keys(data.blockers).length >= 1) {
>+                    for (const key in data.blockers) {
>+                        if (data.blockers.hasOwnProperty(key)) {
>+                            addResult('danger', `${key}`, `${data.blockers[key]}`);
>+                            console.log(`${key}: ${data.blockers[key]}`);
>+                            $('#checkout_barcode').val("").prop("readonly", false).focus();
>+                        }
>+                    }
>+                }
>+                // requires confirmation
>+                else if (Object.keys(data.confirms).length >= 1) {
>+                    for (const key in data.confirms) {
>+                        if (data.confirms.hasOwnProperty(key)) {
>+                            addResult('warning', `${key}`, `${data.confirms[key]}`);
>+                        }
>+                    }
>+                    $('#checkout_barcode').prop("readonly", true);
>+                    $('#checkoutSubmit').replaceWith('<input type="hidden" id="item_id" value="' + item_id + '"><input type="hidden" id="confirm_token" value="' + data.confirmation_token + '"><button type="submit" id="checkoutConfirm" class="btn btn-warning">Confirm</button>');
>+                }
>+                // straight checkout
>+                else {
>+                    let params = {
>+                        "checkout_id": undefined,
>+                        "patron_id": logged_in_user_id,
>+                        "item_id": item_id,
>+                        "due_date": undefined,
>+                        "library_id": undefined,
>+                        "issuer_id": undefined,
>+                        "checkin_date": undefined,
>+                        "last_renewed_date": undefined,
>+                        "renewals_count": undefined,
>+                        "unseen_renewals": undefined,
>+                        "auto_renew": undefined,
>+                        "auto_renew_error": undefined,
>+                        "timestamp": undefined,
>+                        "checkout_date": undefined,
>+                        "onsite_checkout": false,
>+                        "note": undefined,
>+                        "note_date": undefined,
>+                        "note_seen": undefined,
>+                    };
>+                    result = $.ajax({
>+                        url: '/api/v1/public/patrons/'+logged_in_user_id+'/checkouts',
>+                        type: 'POST',
>+                        data: JSON.stringify(params),
>+                        contentType: "json"
>+                    });
>+                }
>+
>+                // warnings to display
>+                if (Object.keys(data.warnings).length >= 1) {
>+                    for (const key in data.warnings) {
>+                        if (data.warnings.hasOwnProperty(key)) {
>+                            addResult('info', `${key}`, `${data.warnings[key]}`);
>+                        }
>+                    }
>+                }
>+
>+                // return a rejected promise if we've reached here
>+                return result ? result : $.Deferred().reject('Checkout halted');
>+            },
>+            function(data, textStatus, jqXHR) {
>+                console.log('Items request failed with: ' + textStatus);
>+                console.log(data);
>+            }
>+        );
>+
>+        checkout.then(
>+            function(data, textStatus, jqXHR) {
>+                addCheckout(data);
>+                // data retrieved from url2 as provided by the first request
>+            },
>+            function(data, textStatus, jqXHR) {
>+                console.log("checkout.then failed");
>+            }
>+        );
>+
>+    });
>+
>+    $('#checkoutModal').on('click', '#checkoutConfirm', function(e) {
>+        let external_id = $('#checkout_barcode').val();
>+        let item_id = $('#item_id').val();
>+        let token = $('#confirm_token').val();
>+        let params = {
>+            "checkout_id": undefined,
>+            "patron_id": logged_in_user_id,
>+            "item_id": item_id,
>+            "due_date": undefined,
>+            "library_id": undefined,
>+            "issuer_id": undefined,
>+            "checkin_date": undefined,
>+            "last_renewed_date": undefined,
>+            "renewals_count": undefined,
>+            "unseen_renewals": undefined,
>+            "auto_renew": undefined,
>+            "auto_renew_error": undefined,
>+            "timestamp": undefined,
>+            "checkout_date": undefined,
>+            "onsite_checkout": false,
>+            "note": undefined,
>+            "note_date": undefined,
>+            "note_seen": undefined,
>+        };
>+        let checkout = $.ajax({
>+            url: '/api/v1/public/patrons/'
>+                 + logged_in_user_id
>+                 + '/checkouts?confirmation='
>+                 + token,
>+            type: 'POST',
>+            data: JSON.stringify(params),
>+            contentType: "json"
>+        });
>+
>+        checkout.then(
>+            function(data, textStatus, jqXHR) {
>+                $('#item_id').remove;
>+                $('#confirm_token').remove;
>+                $('#availabilityResult').replaceWith('<div id="availabilityResult"></div>');
>+                addCheckout(data);
>+                // data retrieved from url2 as provided by the first request
>+            },
>+            function(data, textStatus, jqXHR) {
>+                console.log("checkout.then failed");
>+            }
>+        );
>+    });
>+
>+    $('#checkoutModal').on('hidden.bs.modal', function (e) {
>+        let pageName = $(location).attr("pathname");
>+        if ( pageName == '/cgi-bin/koha/opac-user.pl' ) {
>+            location.reload();
>+        }
>+    })
>+});
>-- 
>2.40.1

Actions: View | Diff | Splinter Review

Attachments on bug 30979: 139131 | 139132 | 139133 | 139134 | 141274 | 141275 | 141276 | 141277 | 141278 | 141279 | 141300 | 145264 | 145265 | 145266 | 145267 | 145268 | 145277 | 145280 | 145281 | 145282 | 145283 | 145284 | 145285 | 145620 | 145621 | 145622 | 145623 | 145624 | 145625 | 145626 | 145627 | 145628 | 145629 | 145630 | 150867 | 150868 | 150869 | 150870 | 150871 | 150872 | 150873 | 150874 | 150875 | 150876 | 150877 | 150878 | 150879 | 150880 | 150881 | 150882 | 150883 | 150884 | 150885 | 150886 | 150887 | 150888 | 150889 | 150967 | 150968 | 150969 | 150970 | 150971 | 150972 | 150973 | 150974 | 151254 | 151255 | 151256 | 151257 | 151258 | 151259 | 151260 | 151261 | 151358 | 151359 | 151360 | 151361 | 151362 | 151363 | 151364 | 151365 | 151368 | 151369 | 151370 | 151371 | 151372 | 151373 | 151374 | 151375 | 151376 | 152789 | 152790 | 152791 | 152792 | 152793 | 152794 | 152795 | 152796 | 152797 | 153459 | 153460 | 153461 | 153462 | 153463 | 153464 | 153465 | 153466 | 153467 | 153500 | 153501 | 153502 | 153503