billing: Update modal shown on license increase to use micromodal.

We now use micromodal in the license update modal on billing page
to make it consistent with other modals in the app and this is
preparatory work for moving away from bootstrap as well.

templates/corporate/billing.html

@@ -235,26 +235,32 @@
 </div>
 
 
-<div id="confirm-licenses-modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog" aria-labelledby="deactivation_self_modal_label" aria-hidden="true">
-    <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="{{ _('Close') }}"><span aria-hidden="true">&times;</span></button>
-        <h3 id="deactivation_self_modal_label">Confirm license increase</h3>
-    </div>
-    <div class="modal-body">
-        <p>
-            Are you sure you want to increase the licenses from
-            <b><span id="current_license_count_holder"></span></b> to
-            <b><span id="new_license_count_holder"></span></b>?
-        </p>
-        <p>
-            You would be charged for the additional licenses.
-        </p>
-    </div>
-    <div class="modal-footer">
-        <button class="button" data-dismiss="modal">Cancel</button>
-        <button class="button btn-success rounded" id="confirm-license-update-button" data-dismiss="modal" aria-hidden="true">
-            <span id="confirm-license-update">Confirm</span>
-        </button>
+<div id="confirm-licenses-modal" class="micromodal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1">
+        <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="dialog_title">
+            <header class="modal__header">
+                <h1 class="modal__title dialog_heading">
+                    {{ _('Confirm license increase') }}
+                </h1>
+                <button class="modal__close" aria-label="{{ _('Close modal') }}" data-micromodal-close></button>
+            </header>
+            <main class="modal__content">
+                <p>
+                    Are you sure you want to increase the licenses from
+                    <b><span id="current_license_count_holder"></span></b> to
+                    <b><span id="new_license_count_holder"></span></b>?
+                </p>
+                <p>
+                    You would be charged for the additional licenses.
+                </p>
+            </main>
+            <footer class="modal__footer">
+                <button class="modal__btn dialog_exit_button" aria-label="{{ '(Close this dialog window)' }}" data-micromodal-close>{{ _('Cancel') }}</button>
+                <button class="modal__btn dialog_submit_button">
+                    <span>{{ _('Confirm') }}</span>
+                </button>
+            </footer>
+        </div>
     </div>
 </div>
 {% endblock %}

web/src/billing/billing.ts

@@ -1,5 +1,7 @@
 import $ from "jquery";
 
+import * as portico_modals from "../portico/portico_modals";
+
 import * as helpers from "./helpers";
 
 export function create_update_license_request(): void {
@@ -40,13 +42,14 @@ export function initialize(): void {
         if (new_licenses > current_licenses) {
             $("#new_license_count_holder").text(new_licenses);
             $("#current_license_count_holder").text(current_licenses);
-            $("#confirm-licenses-modal").modal("show");
+            portico_modals.open_modal("confirm-licenses-modal");
         } else {
             create_update_license_request();
         }
     });
 
-    $("#confirm-license-update-button").on("click", () => {
+    $("#confirm-licenses-modal .dialog_submit_button").on("click", () => {
+        portico_modals.close_modal("confirm-licenses-modal");
         create_update_license_request();
     });
 

web/styles/portico/billing.css

@@ -423,3 +423,10 @@ input[name="licenses"] {
         width: 100%;
     }
 }
+
+#confirm-licenses-modal .dialog_submit_button:active {
+    /* This is needed to avoid button background changing
+    when clicking on it due to "button:active" CSS in
+    landing_page.css. */
+    background-color: hsl(240deg 96% 68%);
+}

web/tests/billing.test.js

@@ -18,6 +18,7 @@ const dom = new JSDOM(template, {pretendToBeVisual: true});
 const document = dom.window.document;
 const location = set_global("location", {});
 
+const portico_modals = mock_esm("../src/portico/portico_modals", {});
 const helpers = mock_esm("../src/billing/helpers", {
     set_tab() {},
     set_sponsorship_form() {},
@@ -109,18 +110,12 @@ run_test("licensechange", ({override}) => {
 
     $.get_initialize_function()();
 
-    const confirm_license_update_click_handler = $("#confirm-license-update-button").get_on_handler(
-        "click",
-    );
-    confirm_license_update_click_handler({preventDefault() {}});
-    assert.ok(create_ajax_request_called);
-
     let confirm_license_modal_shown = false;
     override(helpers, "is_valid_input", () => true);
-    $("#confirm-licenses-modal").modal = (action) => {
-        assert.equal(action, "show");
+    override(portico_modals, "open_modal", (modal_id) => {
+        assert.equal(modal_id, "confirm-licenses-modal");
         confirm_license_modal_shown = true;
-    };
+    });
     $("#licensechange-input-section").data = (key) => {
         assert.equal(key, "licenses");
         return 20;
@@ -139,6 +134,17 @@ run_test("licensechange", ({override}) => {
     assert.ok(!create_ajax_request_called);
     assert.ok(confirm_license_modal_shown);
 
+    override(portico_modals, "close_modal", (modal_id) => {
+        assert.equal(modal_id, "confirm-licenses-modal");
+        confirm_license_modal_shown = false;
+    });
+
+    const confirm_license_update_click_handler = $(
+        "#confirm-licenses-modal .dialog_submit_button",
+    ).get_on_handler("click");
+    confirm_license_update_click_handler({preventDefault() {}});
+    assert.ok(create_ajax_request_called);
+
     override(helpers, "is_valid_input", () => false);
     const event = {
         /* istanbul ignore next */