Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

upgrade: Add a dropdown to select billing cycle.

This commit is contained in:
Aman Agrawal 2023-11-10 11:50:17 +00:00 committed by Tim Abbott
parent 2570f7ce23
commit d3363bab96
2 changed files with 12 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
templates/corporate/upgrade.html
View File

@ -59,34 +59,19 @@
<hr /> <hr />
<h2>Zulip Cloud Standard free trial</h2> <h2>Zulip Cloud Standard free trial</h2>
{% endif %} {% endif %}
<div class="payment-schedule"> <div class="payment-schedule input-box">
<div id="autopay-error" class="alert alert-danger"></div> <div id="autopay-error" class="alert alert-danger"></div>
<h3>{{ _("Payment schedule") }}</h3>
{% if free_trial_days %} {% if free_trial_days %}
<p> <p>
You won't be charged during the free trial. You can also downgrade to You won't be charged during the free trial. You can also downgrade to
Zulip Cloud Free, our forever free plan, at any time. Zulip Cloud Free, our forever free plan, at any time.
</p> </p>
{% endif %} {% endif %}
<label> <select name="payment-schedule" id="payment-schedule-select">
<input type="radio" name="schedule" value="monthly" checked/> <option value="monthly" id="autopay_monthly_price"></option>
<div class="box"> <option value="annually" id="autopay_annual_price_per_month"></option>
<div class="schedule-time">{{ _("Pay monthly") }}</div> </select>
<div class="schedule-amount">$<span id="autopay_monthly_price"></span>/user/month</div> <label for="payment-schedule-select">Payment schedule</label>
</div>
</label>
<label>
<input type="radio" name="schedule" value="annual"/>
<div class="box">
<div class="schedule-time annually">{{ _("Pay annually") }}</div>
<div class="schedule-amount">
$<span id="autopay_annual_price_per_month"></span>/user/month
<div class="schedule-amount-2">
($<span id="autopay_annual_price"></span>/user/year)
</div>
</div>
</div>
</label>
</div> </div>
{% if not manual_license_management %} {% if not manual_license_management %}

9
web/src/billing/upgrade.ts
View File

@ -40,9 +40,12 @@ export const initialize = (): void => {
helpers.update_charged_amount(prices, helpers.schedule_schema.parse(this.value)); helpers.update_charged_amount(prices, helpers.schedule_schema.parse(this.value));
}); });
$("#autopay_annual_price").text(helpers.format_money(prices.annual)); $("#autopay_annual_price_per_month").text(
$("#autopay_annual_price_per_month").text(helpers.format_money(prices.annual / 12)); `Pay annually ($${helpers.format_money(prices.annual / 12)}/user/month)`,
$("#autopay_monthly_price").text(helpers.format_money(prices.monthly)); );
$("#autopay_monthly_price").text(
`Pay monthly ($${helpers.format_money(prices.monthly)}/user/month)`,
);
$("#invoice_annual_price").text(helpers.format_money(prices.annual)); $("#invoice_annual_price").text(helpers.format_money(prices.annual));
$("#invoice_annual_price_per_month").text(helpers.format_money(prices.annual / 12)); $("#invoice_annual_price_per_month").text(helpers.format_money(prices.annual / 12));