amal/uncloud
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

List all the credit cards and the ability to add more cards

Browse source
This commit is contained in:
amalelshihaby 2021-08-12 12:28:19 +02:00
commit 1c3d3efb3a
22 changed files with 528 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

1
matrixhosting/templates/matrixhosting/base.html
View file

@ -55,6 +55,7 @@
crossorigin="anonymous"
></script>
<script src="{% static 'matrixhosting/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'matrixhosting/js/stripe.js' %}"></script>
<!-- Custom JS -->
{% block js_extra %} {% endblock js_extra %}
{% compress js %}

210
matrixhosting/templates/matrixhosting/cards.html Normal file
View file

@ -0,0 +1,210 @@
{% extends "matrixhosting/base.html" %}
{% load static i18n compress %}
{% block title %} Payments {% endblock %}
{% block content %}
<div class="container">
<div class="bg-white shadow-md rounded p-4 m-4">
<div class="row">
<div class="col-md-3">
<ul class="nav nav-tabs flex-column" id="myTabVertical" role="tablist">
<li class="nav-item"> <a class="nav-link" id="first-tab" href="{% url 'matrixhosting:billing' %}">Payment Moves</a> </li>
<li class="nav-item"> <a class="nav-link active" id="fourth-tab" href="{% url 'matrixhosting:cards' %}">Payment Methods</a> </li>
</ul>
</div>
<div class="col-md-9">
<div class="tab-content my-3" id="myTabContentVertical">
<div class="tab-pane fade show active" id="cards" role="tabpanel" aria-labelledby="cards">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-sm-12 col-lg-12">
<div class="featured-box style-3 float-right mb-4">
<div class="featured-box-icon text-17 text-light"> <i class="fas fa-wallet"></i> </div>
<h3 class="text-9 font-weight-400">{{balance}} CHF</h3>
<a href="" data-target="#make-deposit" data-toggle="modal">Make a deposit</a>
</div>
</div>
</div>
</div>
</div>
<hr class="mt-0 mb-4 mx-n8">
<div class="row">
<div class="col-12">
<h3 class="text-4 font-weight-400 mb-4">{% trans "Credit or Debit Cards"%} <span class="text-muted text-3">({% trans "for payments"%})</span></h3>
<hr class="mt-0 mb-2 mx-n8">
<div class="row">
{% for card in object_list %}
<div class="col-12 col-sm-6 col-lg-4 mt-2">
<div class="account-card {% if card.active %}account-card-primary{%endif%} text-white rounded p-3 mb-4 mb-lg-0">
<p class="text-4">XXXX-XXXX-XXXX-{{card.last4}}</p>
<p class="d-flex align-items-center"> <span class="account-card-expire text-uppercase d-inline-block opacity-7 mr-2">Valid<br>
thru<br>
</span> <span class="text-4 opacity-9">{{card.expiry_date|date:"m"}}/{{card.expiry_date|date:"y"}}</span> {% if card.active %}<span class="badge badge-warning text-0 font-weight-500 rounded-pill px-2 ml-auto">{% trans "Primary"%}</span>{%endif%} </p>
<p class="d-flex align-items-center m-0"> <span class="text-uppercase font-weight-500">{{card.card_name}}</span> <img class="ml-auto" src="{% static 'matrixhosting/images/' %}{{card.brand}}.png" alt="visa" title=""> </p>
<div class="account-card-overlay rounded" data-card="{{card.card_id}}"> <a href="#" data-href="{% url 'payments:card_activate'%}" class="activate-btn text-light btn-link mx-2"><span class="mr-1"><i class="fas fa-edit"></i></span>{% trans "Set As Primary"%}</a> <a href="#" data-href="{% url 'stripecreditcard-detail' card.id %}" class="delete-card text-light btn-link mx-2"><span class="mr-1"><i class="fas fa-minus-circle"></i></span>{% trans "Delete"%}</a> </div>
</div>
</div>
{% endfor %}
<div class="col-12 col-sm-6 col-lg-4 mt-2"> <a href="" data-target="#add-new-card-details" data-toggle="modal" class="account-card-new d-flex align-items-center rounded h-100 p-3 mb-4 mb-lg-0">
<p class="w-100 text-center line-height-4 m-0"> <span class="text-3"><i class="fas fa-plus-circle"></i></span> <span class="d-block text-body text-3">Add New Card</span> </p>
</a> </div>
</div>
</div>
</div>
</div>
<div id="make-deposit" class="modal fade" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title font-weight-400">{% trans "Make a deposit"%}</h5>
<button type="button" class="close font-weight-400" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body p-4">
<form id="make_deposit" method="post" action="{% url 'payment-list' %}">
{% csrf_token %}
<input id="type" name="type" type="hidden" value="deposit">
<input id="currency" name="currency" type="hidden" value="CHF">
<div class="form-group">
<label for="amount">{% trans "Amount *"%}</label>
<input id="amount" name="amount" class="form-control" required type="number" min={{min_amount}} value="">
</div>
<div class="form-group">
<label for="notes">{% trans "Notes"%}</label>
<textarea id="notes" name="notes" class="form-control"></textarea>
</div>
<button class="btn btn-primary float-right mt-2" id="deposit-button" type="submit">
{% trans "Confirm"%}
</button>
</form>
</div>
</div>
</div>
</div>
<div id="add-new-card-details" class="modal fade" aria-hidden="true" style="display: none;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title font-weight-400">{% trans "Add a Card"%}</h5>
<button type="button" class="close font-weight-400" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body p-4">
<form id="addCard" method="post" data-secret="{{ client_secret }}">
<div id="card-element"></div>
<div id="card-errors"></div>
<div class="form-group">
<label for="cardNumber">{% trans "Card Number"%}</label>
<div id="card-number-element" class="field my-input form-control"></div>
</div>
<div class="form-row">
<div class="col-lg-6">
<div class="form-group">
<label for="expiryDate">{% trans "Expiry Date"%}</label>
<div id="card-expiry-element" class="field my-input form-control"></div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="cvvNumber">{% trans "CVV"%} <span class="text-info ml-1" data-toggle="tooltip" data-original-title="For Visa/Mastercard, the three-digit CVV number is printed on the signature panel on the back of the card immediately after the card's account number. For American Express, the four-digit CVV number is printed on the front of the card above the card account number."><i class="fas fa-question-circle"></i></span></label>
<div id="card-cvc-element" class="field my-input form-control"></div> </div>
</div>
</div>
<div class="form-group">
<label for="cardHolderName">{% trans "Card Holder Name"%}</label>
<input type="text" class="form-control" data-bv-field="cardholdername" id="cardholder-name" required="" value="" placeholder="Card Holder Name">
</div>
<div class="card-element brand text-6">
<i class="fab fa-credit-card" id="brand-icon"></i>
</div>
<button class="btn btn-primary float-right mt-2" id="card-button" type="submit">{% trans "Add Card"%}</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js_extra %}
<script src="https://js.stripe.com/v3/"></script>
<script>
var stripe = Stripe('{{ stripe_pk }}');
var setupForm = document.getElementById('addCard');
var clientSecret = setupForm.dataset.secret;
window.cardNumberElement = loadStripe(stripe);
var cardholderName = document.getElementById('cardholder-name');
var messageContainer = document.getElementById('card-errors');
setupForm.addEventListener('submit', function(ev) {
ev.preventDefault();
stripe.confirmCardSetup(
clientSecret,
{
payment_method: {
card: window.cardNumberElement,
billing_details: {
name: cardholderName.value,
},
},
}
).then(function(result) {
if (result.error) {
var message = document.createTextNode('Error:' + result.error.message);
messageContainer.appendChild(message);
} else {
location.reload();
}
});
});
$('.activate-btn').click(function (e) {
e.preventDefault();
var url = $(e.target).data('href');
var card_id = $(e.target).parent().data('card');
$.ajax({
type: 'POST',
url: url,
data: {card_id: card_id, csrfmiddlewaretoken: '{{ csrf_token }}'},
dataType: 'json',
success: function (result) {
location.reload();
}
});
});
$('.delete-card').click(function (e) {
e.preventDefault();
var url = $(e.target).data('href');
var card_id = $(e.target).parent().data('card');
$.ajax({
type: 'DELETE',
url: url,
data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
dataType: 'json',
success: function (result) {
location.reload();
}
});
});
$("#make_deposit").submit(function(e){
var form = $(this);
$('#deposit-button').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
$.ajax({
url : form.attr('action'),
type : form.attr('method'),
data : form.serialize(),
success: function(response) {
location.reload();
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.responseJSON);
$('#deposit-button').html("{% trans 'Confirm'%}").attr('disabled', false);
}
});
return false;
});
</script>
{% endblock js_extra %}

