Add invoice detail
This commit is contained in:
		
					parent
					
						
							
								ba9e554881
							
						
					
				
			
			
				commit
				
					
						94586c854a
					
				
			
		
					 1 changed files with 235 additions and 0 deletions
				
			
		
							
								
								
									
										235
									
								
								hosting/templates/hosting/invoice_detail.html
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										235
									
								
								hosting/templates/hosting/invoice_detail.html
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
					@ -0,0 +1,235 @@
 | 
				
			||||||
 | 
					{% extends "hosting/base_short.html" %}
 | 
				
			||||||
 | 
					{% load staticfiles bootstrap3 humanize i18n custom_tags %}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					{% block content %}
 | 
				
			||||||
 | 
					<div id="order-detail{{invoice.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>
 | 
				
			||||||
 | 
					        {% if invoice %}
 | 
				
			||||||
 | 
					        <div class="dashboard-container-options">
 | 
				
			||||||
 | 
					            <button type="button" class="btn-plain btn-pdf"
 | 
				
			||||||
 | 
					                    data-target="#order-detail{{invoice.pk}}"><img
 | 
				
			||||||
 | 
					                    src="{% static 'hosting/img/icon-pdf.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>
 | 
				
			||||||
 | 
					        {% endif %}
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					    <div class="order-details">
 | 
				
			||||||
 | 
					        {% if invoice %}
 | 
				
			||||||
 | 
					        <p>
 | 
				
			||||||
 | 
					            <strong>{% trans "Invoice #" %} {{invoice.invoice_number}}</strong>
 | 
				
			||||||
 | 
					        </p>
 | 
				
			||||||
 | 
					        {% endif %}
 | 
				
			||||||
 | 
					        <p>
 | 
				
			||||||
 | 
					            <strong>{% trans "Date" %}:</strong>
 | 
				
			||||||
 | 
					            <span class="locale_date">
 | 
				
			||||||
 | 
					                    {% if invoice %}
 | 
				
			||||||
 | 
					                        {{invoice.paid_at|date:'Y-m-d h:i a'}}
 | 
				
			||||||
 | 
					                    {% else %}
 | 
				
			||||||
 | 
					                        {% now "Y-m-d h:i a" %}
 | 
				
			||||||
 | 
					                    {% endif %}
 | 
				
			||||||
 | 
					                </span>
 | 
				
			||||||
 | 
					        </p>
 | 
				
			||||||
 | 
					        {% if invoice and vm %}
 | 
				
			||||||
 | 
					        <p>
 | 
				
			||||||
 | 
					            <strong>{% trans "Status" %}: </strong>
 | 
				
			||||||
 | 
					            <strong>
 | 
				
			||||||
 | 
					                {% if vm.terminated_at %}
 | 
				
			||||||
 | 
					                <span class="vm-color-failed">{% trans "Terminated" %}</span>
 | 
				
			||||||
 | 
					                {% elif invoice.order.status == 'Approved' %}
 | 
				
			||||||
 | 
					                <span class="vm-color-online">{% trans "Approved" %}</span>
 | 
				
			||||||
 | 
					                {% else %}
 | 
				
			||||||
 | 
					                <span class="vm-status-failed">{% trans "Declined" %}</span>
 | 
				
			||||||
 | 
					                {% endif %}
 | 
				
			||||||
 | 
					            </strong>
 | 
				
			||||||
 | 
					        </p>
 | 
				
			||||||
 | 
					        {% endif %}
 | 
				
			||||||
 | 
					        <hr>
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					            <address>
 | 
				
			||||||
 | 
					                <h4>{% trans "Billed to" %}:</h4>
 | 
				
			||||||
 | 
					                <p>
 | 
				
			||||||
 | 
					                    {% if invoice.order %}
 | 
				
			||||||
 | 
					                    {{user.name}}<br>
 | 
				
			||||||
 | 
					                    {{invoice.order.billing_address.street_address}},
 | 
				
			||||||
 | 
					                    {{invoice.order.billing_address.postal_code}}<br>
 | 
				
			||||||
 | 
					                    {{invoice.order.billing_address.city}},
 | 
				
			||||||
 | 
					                    {{invoice.order.billing_address.country}}
 | 
				
			||||||
 | 
					                    {% endif %}
 | 
				
			||||||
 | 
					                </p>
 | 
				
			||||||
 | 
					            </address>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <hr>
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					            <h4>{% trans "Payment method" %}:</h4>
 | 
				
			||||||
 | 
					            <p>
 | 
				
			||||||
 | 
					                {% if invoice.order %}
 | 
				
			||||||
 | 
					                {{invoice.order.cc_brand}} {% trans "ending in" %} ****
 | 
				
			||||||
 | 
					                {{invoice.order.last4}}<br>
 | 
				
			||||||
 | 
					                {{user.email}}
 | 
				
			||||||
 | 
					                {% endif %}
 | 
				
			||||||
 | 
					            </p>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <hr>
 | 
				
			||||||
 | 
					        <div>
 | 
				
			||||||
 | 
					            <h4>{% trans "Invoice summary" %}</h4>
 | 
				
			||||||
 | 
					            {% if vm %}
 | 
				
			||||||
 | 
					            <p>
 | 
				
			||||||
 | 
					                <strong>{% trans "Product" %}:</strong> 
 | 
				
			||||||
 | 
					                {% if vm.name %}
 | 
				
			||||||
 | 
					                {{ vm.name }}
 | 
				
			||||||
 | 
					                {% endif %}
 | 
				
			||||||
 | 
					            </p>
 | 
				
			||||||
 | 
					            <div class="row">
 | 
				
			||||||
 | 
					                <div class="col-sm-6">
 | 
				
			||||||
 | 
					                    {% if period_start %}
 | 
				
			||||||
 | 
					                    <p>
 | 
				
			||||||
 | 
					                        <span>{% trans "Period" %}: </span>
 | 
				
			||||||
 | 
					                        <span>
 | 
				
			||||||
 | 
					                                        <span class="locale_date"
 | 
				
			||||||
 | 
					                                              data-format="YYYY/MM/DD">{{ period_start|date:'Y-m-d h:i a' }}</span> - <span
 | 
				
			||||||
 | 
					                                class="locale_date" data-format="YYYY/MM/DD">{{ period_end|date:'Y-m-d h:i a' }}</span>
 | 
				
			||||||
 | 
					                                    </span>
 | 
				
			||||||
 | 
					                    </p>
 | 
				
			||||||
 | 
					                    {% endif %}
 | 
				
			||||||
 | 
					                    <p>
 | 
				
			||||||
 | 
					                        <span>{% trans "Cores" %}: </span>
 | 
				
			||||||
 | 
					                        {% if vm.cores %}
 | 
				
			||||||
 | 
					                        <strong class="pull-right">{{vm.cores|floatformat}}</strong>
 | 
				
			||||||
 | 
					                        {% else %}
 | 
				
			||||||
 | 
					                        <strong class="pull-right">{{vm.cpu|floatformat}}</strong>
 | 
				
			||||||
 | 
					                        {% endif %}
 | 
				
			||||||
 | 
					                    </p>
 | 
				
			||||||
 | 
					                    <p>
 | 
				
			||||||
 | 
					                        <span>{% trans "Memory" %}: </span>
 | 
				
			||||||
 | 
					                        <strong class="pull-right">{{vm.memory}} GB</strong>
 | 
				
			||||||
 | 
					                    </p>
 | 
				
			||||||
 | 
					                    <p>
 | 
				
			||||||
 | 
					                        <span>{% trans "Disk space" %}: </span>
 | 
				
			||||||
 | 
					                        <strong class="pull-right">{{vm.disk_size}} GB</strong>
 | 
				
			||||||
 | 
					                    </p>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					                <div class="col-sm-12">
 | 
				
			||||||
 | 
					                    <hr class="thin-hr">
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					                {% if vm.vat > 0 or vm.discount.amount > 0 %}
 | 
				
			||||||
 | 
					                <div class="col-sm-6">
 | 
				
			||||||
 | 
					                    <div class="subtotal-price">
 | 
				
			||||||
 | 
					                        {% if vm.vat > 0 %}
 | 
				
			||||||
 | 
					                        <p>
 | 
				
			||||||
 | 
					                            <strong>{% trans "Subtotal" %} </strong>
 | 
				
			||||||
 | 
					                            <strong class="pull-right">{{vm.price|floatformat:2|intcomma}}
 | 
				
			||||||
 | 
					                                CHF</strong>
 | 
				
			||||||
 | 
					                        </p>
 | 
				
			||||||
 | 
					                        <p>
 | 
				
			||||||
 | 
					                            <small>{% trans "VAT" %} ({{
 | 
				
			||||||
 | 
					                                vm.vat_percent|floatformat:2|intcomma }}%)
 | 
				
			||||||
 | 
					                            </small>
 | 
				
			||||||
 | 
					                            <strong class="pull-right">{{vm.vat|floatformat:2|intcomma}}
 | 
				
			||||||
 | 
					                                CHF</strong>
 | 
				
			||||||
 | 
					                        </p>
 | 
				
			||||||
 | 
					                        {% endif %}
 | 
				
			||||||
 | 
					                        {% if vm.discount.amount > 0 %}
 | 
				
			||||||
 | 
					                        <p class="text-primary">
 | 
				
			||||||
 | 
					                            {%trans "Discount" as discount_name %}
 | 
				
			||||||
 | 
					                            <strong>{{ vm.discount.name|default:discount_name
 | 
				
			||||||
 | 
					                                }} </strong>
 | 
				
			||||||
 | 
					                            <strong class="pull-right">- {{ vm.discount.amount
 | 
				
			||||||
 | 
					                                }} CHF</strong>
 | 
				
			||||||
 | 
					                        </p>
 | 
				
			||||||
 | 
					                        {% endif %}
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					                <div class="col-sm-12">
 | 
				
			||||||
 | 
					                    <hr class="thin-hr">
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					                {% endif %}
 | 
				
			||||||
 | 
					                <div class="col-sm-6">
 | 
				
			||||||
 | 
					                    <p class="total-price">
 | 
				
			||||||
 | 
					                        <strong>{% trans "Total" %} </strong>
 | 
				
			||||||
 | 
					                        <strong class="pull-right">{% if vm.total_price
 | 
				
			||||||
 | 
					                            %}{{vm.total_price|floatformat:2|intcomma}}{% else
 | 
				
			||||||
 | 
					                            %}{{vm.price|floatformat:2|intcomma}}{% endif %}
 | 
				
			||||||
 | 
					                            CHF</strong>
 | 
				
			||||||
 | 
					                    </p>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					            {% else %}
 | 
				
			||||||
 | 
					            <p>
 | 
				
			||||||
 | 
					                <strong>{% trans "Product" %}:</strong> 
 | 
				
			||||||
 | 
					                {{ product_name }}
 | 
				
			||||||
 | 
					            </p>
 | 
				
			||||||
 | 
					            <div class="row">
 | 
				
			||||||
 | 
					                <div class="col-sm-6">
 | 
				
			||||||
 | 
					                    <p>
 | 
				
			||||||
 | 
					                        <span>{% trans "Amount" %}: </span>
 | 
				
			||||||
 | 
					                        <strong class="pull-right">{{total_in_chf|floatformat:2|intcomma}}
 | 
				
			||||||
 | 
					                            CHF</strong>
 | 
				
			||||||
 | 
					                    </p>
 | 
				
			||||||
 | 
					                    {% if invoice.order.generic_payment_description %}
 | 
				
			||||||
 | 
					                    <p>
 | 
				
			||||||
 | 
					                        <span>{% trans "Description" %}: </span>
 | 
				
			||||||
 | 
					                        <strong class="pull-right">{{invoice.order.generic_payment_description}}</strong>
 | 
				
			||||||
 | 
					                    </p>
 | 
				
			||||||
 | 
					                    {% endif %}
 | 
				
			||||||
 | 
					                    {% if invoice.order.subscription_id %}
 | 
				
			||||||
 | 
					                    <p>
 | 
				
			||||||
 | 
					                        <span>{% trans "Recurring" %}: </span>
 | 
				
			||||||
 | 
					                        <strong class="pull-right">{{invoice.order.created_at|date:'d'|ordinal}}
 | 
				
			||||||
 | 
					                            {% trans "of every month" %}</strong>
 | 
				
			||||||
 | 
					                    </p>
 | 
				
			||||||
 | 
					                    {% endif %}
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					            {% endif %}
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <hr class="thin-hr">
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					    <div class="order_detail_footer">
 | 
				
			||||||
 | 
					        <strong>ungleich glarus ag</strong>  Bahnhofstrasse 1, 8783
 | 
				
			||||||
 | 
					        Linthal, Switzerland<br>
 | 
				
			||||||
 | 
					        www.datacenterlight.ch  |  info@datacenterlight.ch  |  <small>
 | 
				
			||||||
 | 
					        CHE-156.970.649 MWST
 | 
				
			||||||
 | 
					    </small>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					    {% endif %}
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<div class="text-center" style="margin-bottom: 50px;">
 | 
				
			||||||
 | 
					    <a class="btn btn-vm-back" href="{% url 'hosting:invoices' %}">{% trans
 | 
				
			||||||
 | 
					        "BACK TO LIST" %}</a>
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<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%}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					{% block js_extra %}
 | 
				
			||||||
 | 
					{% if invoice.order %}
 | 
				
			||||||
 | 
					<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
 | 
				
			||||||
 | 
					<script src="{% static 'hosting/js/html2canvas.min.js' %}"></script>
 | 
				
			||||||
 | 
					<script src="{% static 'hosting/js/html2pdf.min.js' %}"></script>
 | 
				
			||||||
 | 
					<script src="{% static 'hosting/js/order.js' %}"></script>
 | 
				
			||||||
 | 
					{% endif %}
 | 
				
			||||||
 | 
					{% endblock js_extra %}
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue