discount option added to calculator
This commit is contained in:
		
					parent
					
						
							
								4d2d337651
							
						
					
				
			
			
				commit
				
					
						f8dc2c6bbe
					
				
			
		
					 18 changed files with 554 additions and 476 deletions
				
			
		|  | @ -37,7 +37,6 @@ class DCLSectionPlugin(CMSPluginBase): | |||
|                 'DCLSectionIconPluginModel', | ||||
|             ] | ||||
|             for child in instance.child_plugin_instances: | ||||
|                 print(child.__dict__) | ||||
|                 if child.__class__.__name__ in right_children: | ||||
|                     context['children_to_side'].append(child) | ||||
|                 elif child.plugin_type == 'DCLCalculatorPlugin': | ||||
|  |  | |||
							
								
								
									
										25
									
								
								datacenterlight/migrations/0022_auto_20180506_1950.py
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										25
									
								
								datacenterlight/migrations/0022_auto_20180506_1950.py
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,25 @@ | |||
| # -*- coding: utf-8 -*- | ||||
| # Generated by Django 1.9.4 on 2018-05-06 14:20 | ||||
| from __future__ import unicode_literals | ||||
| 
 | ||||
| from django.db import migrations, models | ||||
| 
 | ||||
| 
 | ||||
| class Migration(migrations.Migration): | ||||
| 
 | ||||
|     dependencies = [ | ||||
|         ('datacenterlight', '0021_cmsintegration_calculator_placeholder'), | ||||
|     ] | ||||
| 
 | ||||
|     operations = [ | ||||
|         migrations.AddField( | ||||
|             model_name='vmpricing', | ||||
|             name='discount_amount', | ||||
|             field=models.DecimalField(decimal_places=2, default=0, max_digits=4), | ||||
|         ), | ||||
|         migrations.AddField( | ||||
|             model_name='vmpricing', | ||||
|             name='discount_name', | ||||
|             field=models.CharField(blank=True, max_length=255, null=True), | ||||
|         ), | ||||
|     ] | ||||
|  | @ -34,6 +34,10 @@ class VMPricing(models.Model): | |||
|     hdd_unit_price = models.DecimalField( | ||||
|         max_digits=7, decimal_places=6, default=0 | ||||
|     ) | ||||
|     discount_name = models.CharField(max_length=255, null=True, blank=True) | ||||
|     discount_amount = models.DecimalField( | ||||
|         max_digits=4, decimal_places=2, default=0 | ||||
|     ) | ||||
| 
 | ||||
|     def __str__(self): | ||||
|         return self.name + ' => ' + ' - '.join([ | ||||
|  | @ -42,8 +46,12 @@ class VMPricing(models.Model): | |||
|             '{}/GB SSD'.format(self.ssd_unit_price.normalize()), | ||||
|             '{}/GB HDD'.format(self.hdd_unit_price.normalize()), | ||||
|             '{}% VAT'.format(self.vat_percentage.normalize()) | ||||
|             if not self.vat_inclusive else 'VAT-Incl', ] | ||||
|         ) | ||||
|             if not self.vat_inclusive else 'VAT-Incl', | ||||
|             '{} {}'.format( | ||||
|                 self.discount_amount if self.discount_amount else '', | ||||
|                 self.discount_name if self.discount_name else 'Discount' | ||||
|             ), | ||||
|         ]) | ||||
| 
 | ||||
|     @classmethod | ||||
|     def get_vm_pricing_by_name(cls, name): | ||||
|  |  | |||
|  | @ -150,3 +150,12 @@ footer .dcl-link-separator::before { | |||
|   border-radius: 100%; | ||||
|   background: #777; | ||||
| } | ||||
| 
 | ||||
| .mb-0 { | ||||
|   margin-bottom: 0; | ||||
| } | ||||
| 
 | ||||
| .thin-hr { | ||||
|   margin-top: 10px; | ||||
|   margin-bottom: 10px; | ||||
| } | ||||
|  | @ -180,9 +180,13 @@ | |||
|         if(typeof window.ssdUnitPrice === 'undefined'){ | ||||
|             window.ssdUnitPrice = 0.6; | ||||
|         } | ||||
|         if(typeof window.discountAmount === 'undefined'){ | ||||
|             window.discountAmount = 0; | ||||
|         } | ||||
|         var total = (cardPricing['cpu'].value * window.coresUnitPrice) + | ||||
|                     (cardPricing['ram'].value * window.ramUnitPrice) + | ||||
|                     (cardPricing['storage'].value * window.ssdUnitPrice); | ||||
|                     (cardPricing['storage'].value * window.ssdUnitPrice) - | ||||
|                     window.discountAmount; | ||||
|         total = parseFloat(total.toFixed(2)); | ||||
|         $("#total").text(total); | ||||
|     } | ||||
|  |  | |||
|  | @ -8,6 +8,7 @@ | |||
|         window.ramUnitPrice = {{vm_pricing.ram_unit_price|default:0}}; | ||||
|         window.ssdUnitPrice = {{vm_pricing.ssd_unit_price|default:0}}; | ||||
|         window.hddUnitPrice = {{vm_pricing.hdd_unit_price|default:0}}; | ||||
|         window.discountAmount = {{vm_pricing.discount_amount|default:0}}; | ||||
|     </script> | ||||
| {% endif %} | ||||
| 
 | ||||
