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

upgrade: Add payment button and info style with fake text.

This commit is contained in:
Aman Agrawal 2023-11-10 12:47:56 +00:00 committed by Tim Abbott
parent 4638f67e4e
commit f273229b01
2 changed files with 32 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
templates/corporate/upgrade.html
View File

@ -53,7 +53,7 @@
<hr />
<h2>Zulip Cloud Standard free trial</h2>
{% endif %}
<div class="payment-schedule input-box">
<div class="input-box upgrade-page-field no-validation">
<div id="autopay-error" class="alert alert-danger"></div>
{% if free_trial_days %}
<p>
@ -68,6 +68,15 @@
<label for="payment-schedule-select">Payment schedule</label>
</div>
<div class="input-box upgrade-page-field no-validation">
<label for="due_today" class="inline-block label-title">Due today</label>
<div id="due_today" class="not-editable-realm-field">
$6.67 x 10 users x 1 month
<h1>$66.70</h1>
</div>
</div>
{% if not manual_license_management %}
<div id="license-automatic-section">
<p>
@ -107,27 +116,16 @@
</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" {% if is_demo_organization %}data-tippy-content="{% trans %}Convert demo organization before upgrading.{% endtrans %}"{% endif %}>
<button id="add-card-button" class="stripe-button-el invoice-button" {% if is_demo_organization %}disabled{% endif %}>
<span id="add-card-button-span">
Pay now
<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 %}">
<span id="org-upgrade-button-span">
Purchase Zulip Cloud Standard
</span>
<object class="loader upgrade-button-loader" type="image/svg+xml" data="{{ static('images/loading/loader-white.svg') }}"></object>
</button>
</div>
</form>
</div>
<div id="autopay-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="autopay_loading_indicator"></div>
</div>
<div id="autopay-success" class="alert alert-info">
Redirecting to Stripe Checkout...
</div>
</div>
<div id="invoice">

17
web/styles/portico/billing.css
View File

@ -475,6 +475,23 @@ input[name="licenses"] {
background-color: hsl(0deg 70% 40%);
}
#org-upgrade-button,
#upgrade-add-card-button {
margin: 0;
width: 100%;
}
#org-upgrade-button {
&:disabled,
.permanent-disabled {
color: hsl(0deg 0% 80%);
&:hover {
cursor: not-allowed;
}
}
}
#billing-page-details .user-stripe-card-update .user-stripe-card-update-button {
margin: 0;
}