app-MAIL-temp/app/dashboard/templates/dashboard/billing.html

{% extends 'default.html' %}

{% block title %}
  Billing
{% endblock %}

{% block head %}
{% endblock %}

{% block default_content %}
  <div class="bg-white p-6" style="max-width: 60em; margin: auto">
    <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 {{current_user.next_bill_date()}}
        ({{ sub.next_bill_date | dt }}).
      </p>

      <hr>
      <p>
        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>

        We are going to send you an email by the end of the subscription so maybe you can upgrade at that time.
        <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. 🙌
      </p>

      <div class="mt-3">
        Click here to update billing information on Paddle, our payment partner: <br>
        <a class="btn btn-success" href="{{ sub.update_url }}"> Update billing information </a>
      </div>

      <hr>

      <div>
        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-warning">
            Cancel subscription <i class="fe fe-alert-triangle text-danger"></i>
          </span>
        </form>

      </div>
    {% endif %}
  </div>

{% endblock %}

{% block script %}
  <script>

    $(".cancel").on("click", function (e) {
      notie.confirm({
        text: `This operation is irreversible, please confirm`,
        cancelCallback: () => {
          // nothing to do
        },
        submitCallback: () => {
          $(this).closest("form").submit();
        }
      });
    });

  </script>
{% endblock %}