9
matrixhosting/templates/matrixhosting/includes/_card.html
View file

@ -24,15 +24,6 @@
</div>
</div>
<div id="card-errors"></div>
<div id='payment_error'>
{% for message in messages %}
{% if 'failed_payment' in message.tags or 'make_charge_error' in message.tags or 'error' in message.tags %}
<ul class="list-unstyled">
<li><p class="card-warning-content card-warning-error">{{ message|safe }}</p></li>
</ul>
{% endif %}
{% endfor %}
</div>
<div class="text-right">
<button class="btn btn-vm-contact btn-primary btn-wide" type="submit" name="payment-form">{%trans "Checkout" %}</button>
</div>

4
matrixhosting/templates/matrixhosting/includes/_navbar.html
View file

@ -61,7 +61,7 @@
<li><a class="dropdown-item text-center text-primary px-0" href="">See all Notifications</a></li>
</ul>
</li>
<li class="dropdown profile ml-2"> <a class="px-0 dropdown-toggle" href="#"><span class="text-5"><i class="far fa-user"></i></span></a>
<li class="dropdown profile ml-2"> <a class="px-2 dropdown-toggle" href="#"><span class="text-5"><i class="far fa-user"></i></span></a>
<ul class="dropdown-menu">
<li class="text-center text-3 py-2">Hi, {{request.user.username}}</li>
<li class="dropdown-divider mx-n3"></li>
@ -69,7 +69,7 @@
<li><a class="dropdown-item" href=""><i class="fas fa-tachometer-alt"></i>{%trans "Dashboard" %}</a></li>
<li><a class="dropdown-item" href="{% url 'matrix:orders' %}"><i class="fas fa-shopping-cart"></i>{%trans "Orders" %}</a></li>
<li><a class="dropdown-item" href="{% url 'matrix:billing' %}"><i class="fas fa-file-invoice"></i>{%trans "Billing" %}</a></li>
<li><a class="dropdown-item" href=""><i class="fas fa-cloud"></i>{%trans "Instances" %}</a></li>
<li><a class="dropdown-item" href="{% url 'matrix:instances' %}"><i class="fas fa-cloud"></i>{%trans "Instances" %}</a></li>
<li class="dropdown-divider mx-n3"></li>
<li><a class="dropdown-item" href=""><i class="fas fa-life-ring"></i>Need Help?</a></li>
<li><a class="dropdown-item" href="{% url 'account_logout' %}"><i class="fas fa-sign-out-alt"></i>Sign Out</a></li>

