mirror of
https://github.com/simple-login/app.git
synced 2024-11-13 07:31:12 +01:00
9cc9d38dce
* Propose upgrade proton account for proton partner users without paid mail plan * Reformat js * Initial display via jinja * tweak ui: add a ---OR--- separator * use collapse to show SL upgrade option Co-authored-by: Adrià Casajús <adria.casajus@proton.ch> Co-authored-by: Son <nguyenkims@users.noreply.github.com>
223 lines
7.9 KiB
HTML
223 lines
7.9 KiB
HTML
{% extends 'default.html' %}
|
|
|
|
{% set active_page = "dashboard" %}
|
|
|
|
{% block title %}
|
|
Pricing
|
|
{% endblock %}
|
|
|
|
{% block head %}
|
|
<script src="https://cdn.paddle.com/paddle/paddle.js"></script>
|
|
<script>
|
|
if (window.Paddle === undefined) {
|
|
console.log("cannot load Paddle from CDN");
|
|
document.write('<script src="/static/vendor/paddle.js"><\/script>')
|
|
}
|
|
</script>
|
|
|
|
<style type="text/css">
|
|
html.mvc__a.mvc__lot.mvc__of.mvc__classes.mvc__to.mvc__increase.mvc__the.mvc__odds.mvc__of.mvc__winning.mvc__specificity, html.mvc__a.mvc__lot.mvc__of.mvc__classes.mvc__to.mvc__increase.mvc__the.mvc__odds.mvc__of.mvc__winning.mvc__specificity > body {
|
|
position: static;
|
|
}
|
|
|
|
|
|
{#CSS to change collapse button display from https://stackoverflow.com/a/31967516/1428034#}
|
|
[data-toggle="collapse"].collapsed .if-not-collapsed {
|
|
display: none;
|
|
}
|
|
|
|
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
|
|
display: none;
|
|
}
|
|
</style>
|
|
|
|
{% endblock %}
|
|
|
|
{% block announcement %}
|
|
{# TODO: to remove#}
|
|
{# <div class="alert alert-danger text-center mb-0" role="alert">#}
|
|
{# Our payment provider Paddle is experiencing#}
|
|
{# <a href="https://paddle.status.io" target="_blank">server issue <i class="fe fe-external-link"></i></a>#}
|
|
{# that can make our checkout page unusable. <br>#}
|
|
{# Please retry later and sorry for this issue!#}
|
|
{# </div>#}
|
|
{% endblock %}
|
|
|
|
{% block default_content %}
|
|
<div class="row">
|
|
<div class="col-sm-6 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<div class="h3">Premium</div>
|
|
|
|
<ul class="list-unstyled leading-loose mb-3">
|
|
<li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i>
|
|
Unlimited aliases
|
|
</li>
|
|
<li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i>
|
|
Unlimited custom domains
|
|
</li>
|
|
<li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i>
|
|
Catch-all (or wildcard) aliases
|
|
</li>
|
|
<li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i>
|
|
Up to 50 directories (or usernames)
|
|
</li>
|
|
<li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i>
|
|
Unlimited mailboxes
|
|
</li>
|
|
<li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i>
|
|
PGP Encryption
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="small-text">More information on our <a href="https://simplelogin.io/pricing" target="_blank"
|
|
rel="noopener">Pricing
|
|
Page <i class="fe fe-external-link"></i>
|
|
</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-6 col-lg-6">
|
|
{% if manual_sub %}
|
|
<div class="alert alert-info">
|
|
You currently have a subscription until <b>{{ manual_sub.end_at.format("YYYY-MM-DD") }}</b>
|
|
({{ (manual_sub.end_at - now).days }} days left).
|
|
<br>
|
|
Please note that the time left will <b>not</b> be taken into account in a new subscription.
|
|
</div>
|
|
<hr>
|
|
{% endif %}
|
|
|
|
{% if proton_upgrade %}
|
|
<div id="proton-upgrade" class="">
|
|
<h4 class="">Proton Unlimited and Mail Plus plans include SimpleLogin premium and more!</h4>
|
|
<a class="btn btn-primary" role="button" href="https://account.proton.me/u/0/mail/upgrade">
|
|
<b>Upgrade your Proton account</b>
|
|
</a>
|
|
<p class="mt-2 small"> Starts at $3.99/month (billed yearly), starting with 15GB of storage, encrypted
|
|
calendar & file storage and more. </p>
|
|
|
|
<div class="middle-line my-5 h4">OR</div>
|
|
|
|
<div id="normal-upgrade-button">
|
|
<a class="btn btn-secondary collapsed" data-toggle="collapse" href="#normal-upgrade" role="button">
|
|
Upgrade your SimpleLogin account
|
|
<span class="if-collapsed">
|
|
<i class="fe fe-chevron-down"></i>
|
|
</span>
|
|
<span class="if-not-collapsed">
|
|
<i class="fe fe-chevron-up"></i>
|
|
</span>
|
|
</a>
|
|
<p class="mt-2 small">Starts at $2.5/month (billed yearly)</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div id="normal-upgrade" class="{% if proton_upgrade %} collapse {% endif %}">
|
|
|
|
<div class="display-6 my-3">
|
|
🔐 Secure payments by
|
|
<a href="https://paddle.com" target="_blank" rel="noopener">
|
|
Paddle <i class="fe fe-external-link"></i>
|
|
</a>
|
|
</div>
|
|
|
|
{% set sub = current_user.get_paddle_subscription() %}
|
|
{% if sub and sub.cancelled %}
|
|
<div class="alert alert-primary" role="alert">
|
|
You have an active subscription until {{ sub.next_bill_date.strftime("%Y-%m-%d") }}. <br>
|
|
Please note that if you re-subscribe now, this will be a completely
|
|
new subscription and
|
|
your payment method will be charged <b>immediately</b>.
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if coinbase_sub %}
|
|
<div class="alert alert-info">
|
|
You currently have a Coinbase subscription until <b>{{ coinbase_sub.end_at.format("YYYY-MM-DD") }}</b>
|
|
({{ (coinbase_sub.end_at - now).days }} days left).
|
|
<br>
|
|
Please note that the time left will <b>not</b> be taken into account in a new Paddle subscription.
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mb-3">
|
|
Paddle supports bank cards
|
|
(Mastercard, Visa, American Express, etc) and PayPal.
|
|
</div>
|
|
|
|
<button class="btn btn-primary" onclick="upgrade({{ PADDLE_YEARLY_PRODUCT_ID }})">
|
|
Yearly billing
|
|
<span class="badge badge-success">Save $18</span>
|
|
<br>
|
|
<span style="font-size: 18px">
|
|
$30/year
|
|
</span>
|
|
</button>
|
|
|
|
<button class="btn btn-secondary" onclick="upgrade({{ PADDLE_MONTHLY_PRODUCT_ID }})">
|
|
Monthly billing <br>
|
|
<b>
|
|
$4/month
|
|
</b>
|
|
</button>
|
|
|
|
<hr>
|
|
<i class="fa fa-bitcoin"></i>
|
|
Payment via
|
|
<a href="https://commerce.coinbase.com/?lang=en" target="_blank">
|
|
Coinbase Commerce<i class="fe fe-external-link"></i>
|
|
</a> <br>
|
|
Currently Bitcoin, Bitcoin Cash, Dai, Ethereum, Litecoin and USD Coin are supported. <br>
|
|
|
|
<a class="btn btn-outline-primary" href="{{ url_for('dashboard.coinbase_checkout_route') }}"
|
|
target="_blank">
|
|
Yearly billing - Crypto <br>
|
|
$30/year
|
|
<i class="fe fe-external-link"></i>
|
|
</a>
|
|
|
|
<hr>
|
|
For other payment options, please send us an email at <a href="mailto:hi@simplelogin.io">hi@simplelogin.io</a>.
|
|
<br>
|
|
If you have bought a coupon, please go to the <a href="{{ url_for('dashboard.coupon_route') }}">coupon page</a>
|
|
to apply the coupon code.
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
Paddle.Setup({vendor: {{ PADDLE_VENDOR_ID }}});
|
|
|
|
function upgrade(productId) {
|
|
bootbox.dialog({
|
|
title: `Payment with credit card or PayPal via Paddle`,
|
|
message: `Paddle will ask for an email address for sending out the invoices, please feel free to use an alias. <br>
|
|
You don't have to use your SimpleLogin account email address`,
|
|
size: 'large',
|
|
onEscape: true,
|
|
backdrop: true,
|
|
buttons: {
|
|
got_it: {
|
|
label: 'Got it!',
|
|
className: 'btn-outline-primary',
|
|
callback: function () {
|
|
Paddle.Checkout.open({
|
|
product: productId,
|
|
success: "{{ success_url }}",
|
|
passthrough: "{\"user_id\": {{current_user.id}} }"
|
|
});
|
|
}
|
|
},
|
|
}
|
|
});
|
|
}
|
|
|
|
</script>
|
|
|
|
{% endblock %}
|