From f273229b01d0761a69c21b7ef71be3e2f46c2a7e Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Fri, 10 Nov 2023 12:47:56 +0000
Subject: [PATCH] upgrade: Add payment button and info style with fake text.

---
 templates/corporate/upgrade.html | 32 +++++++++++++++-----------------
 web/styles/portico/billing.css   | 17 +++++++++++++++++
 2 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/templates/corporate/upgrade.html b/templates/corporate/upgrade.html
index 970e63c8a1..578d838537 100644
--- a/templates/corporate/upgrade.html
+++ b/templates/corporate/upgrade.html
@@ -53,7 +53,7 @@
                                 <hr />
                                 <h2>Zulip Cloud Standard free trial</h2>
                                 {% endif %}
-                                <div class="payment-schedule input-box">
+                                <div class="input-box upgrade-page-field no-validation">
                                     <div id="autopay-error" class="alert alert-danger"></div>
                                     {% if free_trial_days %}
                                     <p>
@@ -68,6 +68,15 @@
                                     <label for="payment-schedule-select">Payment schedule</label>
                                 </div>
 
+                                <div class="input-box upgrade-page-field no-validation">
+                                    <label for="due_today" class="inline-block label-title">Due today</label>
+                                    <div id="due_today" class="not-editable-realm-field">
+                                        $6.67 x 10 users x 1 month
+
+                                        <h1>$66.70</h1>
+                                    </div>
+                                </div>
+
                                 {% if not manual_license_management %}
                                 <div id="license-automatic-section">
                                     <p>
@@ -107,27 +116,16 @@
                                 </div>
                                 {% endif %}
                                 <!-- Disabled buttons do not fire any events, so we need a container div that isn't disabled for tippyjs to work -->
-                                <div class="upgrade-button-container" {% if is_demo_organization %}data-tippy-content="{% trans %}Convert demo organization before upgrading.{% endtrans %}"{% endif %}>
-                                    <button id="add-card-button" class="stripe-button-el invoice-button" {% if is_demo_organization %}disabled{% endif %}>
-                                        <span id="add-card-button-span">
-                                            Pay now
+                                <div class="upgrade-button-container input-box upgrade-page-field" {% if is_demo_organization %}data-tippy-content="{% trans %}Convert demo organization before upgrading.{% endtrans %}"{% endif %}>
+                                    <button id="org-upgrade-button{% if is_demo_organization %} permanent-disabled{% endif %}">
+                                        <span id="org-upgrade-button-span">
+                                            Purchase Zulip Cloud Standard
                                         </span>
+                                        <object class="loader upgrade-button-loader" type="image/svg+xml" data="{{ static('images/loading/loader-white.svg') }}"></object>
                                     </button>
                                 </div>
                             </form>
                         </div>
-                        <div id="autopay-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>
-                            <div id="autopay_loading_indicator"></div>
-                        </div>
-                        <div id="autopay-success" class="alert alert-info">
-                            Redirecting to Stripe Checkout...
-                        </div>
                     </div>
 
                     <div id="invoice">
diff --git a/web/styles/portico/billing.css b/web/styles/portico/billing.css
index bd06c03ded..16d8463415 100644
--- a/web/styles/portico/billing.css
+++ b/web/styles/portico/billing.css
@@ -475,6 +475,23 @@ input[name="licenses"] {
     background-color: hsl(0deg 70% 40%);
 }
 
+#org-upgrade-button,
+#upgrade-add-card-button {
+    margin: 0;
+    width: 100%;
+}
+
+#org-upgrade-button {
+    &:disabled,
+    .permanent-disabled {
+        color: hsl(0deg 0% 80%);
+
+        &:hover {
+            cursor: not-allowed;
+        }
+    }
+}
+
 #billing-page-details .user-stripe-card-update .user-stripe-card-update-button {
     margin: 0;
 }