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', |                 'DCLSectionIconPluginModel', | ||||||
|             ] |             ] | ||||||
|             for child in instance.child_plugin_instances: |             for child in instance.child_plugin_instances: | ||||||
|                 print(child.__dict__) |  | ||||||
|                 if child.__class__.__name__ in right_children: |                 if child.__class__.__name__ in right_children: | ||||||
|                     context['children_to_side'].append(child) |                     context['children_to_side'].append(child) | ||||||
|                 elif child.plugin_type == 'DCLCalculatorPlugin': |                 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( |     hdd_unit_price = models.DecimalField( | ||||||
|         max_digits=7, decimal_places=6, default=0 |         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): |     def __str__(self): | ||||||
|         return self.name + ' => ' + ' - '.join([ |         return self.name + ' => ' + ' - '.join([ | ||||||
|  | @ -42,8 +46,12 @@ class VMPricing(models.Model): | ||||||
|             '{}/GB SSD'.format(self.ssd_unit_price.normalize()), |             '{}/GB SSD'.format(self.ssd_unit_price.normalize()), | ||||||
|             '{}/GB HDD'.format(self.hdd_unit_price.normalize()), |             '{}/GB HDD'.format(self.hdd_unit_price.normalize()), | ||||||
|             '{}% VAT'.format(self.vat_percentage.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 |     @classmethod | ||||||
|     def get_vm_pricing_by_name(cls, name): |     def get_vm_pricing_by_name(cls, name): | ||||||
|  |  | ||||||
|  | @ -150,3 +150,12 @@ footer .dcl-link-separator::before { | ||||||
|   border-radius: 100%; |   border-radius: 100%; | ||||||
|   background: #777; |   background: #777; | ||||||
| } | } | ||||||
|  | 
 | ||||||
|  | .mb-0 { | ||||||
|  |   margin-bottom: 0; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .thin-hr { | ||||||
|  |   margin-top: 10px; | ||||||
|  |   margin-bottom: 10px; | ||||||
|  | } | ||||||
|  | @ -180,9 +180,13 @@ | ||||||
|         if(typeof window.ssdUnitPrice === 'undefined'){ |         if(typeof window.ssdUnitPrice === 'undefined'){ | ||||||
|             window.ssdUnitPrice = 0.6; |             window.ssdUnitPrice = 0.6; | ||||||
|         } |         } | ||||||
|  |         if(typeof window.discountAmount === 'undefined'){ | ||||||
|  |             window.discountAmount = 0; | ||||||
|  |         } | ||||||
|         var total = (cardPricing['cpu'].value * window.coresUnitPrice) + |         var total = (cardPricing['cpu'].value * window.coresUnitPrice) + | ||||||
|                     (cardPricing['ram'].value * window.ramUnitPrice) + |                     (cardPricing['ram'].value * window.ramUnitPrice) + | ||||||
|                     (cardPricing['storage'].value * window.ssdUnitPrice); |                     (cardPricing['storage'].value * window.ssdUnitPrice) - | ||||||
|  |                     window.discountAmount; | ||||||
|         total = parseFloat(total.toFixed(2)); |         total = parseFloat(total.toFixed(2)); | ||||||
|         $("#total").text(total); |         $("#total").text(total); | ||||||
|     } |     } | ||||||
|  |  | ||||||
|  | @ -8,6 +8,7 @@ | ||||||
|         window.ramUnitPrice = {{vm_pricing.ram_unit_price|default:0}}; |         window.ramUnitPrice = {{vm_pricing.ram_unit_price|default:0}}; | ||||||
|         window.ssdUnitPrice = {{vm_pricing.ssd_unit_price|default:0}}; |         window.ssdUnitPrice = {{vm_pricing.ssd_unit_price|default:0}}; | ||||||
|         window.hddUnitPrice = {{vm_pricing.hdd_unit_price|default:0}}; |         window.hddUnitPrice = {{vm_pricing.hdd_unit_price|default:0}}; | ||||||
|  |         window.discountAmount = {{vm_pricing.discount_amount|default:0}}; | ||||||
|     </script> |     </script> | ||||||
| {% endif %} | {% endif %} | ||||||
| 
 | 
 | ||||||
|  | @ -19,11 +20,15 @@ | ||||||
|     <div class="price"> |     <div class="price"> | ||||||
|         <span id="total"></span> |         <span id="total"></span> | ||||||
|         <span>CHF/{% trans "month" %}</span> |         <span>CHF/{% trans "month" %}</span> | ||||||
|         {% if vm_pricing.vat_inclusive %} |  | ||||||
|         <div class="price-text"> |         <div class="price-text"> | ||||||
|             <p>{% trans "VAT included" %}</p> |             <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> | ||||||
|         {% endif %} |  | ||||||
|     </div> |     </div> | ||||||
|     <div class="descriptions"> |     <div class="descriptions"> | ||||||
|         <div class="description form-group"> |         <div class="description form-group"> | ||||||
|  |  | ||||||
|  | @ -78,7 +78,24 @@ | ||||||
|                         <hr> |                         <hr> | ||||||
|                         <p>{% trans "Configuration"%} <strong class="pull-right">{{request.session.template.name}}</strong></p> |                         <p>{% trans "Configuration"%} <strong class="pull-right">{{request.session.template.name}}</strong></p> | ||||||
|                         <hr> |                         <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> |                 </div> | ||||||
|             </div> |             </div> | ||||||
|  |  | ||||||
|  | @ -65,6 +65,7 @@ | ||||||
|                             <span>{% trans "Disk space" %}: </span> |                             <span>{% trans "Disk space" %}: </span> | ||||||
|                             <span class="pull-right">{{vm.disk_size|intcomma}} GB</span> |                             <span class="pull-right">{{vm.disk_size|intcomma}} GB</span> | ||||||
|                         </p> |                         </p> | ||||||
|  |                         <hr> | ||||||
|                         {% if vm.vat > 0 %} |                         {% if vm.vat > 0 %} | ||||||
|                             <p> |                             <p> | ||||||
|                                 <strong>{% trans "Subtotal" %}: </strong> |                                 <strong>{% trans "Subtotal" %}: </strong> | ||||||
|  | @ -75,6 +76,13 @@ | ||||||
|                                 <span class="pull-right">{{vm.vat|floatformat:2|intcomma}} CHF</span> |                                 <span class="pull-right">{{vm.vat|floatformat:2|intcomma}} CHF</span> | ||||||
|                             </p> |                             </p> | ||||||
|                         {% endif %} |                         {% 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> |                         <p> | ||||||
|                             <strong>{% trans "Total" %}</strong> |                             <strong>{% trans "Total" %}</strong> | ||||||
|                             <span class="pull-right">{{vm.total_price|floatformat:2|intcomma}} CHF</span> |                             <span class="pull-right">{{vm.total_price|floatformat:2|intcomma}} CHF</span> | ||||||
|  |  | ||||||
|  | @ -387,7 +387,10 @@ class OrderConfirmationView(DetailView): | ||||||
|             'billing_address_data': ( |             'billing_address_data': ( | ||||||
|                 request.session.get('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) |         return render(request, self.template_name, context) | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -361,4 +361,13 @@ | ||||||
| 
 | 
 | ||||||
| .locale_date.done{ | .locale_date.done{ | ||||||
|   opacity: 1; |   opacity: 1; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .mb-0 { | ||||||
|  |   margin-bottom: 0; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .thin-hr { | ||||||
|  |   margin-top: 10px; | ||||||
|  |   margin-bottom: 10px; | ||||||
| } | } | ||||||
|  | @ -449,230 +449,6 @@ a.unlink:hover { | ||||||
|     color: inherit; |     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) { | @media only screen and (max-width: 1040px) and (min-width: 768px) { | ||||||
|     .content-dashboard { |     .content-dashboard { | ||||||
|         width: 96% !important; |         width: 96% !important; | ||||||
|  |  | ||||||
|  | @ -96,4 +96,8 @@ | ||||||
| 
 | 
 | ||||||
| #virtual_machine_create_form { | #virtual_machine_create_form { | ||||||
|     padding: 15px 0; |     padding: 15px 0; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .dcl-place-order-text { | ||||||
|  |   color: #808080; | ||||||
| } | } | ||||||
|  | @ -1,19 +1,35 @@ | ||||||
| 
 | .payment-container { | ||||||
| .payment-container {padding-top:70px; padding-bottom: 11%;} |   padding-top: 70px; | ||||||
| .creditcard-box .panel-title {display: inline;font-weight: bold; font-size:17px;} |   padding-bottom: 11%; | ||||||
| .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); |  | ||||||
| } | } | ||||||
|  | 
 | ||||||
|  | .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); | ||||||
|  | } | ||||||
|  | 
 | ||||||
| .creditcard-box label.error { | .creditcard-box label.error { | ||||||
|   font-weight: bold; |   font-weight: bold; | ||||||
|   color: red; |   color: red; | ||||||
|   padding: 2px 8px; |   padding: 2px 8px; | ||||||
|   margin-top: 2px; |   margin-top: 2px; | ||||||
| } | } | ||||||
|  | 
 | ||||||
| .creditcard-box .payment-errors { | .creditcard-box .payment-errors { | ||||||
|   font-weight: bold; |   font-weight: bold; | ||||||
|   color: red; |   color: red; | ||||||
|  | @ -21,96 +37,221 @@ | ||||||
|   margin-top: 2px; |   margin-top: 2px; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| /* landing page payment new style */ | .dcl-order-sec { | ||||||
| .last-p { |   padding: 0 30px; | ||||||
| 	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-payment-user h4 { | .dcl-billing-sec { | ||||||
| 	font-weight: 600; |   margin-top: 50px; | ||||||
| 	font-size: 17px; | } | ||||||
|  | 
 | ||||||
|  | .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; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .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) { | @media (min-width: 768px) { | ||||||
| 	.dcl-payment-grid { |   .dcl-billing { | ||||||
| 		display: flex; |     padding-right: 65px; | ||||||
| 		align-items: stretch; |     border-right: 1px solid #eee; | ||||||
| 		flex-wrap: wrap; |   } | ||||||
| 	} | 
 | ||||||
| 	.dcl-payment-box { |   .dcl-creditcard { | ||||||
| 		width: 50%; |     padding-left: 65px; | ||||||
| 		position: relative; |   } | ||||||
| 		padding: 0 30px; | 
 | ||||||
| 	} |   .dcl-order-table-total .tbl-total, | ||||||
| 	.dcl-payment-box:nth-child(2) { |   .dcl-order-table-total .tbl-tot { | ||||||
| 		order: 1; |     padding: 0 10px; | ||||||
| 	} |   } | ||||||
| 	.dcl-payment-box:nth-child(4) { | 
 | ||||||
| 		order: 2; |   .tbl-header-center, | ||||||
| 	} |   .tbl-content-center { | ||||||
| 	.dcl-payment-section { |     text-align: center; | ||||||
| 		padding: 15px 10px; |   } | ||||||
| 		margin-bottom: 0; | 
 | ||||||
| 		border-bottom-width: 5px; |   .tbl-header-right, | ||||||
| 	} |   .tbl-content-right { | ||||||
| 	.dcl-payment-box:nth-child(2n) .dcl-payment-section { |     text-align: right; | ||||||
| 		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; |  | ||||||
| 	} |  | ||||||
| } | } | ||||||
|  | 
 | ||||||
|  | @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'){ |         if(typeof window.ssdUnitPrice === 'undefined'){ | ||||||
|             window.ssdUnitPrice = 0.6; |             window.ssdUnitPrice = 0.6; | ||||||
|         } |         } | ||||||
|  |         if(typeof window.discountAmount === 'undefined'){ | ||||||
|  |             window.discountAmount = 0; | ||||||
|  |         } | ||||||
|         var total = (cardPricing['cpu'].value * window.coresUnitPrice) + |         var total = (cardPricing['cpu'].value * window.coresUnitPrice) + | ||||||
|                     (cardPricing['ram'].value * window.ramUnitPrice) + |                     (cardPricing['ram'].value * window.ramUnitPrice) + | ||||||
|                     (cardPricing['storage'].value * window.ssdUnitPrice); |                     (cardPricing['storage'].value * window.ssdUnitPrice) - | ||||||
|  |                     window.discountAmount; | ||||||
|         total = parseFloat(total.toFixed(2)); |         total = parseFloat(total.toFixed(2)); | ||||||
|         $("#total").text(total); |         $("#total").text(total); | ||||||
|     } |     } | ||||||
|  |  | ||||||
|  | @ -127,6 +127,7 @@ | ||||||
|                             <span>{% trans "Disk space" %}: </span> |                             <span>{% trans "Disk space" %}: </span> | ||||||
|                             <span class="pull-right">{{vm.disk_size}} GB</span> |                             <span class="pull-right">{{vm.disk_size}} GB</span> | ||||||
|                         </p> |                         </p> | ||||||
|  |                         <hr> | ||||||
|                         {% if vm.vat > 0 %} |                         {% if vm.vat > 0 %} | ||||||
|                             <p> |                             <p> | ||||||
|                                 <strong>{% trans "Subtotal" %}: </strong> |                                 <strong>{% trans "Subtotal" %}: </strong> | ||||||
|  | @ -137,6 +138,13 @@ | ||||||
|                                 <span class="pull-right">{{vm.vat|floatformat:2|intcomma}} CHF</span> |                                 <span class="pull-right">{{vm.vat|floatformat:2|intcomma}} CHF</span> | ||||||
|                             </p> |                             </p> | ||||||
|                         {% endif %} |                         {% 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> |                         <p> | ||||||
|                             <strong>{% trans "Total" %}</strong> |                             <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> |                             <span class="pull-right">{% if vm.total_price %}{{vm.total_price|floatformat:2|intcomma}}{% else %}{{vm.price|floatformat:2|intcomma}}{% endif %} CHF</span> | ||||||
|  |  | ||||||
|  | @ -9,159 +9,208 @@ | ||||||
| <!-- Credit card form --> | <!-- Credit card form --> | ||||||
| <div class="dcl-order-container"> | <div class="dcl-order-container"> | ||||||
|     <div class="payment-container"> |     <div class="payment-container"> | ||||||
|         <div class="row"> |         <div class="dcl-order-sec"> | ||||||
|             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-order-sec"> |             <h3><strong>{%trans "Your Order" %}</strong></h3> | ||||||
|                 <h3><strong>{%trans "Your Order" %}</strong></h3> |             <div class="row"> | ||||||
|                 <div class="col-xs-6 col-sm-12 col-md-12 col-lg-12 dcl-order-table-header"> |                 <div class="col-xs-6 col-sm-12"> | ||||||
|                     <div class="col-xs-12 col-sm-2 col-md-1 col-lg-1 tbl-header"> |                     <div class="dcl-order-table-header"> | ||||||
|                         {%trans "Cores" %} |                         <div class="row"> | ||||||
|                     </div> |                             <div class="col-sm-2"> | ||||||
|                     <div class="col-xs-12 col-sm-3 col-md-4 col-lg-4 tbl-header"> |                                 <div class="tbl-header"> | ||||||
|                         {%trans "Memory" %} |                                     {%trans "Cores" %} | ||||||
|                     </div> |                                 </div> | ||||||
|                     <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 tbl-header"> |                             </div> | ||||||
|                         {%trans "Disk space" %} |                             <div class="col-sm-4"> | ||||||
|                     </div> |                                 <div class="tbl-header tbl-header-center"> | ||||||
|                     <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-header"> |                                     {%trans "Memory" %} | ||||||
|                         {%trans "Configuration" %} |                                 </div> | ||||||
|  |                             </div> | ||||||
|  |                             <div class="col-sm-3"> | ||||||
|  |                                 <div class="tbl-header tbl-header-center"> | ||||||
|  |                                     {%trans "Disk space" %} | ||||||
|  |                                 </div> | ||||||
|  |                             </div> | ||||||
|  |                             <div class="col-sm-3"> | ||||||
|  |                                 <div class="tbl-header tbl-header-right"> | ||||||
|  |                                     {%trans "Configuration" %} | ||||||
|  |                                 </div> | ||||||
|  |                             </div> | ||||||
|  |                         </div> | ||||||
|                     </div> |                     </div> | ||||||
|                 </div> |                 </div> | ||||||
|                 <div class="col-xs-6 col-sm-12 col-md-12 col-lg-12 dcl-order-table-content"> |                 <div class="col-xs-6 col-sm-12"> | ||||||
|                     <div class="col-xs-12 col-sm-2 col-md-1 col-lg-1 tbl-content"> |                     <div class="dcl-order-table-content"> | ||||||
|                         {{request.session.specs.cpu|floatformat}} |                         <div class="row"> | ||||||
|                     </div> |                             <div class="col-sm-2"> | ||||||
|                     <div class="col-xs-12 col-sm-3 col-md-4 col-lg-4 tbl-content"> |                                 <div class="tbl-content"> | ||||||
|                         {{request.session.specs.memory|floatformat}} GB |                                     {{request.session.specs.cpu|floatformat}} | ||||||
|                     </div> |                                 </div> | ||||||
|                     <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 tbl-content"> |                             </div> | ||||||
|                         {{request.session.specs.disk_size|floatformat|intcomma}} GB |                             <div class="col-sm-4"> | ||||||
|                     </div> |                                 <div class="tbl-content tbl-content-center"> | ||||||
|                     <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 tbl-content"> |                                     {{request.session.specs.memory|floatformat}} GB | ||||||
|                         {{request.session.template.name}} |                                 </div> | ||||||
|                     </div> |                             </div> | ||||||
|                 </div> |                             <div class="col-sm-3"> | ||||||
|                 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-order-table-total"> |                                 <div class="tbl-content tbl-content-center"> | ||||||
|                     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 tbl-tot tbl-no-padding"> |                                     {{request.session.specs.disk_size|floatformat|intcomma}} GB | ||||||
|                         {%trans "Total" %} <span>{% if vm_pricing.vat_inclusive %}{%trans "including VAT" %}{% else %}{%trans "excluding VAT" %}{% endif %}</span> |                                 </div> | ||||||
|                     </div> |                             </div> | ||||||
|                     <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 tbl-no-padding"> |                             <div class="col-sm-3"> | ||||||
|                         <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"></div> |                                 <div class="tbl-content tbl-content-right"> | ||||||
|                         <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 tbl-total"> |                                     {{request.session.template.name}} | ||||||
|                             {{request.session.specs.price|intcomma}} CHF/{% trans "Month" %} |                                 </div> | ||||||
|  |                             </div> | ||||||
|                         </div> |                         </div> | ||||||
|                     </div> |                     </div> | ||||||
|                 </div> |                 </div> | ||||||
|             </div> |             </div> | ||||||
|         </div> |             <div class="dcl-order-table-total"> | ||||||
|         <div class="row"> |                 <div class="row"> | ||||||
|             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dcl-billing-sec"> |                     <div class="col-xs-6"> | ||||||
|                 <div class="col-xs-12 col-sm-5 col-md-6  billing dcl-billing"> |                         <div class="tbl-tot"> | ||||||
|                     <h3><b>{%trans "Billing Address"%}</b></h3> |                             {%trans "Total" %}  | ||||||
|                     <hr> |                             <span>{% if vm_pricing.vat_inclusive %}{%trans "including VAT" %}{% else %}{%trans "excluding VAT" %}{% endif %}</span> | ||||||
|                     <form role="form" id="billing-form" method="post" action="" novalidate> |                         </div> | ||||||
|                         {% for field in form %} |                     </div> | ||||||
|                         {% csrf_token %} |                     <div class="col-xs-6"> | ||||||
|                         {% bootstrap_field field show_label=False type='fields'%} |                         <div class="tbl-total"> | ||||||
|                         {% endfor %} |                             {{request.session.specs.price|intcomma}} CHF/{% trans "Month" %} | ||||||
|                     </form> |                         </div> | ||||||
|  |                     </div> | ||||||
|                 </div> |                 </div> | ||||||
|                 <div class="col-xs-12 col-sm-7 col-md-6 creditcard-box dcl-creditcard"> |                 {% if vm_pricing.discount_amount %} | ||||||
|                     <h3><b>{%trans "Credit Card"%}</b></h3> |                 <hr class="thin-hr"> | ||||||
|                     <hr> |                 <div class="row"> | ||||||
|                     <div> |                     <div class="col-xs-6"> | ||||||
|                         <p> |                         <div class="tbl-tot"> | ||||||
|                             {% blocktrans %}Please fill in your credit card information below. We are using <a href="https://stripe.com" target="_blank">Stripe</a> for payment and do not store your information in our database.{% endblocktrans %} |                             {%trans "Discount" as discount_name %} | ||||||
|                         </p> |                             {{ 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> | ||||||
|  |                             {% for field in form %} | ||||||
|  |                             {% csrf_token %} | ||||||
|  |                             {% bootstrap_field field show_label=False type='fields'%} | ||||||
|  |                             {% endfor %} | ||||||
|  |                         </form> | ||||||
|  |                     </div> | ||||||
|  |                 </div> | ||||||
|  |                 <div class="col-sm-7 col-md-6"> | ||||||
|  |                     <div class="creditcard-box dcl-creditcard"> | ||||||
|  |                         <h3><b>{%trans "Credit Card"%}</b></h3> | ||||||
|  |                         <hr> | ||||||
|                         <div> |                         <div> | ||||||
|                             {% if credit_card_data.last4 %} |                             <p> | ||||||
|                                 <form role="form" id="payment-form-with-creditcard" novalidate> |                                 {% blocktrans %}Please fill in your credit card information below. We are using <a href="https://stripe.com" target="_blank">Stripe</a> for payment and do not store your information in our database.{% endblocktrans %} | ||||||
|                                     <h5 class="billing-head">Credit Card</h5> |                             </p> | ||||||
|                                     <h5 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h5> |                             <div> | ||||||
|                                     <h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5> |                                 {% if credit_card_data.last4 %} | ||||||
|                                     <input type="hidden" name="credit_card_needed" value="false"/> |                                     <form role="form" id="payment-form-with-creditcard" novalidate> | ||||||
|                                 </form> |                                         <h5 class="billing-head">Credit Card</h5> | ||||||
|                                 {% if not messages and not form.non_field_errors %} |                                         <h5 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h5> | ||||||
|                                     <p class="card-warning-content card-warning-addtional-margin"> |                                         <h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5> | ||||||
|                                         {% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %} |                                         <input type="hidden" name="credit_card_needed" value="false"/> | ||||||
|                                     </p> |                                     </form> | ||||||
|                                 {% endif %} |                                     {% if not messages and not form.non_field_errors %} | ||||||
|                                 <div id='payment_error'> |                                         <p class="card-warning-content card-warning-addtional-margin"> | ||||||
|                                     {% for message in messages %} |                                             {% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %} | ||||||
|                                         {% if 'failed_payment' or 'make_charge_error' in message.tags %} |  | ||||||
|                                          <ul class="list-unstyled"> |  | ||||||
|                                             <li> |  | ||||||
|                                                 <p class="card-warning-content card-warning-error">{{ message|safe }}</p> |  | ||||||
|                                             </li> |  | ||||||
|                                         </ul> |  | ||||||
|                                         {% endif %} |  | ||||||
|                                     {% endfor %} |  | ||||||
|                                     {% for error in form.non_field_errors %} |  | ||||||
|                                         <p class="card-warning-content card-warning-error"> |  | ||||||
|                                             {{ error|escape }} |  | ||||||
|                                         </p> |                                         </p> | ||||||
|                                     {% endfor %} |                                     {% endif %} | ||||||
|                                 </div> |                                     <div id='payment_error'> | ||||||
|                                 <div class="text-right"> |                                         {% for message in messages %} | ||||||
|                                     <button id="payment_button_with_creditcard" class="btn btn-vm-contact" type="submit">{%trans "SUBMIT" %}</button> |                                             {% if 'failed_payment' or 'make_charge_error' in message.tags %} | ||||||
|                                 </div> |                                              <ul class="list-unstyled"> | ||||||
|                             {% else %} |                                                 <li> | ||||||
|                                 <form action="" id="payment-form-new" method="POST"> |                                                     <p class="card-warning-content card-warning-error">{{ message|safe }}</p> | ||||||
|                                     <input type="hidden" name="token"/> |                                                 </li> | ||||||
|                                     <div class="group"> |                                             </ul> | ||||||
|                                         <div class="credit-card-goup"> |                                             {% endif %} | ||||||
|                                             <div class="card-element card-number-element"> |                                         {% endfor %} | ||||||
|                                                 <label>{%trans "Card Number" %}</label> |                                         {% for error in form.non_field_errors %} | ||||||
|                                                 <div id="card-number-element" class="field my-input"></div> |                                             <p class="card-warning-content card-warning-error"> | ||||||
|                                             </div> |                                                 {{ error|escape }} | ||||||
|                                             <div class="row"> |  | ||||||
|                                                 <div class="col-xs-5 card-element card-expiry-element"> |  | ||||||
|                                                     <label>{%trans "Expiry Date" %}</label> |  | ||||||
|                                                     <div id="card-expiry-element" class="field my-input"></div> |  | ||||||
|                                                 </div> |  | ||||||
|                                                 <div class="col-xs-3 col-xs-offset-4 card-element card-cvc-element"> |  | ||||||
|                                                     <label>{%trans "CVC" %}</label> |  | ||||||
|                                                     <div id="card-cvc-element" class="field my-input"></div> |  | ||||||
|                                                 </div> |  | ||||||
|                                             </div> |  | ||||||
|                                             <div class="card-element brand"> |  | ||||||
|                                                <label>{%trans "Card Type" %}</label> |  | ||||||
|                                                <i class="pf pf-credit-card" id="brand-icon"></i> |  | ||||||
|                                            </div> |  | ||||||
|                                         </div> |  | ||||||
|                                     </div> |  | ||||||
|                                     <div id="card-errors"></div> |  | ||||||
|                                         {% if not messages and not form.non_field_errors %} |  | ||||||
|                                             <p class="card-warning-content"> |  | ||||||
|                                                 {% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %} |  | ||||||
|                                             </p> |                                             </p> | ||||||
|                                         {% endif %} |                                         {% endfor %} | ||||||
|                                         <div id='payment_error'> |                                     </div> | ||||||
|                                             {% for message in messages %} |                                     <div class="text-right"> | ||||||
|                                                 {% if 'failed_payment' or 'make_charge_error' in message.tags %} |                                         <button id="payment_button_with_creditcard" class="btn btn-vm-contact" type="submit">{%trans "SUBMIT" %}</button> | ||||||
|                                                  <ul class="list-unstyled"> |                                     </div> | ||||||
|                                                     <li> |                                 {% else %} | ||||||
|                                                         <p class="card-warning-content card-warning-error">{{ message|safe }}</p> |                                     <form action="" id="payment-form-new" method="POST"> | ||||||
|                                                     </li> |                                         <input type="hidden" name="token"/> | ||||||
|                                                 </ul> |                                         <div class="group"> | ||||||
|                                                 {% endif %} |                                             <div class="credit-card-goup"> | ||||||
|                                             {% endfor %} |                                                 <div class="card-element card-number-element"> | ||||||
| 
 |                                                     <label>{%trans "Card Number" %}</label> | ||||||
|                                             {% for error in form.non_field_errors %} |                                                     <div id="card-number-element" class="field my-input"></div> | ||||||
|                                                 <p class="card-warning-content card-warning-error"> |                                                 </div> | ||||||
|                                                     {{ error|escape }} |                                                 <div class="row"> | ||||||
|  |                                                     <div class="col-xs-5 card-element card-expiry-element"> | ||||||
|  |                                                         <label>{%trans "Expiry Date" %}</label> | ||||||
|  |                                                         <div id="card-expiry-element" class="field my-input"></div> | ||||||
|  |                                                     </div> | ||||||
|  |                                                     <div class="col-xs-3 col-xs-offset-4 card-element card-cvc-element"> | ||||||
|  |                                                         <label>{%trans "CVC" %}</label> | ||||||
|  |                                                         <div id="card-cvc-element" class="field my-input"></div> | ||||||
|  |                                                     </div> | ||||||
|  |                                                 </div> | ||||||
|  |                                                 <div class="card-element brand"> | ||||||
|  |                                                    <label>{%trans "Card Type" %}</label> | ||||||
|  |                                                    <i class="pf pf-credit-card" id="brand-icon"></i> | ||||||
|  |                                                </div> | ||||||
|  |                                             </div> | ||||||
|  |                                         </div> | ||||||
|  |                                         <div id="card-errors"></div> | ||||||
|  |                                             {% if not messages and not form.non_field_errors %} | ||||||
|  |                                                 <p class="card-warning-content"> | ||||||
|  |                                                     {% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %} | ||||||
|                                                 </p> |                                                 </p> | ||||||
|                                             {% endfor %} |                                             {% endif %} | ||||||
|                                         </div> |                                             <div id='payment_error'> | ||||||
|                                         <div class="text-right"> |                                                 {% for message in messages %} | ||||||
|                                             <button class="btn btn-vm-contact btn-wide" type="submit">{%trans "SUBMIT" %}</button> |                                                     {% if 'failed_payment' or 'make_charge_error' in message.tags %} | ||||||
|                                         </div> |                                                      <ul class="list-unstyled"> | ||||||
|                                     </div> |                                                         <li> | ||||||
|  |                                                             <p class="card-warning-content card-warning-error">{{ message|safe }}</p> | ||||||
|  |                                                         </li> | ||||||
|  |                                                     </ul> | ||||||
|  |                                                     {% endif %} | ||||||
|  |                                                 {% endfor %} | ||||||
| 
 | 
 | ||||||
|                                     <div style="display:none;"> |                                                 {% for error in form.non_field_errors %} | ||||||
|                                         <p class="payment-errors"></p> |                                                     <p class="card-warning-content card-warning-error"> | ||||||
|                                     </div> |                                                         {{ error|escape }} | ||||||
|                                 </form> |                                                     </p> | ||||||
|                             {% endif %} |                                                 {% endfor %} | ||||||
|  |                                             </div> | ||||||
|  |                                             <div class="text-right"> | ||||||
|  |                                                 <button class="btn btn-vm-contact btn-wide" type="submit">{%trans "SUBMIT" %}</button> | ||||||
|  |                                             </div> | ||||||
|  |                                         </div> | ||||||
|  | 
 | ||||||
|  |                                         <div style="display:none;"> | ||||||
|  |                                             <p class="payment-errors"></p> | ||||||
|  |                                         </div> | ||||||
|  |                                     </form> | ||||||
|  |                                 {% endif %} | ||||||
|  |                             </div> | ||||||
|                         </div> |                         </div> | ||||||
|                     </div> |                     </div> | ||||||
|                 </div> |                 </div> | ||||||
|  |  | ||||||
|  | @ -652,7 +652,10 @@ class PaymentVMView(LoginRequiredMixin, FormView): | ||||||
|             }) |             }) | ||||||
| 
 | 
 | ||||||
|         context.update({ |         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 |         return context | ||||||
|  | @ -806,6 +809,9 @@ class OrdersHostingDetailView(LoginRequiredMixin, DetailView): | ||||||
|             context['cc_brand'] = card_details.get('response_object').get( |             context['cc_brand'] = card_details.get('response_object').get( | ||||||
|                 'cc_brand') |                 'cc_brand') | ||||||
|             context['vm'] = self.request.session.get('specs') |             context['vm'] = self.request.session.get('specs') | ||||||
|  |             context['vm_pricing'] = VMPricing.get_vm_pricing_by_name( | ||||||
|  |                 self.request.session['specs']['pricing_name'] | ||||||
|  |             ), | ||||||
|         return context |         return context | ||||||
| 
 | 
 | ||||||
|     @method_decorator(decorators) |     @method_decorator(decorators) | ||||||
|  |  | ||||||
|  | @ -107,10 +107,13 @@ def get_vm_price_with_vat(cpu, memory, ssd_size, hdd_size=0, | ||||||
|         ) |         ) | ||||||
|         return None |         return None | ||||||
| 
 | 
 | ||||||
|     price = ((decimal.Decimal(cpu) * pricing.cores_unit_price) + |     price = ( | ||||||
|              (decimal.Decimal(memory) * pricing.ram_unit_price) + |         (decimal.Decimal(cpu) * pricing.cores_unit_price) + | ||||||
|              (decimal.Decimal(ssd_size) * pricing.ssd_unit_price) + |         (decimal.Decimal(memory) * pricing.ram_unit_price) + | ||||||
|              (decimal.Decimal(hdd_size) * pricing.hdd_unit_price)) |         (decimal.Decimal(ssd_size) * pricing.ssd_unit_price) + | ||||||
|  |         (decimal.Decimal(hdd_size) * pricing.hdd_unit_price) - | ||||||
|  |         pricing.discount_amount | ||||||
|  |     ) | ||||||
|     if pricing.vat_inclusive: |     if pricing.vat_inclusive: | ||||||
|         vat = decimal.Decimal(0) |         vat = decimal.Decimal(0) | ||||||
|         vat_percent = decimal.Decimal(0) |         vat_percent = decimal.Decimal(0) | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue