318 lines
18 KiB
HTML
318 lines
18 KiB
HTML
{% extends "datacenterlight/base_hosting.html" %}
|
|
{% load staticfiles bootstrap3 i18n custom_tags humanize %}
|
|
|
|
{% block content %}
|
|
<div id="order-detail{{order.pk}}" class="order-detail-container">
|
|
{% if messages %}
|
|
<div class="alert alert-warning">
|
|
{% for message in messages %}
|
|
<span>{{ message }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% if not error %}
|
|
<div class="dashboard-container-head">
|
|
<h1 class="dashboard-title-thin">
|
|
<img src="{% static 'hosting/img/billing.svg' %}" class="un-icon">{% blocktrans with page_header_text=page_header_text|default:"Invoice" %}{{page_header_text}}{% endblocktrans %}
|
|
</h1>
|
|
</div>
|
|
<div class="order-details">
|
|
<p>
|
|
<strong>{% trans "Date" %}:</strong>
|
|
<span class="locale_date">
|
|
{% now "Y-m-d h:i a" %}
|
|
</span>
|
|
</p>
|
|
<hr>
|
|
<div>
|
|
<address>
|
|
<h4>{% trans "Billed to" %}:</h4>
|
|
<p>
|
|
{% with request.session.billing_address_data as billing_address %}
|
|
{{billing_address.cardholder_name}}<br>
|
|
{{billing_address.street_address}}, {{billing_address.postal_code}}<br>
|
|
{{billing_address.city}}, {{billing_address.country}}
|
|
{% if billing_address.vat_number %}
|
|
<br/>{% trans "VAT Number" %} {{billing_address.vat_number}}
|
|
{% if vm.vat_validation_status != "ch_vat" and vm.vat_validation_status != "not_needed" %}
|
|
{% if vm.vat_validation_status == "verified" %}
|
|
<span class="fa fa-fw fa-check-circle" aria-hidden="true" title='{% trans "Your VAT number has been verified" %}'></span>
|
|
{% else %}
|
|
<span class="fa fa-fw fa-info-circle" aria-hidden="true" title='{% trans "Your VAT number is under validation. VAT will be adjusted, once the validation is complete." %}'></span>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
</p>
|
|
</address>
|
|
</div>
|
|
<hr>
|
|
<div>
|
|
<h4>{% trans "Payment method" %}:</h4>
|
|
<p>
|
|
{{cc_brand|default:_('Credit Card')}} {% trans "ending in" %} ****{{cc_last4}}<br>
|
|
{% trans "Expiry" %} {{cc_exp_year}}/{{cc_exp_month}}<br/>
|
|
{{request.user.email}}
|
|
</p>
|
|
</div>
|
|
<hr>
|
|
<div>
|
|
<h4>{% trans "Order summary" %}</h4>
|
|
<style>
|
|
@media screen and (max-width:767px){
|
|
.cmf-ord-heading {
|
|
font-size: 11px;
|
|
}
|
|
.order-detail-container .order-details {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:367px){
|
|
.cmf-ord-heading {
|
|
font-size: 11px;
|
|
}
|
|
.order-detail-container .order-details {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
{% if generic_payment_details %}
|
|
<div class="row">
|
|
<div class="col-sm-9">
|
|
<p>
|
|
<strong>{% trans "Product" %}:</strong>
|
|
{{ generic_payment_details.product_name }}
|
|
</p>
|
|
{% if generic_payment_details.description %}
|
|
<p>
|
|
<span>{% trans "Description" %}: </span>
|
|
<strong class="pull-right">{{generic_payment_details.description}}</strong>
|
|
</p>
|
|
{% endif %}
|
|
{% if generic_payment_details.recurring %}
|
|
<p>
|
|
<span>{% trans "Recurring" %}: </span>
|
|
<strong class="pull-right">Yes</strong>
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<hr class="thin-hr">
|
|
</div>
|
|
<div class="col-sm-9">
|
|
<p>
|
|
<strong class="text-uppercase">{% trans "Price Before VAT" %}</strong>
|
|
<strong class="pull-right">{{generic_payment_details.amount_before_vat|floatformat:2|intcomma}} CHF</strong>
|
|
</p>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<hr class="thin-hr">
|
|
</div>
|
|
<div class="col-sm-9">
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-4 col-xs-4">
|
|
<p><span></span></p>
|
|
</div>
|
|
<div class="col-md-3 col-sm-3 col-xs-3">
|
|
<p class="text-right"><strong class="cmf-ord-heading">{% trans "Pre VAT" %}</strong></p>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<p class="text-right"><strong class="cmf-ord-heading">{% trans "VAT for" %} {{generic_payment_details.vat_country}} ({{generic_payment_details.vat_rate}}%)</strong></p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-4 col-xs-4">
|
|
<p><span>Price</span></p>
|
|
</div>
|
|
<div class="col-md-3 col-sm-3 col-xs-3">
|
|
<p><span class="pull-right" >{{generic_payment_details.amount_before_vat|floatformat:2|intcomma}} CHF</span></p>
|
|
</div>
|
|
<div class="col-md-5 col-sm-5 col-xs-5">
|
|
<p><span class="pull-right">{{generic_payment_details.amount|floatformat:2|intcomma}} CHF</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<hr class="thin-hr">
|
|
</div>
|
|
<div class="col-sm-9">
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-4 col-xs-4">
|
|
<p><strong>Total</strong></p>
|
|
</div>
|
|
<div class="col-md-3 col-sm-3 col-xs-3">
|
|
<p><strong class="pull-right">{{generic_payment_details.amount_before_vat|floatformat:2|intcomma}} CHF</strong></p>
|
|
</div>
|
|
<div class="col-md-5 col-sm-5 col-xs-5">
|
|
<p><strong class="pull-right">{{generic_payment_details.amount|floatformat:2|intcomma}} CHF</strong></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<hr class="thin-hr">
|
|
</div>
|
|
<div class="col-sm-9">
|
|
<strong class="text-uppercase align-center">{% trans "Your Price in Total" %}</strong>
|
|
<strong class="total-price pull-right">{{generic_payment_details.amount|floatformat:2|intcomma}} CHF</strong>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<p>
|
|
<strong>{% trans "Product" %}:</strong>
|
|
{{ request.session.template.name }}
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-sm-9">
|
|
<p>
|
|
<span>{% trans "Cores" %}: </span>
|
|
<strong class="pull-right">{{vm.cpu|floatformat}}</strong>
|
|
</p>
|
|
<p>
|
|
<span>{% trans "Memory" %}: </span>
|
|
<strong class="pull-right">{{vm.memory|intcomma}} GB</strong>
|
|
</p>
|
|
<p>
|
|
<span>{% trans "Disk space" %}: </span>
|
|
<strong class="pull-right">{{vm.disk_size|intcomma}} GB</strong>
|
|
</p>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<hr class="thin-hr">
|
|
</div>
|
|
<div class="col-sm-9">
|
|
<p>
|
|
<strong class="text-uppercase">{% trans "Price Before VAT" %}</strong>
|
|
<strong class="pull-right">{{vm.price|floatformat:2|intcomma}} CHF</strong>
|
|
</p>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<hr class="thin-hr">
|
|
</div>
|
|
<div class="col-sm-9">
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-4 col-xs-4">
|
|
<p><span></span></p>
|
|
</div>
|
|
<div class="col-md-3 col-sm-3 col-xs-3">
|
|
<p class="text-right"><strong class="cmf-ord-heading">{% trans "Pre VAT" %}</strong></p>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<p class="text-right"><strong class="cmf-ord-heading">{% trans "VAT for" %} {{vm.vat_country}} ({{vm.vat_percent}}%)</strong></p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-4 col-xs-4">
|
|
<p><span>Price</span></p>
|
|
</div>
|
|
<div class="col-md-3 col-sm-3 col-xs-3">
|
|
<p><span class="pull-right" >{{vm.price|floatformat:2|intcomma}} CHF</span></p>
|
|
</div>
|
|
<div class="col-md-5 col-sm-5 col-xs-5">
|
|
<p><span class="pull-right">{{vm.price_with_vat|floatformat:2|intcomma}} CHF</span></p>
|
|
</div>
|
|
</div>
|
|
{% if vm.discount.amount > 0 %}
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-4 col-xs-4">
|
|
<p><span>{{vm.discount.name}}</span></p>
|
|
</div>
|
|
<div class="col-md-3 col-sm-3 col-xs-3">
|
|
<p><span class="pull-right">-{{vm.discount.amount|floatformat:2|intcomma}} CHF</span></p>
|
|
</div>
|
|
<div class="col-md-5 col-sm-5 col-xs-5">
|
|
<p><span class="pull-right">-{{vm.discount.amount_with_vat|floatformat:2|intcomma}} CHF</span></p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<hr class="thin-hr">
|
|
</div>
|
|
<div class="col-sm-9">
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-4 col-xs-4">
|
|
<p><strong>Total</strong></p>
|
|
</div>
|
|
<div class="col-md-3 col-sm-3 col-xs-3">
|
|
<p><strong class="pull-right">{{vm.price_after_discount|floatformat:2|intcomma}} CHF</strong></p>
|
|
</div>
|
|
<div class="col-md-5 col-sm-5 col-xs-5">
|
|
<p><strong class="pull-right">{{vm.price_after_discount_with_vat|floatformat:2|intcomma}} CHF</strong></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<hr class="thin-hr">
|
|
</div>
|
|
<div class="col-sm-9">
|
|
<strong class="text-uppercase align-center">{% trans "Your Price in Total" %}</strong>
|
|
<strong class="total-price pull-right">{{vm.total_price|floatformat:2|intcomma}} CHF</strong>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<hr class="thin-hr">
|
|
</div>
|
|
<form id="virtual_machine_create_form" action="" method="POST">
|
|
{% csrf_token %}
|
|
<div class="row">
|
|
<div class="col-sm-8">
|
|
{% if generic_payment_details %}
|
|
{% if generic_payment_details.recurring %}
|
|
{% if generic_payment_details.recurring_interval == 'year' %}
|
|
<div class="dcl-place-order-text">{% blocktrans with total_price=generic_payment_details.amount|floatformat:2|intcomma %}By clicking "Place order" this plan will charge your credit card account with {{total_price}} CHF/year{% endblocktrans %}.</div>
|
|
{% else %}
|
|
<div class="dcl-place-order-text">{% blocktrans with total_price=generic_payment_details.amount|floatformat:2|intcomma %}By clicking "Place order" this plan will charge your credit card account with {{total_price}} CHF/month{% endblocktrans %}.</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="dcl-place-order-text">{% blocktrans with total_price=generic_payment_details.amount|floatformat:2|intcomma %}By clicking "Place order" this payment will charge your credit card account with a one time amount of {{total_price}} CHF{% endblocktrans %}.</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="dcl-place-order-text">{% blocktrans with vm_total_price=vm.total_price|floatformat:2|intcomma %}By clicking "Place order" this plan will charge your credit card account with {{vm_total_price}} CHF/month{% endblocktrans %}.</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-sm-4 order-confirm-btn text-right">
|
|
<button class="btn choice-btn" id="btn-create-vm" data-toggle="modal" data-target="#createvm-modal">
|
|
{% trans "Place order" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
|
|
|
|
<!-- Create VM Modal -->
|
|
<div class="modal fade" id="createvm-modal" tabindex="-1" role="dialog"
|
|
aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="modal-icon">
|
|
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
|
|
<span class="sr-only">{% trans "Processing..." %}</span>
|
|
</div>
|
|
<h4 class="modal-title" id="createvm-modal-title"></h4>
|
|
<div class="modal-text" id="createvm-modal-body">
|
|
{% trans "Hold tight, we are processing your request" %}
|
|
</div>
|
|
<div class="modal-footer">
|
|
<a id="createvm-modal-done-btn" class="btn btn-success btn-ok btn-wide hide" href="{% url 'hosting:virtual_machines' %}">{% trans "OK" %}</a>
|
|
<button id="createvm-modal-close-btn" type="button" class="btn btn-danger btn-ok btn-wide hide" data-dismiss="modal" aria-label="create-vm-close">{% trans "Close" %}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- / Create VM Modal -->
|
|
|
|
<script type="text/javascript">
|
|
{% trans "Some problem encountered. Please try again later." as err_msg %}
|
|
var create_vm_error_message = '{{err_msg|safe}}';
|
|
</script>
|
|
{%endblock%}
|