53
matrixhosting/templates/matrixhosting/instances.html Normal file
View file

@ -0,0 +1,53 @@
{% extends "matrixhosting/base.html" %}
{% load static i18n compress %}
{% block title %} Instances {% endblock %}
{% block content %}
<!-- Page Content -->
{% csrf_token %}
<div class="container">
<div class="row p-1 mt-4">
<div class="col-lg-12 bg-white shadow-sm border border-light rounded py-4 mb-4">
<h3 class="text-5 font-weight-400 d-flex align-items-center px-1 mb-4">{% trans "Instances"%}</h3>
<!-- Title
=============================== -->
<div class="transaction-title py-2 px-1">
<div class="row">
<div class="col-1 col-sm-1 text-center"><span class="">{% trans "ID"%}</span></div>
<div class="col-2 col-sm-2 text-center"><span class="">{% trans "Creation Date"%}</span></div>
<div class="col-3 col-sm-3 d-none d-sm-block text-center">{% trans "Homeserver Domain"%}</div>
<div class="col-3 col-sm-3 text-right">{% trans "WebClient Domain"%}</div>
<div class="col-1 col-sm-1 text-center"><span class="">{% trans "Order"%}</span></div>
<div class="col-2 col-sm-2 text-center">{% trans "Termination Date"%}</div>
</div>
</div>
<!-- Title End -->
<!-- Instances List
=============================== -->
<div class="transaction-list">
{% for instance in object_list %}
<div class="transaction-item px-1 py-4" data-id={{instance.id}}>
<div class="row align-items-center flex-row">
<div class="col-1 col-sm-1 text-center"> <span class="d-block text-3 font-weight-400">#{{instance.id}}</span></div>
<div class="col-2 col-sm-2 text-center"> <span class="d-block text-2 font-weight-300">{{instance.creation_date|date:"Y-m-d"}}</span></div>
<div class="col-3 col-sm-3 d-none d-sm-block text-right text-1"> <span>{{instance.homeserver_domain}}</span> </div>
<div class="col-3 col-sm-3 d-none d-sm-block text-right text-1"> <span>{{instance.webclient_domain}}</span> </div>
<div class="col-1 col-sm-1 text-center text-2"><span class="">#{{instance.order.id}}</span></div>
<div class="col-2 col-sm-2 d-none d-sm-block text-center text-2"> <span class=" text-uppercase">{{order.termination_date|date:"Y-m-d"}}</span> </div>
</div>
</div>
{%endfor%}
</div>
<!-- Instances List End -->
</div>
</div>
</div>
{% endblock %}
{% block js_extra %}
{% endblock %}

