mirror of
https://github.com/zulip/zulip.git
synced 2026-07-09 21:21:47 +08:00
7a0d659f14
Adds HTML title elements to templates that extend either `base.html`, `portico.html` or `portico_signup.html`, and that are not website portico landing pages that will use the `PAGE_TITLE` variable to set the HTML title element (see following commit in series). Also, updates some templates for missing translation tags. As a general rule, we want the title element (and page content) translated. Exceptions that are updated in this commit are templates used in the development environment, analytics templates that are used by staff and templates related to Zephyr.
253 lines
15 KiB
HTML
253 lines
15 KiB
HTML
{% extends "zerver/portico.html" %}
|
|
{% set entrypoint = "billing" %}
|
|
|
|
{% block title %}
|
|
<title>{{ _("Billing") }} | Zulip</title>
|
|
{% endblock %}
|
|
|
|
{% block customhead %}
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="app portico-page">
|
|
|
|
{% include 'zerver/billing_nav.html' %}
|
|
|
|
<div class="portico-landing billing-upgrade-page">
|
|
<div class="hero small-hero"></div>
|
|
|
|
<div class="page-content">
|
|
<div class="main">
|
|
<div class="alert alert-danger" id="error-message-box"></div>
|
|
<h1>{{ _("Billing") }}</h1>
|
|
{% if admin_access and has_active_plan %}
|
|
<ul class="nav nav-tabs" id="billing-tabs">
|
|
<li class="active"><a data-toggle="tab" href="#overview">Overview</a></li>
|
|
<li><a data-toggle="tab" href="#payment-method">Payment method</a></li>
|
|
<li><a data-toggle="tab" href="#settings">Settings</a></li>
|
|
</ul>
|
|
|
|
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}" />
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="overview">
|
|
{% if free_trial %}
|
|
<p>Your current plan is <strong>{{ plan_name }} Free Trial</strong>.</p>
|
|
{% else %}
|
|
<p>Your current plan is <strong>{{ plan_name }}</strong>.</p>
|
|
{% endif %}
|
|
<p>
|
|
You are using <strong>{{ seat_count }} of {{ licenses }} licenses</strong>.
|
|
{% if automanage_licenses %}
|
|
Licenses are automatically managed by Zulip; when you add or deactivate a user, the number of
|
|
licenses will be immediately updated to reflect your new usage.
|
|
{% else %}
|
|
Licenses are manually managed. You will not be able to add new users to your organization once
|
|
you are using all of your licenses.
|
|
{% endif %}
|
|
</p>
|
|
<p>
|
|
{% if renewal_amount %}
|
|
{% if free_trial %}
|
|
Your plan will be upgraded to <strong>{{ plan_name }}</strong> on <strong>{{ renewal_date }}</strong> for
|
|
<strong>${{ renewal_amount }}</strong>.
|
|
{% elif downgrade_at_end_of_cycle %}
|
|
Your plan will be downgraded to <strong>Zulip Limited</strong> on <strong>{{ renewal_date }}</strong>.
|
|
{% elif switch_to_annual_at_end_of_cycle %}
|
|
Your plan will be switched from monthly to annual billing on <strong>{{ renewal_date }}</strong>.
|
|
{% else %}
|
|
Your plan will renew on <strong>{{ renewal_date }}</strong> for
|
|
<strong>${{ renewal_amount }}</strong>.
|
|
{% endif %}
|
|
{% else %}
|
|
Your plan ends on <strong>{{ renewal_date }}</strong>, and does not renew.
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
<div class="tab-pane" id="payment-method">
|
|
<div id="cardchange-error" class="alert alert-danger"></div>
|
|
<div id="cardchange-input-section">
|
|
<form id="cardchange-form">
|
|
<p>Billing email: <strong>{{ stripe_email }}</strong></p>
|
|
<p>Current payment method: <strong>{{ payment_method }}</strong></p>
|
|
{% if charge_automatically %}
|
|
<button class="btn-info" id="update-card-button" class="stripe-button-el">Update card</button>
|
|
{% endif %}
|
|
</form>
|
|
</div>
|
|
<div id="cardchange-loading">
|
|
<div class="zulip-loading-logo">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 773.12 773.12">
|
|
<circle cx="386.56" cy="386.56" r="386.56"/>
|
|
<path d="M566.66 527.25c0 33.03-24.23 60.05-53.84 60.05H260.29c-29.61 0-53.84-27.02-53.84-60.05 0-20.22 9.09-38.2 22.93-49.09l134.37-120c2.5-2.14 5.74 1.31 3.94 4.19l-49.29 98.69c-1.38 2.76.41 6.16 3.25 6.16h191.18c29.61 0 53.83 27.03 53.83 60.05zm0-281.39c0 20.22-9.09 38.2-22.93 49.09l-134.37 120c-2.5 2.14-5.74-1.31-3.94-4.19l49.29-98.69c1.38-2.76-.41-6.16-3.25-6.16H260.29c-29.61 0-53.84-27.02-53.84-60.05s24.23-60.05 53.84-60.05h252.54c29.61 0 53.83 27.02 53.83 60.05z"/>
|
|
</svg>
|
|
</div>
|
|
<div id="cardchange_loading_indicator"></div>
|
|
</div>
|
|
<div id="cardchange-success" class="alert alert-success">
|
|
Redirecting to Stripe checkout page for updating Card details.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="settings">
|
|
{% if not automanage_licenses and not downgrade_at_end_of_cycle %}
|
|
<div id="licensechange-error" class="alert alert-danger"></div>
|
|
<div id="licensechange-input-section" data-licenses="{{ licenses }}">
|
|
<form id="licensechange-form">
|
|
<h3>Licenses</h3>
|
|
<h4>Number of licenses in the current billing period</h4>
|
|
<p>
|
|
You can only increase the number of licenses.
|
|
</p>
|
|
<input min="{{ licenses }}" type="number" name="licenses" value="{{ licenses }}" autocomplete="off" id="new_licenses_input" required/>
|
|
<br />
|
|
<button class="btn-info" id="update-licenses-button">Update</button>
|
|
<br />
|
|
<br />
|
|
<h4>Licenses in next renewal</h4>
|
|
<p>
|
|
You can increase or decrease the number of licenses.
|
|
</p>
|
|
<input type="number" name="licenses_at_next_renewal" value="{{ licenses_at_next_renewal }}" autocomplete="off" id="licenses_at_next_renewal_input"/>
|
|
<br />
|
|
<button class="btn-info" id="update-licenses-at-next-renewal-button">Update</button>
|
|
</form>
|
|
</div>
|
|
<div id="licensechange-loading">
|
|
<div class="zulip-loading-logo">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 773.12 773.12">
|
|
<circle cx="386.56" cy="386.56" r="386.56"/>
|
|
<path d="M566.66 527.25c0 33.03-24.23 60.05-53.84 60.05H260.29c-29.61 0-53.84-27.02-53.84-60.05 0-20.22 9.09-38.2 22.93-49.09l134.37-120c2.5-2.14 5.74 1.31 3.94 4.19l-49.29 98.69c-1.38 2.76.41 6.16 3.25 6.16h191.18c29.61 0 53.83 27.03 53.83 60.05zm0-281.39c0 20.22-9.09 38.2-22.93 49.09l-134.37 120c-2.5 2.14-5.74-1.31-3.94-4.19l49.29-98.69c1.38-2.76-.41-6.16-3.25-6.16H260.29c-29.61 0-53.84-27.02-53.84-60.05s24.23-60.05 53.84-60.05h252.54c29.61 0 53.83 27.02 53.83 60.05z"/>
|
|
</svg>
|
|
</div>
|
|
<div id="licensechange_loading_indicator"></div>
|
|
</div>
|
|
<div id="licensechange-success" class="alert alert-success">
|
|
Plan updated. The page will now reload.
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div id="planchange-error" class="alert alert-danger"></div>
|
|
<div id="planchange-input-section">
|
|
<form id="planchange-form">
|
|
<h3>Downgrade</h3>
|
|
{% if free_trial %}
|
|
<p>
|
|
End Free Trial and downgrade plan to <strong>Zulip Limited</strong>.
|
|
</p>
|
|
<input name="status" type="hidden" value="{{ CustomerPlan.ENDED }}" />
|
|
<button class="btn-danger" id="change-plan-status">End free trial</button>
|
|
{% else %}
|
|
{% if downgrade_at_end_of_cycle %}
|
|
<p>
|
|
You plan is scheduled for downgrade on <strong>{{ renewal_date }}</strong>.
|
|
</p>
|
|
<input name="status" type="hidden" value="{{ CustomerPlan.ACTIVE }}" />
|
|
<button class="btn-info" id="change-plan-status">Cancel downgrade</button>
|
|
{% else %}
|
|
<p>
|
|
Downgrade to <strong>Zulip Limited</strong> at the end of current billing period.
|
|
</p>
|
|
<input name="status" type="hidden" value="{{ CustomerPlan.DOWNGRADE_AT_END_OF_CYCLE }}" />
|
|
<button class="btn-danger" id="change-plan-status">Start downgrade process</button>
|
|
{% endif %}
|
|
{% endif %}
|
|
</form>
|
|
</div>
|
|
<div id="planchange-loading">
|
|
<div class="zulip-loading-logo">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 773.12 773.12">
|
|
<circle cx="386.56" cy="386.56" r="386.56"/>
|
|
<path d="M566.66 527.25c0 33.03-24.23 60.05-53.84 60.05H260.29c-29.61 0-53.84-27.02-53.84-60.05 0-20.22 9.09-38.2 22.93-49.09l134.37-120c2.5-2.14 5.74 1.31 3.94 4.19l-49.29 98.69c-1.38 2.76.41 6.16 3.25 6.16h191.18c29.61 0 53.83 27.03 53.83 60.05zm0-281.39c0 20.22-9.09 38.2-22.93 49.09l-134.37 120c-2.5 2.14-5.74-1.31-3.94-4.19l49.29-98.69c1.38-2.76-.41-6.16-3.25-6.16H260.29c-29.61 0-53.84-27.02-53.84-60.05s24.23-60.05 53.84-60.05h252.54c29.61 0 53.83 27.02 53.83 60.05z"/>
|
|
</svg>
|
|
</div>
|
|
<div id="planchange_loading_indicator"></div>
|
|
</div>
|
|
<div id="planchange-success" class="alert alert-success">
|
|
Plan updated. The page will now reload.
|
|
</div>
|
|
<div class="tab-pane" id="loading">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="goto-zulip-organization-link">
|
|
{% if onboarding %}
|
|
<br />
|
|
<h3>
|
|
<b><a href="/">Go to your Zulip organization</a></b>
|
|
</h3>
|
|
{% endif %}
|
|
</div>
|
|
<hr />
|
|
<div class="support-link">
|
|
<p>
|
|
Contact <a href="mailto:support@zulip.com">support@zulip.com</a>
|
|
for billing history or to make changes to your subscription or billing email.
|
|
</p>
|
|
</div>
|
|
{% elif admin_access and not has_active_plan %}
|
|
<div class="tab-content">
|
|
{% if sponsorship_pending %}
|
|
<h3>Your organization has requested sponsored or discounted hosting.</h3>
|
|
{% elif is_sponsored %}
|
|
<center>
|
|
<p>
|
|
<h3>💚 Your organization is fully sponsored and is on the <b>Zulip Cloud Standard</b> plan.</h3>
|
|
</p>
|
|
</center>
|
|
{% else %}
|
|
<center>
|
|
<p>
|
|
<h2>Your organization is on the <b>Zulip Free</b> plan.</h2>
|
|
<a href="/upgrade">
|
|
<button type="submit" class="button green">Upgrade to Standard</button>
|
|
</a>
|
|
<a href="/plans">
|
|
<button type="submit">View all plans</button>
|
|
</a>
|
|
</p>
|
|
</center>
|
|
{% endif %}
|
|
</div>
|
|
<div class="support-link">
|
|
<p>
|
|
Contact <a href="mailto:support@zulip.com">support@zulip.com</a> for billing history.
|
|
</p>
|
|
</div>
|
|
{% else %}
|
|
<p>
|
|
You must be an organization owner or a billing administrator to view this page.
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="confirm-licenses-modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog" aria-labelledby="deactivation_self_modal_label" aria-hidden="true">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="{{ _('Close') }}"><span aria-hidden="true">×</span></button>
|
|
<h3 id="deactivation_self_modal_label">Confirm license increase</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
Are you sure you want to increase the licenses from
|
|
<b><span id="current_license_count_holder"></span></b> to
|
|
<b><span id="new_license_count_holder"></span></b>?
|
|
</p>
|
|
<p>
|
|
You would be charged for the additional licenses.
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="button" data-dismiss="modal">Cancel</button>
|
|
<button class="button btn-success rounded" id="confirm-license-update-button" data-dismiss="modal" aria-hidden="true">
|
|
<span id="confirm-license-update">Confirm</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|