2021-07-30 06:51:35 +00:00
{% extends "matrixhosting/base.html" %}
2021-08-04 10:03:55 +00:00
{% load static compress i18n %}
2021-07-30 06:51:35 +00:00
{% block title %} Request Details {% endblock %}
{% block content %}
< div class = "container" >
<!-- Steps Progress bar -->
2021-08-09 07:43:11 +00:00
{% if messages %}
< div class = "row" >
{% for message in messages %}
{% if 'error' in message.tags %}
< div class = "col-lg-12 alert alert-danger" role = "alert" >
< h4 class = "alert-heading" > {%trans "Error!" %}< / h4 >
< p class = "mb-0" >
{{ message|safe }}
< / p >
< / div >
{% else %}
< div class = "col-lg-12 alert alert-success" role = "alert" >
< p class = "mb-0 float-left" >
{{ message|safe }}
< / p >
< button type = "button" class = "close" data-dismiss = "alert" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
{% endif %}
{% endfor %}
< / div >
{% endif %}
2021-07-30 06:51:35 +00:00
< 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 %}
2021-08-09 07:43:11 +00:00
< div class = "row" >
2021-07-30 06:51:35 +00:00
< 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 >
2021-08-09 07:43:11 +00:00
{{details_form.pricing_name.as_hidden}}
2021-07-30 06:51:35 +00:00
< / 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 class = "text-6 font-weight-400 {% if balance >= 0 %}text-success{%else%}text-danger{%endif%}" > {{ 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" >
2021-08-09 07:43:11 +00:00
< div class = "col col-lg-12" >
< p > {% trans "Setup Fees"%} < span class = "float-right" > {{matrix_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 >
2021-07-30 06:51:35 +00:00
{% if matrix_vm_pricing.discount_amount %}
2021-08-09 07:43:11 +00:00
< p > {% trans "Discount"%} < span class = "float-right text-danger" > - {{matrix_vm_pricing.discount_amount}} CHF< / span > < / p >
{% endif %}
< hr >
< 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 %})
< / small >
< span id = "total" class = "float-right" > {{request.session.pricing.total}} CHF< / span >
< / p >
2021-07-30 06:51:35 +00:00
< / div >
< / div >
< hr class = "mt-2 mx-n3" >
2021-07-30 07:04:32 +00:00
{% if show_cards %}
< div id = "cards-section" >
{% with cards_len=cards|length %}
2021-07-30 06:51:35 +00:00
< p class = "text-muted" >
{% if cards_len > 0 %}
2021-08-09 07:43:11 +00:00
{% blocktrans %}You haven't enough balance in your wallet, Please select one of the cards that you used before or fill in your credit card information below.{% endblocktrans %}
2021-07-30 06:51:35 +00:00
{% else %}
2021-08-09 07:43:11 +00:00
{% blocktrans %}You haven't enough balance in your wallet, Please fill in your credit card information below.{% endblocktrans %}
2021-07-30 06:51:35 +00:00
{% 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 %}
2021-07-30 07:04:32 +00:00
< div class = "form-check py-2 custom-control custom-radio" >
2021-07-30 06:51:35 +00:00
< 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 >
2021-07-30 07:04:32 +00:00
< div class = "text-right" >
2021-08-02 09:24:19 +00:00
< button id = "checkout-btn" class = "btn btn-primary btn-wide" style = "display:none;" type = "submit" name = "payment-button" > {%trans "Checkout" %}< / button >
2021-07-30 07:04:32 +00:00
< / div >
2021-08-02 09:24:19 +00:00
< div id = "newcard" style = "display:none;" >
2021-07-30 06:51:35 +00:00
< div class = "card-details-box p-4 bg-light" >
{% include "matrixhosting/includes/_card.html" %}
< / div >
< / div >
{% else%}
{% include "matrixhosting/includes/_card.html" %}
{% endif %}
< / div >
{% endwith %}
2021-07-30 07:04:32 +00:00
< / div >
{% else %}
2021-08-09 07:43:11 +00:00
< p class = "text-muted" >
{% blocktrans %}Your wallet has enough balance, Press Continue to fill the VM instance settings.{% endblocktrans %}
< / p >
2021-07-30 07:04:32 +00:00
< div class = "text-right" >
2021-08-09 07:43:11 +00:00
< button id = "continue-btn" class = "btn btn-primary btn-wide" type = "submit" > {%trans "Continue" %}< / button >
2021-07-30 07:04:32 +00:00
< / div >
{% endif %}
2021-07-30 06:51:35 +00:00
< / 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}}";
2021-08-04 10:03:55 +00:00
{% if show_cards %}
window.hasCreditcard = true;
{% endif %}
2021-07-30 06:51:35 +00:00
})();
< / 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 -->
2021-08-04 10:03:55 +00:00
{% compress js %}
< script type = "text/javascript" src = "{% static 'matrixhosting/js/payment.js' %}" > < / script >
{% endcompress %}
2021-07-30 06:51:35 +00:00
{% endblock js_extra %}