uncloud-mravi/nextcloud/templates/uncloud_pay/cards.html

210 lines
12 KiB
HTML
Raw Normal View History

2021-09-10 07:58:42 +00:00
{% extends "nextcloud/base.html" %}
{% load static i18n compress %}
{% block title %} Payment Methods {% endblock %}
{% block content %}
<div class="bg-white shadow-md rounded p-4 my-4">
<div class="row">
<div class="col-md-3">
<ul class="nav nav-tabs flex-column" id="myTabVertical" role="tablist">
2021-09-10 07:58:42 +00:00
<li class="nav-item"> <a class="nav-link" id="first-tab" href="{% url 'uncloud_pay:billing' %}">{% trans "Transaction History"%}</a> </li>
<li class="nav-item"> <a class="nav-link" id="second-tab" href="{% url 'uncloud_pay:bills' %}">{% trans "Bills"%}</a> </li>
<li class="nav-item"> <a class="nav-link active" id="fourth-tab" href="{% url 'uncloud_pay:cards' %}">{% trans "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-7 font-weight-400">{{balance}} CHF</h3>
<a href="" data-target="#make-deposit" data-toggle="modal">{% trans "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>
<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>
2021-09-10 07:58:42 +00:00
<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 'nextcloud/images/' %}{{card.brand}}.png" alt="visa" title=""> </p>
<div class="account-card-overlay rounded" data-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>
{% 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,
2021-08-24 12:25:28 +00:00
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRFToken", '{{ 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 %}