|  | @ -19,11 +20,15 @@ | |||
|     <div class="price"> | ||||
|         <span id="total"></span> | ||||
|         <span>CHF/{% trans "month" %}</span> | ||||
|         {% if vm_pricing.vat_inclusive %} | ||||
|         <div class="price-text"> | ||||
|             <p>{% trans "VAT included" %}</p> | ||||
|         </div> | ||||
|             <p> | ||||
|                 {% if vm_pricing.vat_inclusive %}{% trans "VAT included" %} <br>{% endif %} | ||||
|                 {% if vm_pricing.discount_amount %} | ||||
|                     {% trans "Discount" as discount_name %} | ||||
|                     {{ vm_pricing.discount_amount }} CHF <strong>{{ vm_pricing.discount_name|default:discount_name }}</strong> included | ||||
|                 {% endif %} | ||||
|             </p> | ||||
|         </div> | ||||
|     </div> | ||||
|     <div class="descriptions"> | ||||
|         <div class="description form-group"> | ||||
|  |  | |||
|  | @ -78,7 +78,24 @@ | |||
|                         <hr> | ||||
|                         <p>{% trans "Configuration"%} <strong class="pull-right">{{request.session.template.name}}</strong></p> | ||||
|                         <hr> | ||||
|                         <p class="last-p"><strong>{%trans "Total" %}</strong>  <small>({% if vm_pricing.vat_inclusive %}{%trans "including VAT" %}{% else %}{%trans "excluding VAT" %}{% endif %})</small> <strong class="pull-right">{{request.session.specs.price|intcomma}} CHF/{% trans "Month" %}</strong></p> | ||||
|                         <p> | ||||
|                             <strong>{%trans "Total" %}</strong>   | ||||
|                             <small> | ||||
|                                 ({% if vm_pricing.vat_inclusive %}{%trans "including VAT" %}{% else %}{%trans "excluding VAT" %}{% endif %}) | ||||
|                             </small> | ||||
|                             <strong class="pull-right">{{request.session.specs.price|intcomma}} CHF/{% trans "Month" %}</strong> | ||||
|                         </p> | ||||
|                         <hr> | ||||
|                         {% if vm_pricing.discount_amount %} | ||||
|                         <p class="mb-0"> | ||||
|                             {%trans "Discount" as discount_name %} | ||||
|                             <strong>{{ vm_pricing.discount_name|default:discount_name }}</strong>   | ||||
|                             <strong class="pull-right text-primary">- {{ vm_pricing.discount_amount }} CHF/{% trans "Month" %}</strong> | ||||
|                         </p> | ||||
|                         <p> | ||||
|                             ({% trans "Will be applied at checkout" %}) | ||||
|                         </p> | ||||
|                         {% endif %} | ||||
|                     </div> | ||||
|                 </div> | ||||
|             </div> | ||||
|  |  | |||
|  | @ -65,6 +65,7 @@ | |||
|                             <span>{% trans "Disk space" %}: </span> | ||||
|                             <span class="pull-right">{{vm.disk_size|intcomma}} GB</span> | ||||
|                         </p> | ||||
|                         <hr> | ||||
|                         {% if vm.vat > 0 %} | ||||
|                             <p> | ||||
|                                 <strong>{% trans "Subtotal" %}: </strong> | ||||
|  | @ -75,6 +76,13 @@ | |||
|                                 <span class="pull-right">{{vm.vat|floatformat:2|intcomma}} CHF</span> | ||||
|                             </p> | ||||
|                         {% endif %} | ||||
|                         {% if vm_pricing.discount_amount %} | ||||
|                             <p class="text-primary"> | ||||
|                                 {%trans "Discount" as discount_name %} | ||||
|                                 <span>{{ vm_pricing.discount_name|default:discount_name }}: </span> | ||||
|                                 <span class="pull-right">- {{ vm_pricing.discount_amount }} CHF</span> | ||||
|                             </p> | ||||
|                         {% endif %} | ||||
|                         <p> | ||||
|                             <strong>{% trans "Total" %}</strong> | ||||
|                             <span class="pull-right">{{vm.total_price|floatformat:2|intcomma}} CHF</span> | ||||
|  |  | |||
|  | @ -387,7 +387,10 @@ class OrderConfirmationView(DetailView): | |||
|             'billing_address_data': ( | ||||
|                 request.session.get('billing_address_data') | ||||
|             ), | ||||
|             'cms_integration': get_cms_integration('default') | ||||
|             'cms_integration': get_cms_integration('default'), | ||||
|             'vm_pricing': VMPricing.get_vm_pricing_by_name( | ||||
|                 self.request.session['specs']['pricing_name'] | ||||
|             ), | ||||
|         } | ||||
|         return render(request, self.template_name, context) | ||||
| 
 | ||||
|  |  | |||
|  | @ -362,3 +362,12 @@ | |||
| .locale_date.done{ | ||||
|   opacity: 1; | ||||
| } | ||||
| 
 | ||||
| .mb-0 { | ||||
|   margin-bottom: 0; | ||||
| } | ||||
| 
 | ||||
