1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
var EditSubscriptionModal = ModalFormView.extend({
el: ".mediaDrawer.editSubscription",
action: "/api/subscription",
method: "put",
fixedClose: true,
subscriber: null,
events: {
"click [data-role='upgradeSubscription']": 'upgradeSubscription',
"click [data-role='cancelSubscription']": 'cancelSubscription',
},
initialize: function(){
// this.parent = opt.parent
this.__super__.initialize.call(this)
this.$freePlan = this.$("#free_plan")
this.$paidPlan = this.$("#paid_plan")
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]")
},
plan_levels: {
free: 0,
basic: 1,
pro: 2,
},
loaded: false,
load: function(){
this.reset()
if (this.loaded) { return this.show() }
$.get("/api/subscription", function(data){
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()
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(){
},
cancelSubscription: function(){
},
})
|
