From df703f847ceb7ba06528dbfd80f20fca5686b26d Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Thu, 9 Nov 2023 14:15:19 +0000
Subject: [PATCH] billing: Fix free trial billing page end plan button not
 working.

---
 templates/corporate/billing.html | 30 +++++++++++++++++++++++++-----
 web/src/billing/billing.ts       | 22 +++++++++++++---------
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/templates/corporate/billing.html b/templates/corporate/billing.html
index 1bdea3acb7..ea923ab21d 100644
--- a/templates/corporate/billing.html
+++ b/templates/corporate/billing.html
@@ -144,11 +144,8 @@
                 <div id="planchange-error" class="alert alert-danger"></div>
                 <div id="planchange-input-section">
                     {% if free_trial %}
-                        <div class="end-free-trail">
-                            <p>
-                                End Free Trial and downgrade plan to <strong>Zulip Free</strong>.
-                            </p>
-                            <button class="end-free-trail-button">
+                        <div class="end-free-trial plan-toggle-action input-box billing-page-field no-validation" id="end-free-trial">
+                            <button class="end-free-trial-button plan-toggle-action-button">
                                 <span class="billing-button-text">End free trial</span>
                                 <object class="loader billing-button-loader" type="image/svg+xml" data="{{ static('images/loading/loader-white.svg') }}"></object>
                             </button>
@@ -207,6 +204,29 @@
         {% endif %}
     </div>
 </div>
+<div id="confirm-end-free-trial" 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 end free trial
+                </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 end free trial and downgrade plan to <strong>Zulip Free</strong>?
+                </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>
 <div id="confirm-licenses-modal-increase" class="micromodal" aria-hidden="true">
     <div class="modal__overlay" tabindex="-1">
         <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="dialog_title">
diff --git a/web/src/billing/billing.ts b/web/src/billing/billing.ts
index c52eda0e22..092b9e8250 100644
--- a/web/src/billing/billing.ts
+++ b/web/src/billing/billing.ts
@@ -166,21 +166,25 @@ export function initialize(): void {
         },
     );
 
-    $("#confirm-cancel-subscription-modal .dialog_submit_button, #reactivate-subscription").on(
-        "click",
-        (e) => {
-            helpers.create_ajax_request("/json/billing/plan", "planchange", [], "PATCH", () =>
-                window.location.replace("/billing/"),
-            );
-            e.preventDefault();
-        },
-    );
+    $(
+        "#confirm-cancel-subscription-modal .dialog_submit_button, #reactivate-subscription, #confirm-end-free-trial .dialog_submit_button",
+    ).on("click", (e) => {
+        helpers.create_ajax_request("/json/billing/plan", "planchange", [], "PATCH", () =>
+            window.location.replace("/billing/"),
+        );
+        e.preventDefault();
+    });
 
     $("#cancel-subscription").on("click", (e) => {
         e.preventDefault();
         portico_modals.open("confirm-cancel-subscription-modal");
     });
 
+    $("#end-free-trial").on("click", (e) => {
+        e.preventDefault();
+        portico_modals.open("confirm-end-free-trial");
+    });
+
     $("#current-manual-license-count").on("keyup", () => {
         const {new_current_manual_license_count, old_current_manual_license_count} =
             get_old_and_new_license_count_for_current_cycle();