| .thin-hr { | ||||
|   margin-top: 10px; | ||||
|   margin-bottom: 10px; | ||||
| } | ||||
|  | @ -449,230 +449,6 @@ a.unlink:hover { | |||
|     color: inherit; | ||||
| } | ||||
| 
 | ||||
| /***** DCL payment page **********/ | ||||
| .dcl-order-container { | ||||
|     font-weight: 300; | ||||
| } | ||||
| 
 | ||||
| .dcl-order-table-header { | ||||
|     border-bottom: 1px solid #eee; | ||||
|     padding-top: 15px; | ||||
|     padding-bottom: 15px; | ||||
|     font-size: 16px; | ||||
|     color: #333; | ||||
|     text-align: center; | ||||
|     font-weight: 300; | ||||
| } | ||||
| 
 | ||||
| .dcl-order-table-content { | ||||
|     border-bottom: 1px solid #eee; | ||||
|     padding-top: 15px; | ||||
|     padding-bottom: 15px; | ||||
|     font-size: 18px; | ||||
|     font-weight: 600; | ||||
|     text-align: center; | ||||
| } | ||||
| 
 | ||||
| .tbl-content { | ||||
| } | ||||
| 
 | ||||
| .dcl-order-table-total { | ||||
|     border-bottom: 4px solid #eee; | ||||
|     padding-top: 15px; | ||||
|     padding-bottom: 20px; | ||||
|     font-size: 20px; | ||||
|     font-weight: 600; | ||||
|     color: #999; | ||||
| } | ||||
| 
 | ||||
| .dcl-order-table-total span { | ||||
|     font-size: 13px; | ||||
|     color: #999; | ||||
|     font-weight: 400; | ||||
|     padding-left: 5px; | ||||
| } | ||||
| 
 | ||||
| .dcl-place-order-text{ | ||||
|    color: #808080; | ||||
| } | ||||
| 
 | ||||
| .dcl-order-table-total .tbl-total { | ||||
|     text-align: center; | ||||
|     color: #000; | ||||
|     padding-left: 44px; | ||||
| } | ||||
| 
 | ||||
| .tbl-total .dcl-price-month { | ||||
|     font-size: 16px; | ||||
|     text-transform: capitalize; | ||||
|     color: #000; | ||||
| } | ||||
| 
 | ||||
| .tbl-no-padding { | ||||
|     padding: 0px; | ||||
| } | ||||
| 
 | ||||
| .dcl-billing-sec { | ||||
|     margin-top: 50px; | ||||
| } | ||||
| 
 | ||||
| .dcl-order-sec { | ||||
|     padding: 0 30px; | ||||
| } | ||||
| 
 | ||||
| .card-warning-content { | ||||
|     font-weight: 300; | ||||
|     border: 1px solid #a1a1a1; | ||||
|     border-radius: 3px; | ||||
|     padding: 5px; | ||||
|     margin-bottom: 15px; | ||||
| } | ||||
| .card-warning-error { | ||||
|     border: 1px solid #EB4D5C; | ||||
|     color: #EB4D5C; | ||||
| } | ||||
| 
 | ||||
| .card-warning-addtional-margin { | ||||
|     margin-top: 15px; | ||||
| } | ||||
| 
 | ||||
| .stripe-payment-btn { | ||||
|     outline: none; | ||||
|     width: auto; | ||||
|     float: right; | ||||
|     font-style: normal; | ||||
|     font-weight: 300; | ||||
|     position: absolute; | ||||
|     padding-left: 30px; | ||||
|     padding-right: 30px; | ||||
|     right: 0; | ||||
| } | ||||
| 
 | ||||
| .card-cvc-element label { | ||||
|     padding-left: 10px; | ||||
| } | ||||
| 
 | ||||
| .card-element { | ||||
|     margin-bottom: 10px; | ||||
| } | ||||
| 
 | ||||
| .card-element label{ | ||||
|     width:100%; | ||||
|     margin-bottom:0px; | ||||
| } | ||||
| 
 | ||||
| .my-input { | ||||
|    border-bottom: 1px solid #ccc; | ||||
|  } | ||||
| 
 | ||||
| .card-cvc-element .my-input { | ||||
|     padding-left: 10px; | ||||
| } | ||||
| 
 | ||||
| #card-errors { | ||||
|     clear: both; | ||||
|     padding: 0 0 10px; | ||||
|     color: #eb4d5c; | ||||
| } | ||||
| 
 | ||||
| .credit-card-goup{ | ||||
|     padding: 0; | ||||
| } | ||||
| 
 | ||||
