Create a proper billing page

core/static/style.css

@@ -1,5 +1,6 @@
 .register a {
   color: #700000 !important;
+  margin-left: 8px;
 }
 .title {
   color: white;
@@ -11,9 +12,6 @@ body{
   font-size: 12px;
   padding-top: 10px;
 }
-.register a {
-  margin-left: 8px;
-}
 .logo {
   display: block;
   margin-left: auto;
@@ -26,11 +24,7 @@ body{
 
 .product-container {
   background: #ffffff;
-  display: flex;
-  flex-direction: column;
-  width: 400px;
-  height: 100%;
-  border-radius: 6px;
+
   justify-content: space-between;
 }
 .product {
@@ -41,20 +35,7 @@ body{
   flex-direction: column;
   justify-content: center;
 }
-p {
-  font-style: normal;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 20px;
-  letter-spacing: -0.154px;
-  height: 100%;
-  width: 100%;
-  padding: 0 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
+
 img {
   border-radius: 6px;
   margin: 10px;
@@ -91,37 +72,7 @@ h5 {
 #checkout-button:hover {
   opacity: 0.8;
 }
-.notification {
-  background-color: #700000;
-  color: #fff;
-}
-.update-info {
-  background: #ffffff;
-  width: 400px;
-  border-radius: 6px;
-}
-.update-info #setup-button {
-  border-radius: 0px 0px 0px 0px;
 
-}
-.profile-info {
-  background: #ffffff;
-  width: 400px;
-  height: 50%;
-  border-radius: 0px;
-  margin-bottom: 2%;
-  padding-top: 12px;
-  padding-bottom: 3px;
-}
-.search-box {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-.profile-info p {
-  align-items: left;
-  justify-content: left;
-}
 
 .subtitle {
   color: #dddddd;

core/templates/billing.html

@@ -1,37 +1,54 @@
 {% extends "base.html" %}
 {% block content %}
-  <h1 class="title">Welcome, {{ user.first_name }}!</h1>
+  <h1 class="title">Billing/Plan Management</h1>
   <div class="container">
     <div class="row">
-      <div class="col">
-        <div class="profile-info">
-          <p>Plan: {{ user.plan }}</p>
-          <p>Stripe ID: {{ user.stripeID }}</p>
-          <p>Setup intent: {{ user.seti }}</p>
-          <p>Mandate active: {{ user.mandateActive }}</p>
-          <p>Subscription ID: {{ user.subscriptionID }}</p>
-          <p>Last payment: {{ user.lastPayment }}</p>
-          <p>Creation date: {{ user.creationDate }}</p>
-          <p>Paid: {{ user.paid }}</p>
+      <div class="col-xs-10 col-md-4 col-lg-4">
+
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            Products
+          </div>
+          <div class="panel-body">
+            <ul class="list-group">
+              <li class="list-group-item">
+                <span class="badge">{{ user.first_name }}</span>
+                First name
+              </li>
+              <li class="list-group-item">
+                <span class="badge">{{ user.last_name }}</span>
+                Last name
+              </li>
+              <li class="list-group-item">
+                {% for plan in user.plans.all %}
+                  <span class="badge">{{ plan.name }}</span>
+                {% endfor %}
+                Plans
+              </li>
+              <li class="list-group-item">
+                <span class="badge">{{ user.paid }}</span>
+                Paid
+              </li>
+              <li class="list-group-item">
+                <span class="badge">{{ user.last_payment }}</span>
+                Last payment
+              </li>
+            </ul>
+          </div>
         </div>
-        <div class="update-info">
-          {% if user.seti %}
-            {% if user.plan == None %}
-              {% include 'checkout.html' %}
-            {% else %}
-              <form>
-                <button id="button" formaction="/portal">Customer portal</button>
-              </form>
-            {% endif %}
-          {% else %}
-            <button id="setup-button">Setup payment mandate</button>
-          {% endif %}
+
+        <div class="panel panel-default">
+          <div class="panel-heading">
+            Available plans
+          </div>
+          <div class="panel-body">
+            {% include "partials/product-list.html" %}
+          </div>
         </div>
-        {% include 'checkout.html' %}
+
       </div>
     </div>
   </div>
-
   <script type="text/javascript">
     // Create an instance of the Stripe object with your publishable API key
     var stripe = Stripe("pk_test_51HbqYzAKLUD9ELc0KSyiQ9YohsfiUCeBpAfpflAIg2Uu2RFecx3sfWYXzM1xDtI5XlQihqHMnaPKd45JzDuqXdGP00pYWvRvRe");

core/templates/partials/product-list.html

@@ -1,28 +1,25 @@
 {% load static %}
 
-<head>
-  <script src="https://js.stripe.com/v3/"></script>
-</head>
-<div class="product-container">
-  <a href="order?product=drilldown">
-    <div class="product">
-      <img src="{% static 'logo.weekly.jpg' %}" alt="Data image"/>
-      <div class="description">
-        <h3>Drilldown</h3>
-        <h5>200.00</h5>
-      </div>
-    </div>
-  </a>
-  <a href="order?product=sentiment">
-    <div class="product">
-      <img src="{% static 'logo.weekly.jpg' %}" alt="Data image"/>
-      <div class="description">
-        <h3>Sentiment</h3>
-        <h5>45.00</h5>
-      </div>
+{% for plan in plans %}
+
+{% if plan not in user_plans %}
+  <a href="order?product={{ plan.name }}">
+{% endif %}
+  <div class="product">
+    <img src="{% static plan.image %}" alt="Data image"/>
+    <div class="description">
+      <h3>{{ plan.description }}</h3>
+      <h5>£{{ plan.cost }}</h5>
+      {% if plan in user_plans %}
+      <h5> (purchased) </h5>
+      {% endif %}
     </div>
+  </div>
+
+{% if plan not in user_plans %}
   </a>
-</div>
+{% endif %}
+{% endfor %}
 
 <script type="text/javascript">
   // Create an instance of the Stripe object with your publishable API key

core/views.py

@@ -5,8 +5,10 @@ from django.views import View
 from django.views.generic.edit import CreateView
 
 from core.forms import NewUserForm
+from core.models import Plan
 
 # Create your views here
+# fmt: off
 
 
 class Home(View):
@@ -20,7 +22,10 @@ class Billing(LoginRequiredMixin, View):
     template_name = "billing.html"
 
     def get(self, request):
-        return render(request, self.template_name)
+        context = {"plans": Plan.objects.all(),
+                   "user_plans": request.user.plans.all()}
+
+        return render(request, self.template_name, context)
 
 
 class Signup(CreateView):