From 03254bea5be817db7827fd296dc22a1c5b47bf4d Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Wed, 10 Jan 2024 10:23:23 +0000
Subject: [PATCH] billing: Change how flat discount on billing/upgrade page is
 displayed.

---
 templates/corporate/billing.html | 10 +++++-----
 templates/corporate/upgrade.html | 10 +++++-----
 web/styles/portico/billing.css   |  9 +++++++++
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/templates/corporate/billing.html b/templates/corporate/billing.html
index 7dfd89a820..14b6c6fcb3 100644
--- a/templates/corporate/billing.html
+++ b/templates/corporate/billing.html
@@ -241,10 +241,6 @@
                                 <label for="expected-charge">Expected next charge</label>
                                 {% if not fixed_price %}
                                 <div class="not-editable-realm-field">
-                                    {% if using_min_licenses_for_plan %}
-                                    <i>Minimum purchase for this plan: {{ min_licenses_for_plan }} licenses</i>
-                                    <br />
-                                    {% endif %}
                                     ${{ pre_discount_renewal_cents }} (${{ price_per_license }} x {{ licenses_at_next_renewal }} {{ 'user' if licenses_at_next_renewal == 1 else 'users' }} x
                                     {% if switch_to_annual_at_end_of_cycle %}
                                         12 months
@@ -255,7 +251,8 @@
                                     {%- endif -%})
                                     {% if discounted_months_left != 0 %}
                                     <br />
-                                    Discount: ${{ flat_discount }}/month off <i class="billing-page-discount">({{ discounted_months_left }} {{ "month" if discounted_months_left == 1 else "months" }} remaining)</i>
+                                    <span class="flat-discount-minus-sign">−</span>
+                                    <span class="flat-discount-separator">${{ flat_discount }}/month off</span> <i class="billing-page-discount">({{ discounted_months_left }} {{ "month" if discounted_months_left == 1 else "months" }} remaining)</i>
                                     {% endif %}
                                     {% if discount_percent %}
                                     <br />
@@ -265,6 +262,9 @@
                                 {% endif %}
                             </div>
                             <h1>${{ renewal_amount }}</h1>
+                            {% if not fixed_price and using_min_licenses_for_plan %}
+                            <i>Minimum purchase for this plan: {{ min_licenses_for_plan }} licenses</i>
+                            {% endif %}
                             {% endif %}
                         {% else %}
                             Your plan ends on <strong>{{ renewal_date }}</strong>, and does not renew.
diff --git a/templates/corporate/upgrade.html b/templates/corporate/upgrade.html
index cd838e0aff..5805f18d71 100644
--- a/templates/corporate/upgrade.html
+++ b/templates/corporate/upgrade.html
@@ -125,10 +125,6 @@
                             </span>
                         </label>
                         <div id="due-today" class="not-editable-realm-field">
-                            {% if not manual_license_management and using_min_licenses_for_plan %}
-                            <i>Minimum purchase for this plan: {{ min_licenses_for_plan }} licenses</i>
-                            <br />
-                            {% endif %}
                             $<span id="pre-discount-renewal-cents"></span>
                             ($<span class="due-today-unit-price"></span> x
                             {% if not manual_license_management %}
@@ -146,13 +142,17 @@
                             {% endif %}
                             {% if page_params.flat_discounted_months > 0 %}
                             <br/>
-                            Discount: $<span class="flat-discounted-price"></span>/month off <i class="billing-page-discount">({{ page_params.flat_discounted_months }} {{ "month" if discounted_months_left == 1 else "months" }} remaining)</i>
+                            <span class="flat-discount-minus-sign">−</span>
+                            <span class="flat-discount-separator">$<span class="flat-discounted-price"></span>/month off</span> <i class="billing-page-discount">({{ page_params.flat_discounted_months }} {{ "month" if page_params.flat_discounted_months == 1 else "months" }} remaining)</i>
                             {% endif %}
                             <h1>$<span class="due-today-price"></span></h1>
                             {% if free_trial_days %}
                             <i>Your actual bill will depend on the number of
                             active users in your organization.</i>
                             {% endif %}
+                            {% if not manual_license_management and using_min_licenses_for_plan %}
+                                <i>Minimum purchase for this plan: {{ min_licenses_for_plan }} licenses</i>
+                            {% endif %}
                         </div>
                     </div>
 
diff --git a/web/styles/portico/billing.css b/web/styles/portico/billing.css
index caadff5968..6c6cb611d6 100644
--- a/web/styles/portico/billing.css
+++ b/web/styles/portico/billing.css
@@ -738,3 +738,12 @@ input[name="licenses"] {
     #account-deactivated-success-page-top-message {
     margin-top: 10px;
 }
+
+.flat-discount-minus-sign {
+    position: absolute;
+    left: -10px;
+}
+
+.flat-discount-separator {
+    border-bottom: 1px solid hsl(0deg 0% 0%);
+}