8
matrixhosting/templates/matrixhosting/order_confirmation.html
View file

@ -180,8 +180,14 @@
</div>
<hr>
</div>
{% if stripe_deposit_amount > 0 %}
<div class="col-sm-12">
By clicking "Place order" you agree to our <a href="">Terms of Service</a> and this plan will charge your account balance with {{pricing.total|floatformat:2}} CHF
By clicking "Confirm order" you agree to charge your active credit card with <strong>{{stripe_deposit_amount}} CHF</strong> to handle the wallet deficit.
<hr>
</div>
{% endif %}
<div class="col-sm-12">
By clicking "Confirm order" you agree to our <a href="">Terms of Service</a> and this plan will charge your account balance with {{pricing.total|floatformat:2}} CHF
</div>
<div class="col-sm-12 order-confirm-btn mt-2 text-right">
<button class="btn choice-btn btn-primary" id="btn-create-vm" type="submit">

20
matrixhosting/templates/matrixhosting/order_details.html
View file

@ -183,7 +183,7 @@
<div class="row align-items-center flex-row">
<div class="col col-sm-6"><div class="text-14 text-light"><i class="fas fa-wallet"></i></div></div>
<div class="col col-sm-6 text-right text-2">
<h3 class="text-6 font-weight-400 {% if balance >= 0 %}text-success{%else%}text-danger{%endif%}">{{ balance }} CHF</h3>
<h3 id="balance" class="text-6 font-weight-400 {% if balance >= 0 %}text-success{%else%}text-danger{%endif%}" data-balance='{{ balance }}'>{{ balance }} CHF</h3>
<span class="text-muted text-3 opacity-8">{% trans "Available Balance"%}</span>
</div>
</div>
@ -197,6 +197,7 @@
<p>{% trans "Discount"%} <span class="float-right text-danger"> - {{matrix_vm_pricing.discount_amount}} CHF</span></p>
{% endif %}
<hr>
<p>{% trans "VAT" %}<span class="float-right" id="vat"> {{request.session.pricing.vat_amount}} CHF</span></p>
<p class="text-4 font-weight-500">{% trans "Total To Pay"%}
<small>
({% if matrix_vm_pricing.vat_inclusive %}{%trans "including VAT" %}{% else %}{%trans "excluding VAT" %}{% endif %})
@ -206,8 +207,7 @@
</div>
</div>
<hr class="mt-2 mx-n3">
{% if show_cards %}
<div id="cards-section">
<div id="cards-section" {% if not show_cards %}style="display:none;"{% endif %}>
{% with cards_len=cards|length %}
<p class="text-muted">
{% if cards_len > 0 %}
@ -252,14 +252,14 @@
</div>
{% endwith %}
</div>
{% else %}
<p class="text-muted">
{% blocktrans %}Your wallet has enough balance, Press Continue to fill the VM instance settings.{% endblocktrans %}
</p>
<div class="text-right">
<button id="continue-btn" class="btn btn-primary btn-wide" type="submit">{%trans "Continue" %}</button>
<div id="has-enough-balance" {% if show_cards %}style="display:none;"{% endif %}>
<p class="text-muted">
{% blocktrans %}Your wallet has enough balance, Press Continue to fill the VM instance settings.{% endblocktrans %}
</p>
<div class="text-right">
<button id="continue-btn" class="btn btn-primary btn-wide">{%trans "Continue" %}</button>
</div>
</div>
{% endif %}
</div>
</div>
</div>

