zulip/templates/corporate/billing/upgrade.html

257 lines
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% extends "zerver/portico.html" %}
{% set entrypoint = "upgrade" %}
{% block title %}
<title>{{ _("Upgrade") }} | Zulip</title>
{% endblock %}
{% block portico_content %}
<div id="upgrade-page" class="register-account flex full-page">
<div class="center-block new-style">
{% if is_self_hosting_management_page and is_sponsorship_pending %}
<div class="alert alert-success billing-page-success" id="upgrade-page-sponsorship-pending-message-top">
This organization has requested sponsorship for a
{% if sponsorship_plan_name == "Business" %}
discounted
{% endif %}
<a href="{{ page_params.billing_base_url }}/plans/">{{ sponsorship_plan_name }}</a> plan.<br/><a href="mailto:support@zulip.com">Contact Zulip support</a> with any questions or updates.
</div>
{% endif %}
{% if success_message %}
<div class="alert alert-success billing-page-success" id="upgrade-success-message-top">
{{ success_message }}
</div>
{% endif %}
<div class="pitch">
<h1>
{% if free_trial_days %}
Start free trial of
{% else %}
Upgrade {{ customer_name }} to
{% endif %}
<a href="{{ page_params.billing_base_url }}/plans/">
{{ plan }}
</a>
</h1>
</div>
<div class="white-box">
<div id="upgrade-page-details">
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}" />
<form id="autopay-form">
<input type="hidden" name="seat_count" value="{{ seat_count }}" />
<input type="hidden" name="signed_seat_count" value="{{ signed_seat_count }}" />
<input type="hidden" name="salt" value="{{ salt }}" />
<input type="hidden" name="billing_modality" value="charge_automatically" />
<input type="hidden" name="tier" value="{{ page_params.tier }}" />
<div id="free-trial-top-banner" class="input-box upgrade-page-field">
{% if free_trial_days %}
<div class="not-editable-realm-field">
Add a credit card to start your <b>{{ free_trial_days }}-day free trial</b> of
{{ plan }}. Your card will not be charged if you
cancel in the first {{ free_trial_days }} days.
</div>
{% endif %}
{% if is_demo_organization %}
<div class="demo-organization-warning">
Demo organizations cannot be directly upgraded to a paid plan. Please start by
<a href="/help/demo-organizations#convert-a-demo-organization-to-a-permanent-organization">
converting your demo organization
</a>
to a permanent organization.
</div>
{% endif %}
</div>
{% if free_trial_days %}
<input type="hidden" name="schedule" value="monthly" />
{% else %}
<div class="input-box upgrade-page-field no-validation">
<select name="schedule" id="payment-schedule-select">
{% if fixed_price_plan %}
<option value="monthly">Pay monthly</option>
<option value="annual">Pay annually</option>
{% else %}
<option value="monthly" id="autopay_monthly_price"></option>
<option value="annual" id="autopay_annual_price_per_month"></option>
{% endif %}
</select>
<label for="payment-schedule-select">Payment schedule</label>
</div>
{% endif %}
{% if remote_server_legacy_plan_end_date %}
<div class="input-box upgrade-page-field no-validation">
<select name="remote_server_plan_start_date" id="remote-server-plan-start-date-select">
<option value="billing_cycle_end_date">{{ remote_server_legacy_plan_end_date }}</option>
<option value="today">Today</option>
</select>
<label for="remote-server-plan-start-date-select">Plan start date</label>
</div>
{% endif %}
{% if manual_license_management %}
<div class="input-box upgrade-page-field" id="upgrade-manual-license-count-wrapper">
<label for="licenses" class="inline-block label-title">Number of licenses {% if not exempt_from_license_number_check %}(minimum {{ seat_count }}){% endif %}</label>
<input type="number" name="licenses" autocomplete="off" {% if not exempt_from_license_number_check %}min="{{ seat_count }}" value="{{ seat_count }}"{% endif %} autocomplete="off" id="manual_license_count" required/>
<div id="upgrade-licenses-change-error" class="alert alert-danger upgrade-page-error"></div>
</div>
<input type="hidden" name="license_management" value="manual" />
{% else %}
<input type="hidden" name="license_management" value="automatic" />
{% endif %}
{% if remote_server_legacy_plan_end_date %}
<div class="input-box upgrade-page-field no-validation" id="due-today-for-future-update-wrapper">
<label for="due-today-for-future-update" class="inline-block label-title">
Due today
</label>
<div id="due-today-for-future-update" class="not-editable-realm-field">
<h1>$0</h1>
</div>
</div>
{% endif %}
<div class="input-box upgrade-page-field no-validation">
<label for="due-today" class="inline-block label-title">
{% if remote_server_legacy_plan_end_date %}
<span id="due-today-remote-server-title">
Due {{ remote_server_legacy_plan_end_date }}
</span>
{% endif %}
<span id="due-today-title">
Due
{% if free_trial_days %}
on {{ free_trial_end_date }}
{% else %}
today
{% endif %}
</span>
</label>
<div id="due-today" class="not-editable-realm-field">
{% if fixed_price_plan %}
<h1>$<span class="due-today-price"></span></h1>
{% else %}
$<span id="pre-discount-renewal-cents"></span>
($<span class="due-today-unit-price"></span> x
{% if not manual_license_management %}
{{ seat_count }}
{% else %}
<span class="due-today-license-count">{{ seat_count }}</span>
{% endif %}
<span class="due-today-license-count-user-plural">
{{ 'user' if seat_count == 1 else 'users' }}
</span> x
<span class="due-today-duration"></span>)
{% if discount_percent %}
<br/>
<i class="billing-page-discount">Includes: {{ discount_percent }}% discount</i>
{% endif %}
{% if page_params.flat_discounted_months > 0 %}
<br/>
<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 %}
{% endif %}
</div>
</div>
{% if free_trial_days %}
{% elif not manual_license_management %}
<div id="license-automatic-section" class="input-box upgrade-page-field license-management-section">
<p class="not-editable-realm-field">
{% if fixed_price_plan %}
This is a fixed-price plan.
{% endif %}
Your subscription will renew automatically.
{% if not fixed_price_plan %}
Your bill will vary based on the number of active users in your organization. You can also
<a href="{{ page_params.billing_base_url }}/upgrade/?manual_license_management=true&tier={{ page_params.tier }}">purchase a fixed number of licenses</a> instead. See
<a target="_blank" href="https://zulip.com/help/zulip-cloud-billing">here</a> for details.
{% endif %}
</p>
<input type="hidden" name="licenses" id="automatic_license_count" value="{{ seat_count }}" />
</div>
{% else %}
<div id="license-manual-section" class="input-box upgrade-page-field license-management-section">
<p class="not-editable-realm-field">
Your subscription will renew automatically. You will be able to manage the number of licenses on
your organization's billing page. You can also
<a href="{{ page_params.billing_base_url }}/upgrade/?tier={{ page_params.tier }}">choose automatic license management</a> instead. See
<a href="https://zulip.com/help/zulip-cloud-billing">here</a> for details.
</p>
</div>
{% endif %}
{% if not is_demo_organization %}
<div {% if payment_method %} id="upgrade-payment-info"{% endif %}>
{% if payment_method %}
<div class="input-box upgrade-page-field no-validation" id="upgrade-payment-menthod-wrapper">
<label for="customer-payment-method-for-upgrade" class="inline-block label-title">Payment method</label>
<div id="customer-payment-method-for-upgrade" class="not-editable-realm-field">
{{ payment_method }}
</div>
</div>
{% endif %}
<div class="upgrade-add-card-container input-box upgrade-page-field">
<button id="upgrade-add-card-button" {% if payment_method %}class="update-card-button"{% endif %}>
<span id="upgrade-add-card-button-text">
{% if payment_method %}
Update card
{% else %}
Add card
{% endif %}
</span>
<object class="loader upgrade-button-loader" type="image/svg+xml" data="{{ static('images/loading/loader-white.svg') }}"></object>
</button>
</div>
<div id="upgrade-cardchange-error" class="alert alert-danger upgrade-page-error"></div>
</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 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 %}" {% if not payment_method %}disabled{% endif %}>
<span id="org-upgrade-button-text">
{% if remote_server_legacy_plan_end_date %}
<span id="org-future-upgrade-button-text-remote-server">
Schedule upgrade to {{ plan }}
</span>
{% endif %}
<span id="org-today-upgrade-button-text">
{% if free_trial_days %}
Start {{ free_trial_days }}-day free trial
{% else %}
Purchase {{ plan }}
{% endif %}
</span>
</span>
<object class="loader upgrade-button-loader" type="image/svg+xml" data="{{ static('images/loading/loader-white.svg') }}"></object>
</button>
<div id="autopay-error" class="alert alert-danger upgrade-page-error hide"></div>
</div>
</form>
<form id="upgrade-cardchange-form">
{% if manual_license_management %}
<input type="hidden" name="manual_license_management" value="true" />
{% endif %}
<input type="hidden" name="tier" value="{{ page_params.tier }}" />
</form>
<div class="input-box upgrade-page-field">
<div class="support-link not-editable-realm-field">
To pay by invoice or for any other questions, contact <a href="mailto:sales@zulip.com">sales@zulip.com</a>.
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}