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

This commit is contained in:
Vishnu Ks 2018-08-07 19:07:22 +05:30 committed by Rishi Gupta
parent e7374a0852
commit d64ba5d2be
3 changed files with 18 additions and 6 deletions

View File

@ -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>

View File

@ -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)

View File

@ -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