Create a proper billing page

This commit is contained in:
Mark Veidemanis 2022-07-21 13:47:56 +01:00
parent 606e8122a6
commit caf63fd4de
Signed by: m
GPG Key ID: 5ACFCEED46C0904F
4 changed files with 69 additions and 99 deletions

View File

@ -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;

View File

@ -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");

View File

@ -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>
{% 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>
<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>
</div>
</a>
</div>
{% endif %}
{% endfor %}
<script type="text/javascript">
// Create an instance of the Stripe object with your publishable API key

View File

@ -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):