From 8710feb5ddf86af6dd3396aabd26fa2802ab9119 Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Thu, 28 Sep 2023 16:03:10 +0530
Subject: [PATCH] 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 | 46 ++++++++++++++++++--------------
 web/src/billing/billing.ts       |  7 +++--
 web/styles/portico/billing.css   |  7 +++++
 web/tests/billing.test.js        | 24 ++++++++++-------
 4 files changed, 53 insertions(+), 31 deletions(-)

diff --git a/templates/corporate/billing.html b/templates/corporate/billing.html
index 89f1afce60..54c1b592c6 100644
--- a/templates/corporate/billing.html
+++ b/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 %}
diff --git a/web/src/billing/billing.ts b/web/src/billing/billing.ts
index 4c0a6ed4b4..e9a0f57ff9 100644
--- a/web/src/billing/billing.ts
+++ b/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();
     });
 
diff --git a/web/styles/portico/billing.css b/web/styles/portico/billing.css
index de842e960a..eb00d1eb99 100644
--- a/web/styles/portico/billing.css
+++ b/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%);
+}
diff --git a/web/tests/billing.test.js b/web/tests/billing.test.js
index 3102480043..39558400f6 100644
--- a/web/tests/billing.test.js
+++ b/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 */