zulip/templates/corporate/upgrade.html

{% extends "zerver/portico.html" %}

{% block page_params %}
{# Insert parameters, which have been encoded with JSONEncoderForHTML. #}
<script>
    {% autoescape off %}
    var page_params = {{ page_params }};
    {% endautoescape %}
</script>
{% endblock %}

{% block customhead %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{ render_bundle('landing-page') }}
{{ render_bundle('billing') }}
{% endblock %}

{% block content %}

<div class="app portico-page">

    {% include 'zerver/billing_nav.html' %}

    {{ render_bundle('translations') }}

    <div class="portico-landing billing-upgrade-page">
        <div class="hero small-hero"></div>

        <div class="page-content">
            <div class="main">
                <h1>{% trans %}Upgrade to {{ plan }}{% endtrans %}</h1>
                {% if error_message %}
                <div class="alert alert-danger" id="upgrade-error-message-box">
                    {{ error_message }}
                </div>
                {% endif %}

                <ul class="nav nav-tabs" id="upgrade-tabs">
                    <li class="active"><a data-toggle="tab" href="#autopay">Pay automatically</a></li>
                    <li><a data-toggle="tab" href="#invoice">Pay by invoice</a></li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane active" id="autopay">
                        <form method="post">
                            {{ csrf_input }}
                            <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">
                            <div class="payment-schedule">
                                <h3>{{ _("Payment schedule") }}</h3>
                                <label>
                                    <input type="radio" name="plan" value="{{ nickname_annual }}" checked />
                                    <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>
                                <label>
                                    <input type="radio" name="plan" value="{{ nickname_monthly }}" />
                                    <div class="box">
                                        <div class="schedule-time">{{ _("Pay monthly") }}</div>
                                        <div class="schedule-amount">$<span id="autopay_monthly_price"></span>/user/month</div>
                                    </div>
                                </label>
                            </div>
                            <p>
                                You&rsquo;ll initially be charged
                                <b>$<span id="charged_amount"></span></b>
                                for <b>{{ seat_count }}</b> users. We’ll automatically charge you
                                when new users are added, and give you credit when users are deactivated.
                            </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"
                                    data-name="Zulip"
                                    data-description="Zulip Cloud Standard"
                                    data-locale="auto"
                                    data-zip-code="true"
                                    data-billing-address="true"
                                    data-panel-label="Make payment"
                                    data-email="{{ email }}"
                                    data-label="{{ _('Add card') }}"
                                    data-allow-remember-me="false"
                                    >
                            </script>
                        </form>
                    </div>
                    <div class="tab-pane" id="invoice">
                        <form method="post">
                            {{ csrf_input }}
                            <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="send_invoice">
                            <div class="payment-schedule">
                                <h3>{{ _("Payment schedule") }}</h3>
                                <label>
                                    <input type="radio" name="plan" value="{{ nickname_annual }}" checked />
                                    <div class="box">
                                        <div class="schedule-time annually">{{ _("Pay annually") }}</div>
                                        <div class="schedule-amount">
                                            $<span id="invoice_annual_price_per_month"></span>/user/month
                                            <div class="schedule-amount-2">
                                                ($<span id="invoice_annual_price"></span>/user/year)
                                            </div>
                                        </div>
                                    </div>
                                </label>
                            </div>
                            <p>
                                Tell us ahead of time how many users you're planning for. We'll email you an
                                invoice in 1-2 hours. Invoices can be paid by ACH transfer or credit card.
                            </p>
                            <h4>Number of users (minimum {{ min_seat_count_for_invoice }})</h4>
                            <input type="text" id="invoiced_seat_count" name="invoiced_seat_count" value=""/><br>
                            <button type="submit" class="stripe-button-el invoice-button">Buy Standard</button>
                        </form>
                    </div>
                </div>
                <div class="support-link">
                    <p>
                        We're happy to help!
                        Contact <a href="mailto:support@zulipchat.com">support@zulipchat.com</a>
                        for any billing-related questions.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}