Attachment 141277 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), 14.34 KB, created by Martin Renvoize (ashimema) on 2022-10-03 16:25:09 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Martin Renvoize (ashimema)

Created: 2022-10-03 16:25:09 UTC

Size: 14.34 KB

patch

obsolete

>From 0901738c03f8f1488e655cfa4ae33f19a1ebe237 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, check for item
>existance and availability and then check the item out after any
>confirmations have been displayed.
>---
> .../bootstrap/en/includes/masthead.inc        |   7 +
> .../bootstrap/en/includes/modals/checkout.inc |  25 ++
> .../bootstrap/en/includes/opac-bottom.inc     |  10 +
> .../opac-tmpl/bootstrap/js/modals/checkout.js | 214 ++++++++++++++++++
> 4 files changed, 256 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 fbab4ec2c9..7b704b6e0c 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
>@@ -80,6 +80,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..67d3c66e2c
>--- /dev/null
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/modals/checkout.inc
>@@ -0,0 +1,25 @@
>+
>+<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>
>+            </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 4fab59077d..33cf6b8610 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 %]
>@@ -124,6 +128,9 @@
> [% Asset.js("lib/bootstrap/js/bootstrap.bundle.min.js") | $raw %]
> [% Asset.js("lib/fontfaceobserver.min.js") | $raw %]
> [% Asset.js("lib/enquire.min.js") | $raw %]
>+<script>
>+    let logged_in_user_id = "[% logged_in_user.borrowernumber | html %]";
>+</script>
> [% Asset.js("js/global.js") | $raw %]
> [% IF ( OPACAmazonCoverImages || SyndeticsCoverImages ) %]
>     <script>
>@@ -304,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..522f60b9ad
>--- /dev/null
>+++ b/koha-tmpl/opac-tmpl/bootstrap/js/modals/checkout.js
>@@ -0,0 +1,214 @@
>+$(document).ready(function() {
>+
>+    function resetResults(){
>+        $('#checkoutResults').replaceWith('<div id="checkoutResults"></div>');
>+        $('#availabilityResult').replaceWith('<div id="availabilityResult"></div>');
>+    };
>+
>+    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 current has outstanding charges of '%s'").format(data);
>+        }
>+        else {
>+            result += _("Message code '%s' with data '%s'").format(code,data);
>+        }
>+
>+        result += '</div>';
>+        $('#availabilityResult').append(result);
>+    };
>+
>+    // 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>');
>+        $('#external_id').focus();
>+    });
>+
>+    // On modal submit
>+    $('#checkoutModal').on('click', '#checkoutSubmit', function(e) {
>+
>+        // Get item from barcode
>+        let external_id = $('#checkout_barcode').val();
>+        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) {
>+                    item_id = data[0].item_id;
>+                    console.log('Found one item with id: ' + 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) {
>+                console.log('Items request failed with: ' + textStatus);
>+                console.log(data);
>+            }
>+        );
>+
>+        let checkout = availability.then(
>+            function(data, textStatus, jqXHR) {
>+                let result;
>+                console.log(data);
>+                // 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]}`);
>+                        }
>+                    }
>+                    console.log("Request succeeded but blockers were reported");
>+                }
>+                // 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]}`);
>+                            console.log(`${key}: ${data.confirms[key]}`);
>+                        }
>+                    }
>+                    $('#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>');
>+                    console.log("Request succeeded confirmation is required");
>+                }
>+                // 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/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]}`);
>+                            console.log(`${key}: ${data.warnings[key]}`);
>+                        }
>+                    }
>+                    console.log("Request succeeded but there were warnings");
>+                }
>+
>+                // 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) {
>+                console.log("checkout.then succeeded");
>+                $('#checkoutResults').replaceWith('<div id="checkoutResults" class="alert alert-success">' + _("Item '%s' was checked out").format(external_id) + '</div>');
>+                $('#checkout_barcode').val("").focus();
>+                console.log(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 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/checkouts?confirmation=' + token,
>+            type: 'POST',
>+            data: JSON.stringify(params),
>+            contentType: "json"
>+        });
>+
>+        checkout.then(
>+            function(data, textStatus, jqXHR) {
>+                console.log("checkout.then succeeded");
>+                $('#item_id').remove;
>+                $('#confirm_token').remove;
>+                $('#checkoutResults').replaceWith('<div id="checkoutResults" class="alert alert-success">' + _("Item '%s' was checked out").format(external_id) + '</div>');
>+                $('#checkoutConfirm').replaceWith('<button type="submit" id="checkoutSubmit" class="btn btn-primary">Submit</button>');
>+                $('#checkout_barcode').val("").focus();
>+                // data retrieved from url2 as provided by the first request
>+            },
>+            function(data, textStatus, jqXHR) {
>+                console.log("checkout.then failed");
>+            }
>+        );
>+    });
>+});
>-- 
>2.20.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