| @media (max-width: 767px) { | ||||
|     .dcl-order-table-total span { | ||||
|         padding-left: 3px; | ||||
|     } | ||||
| 
 | ||||
|     .dcl-order-sec { | ||||
|         padding: 10px 20px 30px 20px; | ||||
|         border-bottom: 4px solid #eee; | ||||
|     } | ||||
| 
 | ||||
|     .tbl-header { | ||||
|         border-bottom: 1px solid #eee; | ||||
|         padding: 10px 0; | ||||
|     } | ||||
| 
 | ||||
|     .tbl-content { | ||||
|         border-bottom: 1px solid #eee; | ||||
|         padding: 10px 0; | ||||
|     } | ||||
| 
 | ||||
|     .dcl-order-table-header { | ||||
|         border-bottom: 0px solid #eee; | ||||
|         padding: 10px 0; | ||||
|         text-align: left; | ||||
|     } | ||||
| 
 | ||||
|     .dcl-order-table-content { | ||||
|         border-bottom: 0px solid #eee; | ||||
|         padding: 10px 0; | ||||
|         text-align: right; | ||||
|         font-size: 16px; | ||||
|     } | ||||
| 
 | ||||
|     .dcl-order-table-total { | ||||
|         font-size: 18px; | ||||
|         color: #000; | ||||
|         padding: 10px 0; | ||||
|         border-bottom: 0px solid #eee; | ||||
|     } | ||||
| 
 | ||||
|     .dcl-order-table-total .tbl-total { | ||||
|         padding: 0px; | ||||
|         text-align: right; | ||||
|     } | ||||
| 
 | ||||
|     .dcl-billing-sec { | ||||
|         margin-top: 30px; | ||||
|         margin-bottom: 30px; | ||||
|     } | ||||
| 
 | ||||
|     .card-expiry-element { | ||||
|     padding-right: 10px; | ||||
|     } | ||||
| 
 | ||||
|     .card-cvc-element { | ||||
|     padding-left: 10px; | ||||
|     } | ||||
| 
 | ||||
|     #billing-form .form-control { | ||||
|     box-shadow: none !important; | ||||
|     font-weight: 400; | ||||
|     } | ||||
| } | ||||
| 
 | ||||
| @media (min-width: 1200px) { | ||||
|     .dcl-order-container { | ||||
|         width: 990px; | ||||
|         padding-right: 15px; | ||||
|         padding-left: 15px; | ||||
|         margin-right: auto; | ||||
|         margin-left: auto; | ||||
|     } | ||||
| } | ||||
| 
 | ||||
