From e185e915812fb122cd714b9307f3948e9783286a Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Wed, 8 Nov 2023 14:59:03 +0000
Subject: [PATCH] billing: Redirect to stripe card change page on clicking
 change card.

---
 templates/corporate/billing.html      | 2 +-
 templates/corporate/event_status.html | 3 ---
 web/src/billing/billing.ts            | 7 ++++++-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/templates/corporate/billing.html b/templates/corporate/billing.html
index ee1db7243a..8ca84f77f4 100644
--- a/templates/corporate/billing.html
+++ b/templates/corporate/billing.html
@@ -102,7 +102,7 @@
                 </div>
                 {% if charge_automatically %}
                 <div class="user-stripe-card-update input-box billing-page-field no-validation">
-                    <button class="user-stripe-card-update-button">
+                    <button class="user-stripe-card-update-button" id="update-card-button">
                         <span class="billing-button-text">Update card</span>
                         <object class="loader billing-button-loader" type="image/svg+xml" data="{{ static('images/loading/loader-white.svg') }}"></object>
                     </button>
diff --git a/templates/corporate/event_status.html b/templates/corporate/event_status.html
index 54c0a09a00..d5e1279bb9 100644
--- a/templates/corporate/event_status.html
+++ b/templates/corporate/event_status.html
@@ -12,9 +12,6 @@
 {% block content %}
 
 <div class="app portico-page">
-
-    {% include 'zerver/billing_nav.html' %}
-
     <div class="billing-upgrade-page">
         <div class="hero small-hero"></div>
 
diff --git a/web/src/billing/billing.ts b/web/src/billing/billing.ts
index b3bdfb8ce2..a36a5761d2 100644
--- a/web/src/billing/billing.ts
+++ b/web/src/billing/billing.ts
@@ -36,6 +36,8 @@ export function initialize(): void {
     helpers.set_tab("billing");
 
     $("#update-card-button").on("click", (e) => {
+        $("#update-card-button .billing-button-text").text("");
+        $("#update-card-button .loader").show();
         helpers.create_ajax_request(
             "/json/billing/session/start_card_update_session",
             "cardchange",
@@ -44,7 +46,10 @@ export function initialize(): void {
             (response) => {
                 const response_data = helpers.stripe_session_url_schema.parse(response);
                 window.location.replace(response_data.stripe_session_url);
-            },
+            }, () => {
+                $("#update-card-button .loader").hide();
+                $("#update-card-button .billing-button-text").text("Update card");
+            }
         );
         e.preventDefault();
     });