From e72df84396b46e490ca6c3b4f7c86b58803923f2 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Wed, 8 Nov 2023 06:56:40 +0000
Subject: [PATCH] billing: Change formatting for showing card info.

---
 templates/corporate/billing.html | 28 ++++++++++++----------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/templates/corporate/billing.html b/templates/corporate/billing.html
index efa9694bf9..35aff9ea82 100644
--- a/templates/corporate/billing.html
+++ b/templates/corporate/billing.html
@@ -102,23 +102,19 @@
                     </div>
                     <div id="payment-method">
                         <div id="cardchange-error" class="alert alert-danger"></div>
-                        <div id="cardchange-input-section">
-                            <form id="cardchange-form">
-                                <p>Billing email: <strong>{{ stripe_email }}</strong></p>
-                                <p>Current payment method: <strong>{{ payment_method }}</strong></p>
-                                {% if charge_automatically %}
-                                <button class="btn-info" id="update-card-button" class="stripe-button-el">Update card</button>
-                                {% endif %}
-                            </form>
-                        </div>
-                        <div id="cardchange-loading">
-                            <div class="zulip-loading-logo">
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 773.12 773.12">
-                                    <circle cx="386.56" cy="386.56" r="386.56"/>
-                                    <path d="M566.66 527.25c0 33.03-24.23 60.05-53.84 60.05H260.29c-29.61 0-53.84-27.02-53.84-60.05 0-20.22 9.09-38.2 22.93-49.09l134.37-120c2.5-2.14 5.74 1.31 3.94 4.19l-49.29 98.69c-1.38 2.76.41 6.16 3.25 6.16h191.18c29.61 0 53.83 27.03 53.83 60.05zm0-281.39c0 20.22-9.09 38.2-22.93 49.09l-134.37 120c-2.5 2.14-5.74-1.31-3.94-4.19l49.29-98.69c1.38-2.76-.41-6.16-3.25-6.16H260.29c-29.61 0-53.84-27.02-53.84-60.05s24.23-60.05 53.84-60.05h252.54c29.61 0 53.83 27.02 53.83 60.05z"/>
-                                </svg>
+                        <div class="input-box billing-page-field no-validation">
+                            <label for="customer-payment-method" class="inline-block label-title">Payment method</label>
+                            <div id="customer-payment-method" class="">
+                                {{ payment_method }}
                             </div>
-                            <div id="cardchange_loading_indicator"></div>
+                            {% if charge_automatically %}
+                            <div class="user-stripe-card-update">
+                                <button class="user-stripe-card-update-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>
+                            </div>
+                            {% endif %}
                         </div>
                         <div id="cardchange-success" class="alert alert-success">
                             Redirecting to Stripe checkout page for updating Card details.