| @media (min-width: 768px) { | ||||
|     .dcl-billing { | ||||
|         padding-right: 65px; | ||||
|         border-right: 1px solid #eee; | ||||
|     } | ||||
| 
 | ||||
|     .dcl-creditcard { | ||||
|         padding-left: 65px; | ||||
|     } | ||||
| 
 | ||||
|     .tbl-tot { | ||||
|         padding-left: 17px; | ||||
|     } | ||||
| 
 | ||||
|     .content-dashboard { | ||||
|         /*width: auto !important;*/ | ||||
|     } | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
| @media only screen and (max-width: 1040px) and (min-width: 768px) { | ||||
|     .content-dashboard { | ||||
|         width: 96% !important; | ||||
|  |  | |||
|  | @ -97,3 +97,7 @@ | |||
| #virtual_machine_create_form { | ||||
|     padding: 15px 0; | ||||
| } | ||||
| 
 | ||||
| .dcl-place-order-text { | ||||
|   color: #808080; | ||||
| } | ||||
|  | @ -1,19 +1,35 @@ | |||
| .payment-container { | ||||
|   padding-top: 70px; | ||||
|   padding-bottom: 11%; | ||||
| } | ||||
| 
 | ||||
| .creditcard-box .panel-title { | ||||
|   display: inline; | ||||
|   font-weight: bold; | ||||
|   font-size: 17px; | ||||
| } | ||||
| 
 | ||||
| .creditcard-box .checkbox.pull-right { | ||||
|   margin: 0; | ||||
| } | ||||
| 
 | ||||
| .creditcard-box .pl-ziro { | ||||
|   padding-left: 0px; | ||||
| } | ||||
| 
 | ||||
| .payment-container {padding-top:70px; padding-bottom: 11%;} | ||||
| .creditcard-box .panel-title {display: inline;font-weight: bold; font-size:17px;} | ||||
| .creditcard-box .checkbox.pull-right { margin: 0; } | ||||
| .creditcard-box .pl-ziro { padding-left: 0px; } | ||||
| .creditcard-box .form-control.error { | ||||
|   border-color: red; | ||||
|   outline: 0; | ||||
|     box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(255,0,0,0.6); | ||||
|   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6); | ||||
| } | ||||
| 
 | ||||
| .creditcard-box label.error { | ||||
|   font-weight: bold; | ||||
|   color: red; | ||||
|   padding: 2px 8px; | ||||
|   margin-top: 2px; | ||||
| } | ||||
| 
 | ||||
| .creditcard-box .payment-errors { | ||||
|   font-weight: bold; | ||||
|   color: red; | ||||
|  | @ -21,96 +37,221 @@ | |||
|   margin-top: 2px; | ||||
| } | ||||
| 
 | ||||
| /* landing page payment new style */ | ||||
| .last-p { | ||||
| 	margin-bottom: 0; | ||||
| } | ||||
| .dcl-payment-section { | ||||
|     max-width: 391px; | ||||
|     margin: 0 auto 30px; | ||||
|     padding: 0 10px 30px; | ||||
|     border-bottom: 1px solid #edebeb; | ||||
|     height: 100%; | ||||
| } | ||||
| .dcl-payment-section hr{ | ||||
| 	margin-top: 15px; | ||||
| 	margin-bottom: 15px; | ||||
| } | ||||
| .dcl-payment-section .top-hr { | ||||
| 	margin-left: -10px; | ||||
| } | ||||
| .dcl-payment-section h3 { | ||||
| 	font-weight: 600; | ||||
| } | ||||
| .dcl-payment-section p { | ||||
| 	/*padding: 0 5px;*/ | ||||
| 	font-weight: 400; | ||||
| } | ||||
| .dcl-payment-section .card-warning-content { | ||||
| 	padding: 8px 10px; | ||||
| 	font-weight: 300; | ||||
| } | ||||
| .dcl-payment-order strong{ | ||||
| 	font-size: 17px; | ||||
| } | ||||
| .dcl-payment-order p { | ||||
| 	font-weight: 300; | ||||
| } | ||||
| .dcl-payment-section .form-group { | ||||
| 	margin-bottom: 10px; | ||||
| } | ||||
| .dcl-payment-section .form-control { | ||||
| 	box-shadow: none; | ||||
| 	padding: 6px 12px; | ||||
| 	height: 32px; | ||||
| } | ||||
| .dcl-payment-user { | ||||
| 	height: 100%; | ||||
| 	display: flex; | ||||
| 	flex-direction: column; | ||||
| 	justify-content: center; | ||||
| .dcl-order-sec { | ||||
|   padding: 0 30px; | ||||
| } | ||||
| 
 | ||||
| .dcl-payment-user h4 { | ||||
| .dcl-billing-sec { | ||||
|   margin-top: 50px; | ||||
| } | ||||
| 
 | ||||
| .dcl-order-container { | ||||
|   font-weight: 300; | ||||
| } | ||||
| 
 | ||||
| .dcl-order-table-header { | ||||
|   border-bottom: 1px solid #eee; | ||||
|   padding: 15px 10px; | ||||
|   font-size: 16px; | ||||
|   color: #333; | ||||
|   font-weight: 300; | ||||
| } | ||||
| 
 | ||||
| .dcl-order-table-content { | ||||
|   border-bottom: 1px solid #eee; | ||||
|   padding: 15px 10px; | ||||
|   font-size: 18px; | ||||
|   font-weight: 600; | ||||
| 	font-size: 17px; | ||||
| } | ||||
| 
 | ||||
| .dcl-order-table-total { | ||||
|   border-bottom: 4px solid #eee; | ||||
|   padding-top: 15px; | ||||
|   padding-bottom: 20px; | ||||
|   font-size: 20px; | ||||
|   font-weight: 600; | ||||
| } | ||||
| 
 | ||||
| .dcl-order-table-total span { | ||||
|   font-size: 13px; | ||||
|   color: #999; | ||||
|   font-weight: 400; | ||||
| } | ||||
| 
 | ||||
| .dcl-order-table-total .tbl-total { | ||||
|   text-align: right; | ||||
|   color: #000; | ||||
| } | ||||
| 
 | ||||
| .tbl-no-padding { | ||||
|   padding: 0px; | ||||
| } | ||||
| 
 | ||||
| .card-warning-content { | ||||
|   font-weight: 300; | ||||
|   border: 1px solid #a1a1a1; | ||||
|   border-radius: 3px; | ||||
|   padding: 5px; | ||||
|   margin-bottom: 15px; | ||||
| } | ||||
| 
 | ||||
| .card-warning-error { | ||||
|   border: 1px solid #EB4D5C; | ||||
|   color: #EB4D5C; | ||||
| } | ||||
| 
 | ||||
| .card-warning-addtional-margin { | ||||
|   margin-top: 15px; | ||||
| } | ||||
| 
 | ||||
| .stripe-payment-btn { | ||||
|   outline: none; | ||||
|   width: auto; | ||||
|   float: right; | ||||
|   font-style: normal; | ||||
|   font-weight: 300; | ||||
|   position: absolute; | ||||
|   padding-left: 30px; | ||||
|   padding-right: 30px; | ||||
|   right: 0; | ||||
| } | ||||
| 
 | ||||
| .card-cvc-element label { | ||||
|   padding-left: 10px; | ||||
| } | ||||
| 
 | ||||
| .card-element { | ||||
|   margin-bottom: 10px; | ||||
| } | ||||
| 
 | ||||
| .card-element label { | ||||
|   width: 100%; | ||||
|   margin-bottom: 0px; | ||||
| } | ||||
| 
 | ||||
| .my-input { | ||||
|   border-bottom: 1px solid #ccc; | ||||
| } | ||||
| 
 | ||||
| .card-cvc-element .my-input { | ||||
|   padding-left: 10px; | ||||
| } | ||||
| 
 | ||||
| #card-errors { | ||||
|   clear: both; | ||||
|   padding: 0 0 10px; | ||||
|   color: #eb4d5c; | ||||
| } | ||||
| 
 | ||||
| .credit-card-goup { | ||||
|   padding: 0; | ||||
| } | ||||
| 
 | ||||
| @media (max-width: 767px) { | ||||
|   .dcl-order-sec { | ||||
|     padding: 10px 5px 30px; | ||||
|     border-bottom: 4px solid #eee; | ||||
|   } | ||||
| 
 | ||||
|   .dcl-billing-sec { | ||||
|     margin-top: 30px; | ||||
|     margin-bottom: 30px; | ||||
|     padding: 5px; | ||||
|   } | ||||
| 
 | ||||
|   .dcl-billing { | ||||
|     margin-top: 20px; | ||||
|     margin-bottom: 40px; | ||||
|   } | ||||
| 
 | ||||
|   .tbl-header { | ||||
|     border-bottom: 1px solid #eee; | ||||
|     padding-top: 10px; | ||||
|     padding-bottom: 10px; | ||||
|     margin-right: -15px; | ||||
|   } | ||||
| 
 | ||||
|   .dcl-order-table-total .tbl-total { | ||||
|     margin-left: -15px; | ||||
|   } | ||||
| 
 | ||||
|   .dcl-order-table-total .tbl-tot { | ||||
|     margin-right: -15px; | ||||
|   } | ||||
| 
 | ||||
|   .tbl-content { | ||||
|     border-bottom: 1px solid #eee; | ||||
|     padding-top: 10px; | ||||
|     padding-bottom: 10px; | ||||
|     margin-left: -15px; | ||||
|   } | ||||
| 
 | ||||
|   .dcl-order-table-header { | ||||
|     border-bottom: 0px solid #eee; | ||||
|     padding: 10px 0; | ||||
|     text-align: left; | ||||
|   } | ||||
| 
 | ||||
|   .dcl-order-table-content { | ||||
|     border-bottom: 0px solid #eee; | ||||
|     padding: 10px 0; | ||||
|     text-align: right; | ||||
|     font-size: 16px; | ||||
|   } | ||||
| 
 | ||||
|   .dcl-order-table-total { | ||||
|     font-size: 18px; | ||||
|     color: #000; | ||||
|     padding: 10px 0; | ||||
|     border-bottom: 0px solid #eee; | ||||
|   } | ||||
| 
 | ||||
|   .card-expiry-element { | ||||
|     padding-right: 10px; | ||||
|   } | ||||
| 
 | ||||
|   .card-cvc-element { | ||||
|     padding-left: 10px; | ||||
|   } | ||||
| 
 | ||||
|   #billing-form .form-control { | ||||
|     box-shadow: none !important; | ||||
|     font-weight: 400; | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| @media (min-width: 768px) { | ||||
| 	.dcl-payment-grid { | ||||
| 		display: flex; | ||||
| 		align-items: stretch; | ||||
| 		flex-wrap: wrap; | ||||
|   .dcl-billing { | ||||
|     padding-right: 65px; | ||||
|     border-right: 1px solid #eee; | ||||
|   } | ||||
| 	.dcl-payment-box { | ||||
| 		width: 50%; | ||||
| 		position: relative; | ||||
| 		padding: 0 30px; | ||||
| 
 | ||||
|   .dcl-creditcard { | ||||
|     padding-left: 65px; | ||||
|   } | ||||
| 	.dcl-payment-box:nth-child(2) { | ||||
| 		order: 1; | ||||
| 
 | ||||
|   .dcl-order-table-total .tbl-total, | ||||
|   .dcl-order-table-total .tbl-tot { | ||||
|     padding: 0 10px; | ||||
|   } | ||||
| 	.dcl-payment-box:nth-child(4) { | ||||
| 		order: 2; | ||||
| 
 | ||||
|   .tbl-header-center, | ||||
|   .tbl-content-center { | ||||
|     text-align: center; | ||||
|   } | ||||
| 	.dcl-payment-section { | ||||
| 		padding: 15px 10px; | ||||
| 		margin-bottom: 0; | ||||
| 		border-bottom-width: 5px; | ||||
| 	} | ||||
| 	.dcl-payment-box:nth-child(2n) .dcl-payment-section { | ||||
| 		border-bottom: none; | ||||
| 	} | ||||
| 	.dcl-payment-box:nth-child(1):after, | ||||
| 	.dcl-payment-box:nth-child(2):after { | ||||
| 		content: ' '; | ||||
| 		display: block; | ||||
| 		background: #eee; | ||||
| 		width: 1px; | ||||
| 		position: absolute; | ||||
| 		right: 0; | ||||
| 		z-index: 2; | ||||
| 		top: 20px; | ||||
| 		bottom: 20px; | ||||
| 
 | ||||
|   .tbl-header-right, | ||||
|   .tbl-content-right { | ||||
|     text-align: right; | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| @media (min-width: 1200px) { | ||||
|   .dcl-order-container { | ||||
|     width: 990px; | ||||
|     padding-right: 15px; | ||||
|     padding-left: 15px; | ||||
|     margin-right: auto; | ||||
|     margin-left: auto; | ||||
|   } | ||||
| } | ||||
|  | @ -224,9 +224,13 @@ $( document ).ready(function() { | |||
|         if(typeof window.ssdUnitPrice === 'undefined'){ | ||||
|             window.ssdUnitPrice = 0.6; | ||||
|         } | ||||
|         if(typeof window.discountAmount === 'undefined'){ | ||||
|             window.discountAmount = 0; | ||||
|         } | ||||
|         var total = (cardPricing['cpu'].value * window.coresUnitPrice) + | ||||
|                     (cardPricing['ram'].value * window.ramUnitPrice) + | ||||
|                     (cardPricing['storage'].value * window.ssdUnitPrice); | ||||
|                     (cardPricing['storage'].value * window.ssdUnitPrice) - | ||||
|                     window.discountAmount; | ||||
|         total = parseFloat(total.toFixed(2)); | ||||
|         $("#total").text(total); | ||||
|     } | ||||
|  |  | |||
|  | @ -127,6 +127,7 @@ | |||
|                             <span>{% trans "Disk space" %}: </span> | ||||
|                             <span class="pull-right">{{vm.disk_size}} GB</span> | ||||
|                         </p> | ||||
|                         <hr> | ||||
|                         {% if vm.vat > 0 %} | ||||
|                             <p> | ||||
|                                 <strong>{% trans "Subtotal" %}: </strong> | ||||
|  | @ -137,6 +138,13 @@ | |||
|                                 <span class="pull-right">{{vm.vat|floatformat:2|intcomma}} CHF</span> | ||||
|                             </p> | ||||
|                         {% endif %} | ||||
|                         {% if vm_pricing.discount_amount %} | ||||
|                             <p class="text-primary"> | ||||
|                                 {%trans "Discount" as discount_name %} | ||||
|                                 <span>{{ vm_pricing.discount_name|default:discount_name }}: </span> | ||||
|                                 <span class="pull-right">- {{ vm_pricing.discount_amount }} CHF</span> | ||||
|                             </p> | ||||
|                         {% endif %} | ||||
|                         <p> | ||||
|                             <strong>{% trans "Total" %}</strong> | ||||
|                             <span class="pull-right">{% if vm.total_price %}{{vm.total_price|floatformat:2|intcomma}}{% else %}{{vm.price|floatformat:2|intcomma}}{% endif %} CHF</span> | ||||
|  |  | |||
|  | @ -9,53 +9,99 @@ | |||
| <!-- Credit card form --> | ||||
| <div class="dcl-order-container"> | ||||
|     <div class="payment-container"> | ||||
|         <div class="row"> | ||||
|             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-order-sec"> | ||||
|         <div class="dcl-order-sec"> | ||||
|             <h3><strong>{%trans "Your Order" %}</strong></h3> | ||||
|                 <div class="col-xs-6 col-sm-12 col-md-12 col-lg-12 dcl-order-table-header"> | ||||
|                     <div class="col-xs-12 col-sm-2 col-md-1 col-lg-1 tbl-header"> | ||||
|             <div class="row"> | ||||
|                 <div class="col-xs-6 col-sm-12"> | ||||
|                     <div class="dcl-order-table-header"> | ||||
|                         <div class="row"> | ||||
|                             <div class="col-sm-2"> | ||||
|                                 <div class="tbl-header"> | ||||
|                                     {%trans "Cores" %} | ||||
|                                 </div> | ||||
|                     <div class="col-xs-12 col-sm-3 col-md-4 col-lg-4 tbl-header"> | ||||
|                             </div> | ||||
|                             <div class="col-sm-4"> | ||||
|                                 <div class="tbl-header tbl-header-center"> | ||||
|                                     {%trans "Memory" %} | ||||
|                                 </div> | ||||
|                     <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 tbl-header"> | ||||
|                             </div> | ||||
|                             <div class="col-sm-3"> | ||||
|                                 <div class="tbl-header tbl-header-center"> | ||||
|                                     {%trans "Disk space" %} | ||||
|                                 </div> | ||||
|                     <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-header"> | ||||
|                             </div> | ||||
|                             <div class="col-sm-3"> | ||||
|                                 <div class="tbl-header tbl-header-right"> | ||||
|                                     {%trans "Configuration" %} | ||||
|                                 </div> | ||||
|                             </div> | ||||
|                 <div class="col-xs-6 col-sm-12 col-md-12 col-lg-12 dcl-order-table-content"> | ||||
|                     <div class="col-xs-12 col-sm-2 col-md-1 col-lg-1 tbl-content"> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                 </div> | ||||
|                 <div class="col-xs-6 col-sm-12"> | ||||
|                     <div class="dcl-order-table-content"> | ||||
|                         <div class="row"> | ||||
|                             <div class="col-sm-2"> | ||||
|                                 <div class="tbl-content"> | ||||
|                                     {{request.session.specs.cpu|floatformat}} | ||||
|                                 </div> | ||||
|                     <div class="col-xs-12 col-sm-3 col-md-4 col-lg-4 tbl-content"> | ||||
|                             </div> | ||||
|                             <div class="col-sm-4"> | ||||
|                                 <div class="tbl-content tbl-content-center"> | ||||
|                                     {{request.session.specs.memory|floatformat}} GB | ||||
|                                 </div> | ||||
|                     <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 tbl-content"> | ||||
|                             </div> | ||||
|                             <div class="col-sm-3"> | ||||
|                                 <div class="tbl-content tbl-content-center"> | ||||
|                                     {{request.session.specs.disk_size|floatformat|intcomma}} GB | ||||
|                                 </div> | ||||
|                     <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-content"> | ||||
|                             </div> | ||||
|                             <div class="col-sm-3"> | ||||
|                                 <div class="tbl-content tbl-content-right"> | ||||
|                                     {{request.session.template.name}} | ||||
|                                 </div> | ||||
|                             </div> | ||||
|                 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-order-table-total"> | ||||
|                     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 tbl-tot tbl-no-padding"> | ||||
|                         {%trans "Total" %} <span>{% if vm_pricing.vat_inclusive %}{%trans "including VAT" %}{% else %}{%trans "excluding VAT" %}{% endif %}</span> | ||||
|                         </div> | ||||
|                     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 tbl-no-padding"> | ||||
|                         <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"></div> | ||||
|                         <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 tbl-total"> | ||||
|                     </div> | ||||
|                 </div> | ||||
|             </div> | ||||
|             <div class="dcl-order-table-total"> | ||||
|                 <div class="row"> | ||||
|                     <div class="col-xs-6"> | ||||
|                         <div class="tbl-tot"> | ||||
|                             {%trans "Total" %}  | ||||
|                             <span>{% if vm_pricing.vat_inclusive %}{%trans "including VAT" %}{% else %}{%trans "excluding VAT" %}{% endif %}</span> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                     <div class="col-xs-6"> | ||||
|                         <div class="tbl-total"> | ||||
|                             {{request.session.specs.price|intcomma}} CHF/{% trans "Month" %} | ||||
|                         </div> | ||||
|                     </div> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
|                 {% if vm_pricing.discount_amount %} | ||||
|                 <hr class="thin-hr"> | ||||
|                 <div class="row"> | ||||
|             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-billing-sec"> | ||||
|                 <div class="col-xs-12 col-sm-5 col-md-6  billing dcl-billing"> | ||||
|                     <div class="col-xs-6"> | ||||
|                         <div class="tbl-tot"> | ||||
|                             {%trans "Discount" as discount_name %} | ||||
|                             {{ vm_pricing.discount_name|default:discount_name }}  <br> | ||||
|                             <span>({% trans "Will be applied at checkout" %})</span> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                     <div class="col-xs-6 text-right"> | ||||
|                         <div class="tbl-total"> | ||||
|                             <div class="text-primary">- {{ vm_pricing.discount_amount }} CHF/{% trans "Month" %}</div> | ||||
|                         </div> | ||||
|                     </div> | ||||
|                 </div> | ||||
|                 {% endif %} | ||||
|             </div> | ||||
|         </div> | ||||
|         <div class="dcl-billing-sec"> | ||||
|             <div class="row"> | ||||
|                 <div class="col-sm-5 col-md-6"> | ||||
|                     <div class="billing dcl-billing"> | ||||
|                         <h3><b>{%trans "Billing Address"%}</b></h3> | ||||
|                         <hr> | ||||
|                         <form role="form" id="billing-form" method="post" action="" novalidate> | ||||
|  | @ -65,7 +111,9 @@ | |||
|                             {% endfor %} | ||||
|                         </form> | ||||
|                     </div> | ||||
|                 <div class="col-xs-12 col-sm-7 col-md-6 creditcard-box dcl-creditcard"> | ||||
|                 </div> | ||||
|                 <div class="col-sm-7 col-md-6"> | ||||
|                     <div class="creditcard-box dcl-creditcard"> | ||||
|                         <h3><b>{%trans "Credit Card"%}</b></h3> | ||||
|                         <hr> | ||||
|                         <div> | ||||
|  | @ -168,6 +216,7 @@ | |||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
|     </div> | ||||
| </div> | ||||
| 
 | ||||
| <!-- stripe key data --> | ||||
|  |  | |||
|  | @ -652,7 +652,10 @@ class PaymentVMView(LoginRequiredMixin, FormView): | |||
|             }) | ||||
| 
 | ||||
|         context.update({ | ||||
|             'stripe_key': settings.STRIPE_API_PUBLIC_KEY | ||||
|             'stripe_key': settings.STRIPE_API_PUBLIC_KEY, | ||||
|             'vm_pricing': VMPricing.get_vm_pricing_by_name( | ||||
|                 self.request.session['specs']['pricing_name'] | ||||
|             ) | ||||
|         }) | ||||
| 
 | ||||
|         return context | ||||
|  | @ -806,6 +809,9 @@ class OrdersHostingDetailView(LoginRequiredMixin, DetailView): | |||
|             context['cc_brand'] = card_details.get('response_object').get( | ||||
|                 'cc_brand') | ||||
|             context['vm'] = self.request.session.get('specs') | ||||
|             context['vm_pricing'] = VMPricing.get_vm_pricing_by_name( | ||||
|                 self.request.session['specs']['pricing_name'] | ||||
|             ), | ||||
|         return context | ||||
| 
 | ||||
|     @method_decorator(decorators) | ||||
|  |  | |||
|  | @ -107,10 +107,13 @@ def get_vm_price_with_vat(cpu, memory, ssd_size, hdd_size=0, | |||
|         ) | ||||
|         return None | ||||
| 
 | ||||
|     price = ((decimal.Decimal(cpu) * pricing.cores_unit_price) + | ||||
|     price = ( | ||||
|         (decimal.Decimal(cpu) * pricing.cores_unit_price) + | ||||
|         (decimal.Decimal(memory) * pricing.ram_unit_price) + | ||||
|         (decimal.Decimal(ssd_size) * pricing.ssd_unit_price) + | ||||
|              (decimal.Decimal(hdd_size) * pricing.hdd_unit_price)) | ||||
|         (decimal.Decimal(hdd_size) * pricing.hdd_unit_price) - | ||||
|         pricing.discount_amount | ||||
|     ) | ||||
|     if pricing.vat_inclusive: | ||||
|         vat = decimal.Decimal(0) | ||||
|         vat_percent = decimal.Decimal(0) | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue