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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
var EditSubscriptionModal = ModalFormView.extend({
el: ".mediaDrawer.editSubscription",
action: "/api/subscription",
updateAction: "/api/subscription",
destroyAction: "/api/subscription/destroy",
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,
},
sync: function(){
$.put(this.syncAction, this.didLoad.bind(this))
},
loaded: false,
load: function(){
this.reset()
if (this.loaded) { return this.show() }
$.get(this.action, this.didLoad.bind(this))
},
didLoad: function(data){
this.loaded = true
this.plans = data.plans
if (data.subscription) {
this.subscriber = data.subscription
}
else if (data.error) {
// ...no subscription found
this.subscriber = null
}
return this.show()
},
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)
},
calculateTotals: function(subscriber, plan){
var t = {}
t.is_pro = plan.name == "pro"
t.is_monthly = subscriber.plan_period == "monthly"
t.plan_price = t.is_monthly ? plan.monthly_price : plan.yearly_price
t.basic_layout_price = t.is_monthly ? plan.basic_layout_monthly_price : plan.basic_layout_yearly_price
t.basic_layout_total = subscriber.basic_layouts * t.basic_layout_price
t.pro_layout_price = t.is_monthly ? plan.pro_layout_monthly_price : plan.pro_layout_yearly_price
t.pro_layout_total = t.is_pro ? subscriber.pro_layouts * t.pro_layout_price : 0
t.plan_total = t.plan_price + t.basic_layout_total + t.pro_layout_total
return t
},
updateTotals: function(){
var subscriber = this.subscriber
var plan = this.plans[ this.plan_levels[ subscriber.plan_type ] ]
var totals = this.calculateTotals(subscriber, plan)
this.$planType.html ( plan.name )
this.$planCost.toDollars ( totals.plan_price )
this.$billingInterval.html ( totals.is_monthly ? "mo." : "yr." )
this.$proLayoutRow.toggle ( totals.is_pro )
this.$basicLayoutCost.toDollars ( totals.basic_layout_price )
this.$basicLayoutQuantity.html ( subscriber.basic_layouts )
this.$basicLayoutTotal.toDollars ( totals.basic_layout_total )
this.$proLayoutCost.toDollars ( totals.pro_layout_price )
this.$proLayoutQuantity.html ( subscriber.pro_layouts )
this.$proLayoutTotal.toDollars ( totals.pro_layout_total )
this.$planTotal.toDollars ( totals.plan_total )
},
update: function(){
$.ajax({
url: this.updateAction,
type: "put",
data: { _csrf: this.$csrf.val() },
success: function(data){
}
})
},
destroy: function(){
var msg = "Are you sure you want to cancel your subscription?"
ConfirmModal.confirm(msg, function(){
$.ajax({
url: this.destroyAction,
type: "delete",
data: { _csrf: this.$csrf.val() },
success: function(data){
}
})
}.bind(this))
},
})
|
