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
|
var EditSubscriptionModal = ModalFormView.extend({
el: ".mediaDrawer.editSubscription",
action: "/api/subscription",
method: "put",
fixedClose: true,
events: {
"click [data-role='upgradeSubscription']": 'upgradeSubscription',
"click [data-role='cancelSubscription']": 'cancelSubscription',
},
initialize: function(){
this.$freePlan = this.$("#free_plan")
this.$paidPlan = this.$("#paid_plan")
this.$proLayoutRow = this.$("#proLayoutRow")
this.$billingInterval = this.$("[data-role=billingInterval]")
this.$planType = this.$("[data-role=planType]")
this.$planCost = this.$("[data-role=planCost]")
this.$basicLayoutCost = this.$("[data-role=basicLayoutCost]")
this.$basicLayoutQuantity = this.$("[data-role=basicLayoutQuantity]")
this.$proLayoutCost = this.$("[data-role=proLayoutCost]")
this.$proLayoutQuantity = this.$("[data-role=proLayoutQuantity]")
this.$upgradeSubscription = this.$("[data-role=upgradeSubscription]")
this.$cancelSubscription = this.$("[data-role=cancelSubscription]")
},
plan_levels: {
free: 0,
basic: 1,
pro: 2,
},
load: function(){
this.reset()
$.get("/api/subscription", function(data){
if (data.error) {
this.$freePlan.show()
this.$paidPlan.hide()
this.show()
return
}
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))
},
updateTotals: function(){
},
upgradeSubscription: function(){
},
cancelSubscription: function(){
},
})
|