10
matrixhosting/templates/matrixhosting/payments.html
View file

@ -10,8 +10,8 @@
<div class="row">
<div class="col-md-3">
<ul class="nav nav-tabs flex-column" id="myTabVertical" role="tablist">
<li class="nav-item"> <a class="nav-link active" id="first-tab" data-toggle="tab" href="#transactions" role="tab" aria-controls="firstTab" aria-selected="true">All Transactions</a> </li>
<li class="nav-item"> <a class="nav-link" id="fourth-tab" data-toggle="tab" href="#cards" role="tab" aria-controls="fourthTab" aria-selected="false">Payment Methods</a> </li>
<li class="nav-item"> <a class="nav-link active" id="first-tab" href="{% url 'matrixhosting:billing' %}">Payment Moves</a> </li>
<li class="nav-item"> <a class="nav-link" id="fourth-tab" href="{% url 'matrixhosting:cards' %}">Payment Methods</a> </li>
</ul>
</div>
<div class="col-md-9">
@ -42,7 +42,7 @@
<div class="col-12 mb-3" id="allFilters">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="allTransactions" name="filter" data-url="{% url 'matrix:billing' %}" class="custom-control-input" value="all" {% if not type %} checked=""{% endif %}>
<label class="custom-control-label" for="allTransactions">{% trans "All Transactions"%}</label>
<label class="custom-control-label" for="allTransactions">{% trans "All"%}</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="withdrawal" name="filter" class="custom-control-input" data-url="{% url 'matrix:billing' %}?type=withdraw" value="withdraw" {% if type == 'withdraw' %} checked=""{% endif %}>
@ -63,7 +63,7 @@
<!-- All Transactions
============================================= -->
<div class="bg-white shadow-sm border border-light rounded py-4 mb-4">
<h3 class="text-5 font-weight-400 d-flex align-items-center px-4 mb-4">{% trans "All Transactions"%}</h3>
<h3 class="text-5 font-weight-400 d-flex align-items-center px-4 mb-4">{% trans "Payment Moves"%}</h3>
<!-- Title
=============================== -->
<div class="transaction-title py-2 px-4">
@ -111,8 +111,6 @@
<!-- All Transactions End -->
</div>
</div>
<div class="tab-pane fade" id="cards" role="tabpanel" aria-labelledby="cards">
</div>
</div>
</div>
</div>