diff options
Diffstat (limited to 'public/assets/javascripts/ui/site/EditSubscriptionModal.js')
| -rw-r--r-- | public/assets/javascripts/ui/site/EditSubscriptionModal.js | 88 |
1 files changed, 62 insertions, 26 deletions
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(){ |