app-MAIL-temp/templates/dashboard/billing.html
Son Nguyen Kim d49f6b88a9
Upgrade djlint and reformat all fiels (#2197)
* update djlint

* reformat all files

* update precommit version

---------

Co-authored-by: Son NK <son@simplelogin.io>
2024-08-28 13:07:34 +02:00

109 lines
3.8 KiB
HTML

{% extends "default.html" %}
{% block title %}Billing{% endblock %}
{% block head %}{% endblock %}
{% block default_content %}
<div class="card">
<div class="card-body">
<h1 class="h3 mb-5">Billing</h1>
{% if sub.cancelled %}
<p>
You are on the <b>{{ sub.plan_name() }}</b> plan.
<br />
You have canceled your subscription and it will end on {{ sub.next_bill_date.strftime("%Y-%m-%d") }}
</p>
<p class="alert alert-info">
If you change your mind you can subscribe again to SimpleLogin but
please note that this will be a completely
new subscription and
your payment method will be charged <b>immediately</b>.
<br />
The period left in the current subscription isn't taken into account.
<br />
<a href="{{ url_for("dashboard.pricing") }}"
class="btn btn-primary mt-2">Re-subscribe</a>
</p>
{% else %}
<p>
You are on the <b>{{ sub.plan_name() }}</b> plan. Thank you very much for supporting
SimpleLogin. 🙌
<br />
The next billing cycle starts at {{ sub.next_bill_date.strftime("%Y-%m-%d") }}.
</p>
<div class="mt-3">
Click here to update billing information on Paddle, our payment partner:
<br />
<a class="btn btn-outline-success mt-2" href="{{ sub.update_url }}">Update billing information</a>
</div>
<hr />
<div class="mt-6">
<h4>Change Plan</h4>
You can change the plan at any moment.
<br />
Please note that the new billing cycle starts instantly
i.e. you will be charged <b>immediately</b> the annual fee ($30) when switching from monthly plan or vice-versa
<b>without pro rata computation </b>.
<br />
To change the plan you can also cancel the current one and subscribe a new one <b>by the end</b> of this plan.
{% if sub.plan == PlanEnum.yearly %}
<form method="post"
onsubmit="return confirm('This will change your current subscription plan, please confirm');">
<input type="hidden" name="form-name" value="change-monthly">
<button class="btn btn-outline-primary mt-2">Change to Monthly Plan</button>
</form>
{% else %}
<form method="post"
onsubmit="return confirm('This will change your current subscription plan, please confirm');">
<input type="hidden" name="form-name" value="change-yearly">
<button class="btn btn-outline-primary mt-2">Change to Yearly Plan</button>
</form>
{% endif %}
</div>
<hr />
<div>
<h4>Cancel subscription</h4>
Don't want to protect your inbox anymore?
<br />
<form method="post">
<input type="hidden" name="form-name" value="cancel">
<span class="cancel btn btn-outline-danger mt-2">
Cancel subscription <i class="fe fe-alert-triangle text-danger"></i>
</span>
</form>
</div>
{% endif %}
</div>
</div>
{% endblock %}
{% block script %}
<script>
$(".cancel").on("click", function (e) {
let that = $(this);
bootbox.confirm({
message: "This operation is irreversible, please confirm.",
buttons: {
confirm: {
label: 'Cancel subscription',
className: 'btn-danger'
},
cancel: {
label: 'Close',
className: 'btn-outline-primary'
}
},
callback: function (result) {
if (result) {
that.closest("form").submit();
}
}
})
});
</script>
{% endblock %}