forked from uncloud/uncloud
268 lines
17 KiB
HTML
268 lines
17 KiB
HTML
{% extends "nextcloud/base.html" %}
|
|
|
|
{% load static compress i18n %}
|
|
|
|
{% block title %} Request Details {% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row mt-3 mb-4">
|
|
<div class="col-lg-12 mx-auto mb-4">
|
|
<div class="row widget-steps">
|
|
<div class="col-4 step active">
|
|
<div class="step-name">{%trans "Details" %}</div>
|
|
<div class="progress">
|
|
<div class="progress-bar"></div>
|
|
</div>
|
|
<a href="#" class="step-dot"></a> </div>
|
|
<div class="col-4 step disabled">
|
|
<div class="step-name">{%trans "Confirm" %}</div>
|
|
<div class="progress">
|
|
<div class="progress-bar"></div>
|
|
</div>
|
|
<a href="#" class="step-dot"></a> </div>
|
|
<div class="col-4 step disabled">
|
|
<div class="step-name">{%trans "Success" %}</div>
|
|
<div class="progress">
|
|
<div class="progress-bar"></div>
|
|
</div>
|
|
<a href="#" class="step-dot"></a> </div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<form id="order_form" method="POST" action="" data-toggle="validator" role="form" method="post">
|
|
{% csrf_token %}
|
|
<div class="row bg-white shadow-sm rounded p-3 p-4 pb-sm-4 mb-2">
|
|
<div class="container">
|
|
<h3 class="text-5 font-weight-400 mb-3 mb-sm-4">{% trans "Order Details"%}</h3>
|
|
<hr class="mx-n3 mb-4">
|
|
{% if details_form.non_field_errors %}
|
|
<div class="p-2 my-4">
|
|
{{ details_form.non_field_errors }}
|
|
</div>
|
|
{% endif %}
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6">
|
|
<div class="form-group px-n4">
|
|
<div class="input-group">
|
|
<div class="input-group-prepend"><i class="fa fa-minus-circle left text-5 p-3" data-minus="cores" aria-hidden="true"></i></div>
|
|
<input class="input-price select-number form-control" type="number" min="1" max="48" id="cores" step="1" name="cores"
|
|
{% if details_form.cores.value != None %}value="{{ details_form.cores.value }}"{% endif %} data-error="{% trans 'Please enter a value in range 1 - 48.' %}" required>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">Core</span>
|
|
<i class="fa fa-plus-circle right text-5 p-3" data-plus="cores" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group px-n4">
|
|
<div class="input-group">
|
|
<div class="input-group-prepend"><i class="fa fa-minus-circle left text-5 p-3" data-minus="memory" aria-hidden="true"></i></div>
|
|
<input id="memory" class="input-price select-number form-control" type="number" min="2" max="200" name="memory"
|
|
{% if details_form.memory.value != None %}value="{{ details_form.memory.value }}"{% endif %} data-error="{% blocktrans with min_ram=min_ram %}Please enter a value in range {{min_ram}} - 200.{% endblocktrans %}" required step="1">
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">{% trans "RAM" %}</span>
|
|
<i class="fa fa-plus-circle right text-5 p-3" data-plus="memory" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group px-n4">
|
|
<div class="input-group">
|
|
<div class="input-group-prepend"><i class="fa fa-minus-circle left text-5 p-3" data-minus="storage" aria-hidden="true"></i></div>
|
|
<input id="storage" class="input-price select-number form-control" type="number" min="100" max="10000" step="100"
|
|
name="storage" {% if details_form.storage.value != None %}value="{{ details_form.storage.value }}"{% endif %} data-error="{% trans 'Please enter a value in range 100 - 10000.' %}" required>
|
|
<div class="input-group-append">
|
|
<span class="input-group-text">{% trans "GB" %}</span>
|
|
<i class="fa fa-plus-circle right text-5 p-3" data-plus="storage" aria-hidden="true"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{details_form.pricing_name.as_hidden}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row bg-white shadow-sm rounded p-3 p-4 pb-sm-2 mb-2">
|
|
<div class="">
|
|
<h3 class="text-5 font-weight-400 mb-3 mb-sm-4">{%trans "Billing Address"%}</h3>
|
|
<hr class="mx-n3 mb-4">
|
|
{% for message in messages %}
|
|
{% if 'vat_error' in message.tags %}
|
|
<ul class="list-unstyled"><li>
|
|
{{ message|safe }}
|
|
</li></ul>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if billing_address_form.non_field_errors %}
|
|
<div class="p-2 my-4">
|
|
{{ billing_address_form.non_field_errors }}
|
|
</div>
|
|
{% endif %}
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="form-group">
|
|
<label for="{{ billing_address_form.full_name.id_for_label}}">{% trans "Full Name" %}</label>
|
|
{{billing_address_form.full_name}}
|
|
{{ billing_address_form.full_name.errors }}
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-group">
|
|
<label for="{{ billing_address_form.street.id_for_label}}">{% trans "Street" %}</label>
|
|
{{billing_address_form.street}}
|
|
{{ billing_address_form.full_name.errors }}
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6">
|
|
<div class="form-group">
|
|
<label for="{{ billing_address_form.city.id_for_label}}">{% trans "City" %}</label>
|
|
{{billing_address_form.city}}
|
|
{{ billing_address_form.city.errors }}
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6">
|
|
<div class="form-group">
|
|
<label for="{{ billing_address_form.country.id_for_label}}">{% trans "Country" %}</label>
|
|
{{billing_address_form.country}}
|
|
{{ billing_address_form.country.errors }}
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6">
|
|
<div class="form-group">
|
|
<label for="{{ billing_address_form.postal_code.id_for_label}}">{% trans "Zip Code" %}</label>
|
|
{{billing_address_form.postal_code}}
|
|
{{ billing_address_form.postal_code.errors }}
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6">
|
|
<div class="form-group">
|
|
<label for="{{ billing_address_form.vat_number.id_for_label}}">{% trans "VAT Number" %}</label>
|
|
{{billing_address_form.vat_number}}
|
|
{{ billing_address_form.vat_number.errors }}
|
|
</div>
|
|
</div>
|
|
{% for field in billing_address_form %}
|
|
{% if field.html_name in 'active,owner' %}
|
|
{{ field.as_hidden }}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="row bg-white shadow-sm rounded p-4 ml-2 mb-2">
|
|
<div class="container">
|
|
<h3 class="text-5 font-weight-400 mb-3 mb-sm-4">{% trans "Payment Details"%}</h3>
|
|
<hr class="mx-n3 mb-3">
|
|
<div id="acount_balance">
|
|
<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 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>
|
|
<hr class="mt-1 mx-n3">
|
|
</div>
|
|
<div class="row align-items-center flex-row">
|
|
<div class="col col-lg-12">
|
|
<p>{% trans "Setup Fees"%} <span class="float-right">{{vm_pricing.set_up_fees}} CHF</span></p>
|
|
<p>{% trans "Recurring Price"%} <span id="recurring_price" class="float-right">{{request.session.pricing.recurring_price}} CHF</span></p>
|
|
{% if vm_pricing.discount_amount %}
|
|
<p>{% trans "Discount"%} <span class="float-right text-danger"> - {{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 vm_pricing.vat_inclusive %}({%trans "including VAT" %}){% endif %}
|
|
</small>
|
|
<span id="total" class="float-right">{{request.session.pricing.total}} CHF</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<hr class="mt-2 mx-n3">
|
|
<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 %}
|
|
{% blocktrans %}There is not enough balance in your account to proceed with this order. You can select a card or add a new card to fill up your account balance to proceed with the order.{% endblocktrans %}
|
|
{% else %}
|
|
{% blocktrans %}There is not enough balance in your account to proceed with this order. Please fill in your credit card information below.{% endblocktrans %}
|
|
{% endif %}
|
|
</p>
|
|
<div>
|
|
{% for card in cards %}
|
|
<div class="credit-card-info">
|
|
<div class="form-check py-2 custom-control custom-radio">
|
|
<input id="card-{{card.id}}" name="payment_card" class="custom-control-input" type="radio" value="{{card.id}}">
|
|
<label class="custom-control-label" for="card-{{card.id}}">
|
|
<div class="featured-box style-1">
|
|
<div class="featured-box-icon text-primary text-9"> <i class="fab fa-cc-visa"></i> </div>
|
|
<div>
|
|
<h6 class="mb-0"> ***** {{card.last4}}</h6>
|
|
<p class="text-1 mb-0">{% trans "Expiry:" %} {{card.month}}/{{card.year}}</p>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% if cards_len > 0 %}
|
|
<div class="form-check py-2 custom-control custom-radio">
|
|
<input id="new-card" name="payment_card" class="custom-control-input" type="radio" value="new">
|
|
<label class="custom-control-label" for="new-card"><h6 class="mb-0">{% trans "Add New Card" %}</h6></label>
|
|
</div>
|
|
<div class="text-right">
|
|
<button id="checkout-btn" class="btn btn-primary btn-wide" style="display:none;" type="submit" name="payment-button">{%trans "Checkout" %}</button>
|
|
</div>
|
|
<div id="newcard" style="display:none;">
|
|
<div class="card-details-box p-4 bg-light">
|
|
{% include "uncloud_pay/includes/_card.html" %}
|
|
</div>
|
|
</div>
|
|
{% else%}
|
|
{% include "uncloud_pay/includes/_card.html" %}
|
|
{% endif %}
|
|
</div>
|
|
{% endwith %}
|
|
</div>
|
|
<div id="has-enough-balance" {% if show_cards %}style="display:none;"{% endif %}>
|
|
<p class="text-muted">
|
|
{% blocktrans %}You can use your account balance to make the payment. Press Continue to select the domain settings. You can review and confirm your order and payment in the next page.{% endblocktrans %}
|
|
</p>
|
|
<div class="text-right">
|
|
<button id="continue-btn" class="btn btn-primary btn-wide">{%trans "Continue" %}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js_extra %}
|
|
{% if stripe_key %}
|
|
{% get_current_language as LANGUAGE_CODE %}
|
|
<script type="text/javascript">
|
|
window.processing_text = '{%trans "Processing" %}';
|
|
window.enter_your_card_text = '{%trans "Enter your credit card number" %}';
|
|
|
|
(function () {
|
|
window.stripeKey = "{{stripe_key}}";
|
|
window.current_lan = "{{LANGUAGE_CODE}}";
|
|
{% if show_cards %}
|
|
window.hasCreditcard = true;
|
|
{% endif %}
|
|
})();
|
|
</script>
|
|
{%endif%}
|
|
|
|
<!-- jQuery -->
|
|
<script src="https://js.stripe.com/v3/"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
|
|
<!-- Custom JS -->
|
|
{% compress js %}
|
|
<script type="text/javascript" src="{% static 'nextcloud/js/payment.js' %}"></script>
|
|
{% endcompress %}
|
|
{% endblock js_extra %} |