269 lines
14 KiB
HTML
269 lines
14 KiB
HTML
{% load static i18n %}
|
|
{% load bootstrap5 %}
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="Matrix Hosting by ungleich">
|
|
<meta name="author" content="ungleich glarus ag">
|
|
<title>Matrix Hosting - {% block title %} made in Switzerland{% endblock %}</title>
|
|
|
|
<!-- Vendor CSS -->
|
|
<!-- Bootstrap Core CSS -->
|
|
{% bootstrap_css %}
|
|
|
|
<!-- External Fonts -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paymentfont/1.2.5/css/paymentfont.min.css"/>
|
|
<link href="//fonts.googleapis.com/css?family=Lato:300,400,600,700" rel="stylesheet" type="text/css">
|
|
|
|
<link href="{% static 'matrixhosting/css/hosting.css' %}" rel="stylesheet">
|
|
|
|
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
|
|
<body>
|
|
<script>
|
|
window.paymentIntentSecret = "{{payment_intent_secret}}";
|
|
</script>
|
|
<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">
|
|
{% blocktrans with page_header_text=page_header_text|default:"Order" %}{{page_header_text}}{% endblocktrans %}
|
|
</h1>
|
|
</div>
|
|
<div class="order-details">
|
|
<hr>
|
|
<div>
|
|
<address>
|
|
<h4>{% trans "Billed to" %}:</h4>
|
|
<p>
|
|
{% with request.session.billing_address_data as billing_address %}
|
|
{{billing_address.full_name}}<br>
|
|
{{billing_address.street}}, {{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 pricing.vat_country != "ch" and pricing.vat_validation_status != "not_needed" %}
|
|
{% if pricing.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>
|
|
{{card.brand|default:_('Credit Card')}} {% trans "ending in" %} ****{{card.last4}}<br>
|
|
{% trans "Expiry" %} {{card.exp_year}}/{{card.exp_month}}<br/>
|
|
{{request.user.email}}
|
|
</p>
|
|
</div>
|
|
<hr>
|
|
<div>
|
|
<h4>{% trans "Order summary" %}</h4>
|
|
<style>
|
|
@media screen and (max-width:400px){
|
|
.header-no-left-padding {
|
|
padding-left: 0 !important;
|
|
}
|
|
}
|
|
@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>
|
|
<p>
|
|
<strong>{% trans "Product" %}:</strong>
|
|
Matrix Chat Hosting
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-sm-9">
|
|
<p>
|
|
<span>{% trans "Cores" %}: </span>
|
|
<strong class="pull-right">{{order.cores}}</strong>
|
|
</p>
|
|
<p>
|
|
<span>{% trans "Memory" %}: </span>
|
|
<strong class="pull-right">{{order.memory}} GB</strong>
|
|
</p>
|
|
<p>
|
|
<span>{% trans "Disk space" %}: </span>
|
|
<strong class="pull-right">{{order.storage}} 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">{{pricing.subtotal|floatformat:2}} 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-4">
|
|
<p class="text-right"><strong class="cmf-ord-heading">{% trans "Pre VAT" %}</strong></p>
|
|
</div>
|
|
<div class="col-md-5 col-sm-5 col-xs-4 header-no-left-padding">
|
|
<p class="text-right"><strong class="cmf-ord-heading">{% trans "With VAT for" %} {{pricing.vat_country}} ({{pricing.vat_percent}}%)</strong></p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-4 col-xs-4">
|
|
<p><span>Subtotal</span></p>
|
|
</div>
|
|
<div class="col-md-3 col-sm-3 col-xs-4">
|
|
<p><span class="pull-right" >{{pricing.subtotal|floatformat:2}} CHF</span></p>
|
|
</div>
|
|
<div class="col-md-5 col-sm-5 col-xs-4">
|
|
<p><span class="pull-right">{{pricing.price_with_vat|floatformat:2}} CHF</span></p>
|
|
</div>
|
|
</div>
|
|
{% if pricing.discount.amount > 0 %}
|
|
<div class="row">
|
|
<div class="col-md-4 col-sm-4 col-xs-4">
|
|
<p><span>{{pricing.discount.name}}</span></p>
|
|
</div>
|
|
<div class="col-md-3 col-sm-3 col-xs-4">
|
|
<p><span class="pull-right">-{{pricing.discount.amount|floatformat:2}} CHF</span></p>
|
|
</div>
|
|
<div class="col-md-5 col-sm-5 col-xs-4">
|
|
<p><span class="pull-right">-{{pricing.discount.amount_with_vat|floatformat:2}} 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-4">
|
|
<p><strong class="pull-right">{{pricing.subtotal_after_discount|floatformat:2}} CHF</strong></p>
|
|
</div>
|
|
<div class="col-md-5 col-sm-5 col-xs-4">
|
|
<p><strong class="pull-right">{{pricing.price_after_discount_with_vat|floatformat:2}} 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">{{pricing.total_price|floatformat:2}} CHF</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="thin-hr">
|
|
</div>
|
|
<form id="virtual_machine_create_form" action="{% url 'matrix:order_details' %}" method="POST">
|
|
{% csrf_token %}
|
|
<div class="row">
|
|
<div class="col-sm-8">
|
|
<div class="dcl-place-order-text">{% blocktrans with vm_total_price=vm.total_price|floatformat:2 %}By clicking "Place order" you agree to our <a href="">Terms of Service</a> and this plan will charge your credit card account with {{ vm_total_price }} CHF/month{% endblocktrans %}.</div>
|
|
</div>
|
|
<div class="col-sm-4 order-confirm-btn text-right">
|
|
<button class="btn choice-btn" id="btn-create-vm" data-bs-toggle="modal" data-bs-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 visually-hidden" href="">{% trans "OK" %}</a>
|
|
<button id="createvm-modal-close-btn" type="button" class="btn btn-danger btn-ok btn-wide visually-hidden" data-dismiss="modal" aria-label="create-vm-close">{% trans "Close" %}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- / Create VM Modal -->
|
|
|
|
<script type="text/javascript">
|
|
var create_vm_error_message = 'Some problem encountered. Please try again later';
|
|
var pm_id = '{{id_payment_method}}';
|
|
var error_url = '{{ error_msg.redirect }}';
|
|
var success_url = '{{ success_msg.redirect }}';
|
|
window.stripeKey = "{{stripe_key}}";
|
|
window.isSubscription = ("{{is_subscription}}" === 'true');
|
|
</script>
|
|
<!-- jQuery -->
|
|
<script src="https://js.stripe.com/v3/"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
|
|
|
|
<script src="{% static 'fontawesome_free/js/all.min.js' %}"></script>
|
|
<!-- Bootstrap Core JavaScript -->
|
|
{% bootstrap_javascript %}
|
|
<!-- Custom JS -->
|
|
<script type="text/javascript" src="{% static 'matrixhosting/js/order.js' %}"></script>
|
|
</body>
|
|
</html>
|