calculate total

3 files changed, 73 insertions, 37 deletions

diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js
index 9e7ce75..1bdce19 100644
--- a/public/assets/javascripts/ui/_router.js
+++ b/public/assets/javascripts/ui/_router.js
@@ -206,7 +206,6 @@ var SiteRouter = Router.extend({
 		this.editSubscriptionModal.load()
 	},
 
-
 	newDocument: function(e){
 		e && e.preventDefault()
 
diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js
index 711a259..ea86897 100644
--- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js
+++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js
@@ -5,6 +5,7 @@ var EditSubscriptionModal = ModalFormView.extend({
 	method: "put",
 	
 	fixedClose: true,
+	subscriber: null,
 	
 	events: {
 	  "click [data-role='upgradeSubscription']": 'upgradeSubscription',
@@ -12,20 +13,29 @@ var EditSubscriptionModal = ModalFormView.extend({
 	},
 	
 	initialize: function(){
+	  // this.parent = opt.parent
+	  this.__super__.initialize.call(this)
+
 		this.$freePlan = this.$("#free_plan")
 		this.$paidPlan = this.$("#paid_plan")
-		this.$proLayoutRow = this.$("#proLayoutRow")
+		this.$planRow = this.$(".planRow")
+		this.$basicLayoutRow = this.$(".basicLayoutRow")
+		this.$proLayoutRow = this.$(".proLayoutRow")
+		this.$totalRow = this.$(".totalRow")
 
 		this.$billingInterval = this.$("[data-role=billingInterval]")
 
 		this.$planType = this.$("[data-role=planType]")
 		this.$planCost = this.$("[data-role=planCost]")
+		this.$planTotal = this.$("[data-role=planTotal]")
 
 		this.$basicLayoutCost = this.$("[data-role=basicLayoutCost]")
 		this.$basicLayoutQuantity = this.$("[data-role=basicLayoutQuantity]")
+		this.$basicLayoutTotal = this.$("[data-role=basicLayoutTotal]")
 
 		this.$proLayoutCost = this.$("[data-role=proLayoutCost]")
 		this.$proLayoutQuantity = this.$("[data-role=proLayoutQuantity]")
+		this.$proLayoutTotal = this.$("[data-role=proLayoutTotal]")
 
 		this.$upgradeSubscription = this.$("[data-role=upgradeSubscription]")
 		this.$cancelSubscription = this.$("[data-role=cancelSubscription]")
@@ -37,40 +47,66 @@ var EditSubscriptionModal = ModalFormView.extend({
 		pro: 2,
 	},
 
+	loaded: false,
 	load: function(){
 		this.reset()
+		if (this.loaded) { return this.show() }
 		$.get("/api/subscription", function(data){
-			if (data.error) {
-				this.$freePlan.show()
-				this.$paidPlan.hide()
-				this.show()
-				return
+			this.loaded = true
+			if (data.subscriber) {
+				this.subscriber = data.subscription
+				this.plans = data.plans
+			}
+			else if (data.error) {
+				// ...no subscription found
 			}
+			return this.show()
+		}.bind(this))
+	},
+	
+	show: function(){
+		if (! this.subscriber) {
 			this.$freePlan.show()
 			this.$paidPlan.hide()
-			
-			var subscriber = data.subscription
-			var plan = data.plans[ this.plan_levels[ subscriber.plan_type ] ]
-			var is_pro = plan.name == "pro"
-			var is_monthly = subscriber.plan_period == "monthly"
-			
-			this.$planType.html( plan.name )
-			this.$planCost.html( is_monthly ? plan.monthly_price : plan.yearly_price )
-
-			this.$billingInterval.html( is_monthly ? "mo." : "yr." )
-			this.$proLayoutRow.toggle( is_pro )
-
-			this.$basicLayoutCost.html( is_monthly ? plan.basic_layout_monthly_price : plan.basic_layout_yearly_price )
-			this.$basicLayoutQuantity.html( subscriber.basic_layouts )
-
-			this.$proLayoutCost.html( is_monthly ? plan.pro_layout_monthly_price : plan.pro_layout_yearly_price )
-			this.$proLayoutQuantity.html( subscriber.pro_layouts )
-			
-			this.show()
-		}.bind(this))
+			this.__super__.show.call(this)
+			return
+		}
+		
+		this.$freePlan.hide()
+		this.$paidPlan.show()
+		
+		this.updateTotals()
+				
+		this.__super__.show.call(this)
 	},
 	
 	updateTotals: function(){
+		var subscriber = this.subscriber
+		var plan = this.plans[ this.plan_levels[ subscriber.plan_type ] ]
+		var is_pro = plan.name == "pro"
+		var is_monthly = subscriber.plan_period == "monthly"
+		
+		var plan_price = is_monthly ? plan.monthly_price : plan.yearly_price
+		this.$planType.html( plan.name )
+		this.$planCost.html( plan_price )
+
+		this.$billingInterval.html( is_monthly ? "mo." : "yr." )
+		this.$proLayoutRow.toggle( is_pro )
+
+		var basic_layout_price = is_monthly ? plan.basic_layout_monthly_price : plan.basic_layout_yearly_price
+		var basic_layout_total = subscriber.basic_layouts * basic_layout_price
+		this.$basicLayoutCost.html( basic_layout_price )
+		this.$basicLayoutQuantity.html( subscriber.basic_layouts )
+		this.$basicLayoutTotal.html( basic_layout_total )
+
+		var pro_layout_price = is_monthly ? plan.pro_layout_monthly_price : plan.pro_layout_yearly_price
+		var pro_layout_total = is_pro ? subscriber.pro_layouts * pro_layout_price : 0
+		this.$proLayoutCost.html( pro_layout_price )
+		this.$proLayoutQuantity.html( subscriber.pro_layouts )
+		this.$proLayoutTotal.html( pro_layout_total )
+		
+		var plan_total = plan_price + basic_layout_total + pro_layout_total
+		this.$planTotal.html( plan_total )
 	},
 	
 	upgradeSubscription: function(){
diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs
index 041c6ec..bb7cc27 100644
--- a/views/partials/edit-subscription.ejs
+++ b/views/partials/edit-subscription.ejs
@@ -17,27 +17,28 @@
 					Your current plan level is <span data-role="planName"></span>
 
 					<table>
-						<tr>
+						<tr class="planRow">
 							<td><span data-role="planName"></span></td>
 							<td></td>
 							<td>@ $<span data-role="planCost"></span>/<span data-role="billingInterval"></span></td>
 						</tr>
-						<tr>
+						<tr class="basicLayoutRow">
 							<td>Additional Basic layouts</td>
-							<td></td>
+							<td><span data-role="basicLayoutQuantity"></span></td>
 							<td>@ $<span data-role="basicLayoutCost"></span>/<span data-role="billingInterval"></span></td>
+							<td>$<span data-role="basicLayoutTotal"></span></td>
 							<td>Buy more</td>
 						</tr>
-						<tr id="proLayoutRow">
+						<tr class="proLayoutRow">
 							<td>Additional Pro layouts</td>
-							<td><span data-role="basicLayoutQuantity"></span></td>
-							<td>@ $<span data-role="basicLayoutCost"></span>/<span data-role="billingInterval"></span></td>
-							<td>Buy more</td>
+							<td><span data-role="proLayoutQuantity"></span></td>
+							<td>@ $<span data-role="proLayoutCost"></span>/<span data-role="billingInterval"></span></td>
+							<td>$<span data-role="proLayoutTotal"></span></td>
 						</tr>
-						<tr>
+						<tr class="totalRow">
 							<td>Total</td>
-							<td><span data-role="proLayoutQuantity"></span></td>
-							<td>$<span data-role="proLayoutCost"></span>/<span data-role="billingInterval"></span></td>
+							<td></td><td></td>
+							<td>$<span data-role="planTotal"></span></td>
 						</tr>
 					</table>