add billing and pricing page

app/config.py

@@ -65,6 +65,11 @@ STRIPE_API = os.environ["STRIPE_API"]  # Stripe public key
 STRIPE_SECRET_KEY = os.environ["STRIPE_SECRET_KEY"]
 STRIPE_YEARLY_PLAN = os.environ["STRIPE_YEARLY_PLAN"]
 
+# Paddle TODO: put into config file
+PADDLE_VENDOR_ID = int(os.environ["PADDLE_VENDOR_ID"])
+PADDLE_MONTHLY_PRODUCT_ID = int(os.environ["PADDLE_MONTHLY_PRODUCT_ID"])
+PADDLE_YEARLY_PRODUCT_ID = int(os.environ["PADDLE_YEARLY_PRODUCT_ID"])
+
 # OpenID keys, used to sign id_token
 OPENID_PRIVATE_KEY_PATH = get_abs_path(os.environ["OPENID_PRIVATE_KEY_PATH"])
 OPENID_PUBLIC_KEY_PATH = get_abs_path(os.environ["OPENID_PUBLIC_KEY_PATH"])
@@ -88,4 +93,4 @@ FACEBOOK_CLIENT_SECRET = os.environ["FACEBOOK_CLIENT_SECRET"]
 AVATAR_URL_EXPIRATION = 3600 * 24 * 7  # 1h*24h/d*7d=1week
 
 # session key
-HIGHLIGHT_GEN_EMAIL_ID = "highlight_gen_email_id"
+HIGHLIGHT_GEN_EMAIL_ID = "highlight_gen_email_id"

app/dashboard/__init__.py

@@ -1 +1 @@
-from .views import index, pricing, setting, custom_alias
+from .views import index, pricing, setting, custom_alias, billing

app/dashboard/templates/dashboard/billing.html

@@ -0,0 +1,46 @@
+{% extends 'default.html' %}
+
+{% set active_page = "dashboard" %}
+
+{% block title %}
+  Billing
+{% endblock %}
+
+{% block head %}
+{% endblock %}
+
+{% block default_content %}
+  <div class="row">
+    <div class="col-md-8 offset-md-2">
+      <h1> Billing </h1>
+
+      <p>
+        You are on the <b>{{ current_user.plan_name() }}</b> plan. Thank you very much for supporting SimpleLogin. 🙌
+      </p>
+
+      {% if sub.cancelled %}
+        <p>
+          Sad to see you go 😢. Your subscription ends {{ current_user.get_subscription().next_bill_date | dt }}.
+        </p>
+
+      {% else %}
+        <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>
+          <a class="btn btn-warning" href="{{ sub.cancel_url }}"> Cancel subscription 😔 </a>
+        </div>
+      {% endif %}
+
+    </div>
+
+  </div>
+
+
+
+{% endblock %}

app/dashboard/templates/dashboard/pricing.html

@@ -0,0 +1,63 @@
+{% extends 'default.html' %}
+
+{% set active_page = "dashboard" %}
+
+{% block title %}
+  Pricing
+{% endblock %}
+
+{% block head %}
+{% 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="card-category">Premium</div>
+          <ul class="list-unstyled leading-loose">
+            <li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i> Unlimited Alias</li>
+            <li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i> Custom Alias</li>
+            <li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i> Custom email domain</li>
+            <li><i class="fe fe-check text-success mr-2" aria-hidden="true"></i>
+              Support us and our application partners
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-sm-6 col-lg-6">
+      <div class="display-6">
+        🔐 Secure payments by <a href="https://paddle.com">Paddle</a>
+      </div>
+
+      <hr>
+
+      <button class="btn btn-success btn-lg" onclick="upgrade({{ PADDLE_MONTHLY_PRODUCT_ID }})">
+        Monthly <br>
+        $2.99/month
+      </button>
+
+      <button class="btn btn-primary btn-lg" onclick="upgrade({{ PADDLE_YEARLY_PRODUCT_ID }})">
+        Yearly <br>
+        $29.99/year
+      </button>
+    </div>
+  </div>
+
+  <script src="https://cdn.paddle.com/paddle/paddle.js"></script>
+
+  <script type="text/javascript">
+    Paddle.Setup({vendor: {{ PADDLE_VENDOR_ID }}});
+
+    function upgrade(productId) {
+      Paddle.Checkout.open({
+        product: productId,
+        email: "{{ current_user.email }}",
+        success: "{{ success_url }}"
+      });
+    }
+  </script>
+
+{% endblock %}

app/dashboard/views/billing.py

@@ -0,0 +1,17 @@
+from flask import render_template, flash, redirect, url_for
+from flask_login import login_required, current_user
+
+from app.dashboard.base import dashboard_bp
+
+
+@dashboard_bp.route("/billing", methods=["GET", "POST"])
+@login_required
+def billing():
+    # sanity check: make sure this page is only for user who has paddle subscription
+    if not current_user.is_premium():
+        flash("This page is for paid customer only", "warning")
+        return redirect(url_for("dashboard.index"))
+
+    sub = current_user.get_subscription()
+
+    return render_template("dashboard/billing.html", sub=sub)

app/dashboard/views/pricing.py

@@ -0,0 +1,34 @@
+from flask import render_template, flash, redirect, url_for
+from flask_login import login_required, current_user
+
+from app.config import (
+    PADDLE_VENDOR_ID,
+    PADDLE_MONTHLY_PRODUCT_ID,
+    PADDLE_YEARLY_PRODUCT_ID,
+    URL,
+)
+from app.dashboard.base import dashboard_bp
+
+
+@dashboard_bp.route("/pricing", methods=["GET", "POST"])
+@login_required
+def pricing():
+    # sanity check: make sure this page is only for free user
+    if current_user.is_premium():
+        flash("You are already a premium user", "warning")
+        return redirect(url_for("dashboard.index"))
+
+    return render_template(
+        "dashboard/pricing.html",
+        PADDLE_VENDOR_ID=PADDLE_VENDOR_ID,
+        PADDLE_MONTHLY_PRODUCT_ID=PADDLE_MONTHLY_PRODUCT_ID,
+        PADDLE_YEARLY_PRODUCT_ID=PADDLE_YEARLY_PRODUCT_ID,
+        success_url=URL + "/dashboard/subscription_success",
+    )
+
+
+@dashboard_bp.route("/subscription_success")
+@login_required
+def subscription_success():
+    flash("Thanks so much for supporting SimpleLogin!", "success")
+    return redirect(url_for("dashboard.index"))

templates/header.html

@@ -43,10 +43,17 @@
 {#            <a class="dropdown-item" href="{{ url_for('partner.become') }}">#}
 {#              <i class="dropdown-icon fe fe-target"></i> Become Partner/Developer#}
 {#            </a>#}
+            
+            {% if current_user.is_premium() %}
+              <a class="dropdown-item" href="{{ url_for('dashboard.billing') }}">
+                <i class="dropdown-icon fe fe-dollar-sign"></i> Billing
+              </a>            
+            {% endif %}
 
             <a class="dropdown-item" href="{{ url_for('auth.logout') }}">
               <i class="dropdown-icon fe fe-log-out"></i> Sign out
             </a>
+            
           </div>
 
         </div>