billing: Update the charged amount when user changes plan in upgrade page.

templates/zilencer/upgrade.html

@@ -31,26 +31,26 @@
                     <div class="payment-schedule">
                         <h3>{{ _("Payment schedule") }}</h3>
                         <label>
-                            <input type="radio" name="plan" value="{{ nickname_annual }}" checked />
+                            <input type="radio" name="plan" value="{{ nickname_annual }}" data-amount="{{ cloud_annual_price }}" checked />
                             <div class="box">
                                 <div class="schedule-time">{{ _("Pay annually") }}</div>
                                 <div class="schedule-amount">
-                                    $6.67/user/month
+                                    ${{ cloud_annual_price_per_month }}/user/month
                                     <div class="schedule-amount-2">
-                                        ($80/user/year)
+                                        (${{ cloud_annual_price }}/user/year)
                                     </div>
                                 </div>
                             </div>
                         </label>
                         <label>
-                            <input type="radio" name="plan" value="{{ nickname_monthly }}" />
+                            <input type="radio" name="plan" value="{{ nickname_monthly }}" data-amount="{{ cloud_monthly_price }}" />
                             <div class="box">
                                 <div class="schedule-time">{{ _("Pay monthly") }}</div>
-                                <div class="schedule-amount">$8/user/month</div>
+                                <div class="schedule-amount">${{ cloud_monthly_price }}/user/month</div>
                             </div>
                         </label>
                     </div>
-                    <p>You&rsquo;ll initially be charged <b><span id="charged_amount">XXX</span></b> for <b>{{ seat_count }}</b> users. You&rsquo;ll receive prorated charges and credits as users are added, deactivated, or become inactive.</p>
+                    <p>You&rsquo;ll initially be charged <b>$<span id="charged_amount">{{ cloud_annual_price * seat_count }}</span></b> for <b>{{ seat_count }}</b> users. You&rsquo;ll receive prorated charges and credits as users are added, deactivated, or become inactive.</p>
                     <script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                     data-key="{{ publishable_key }}"
                     data-image="/static/images/logo/zulip-icon-128x128.png"
@@ -65,6 +65,13 @@
                     data-allow-remember-me="false"
                     >
                     </script>
+                    <script>
+                        const seat_count = parseInt($('input[name=seat_count]').val());
+                        $("input[type=radio][name=plan").change(function () {
+                            var charged_amount = parseInt($(this).data("amount")) * seat_count;
+                            $("#charged_amount").html(charged_amount);
+                        });
+                    </script>
                 </form>
                 <p>We can also bill by invoice for annual contracts over $2,000. Contact <a href="mailto:support@zulipchat.com">support@zulipchat.com</a> to pay by invoice or for any other billing questions.</p>
             </div>

zerver/tests/test_templates.py

@@ -198,6 +198,8 @@ class TemplateTestCase(ZulipTestCase):
                          "login_time": "9:33am NewYork, NewYork",
                          },
             api_uri_context={},
+            cloud_annual_price=80,
+            seat_count=8,
         )
 
         context.update(kwargs)

zilencer/views.py

@@ -213,6 +213,9 @@ def initial_upgrade(request: HttpRequest) -> HttpResponse:
         'nickname_monthly': Plan.CLOUD_MONTHLY,
         'nickname_annual': Plan.CLOUD_ANNUAL,
         'error_message': error_message,
+        'cloud_monthly_price': 8,
+        'cloud_annual_price': 80,
+        'cloud_annual_price_per_month': 6.67,
     }  # type: Dict[str, Any]
     response = render(request, 'zilencer/upgrade.html', context=context)
     response['error_description'] = error_description