From 7bbfd7c9cd99dbf4debd5c83d5c17e5b6bb46d96 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Fri, 17 Sep 2021 15:15:55 +0000
Subject: [PATCH] Bug 28537: (follow-up) Correct and improve OverDrive checkout
 modal

This patch corrects the markup of the modal which is displayed when the
user clicks the "Download as" button in their list of OverDrive
checkouts. The modal markup had not been updated in the conversion to
Bootstrap 4.

I have also modified the markup generated when listing the download
format options so that they use some standard Bootstrap 4 classes,
improving the layout a little.

To test you must have valid credentials entered in system preferences
for the OverDrive API. You should test using a patron who has holds and
current checkouts in OverDrive.

Apply the patch and log in to the OPAC.

- On the "Your summary" page, open the "OverDrive Account" tab.
  - Log in to your OverDrive account.
  - In the list of current checkouts, click the "Download as" button for
    one of the titles.
    - A modal window should display with a list of radio buttons for
      each available format.
      - Confirm that the format text acts as the label for the radio
        button.
      - Confirm that closing the modal without making a selection works
        correctly.
      - Confirm that making a selection and submitting the form closes
        the modal and submits your choice.
---
 .../en/includes/overdrive-checkout.inc        | 42 ++++++++++---------
 koha-tmpl/opac-tmpl/bootstrap/js/overdrive.js | 13 +++---
 2 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/overdrive-checkout.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/overdrive-checkout.inc
index fc5766998c..17f734d10d 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/overdrive-checkout.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/overdrive-checkout.inc
@@ -1,19 +1,23 @@
-<div id="overdrive-checkout" class="modal" tabindex="-1" role="dialog" aria-labelledby="overdrive-checkout-label" aria-hidden="true">
-    <div class="modal-header">
-        <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
-        <h3 id="overdrive-checkout-label">Checkout</h3>
-    </div>
-    <form action="#" method="post" id="overdrive-checkout-form">
-        <div class="modal-body">
-                <input type="hidden" name="id" value="" />
-                <fieldset class="brief">
-                    <label for="format">Format:</label>
-                    <ul class="overdrive-format-list">
-                </fieldset>
-        </div>
-        <div class="modal-footer">
-            <input type="submit" class="btn btn-primary overdrive-checkout-submit" value="Checkout" />
-            <a href="#" data-dismiss="modal" aria-hidden="true" class="cancel">Cancel</a>
-        </div>
-    </form> <!-- /#overdrive-checkout-form -->
-</div>  <!-- /#overdrive-checkout  -->
+<div class="modal" id="overdrive-checkout" tabindex="-1" aria-labelledby="overdrive-checkoutLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="overdrive-checkoutLabel">Select a download format</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <form action="#" method="post" id="overdrive-checkout-form">
+                <div class="modal-body">
+                    <input type="hidden" name="id" value="" />
+                    <div id="overdrive-format-list">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-primary overdrive-checkout-submit">Save changes</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                </div>
+            </form> <!-- /#overdrive-checkout-form -->
+        </div> <!-- /.modal-content -->
+    </div> <!-- /.modal-dialog -->
+</div> <!-- /.modal -->
diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/overdrive.js b/koha-tmpl/opac-tmpl/bootstrap/js/overdrive.js
index 8912692235..f71fd13fae 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/js/overdrive.js
+++ b/koha-tmpl/opac-tmpl/bootstrap/js/overdrive.js
@@ -413,13 +413,14 @@ KOHA.OverDriveCirculation = new function() {
             return false;
         }
 
-        var checkout_format_list = checkout_popup.find("ul.overdrive-format-list").empty();
+        var checkout_format_list = checkout_popup.find("#overdrive-format-list").empty();
         formats.forEach(function (item) {
-            var li = $('<li>').appendTo(checkout_format_list);
-            $('<input name="checkout-format" type="radio">')
-                .val(item)
-                .appendTo(li);
-            li.append(item);
+            var line = $("<div/>").addClass("form-check");
+            var input = '<input id="' + item + '" class="form-check-input" value="' + item + '" name="checkout-format" type="radio" /> ';
+            var label = '<label for="' + item + '">' + item + '</label>"';
+            $(input).appendTo( line );
+            $(label).appendTo( line );
+            line.appendTo( checkout_format_list );
         });
         checkout_popup.modal("show");
         checkout_popup.find(".overdrive-checkout-submit").click(function(e) {
-- 
2.20.1