app-MAIL-temp/templates/dashboard/pricing.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;
    }

    .btn-no-pointer {
      pointer-events: none;
    }

    .tab-yearly__badge {
      top: -8px !important;
      left: 52px !important;
    }

    .border-2 {
      border-width: 2px !important;
    }

</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>
  <div class="text-center mx-md-auto mb-8 mt-6">
    <h2>Upgrade to unlock premium features</h2>
  </div>
  {% if manual_sub %}

  <div class="alert alert-info mt-0 mb-6">
    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 %}
  {% set sub = current_user.get_paddle_subscription() %}
  {% if sub and sub.cancelled %}

  <div class="alert alert-primary mt-0 mb-6" 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 mt-0 mb-6">
    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="nav btn-group mb-4 justify-content-center position-relative flex-nowrap d-flex" id="pills-tab" role="tablist">
    <a class="btn btn-outline-primary flex-grow-0 px-8 py-2" id="monthly-plan-tab" data-toggle="tab" href="#monthly-plan" role="tab" aria-controls="monthly-plan" aria-selected="false">Monthly</a>
    <a class="btn btn-outline-primary flex-grow-0 px-8 py-2 position-relative active" id="yearly-plan-tab" data-toggle="tab" href="#yearly-plan" role="tab" aria-controls="yearly-plan" aria-selected="true">Yearly<span class="badge badge-success position-absolute tab-yearly__badge" style="font-size: 12px">Save $18</span></a>
  </div>
  <div class="tab-content">
    <!-- monthly tab content -->
    <div class="tab-pane" id="monthly-plan" role="tabpanel" aria-labelledby="monthly-plan-tab">
      <div class="row row-cards">
        <!-- monthly free plan -->
        <div class="{{ 'col-md-6 col-lg-4' if proton_upgrade else 'col-md-6' }}">
          <div class="card card-md flex-grow-1">
            <div class="card-body">
              <div class="text-center">
                <div class="h3">Free</div>
                <div class="h3 my-3">$0</div>
                <div class="text-center mt-4 mb-6">
                  {% set sub = current_user.get_paddle_subscription() %}
                  <button class="{{ 'invisible' if sub or manual_sub or coinbase_sub }} btn btn-lg btn-outline-secondary w-100 btn-no-pointer" aria-disabled="true" disabled>
                    Current plan
                  </button>
                </div>
              </div>
              <ul class="list-unstyled">
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  10 aliases
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  1 mailbox
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- END monthly free plan -->
        <!-- monthly premium plan -->
        <div class="{{ 'col-md-6 col-lg-4' if proton_upgrade else 'col-md-6' }}">
          <div class="card card-md flex-grow-1 border-primary border-2">
            <div class="card-body">
              <div class="text-center">
                <div class="h3">SimpleLogin Premium</div>
                <div class="h3 my-3">$4 / month</div>
                <div class="text-center mt-4 mb-6">
                  <button class="btn btn-primary btn-lg w-100" onclick="upgradePaddle({{ PADDLE_MONTHLY_PRODUCT_ID }})">
                    Upgrade to Premium
                  </button>
                </div>
              </div>
              <ul class="list-unstyled">
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  Unlimited aliases
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  Unlimited mailboxes
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  Unlimited custom domains: bring your own domain to create aliases like contact@your-domain.com
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  Catch-all (or wildcard) domain
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  Initiate a new email from your alias
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  5 subdomains
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  50 directories/usernames
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  PGP Encryption
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- END monthly premium plan -->
        <!-- monthly Proton plan -->
        {% if proton_upgrade %}

        <div class="col-md-6 col-lg-4">
          <div class="card card-md flex-grow-1">
            <div class="card-body">
              <div class="text-center">
                <div class="h3">Proton plan</div>
                <div class="h3 my-3">Starts at $11.99 / month</div>
                <div class="text-center mt-4 mb-6">
                  <a class="btn btn-lg btn-outline-primary w-100" role="button" href="https://account.proton.me/u/0/mail/upgrade" target="_blank">Upgrade your Proton account</a>
                </div>
              </div>
              <p>Proton Unlimited / Business plans include:</p>
              <ul class="list-unstyled">
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  Everything in SimpleLogin Premium
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  500 GB storage
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  15 email addresses/aliases
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  Unlimited folders, labels, and filters
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  Unlimited messages per day
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  15 email addresses/aliases
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  20 Calendars
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  10 high-speed VPN connections
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  3 custom email domains
                </li>
              </ul>
            </div>
          </div>
        </div>
        {% endif %}
        <!-- END monthly Proton plan -->
      </div>
    </div>
    <!-- END monthly tab content -->
    <!-- yearly tab content -->
    <div class="tab-pane show active" id="yearly-plan" role="tabpanel" aria-labelledby="yearly-plan-tab">
      <div class="row row-cards">
        <!-- yearly free plan (identical to monthly) -->
        <div class="{{ 'col-md-6 col-lg-4' if proton_upgrade else 'col-md-6' }}">
          <div class="card card-md flex-grow-1">
            <div class="card-body">
              <div class="text-center">
                <div class="h3">Free</div>
                <div class="h3 my-3">$0</div>
                <div class="text-center mt-4 mb-6">
                  {% set sub = current_user.get_paddle_subscription() %}
                  <button class="{{ 'invisible' if sub or manual_sub or coinbase_sub }} btn btn-lg btn-outline-secondary w-100 btn-no-pointer" aria-disabled="true" disabled>
                    Current plan
                  </button>
                </div>
              </div>
              <ul class="list-unstyled">
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  10 aliases
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  1 mailbox
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- END yearly free plan -->
        <!-- yearly premium plan -->
        <div class="{{ 'col-md-6 col-lg-4' if proton_upgrade else 'col-md-6' }}">
          <div class="card card-md flex-grow-1 border-primary border-2">
            <div class="card-body">
              <div class="text-center">
                <div class="h3">SimpleLogin Premium</div>
                <div class="h3 my-3">$30 / year</div>
                <div class="text-center mt-4 mb-6">
                  <button class="btn btn-primary btn-lg w-100" onclick="upgradePaddle({{ PADDLE_YEARLY_PRODUCT_ID }})">
                    Upgrade to Premium
                  </button>
                </div>
              </div>
              <ul class="list-unstyled">
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  Unlimited aliases
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  Unlimited mailboxes
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  Unlimited custom domains: bring your own domain to create aliases like contact@your-domain.com
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  Catch-all (or wildcard) domain
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  Initiate a new email from your alias
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  5 subdomains
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  50 directories/usernames
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  PGP Encryption
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- END yearly premium plan -->
        <!-- yearly Proton plan -->
        {% if proton_upgrade %}

        <div class="col-md-6 col-lg-4">
          <div class="card card-md flex-grow-1">
            <div class="card-body">
              <div class="text-center">
                <div class="h3">Proton plan</div>
                <div class="h3 my-3">Starts at $119.88 / year</div>
                <div class="text-center mt-4 mb-6">
                  <a class="btn btn-lg btn-outline-primary w-100" role="button" href="https://account.proton.me/u/0/mail/upgrade" target="_blank">Upgrade your Proton account</a>
                </div>
              </div>
              <p>Proton Unlimited / Business plans include:</p>
              <ul class="list-unstyled">
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  Everything in SimpleLogin Premium
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  500 GB storage
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  15 email addresses/aliases
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  Unlimited folders, labels, and filters
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  Unlimited messages per day
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  15 email addresses/aliases
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  20 Calendars
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  10 high-speed VPN connections
                </li>
                <li class="d-flex">
                  <i class="fe fe-check text-success mr-2 mt-1" aria-hidden="true"></i>
                  3 custom email domains
                </li>
              </ul>
            </div>
          </div>
        </div>
        {% endif %}
        <!-- END yearly Proton plan -->
      </div>
    </div>
    <!-- END yearly tab content -->
  </div>
</div>
<script type="text/javascript">
  Paddle.Setup({ vendor: {{ PADDLE_VENDOR_ID }}});

  function upgradePaddle(productId) {
    Paddle.Checkout.open({
      product: productId,
      success: "{{ success_url }}",
      passthrough: "{\"user_id\": {{current_user.id}} }"
    });
  }

</script>
{% endblock %}