summaryrefslogtreecommitdiff
path: root/views/partials/edit-subscription.ejs
blob: f3c358984c04be84a83b5b0cad3303ce194bde28 (plain)
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
<div class="mediaDrawer fixed animate editSubscription">
	<span class="close">X</span>
	<div id="form_container">
		<form>
			<input type="hidden" name="_csrf" value="[[- token ]]">
			<ul>
				<li class="section_break">
					<h3>Edit Subscription</h3>
				</li>
				<li class="freePlan">
					You are currently using the free version of VValls.  For access to all of VValls features,
					consider upgrading to a paid plan.
					<br><br>
					<div class="planList"></div>
					<br><br><br>
				</li>
				<li class="paidPlan">
					<div class="currentPlanLevel">
						Your current plan level is <span data-role="planName"></span>
					</div>
					<div class="planMenu">
						<h3>Select desired plan:</h3>
						<div>
							<input type="radio" id="chooseBasicPlan" data-role="basicPlanInput" name="planRadio" value="basic">
							<label for="chooseBasicPlan" data-role="basicPlanName"></label>
							$<span data-role="basicPlanCost"></span>/<span data-role="billingInterval"></span>
						</div>
						<div>
							<input type="radio" id="chooseProPlan" data-role="proPlanInput" name="planRadio" value="pro">
							<label for="chooseProPlan" data-role="proPlanName"></label>
							$<span data-role="proPlanCost"></span>/<span data-role="billingInterval"></span>
						</div>
					</div>
					<table class="planInfo">
						<tr class="planRow">
							<th><span data-role="planName"></span></th>
							<td></td>
							<td></td>
							<td>$<span data-role="planCost"></span>/<span data-role="billingInterval"></span></td>
						</tr>
						<tr class="basicLayoutRow">
							<th>Basic layouts</th>
							<td><input type="number" min="0" max="100" step="1" data-role="basicLayoutInput"><span data-role="basicLayoutQuantity"></span></td>
							<td>each $<span data-role="basicLayoutCost"></span>/<span data-role="billingInterval"></span></td>
							<td>$<span data-role="basicLayoutTotal"></span>/<span data-role="billingInterval"></span></td>
						</tr>
						<tr class="proLayoutRow">
							<th>Pro layouts</th>
							<td><input type="number" min="0" max="100" data-role="proLayoutInput"><span data-role="proLayoutQuantity"></span></td>
							<td>each $<span data-role="proLayoutCost"></span>/<span data-role="billingInterval"></span></td>
							<td>$<span data-role="proLayoutTotal"></span>/<span data-role="billingInterval"></span></td>
						</tr>
						<tr class="totalRow">
							<td></td>
							<td></td>
							<th>Total</th>
							<td>$<span data-role="planTotal"></span>/<span data-role="billingInterval"></span></td>
						</tr>
					</table>
					<div class="billingMenu">
						<button data-role="showEditMenu">Edit Your Plan</button><br>
						<button data-role="cancelSubscription">Cancel your subscription</button>
					</div>
					<div class="editMenu">
						<div class="fineprint">
							Your credit card will be charged the difference of XXXX for this month.
							Your subscription will renew at XXXX at the start of your next billing cycle.
							We thank you for your support!
						</div>
						<button data-role="saveChanges">Save Subscription</button>
						<button data-role="closeMenu">Cancel</button>
					</div>
				</li>
				<div class="gear"><span class="ion-gear-a"></span></div>
			</ul>
		</form>
	</div>
</div>