invoice page redesigned

hosting/static/hosting/css/landing-page.css

@@ -580,9 +580,9 @@ a.unlink:hover {
 }
 
 .dcl-place-order-text{
-   font-size: 13px;
+   /* font-size: 13px; */
    color: #808080;
-   margin-bottom: 15px;
+   /* margin-bottom: 15px; */
 }
 
 .dcl-order-table-total .tbl-total {

hosting/static/hosting/css/order.css

@@ -1,6 +1,6 @@
 .order-detail-container {
     max-width: 600px;
-    margin: 100px auto;
+    margin: 100px auto 40px;
     border: 1px solid #ccc;
     padding: 30px;
 }
@@ -23,6 +23,7 @@
 
 .order-detail-container .dashboard-title-thin {
     margin-top: 0;
+    margin-left: -3px;
 }
 
 .order-detail-container .dashboard-title-thin .un-icon {
@@ -32,6 +33,7 @@
 .order-detail-container .dashboard-container-head {
     position: relative;
     padding: 0;
+    margin-bottom: 38px;
 }
 
 .order-detail-container .dashboard-container-options {
@@ -44,3 +46,33 @@
     /* margin-right: 5px; */
     width: 20px;
 }
+
+.order-detail-container .order-details {
+    margin-bottom: 30px;
+}
+
+.order-detail-container .order-details strong {
+    color: #777;
+}
+
+.order-detail-container h4 {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 15px;
+}
+
+.order-detail-container p {
+    margin-bottom: 5px;
+    color: #595959;
+}
+
+.order-detail-container hr {
+    margin: 15px 0;
+}
+
+@media (max-width: 767px) {
+    .order-confirm-btn {
+        text-align: center;
+        margin-top: 10px;
+    }
+}

hosting/static/hosting/js/order.js

@@ -0,0 +1,15 @@
+$(document).ready(function() {
+    $('.btn-pdf').click(function(e) {
+        e.preventDefault();
+        var $target = $($(this).attr('data-target')) || $('body');
+        var fileName = $target.attr('id') + '.pdf';
+        html2pdf($target[0], {
+            filename: fileName,
+        });
+    });
+    $('.btn-print').click(function(e) {
+        e.preventDefault();
+        console.log('a');
+        window.print();
+    });
+});

hosting/static/hosting/js/virtual_machine_detail.js

@@ -1,4 +1,5 @@
 $(document).ready(function () {
+    $('.modal-text').removeClass('hide');
     var create_vm_form = $('#virtual_machine_create_form');
     create_vm_form.submit(function () {
         $('#btn-create-vm').prop('disabled', true);
@@ -22,6 +23,7 @@ $(document).ready(function () {
                     fa_icon = $('.modal-icon > .fa');
                     fa_icon.attr('class', 'fa fa-times');
                     $('.modal-header > .close').attr('class', 'close');
+                    $('.modal-text').addClass('hide');
                     if (typeof(create_vm_error_message) !== 'undefined') {
                         $('#createvm-modal-title').text(create_vm_error_message);
                     }

hosting/templates/hosting/base_short.html

@@ -94,6 +94,13 @@
     <!-- Init JavaScript -->
     <script src="{% static 'hosting/js/initial.js' %}"></script>
 
+    {% block js_extra %}
+        {% comment %}
+            this block is above some files, because on stripe error scripts below the stripe
+            script are not properly executed.
+        {% endcomment %}
+    {% endblock js_extra %}
+
     <script src="https://js.stripe.com/v3/"></script>
     <script src="https://js.stripe.com/v2/"></script>
     <!-- Stripe Lib -->
@@ -108,8 +115,6 @@
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
     <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.js"></script>
 
-
-
 </body>
 
 </html>

hosting/templates/hosting/order_detail.html

@@ -5,7 +5,7 @@
 
 {% block content %}
 
-<div id="order-detail" class="order-detail-container">
+<div id="order-detail{{order.pk}}" class="order-detail-container">
     {% if messages %}
         <div class="alert alert-warning">
             {% for message in messages %}
@@ -19,18 +19,18 @@
                 <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 class="dashboard-container-options">
-                <button class="btn-plain"><img src="{% static 'hosting/img/icon-pdf.svg' %}" class="svg-img"></button>
+                <button type="button" class="btn-plain btn-pdf" data-target="#order-detail{{order.pk}}"><img src="{% static 'hosting/img/icon-pdf.svg' %}" class="svg-img"></button>
-                <button class="btn-plain"><img src="{% static 'hosting/img/icon-print.svg' %}" class="svg-img"></button>
+                <button type="button" class="btn-plain btn-print"><img src="{% static 'hosting/img/icon-print.svg' %}" class="svg-img"></button>
             </div>
         </div>
         <div class="order-details">
             {% if order %}
-                <div>
-                    <strong>{% trans "Order #"%} {{order.id}}</strong>
-                </div>
             {% endif %}
-            <div>
+                <p>
-                <strong>{% trans "Invoice Date"%}:</strong>
+                    <strong>{% trans "Order #" %} {{order.id}}</strong>
+                </p>
+            <p>
+                <strong>{% trans "Invoice Date" %}:</strong>
                 <span id="order-created_at">
                     {% if order %}
                         {{order.created_at|date:'Y-m-d H:i'}}
@@ -38,46 +38,43 @@
                         {% now "Y-m-d H:i" %}
                     {% endif %}
                 </span>
-            </div>
+            </p>
             {% if order %}
 
             {% endif %}
-            <div>
+            <p>
                 <strong>{% trans "Status" %}: </strong>
                 <strong>
                     {% if order.status == 'Approved' %}
-                        <span class="vm-status-active">{% trans "Approved" %}</span>
+                        <span class="vm-color-online">{% trans "Approved" %}</span>
                     {% else %}
                         <span class="vm-status-failed">{% trans "Declined" %}</span>
                     {% endif %}
                 </strong>
-            </div>
+            </p>
             <hr>
             <div>
                 <address>
                     <h4>{% trans "Billed to" %}:</h4>
-                    <div>
+                    <p>
                         {% if order %}
                             {{user.name}}<br>
-                            {{order.billing_address.street_address}},{{order.billing_address.postal_code}}<br>
+                            {{order.billing_address.street_address}}, {{order.billing_address.postal_code}}<br>
-                            {{order.billing_address.city}},
+                            {{order.billing_address.city}}, {{order.billing_address.country}}
-                            {{order.billing_address.country}}.
                         {% else %}
                             {% with request.session.billing_address_data as billing_address %}
                                 {{billing_address.cardholder_name}}<br>
-                            {{billing_address.street_address}},
+                                {{billing_address.street_address}}, {{billing_address.postal_code}}<br>
-                            {{billing_address.postal_code}}<br>
+                                {{billing_address.city}}, {{billing_address.country}}
-                            {{billing_address.city}},
-                            {{billing_address.country}}.
                             {% endwith %}
                         {% endif %}
-                    </div>
+                    </p>
                 </address>
             </div>
             <hr>
             <div>
                 <h4>{% trans "Payment method" %}:</h4>
-                <div>
+                <p>
                     {% if order %}
                         {{order.cc_brand}} {% trans "ending in" %} ****
                         {{order.last4}}<br>
@@ -87,82 +84,55 @@
                         {{cc_last4}}<br>
                         {{request.session.user.email}}
                     {% endif %}
+                </p>
             </div>
-            </div>
-            <div>
-                <h4>{% trans "Order summary"%}</h4>
-                <div>
-                    {% if request.session.specs %}
-                        {% request.session.specs as vm %}
-                    {% endif %}
-                    <strong>{% trans "Product" %}:</strong> {{request.session.template.name}}
-                </div>
-            </div>
-
-        </div>
-
-        <h3><b></b></h3>
             <hr>
-        <div class="content">
+            <div>
-
+                <h4>{% trans "Order summary" %}</h4>
-            <p><b>{% trans "Cores"%}</b>
+                <p>
+                    <strong>{% trans "Product" %}:</strong> {{vm.name}}
+                </p>
+                <div class="row">
+                    <div class="col-sm-6">
+                        {% comment %}
+                        <p>
+                            <span>{% trans "Period" %}</span>
                             <span class="pull-right">{{vm.cpu}}</span>
                         </p>
-            <hr>
+                        {% endcomment %}
-            <p><b>{% trans "Memory"%}</b>
+                        <p>
+                            <span>{% trans "Cores" %}</span>
+                            <span class="pull-right">{{vm.cpu}}</span>
+                        </p>
+                        <p>
+                            <span>{% trans "Memory" %}</span>
                             <span class="pull-right">{{vm.memory}} GB</span>
                         </p>
-            <hr>
+                        <p>
-            <p><b>{% trans "Disk space"%}</b>
+                            <span>{% trans "Disk space" %}</span>
                             <span class="pull-right">{{vm.disk_size}} GB</span>
                         </p>
-            <hr>
+                        <p>
-            <p><b>{% trans "Configuration"%}</b>
+                            <span>{% trans "Total" %}</span>
-                <span class="pull-right">{{request.session.template.name}}</span>
+                            <span class="pull-right">{{vm.price}} CHF</span>
                         </p>
+                    </div>
+                </div>
+            </div>
+            {% if not order %}
                 <hr>
-            <h4>{% trans "Total"%}
-                <p class="pull-right">
-                    <b>{{vm.price}} CHF</b>
-                    <span class="dcl-price-month"> /{% trans "Month" %}
-                            </span>
-                </p>
-            </h4>
-            {% endwith %}
-            {% else %}
-            <p><b>{% trans "Cores"%}</b>
-                <span class="pull-right">{{vm.cores}}</span>
-            </p>
-            <hr>
-            <p><b>{% trans "Memory"%}</b>
-                <span class="pull-right">{{vm.memory}} GB</span>
-            </p>
-            <hr>
-            <p><b>{% trans "Disk space"%}</b>
-                <span class="pull-right">{{vm.disk_size}} GB</span>
-            </p>
-            <hr>
-            <h4>{% trans "Total"%}<p class="pull-right"><b>{{vm.price}}
-                CHF</b><span
-                    class="dcl-price-month"> /{% trans "Month" %}</span>
-            </p></h4>
             {% endif %}
         </div>
-        <br/>
         {% if not order %}
             <form method="post" id="virtual_machine_create_form">
                 {% csrf_token %}
                 <div class="row">
                     <div class="col-sm-8">
-                        <p class="dcl-place-order-text">{% blocktrans with vm_price=request.session.specs.price %}By clicking "Place order" this plan will charge your credit card account with the fee of {{ vm_price }}CHF/month{% endblocktrans %}.</p>
+                        <div class="dcl-place-order-text">{% blocktrans with vm_price=request.session.specs.price %}By clicking "Place order" this plan will charge your credit card account with the fee of {{ vm_price }}CHF/month{% endblocktrans %}.</div>
                     </div>
-                    <div class="col-sm-4 content">
+                    <div class="col-sm-4 order-confirm-btn text-right">
-                        <button class="btn btn-info pull-right"
+                        <button class="btn choice-btn" id="btn-create-vm" data-href="{% url 'hosting:order-confirmation' %}" data-toggle="modal" data-target="#createvm-modal">
-                                id="btn-create-vm"
+                            {% trans "Place order" %}
-                                data-href="{% url 'hosting:order-confirmation' %}"
-                                data-toggle="modal"
-                                data-target="#createvm-modal">
-                            {% trans "Place order"%}
                         </button>
                     </div>
                 </div>
@@ -170,8 +140,16 @@
         {% endif %}
     {% endif %}
 </div>
-<!-- Create VM Modal -->
+
-<div class="modal fade" id="createvm-modal" tabindex="-1" role="dialog"
+    <div class="text-center" style="margin-bottom: 50px;">
+        <a class="btn btn-vm-back" href="{% url 'hosting:orders' %}">{% trans "BACK TO LIST" %}</a>
+    </div>
+{% if order %}
+{% endif %}
+
+{% if not order %}
+    <!-- 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">
@@ -196,9 +174,9 @@
                 </div>
             </div>
         </div>
-</div>
+    </div>
-<!-- / Create VM Modal -->
+    <!-- / Create VM Modal -->
-
+{% endif %}
 
 <script type="text/javascript">
     {% trans "Some problem encountered. Please try again later." as err_msg %}
@@ -210,13 +188,12 @@
         document.getElementById('order-created_at').innerHTML = locale_date;
 
     };
-
-</script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
-<script src="{% static 'hosting/js/html2pdf.js' %}"></script>
-<script>
-    html2pdf(document.getElementById('order-detail'));
 </script>
 {%endblock%}
 
+{% block js_extra %}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
+    <script src="{% static 'hosting/js/html2pdf.js' %}"></script>
+    <script src="{% static 'hosting/js/order.js' %}"></script>
+{% endblock js_extra %}

hosting/views.py

@@ -698,6 +698,7 @@ class OrdersHostingDetailView(LoginRequiredMixin,
                 'last4')
             context['cc_brand'] = card_details.get('response_object').get(
                 'cc_brand')
+            context['vm'] = request.session.get('specs')
         return context
 
     def post(self, request):