adding radio buttons etc

5 files changed, 68 insertions, 13 deletions

diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js
index 0f72995..619bff8 100644
--- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js
+++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js
@@ -35,6 +35,11 @@ var EditSubscriptionModal = ModalView.extend({
 		this.$planCost = this.$("[data-role=planCost]")
 		this.$planTotal = this.$("[data-role=planTotal]")
 
+		this.$basicPlanName = this.$("[data-role=basicPlanName]")
+		this.$proPlanName = this.$("[data-role=proPlanName]")
+		this.$basicPlanCost = this.$("[data-role=basicPlanCost]")
+		this.$proPlanCost = this.$("[data-role=proPlanCost]")
+
 		this.$basicLayoutCost = this.$("[data-role=basicLayoutCost]")
 		this.$basicLayoutQuantity = this.$("[data-role=basicLayoutQuantity]")
 		this.$basicLayoutTotal = this.$("[data-role=basicLayoutTotal]")
@@ -43,8 +48,24 @@ var EditSubscriptionModal = ModalView.extend({
 		this.$proLayoutQuantity = this.$("[data-role=proLayoutQuantity]")
 		this.$proLayoutTotal = this.$("[data-role=proLayoutTotal]")
 
+		this.$showLayoutsMenu = this.$("[data-role=showLayoutsMenu]")
+		this.$showPlanMenu = this.$("[data-role=showPlanMenu]")
+
+		this.$layoutsMenu = this.$("[data-role=layoutsMenu]")
+		this.$planMenu = this.$("[data-role=planMenu]")
+		this.$closeMenu = this.$("[data-role=closeMenu]")
+
+		this.$buyLayouts = this.$("[data-role=buyLayouts]")
+
+		this.$changePlan = this.$("[data-role=changePlan]")
+
+		this.$basicLayoutInput = this.$("[data-role=basicLayoutInput]")
+		this.$proLayoutInput = this.$("[data-role=proLayoutInput]")
+		this.$planRadio = this.$("[name=planRadio]")
+
 		this.$upgradeSubscription = this.$("[data-role=upgradeSubscription]")
 		this.$cancelSubscription = this.$("[data-role=cancelSubscription]")
+
 		this.$gear = this.$(".gear")
 	},
 	
@@ -100,7 +121,7 @@ var EditSubscriptionModal = ModalView.extend({
 		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.plan_price         = t.is_monthly ? plan.basic_layout_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
@@ -113,12 +134,18 @@ var EditSubscriptionModal = ModalView.extend({
 		var subscriber = this.subscriber
 		var plan = this.plans[ this.plan_levels[ subscriber.plan_type ] ]
 		var totals = this.calculateTotals(subscriber, plan)
+
+		this.$basicPlanName.html         ( this.plans[1].name )
+		this.$proPlanName.html           ( this.plans[2].name )
+		this.$basicPlanCost.toDollars    ( totals.is_monthly ? this.plans[1].monthly_price : this.plans[2].yearly_price)
+		this.$proPlanCost.toDollars      ( totals.is_monthly ? this.plans[2].monthly_price : this.plans[2].yearly_price)
 		
 		this.$planName.html              ( plan.name )
 		this.$planCost.toDollars         ( totals.plan_price )
 
 		this.$billingInterval.html       ( totals.is_monthly ? "mo." : "yr." )
-		this.$proLayoutRow.toggle        ( totals.is_pro )
+		this.$basicLayoutRow.toggle      ( subscriber.basic_layouts > 0 )
+		this.$proLayoutRow.toggle        ( totals.is_pro && subscriber.pro_layouts > 0)
 
 		this.$basicLayoutCost.toDollars  ( totals.basic_layout_price )
 		this.$basicLayoutQuantity.html   ( subscriber.basic_layouts )
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 082a2d4..4144b8b 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -987,6 +987,8 @@ iframe.embed {
 	font-size: 1.9vw;
 	padding: 0;
 }
+
+/* debug sync button */
 .editSubscription .gear {
 	position: absolute;
 	top: 10px;
@@ -1053,8 +1055,13 @@ iframe.embed {
 	background: red;
 	border-color: red;
 }
-
-
+/* purchase mode */
+.paidPlan input[type=number] { display: none }
+.paidPlan.editing input[type=number] { display: inline-block }
+.paidPlan.editing input[type=number]+span { display: none }
+form .paidPlan div { float: none; }
+form .paidPlan label { float: none; font-size: 2vw; margin: 0 10px; }
+.paidPlan .upgradeMenu div { padding: 5px 10px; }
 
 /* LAYOUTS MODAL */
 
diff --git a/server/index.js b/server/index.js
index 3572675..8c8212f 100644
--- a/server/index.js
+++ b/server/index.js
@@ -72,7 +72,7 @@ site.setup = function(){
 
 	server = http.createServer(app)
 	server.listen(app.get('port'), function () {
-		console.log('Vvalls server listening on port ' + app.get('port'));
+		console.log('VValls server listening on port ' + app.get('port'));
 	});
 
 	// var io = websocket.listen(server)
diff --git a/server/lib/api/subscription.js b/server/lib/api/subscription.js
index 3a8403f..6f08e66 100644
--- a/server/lib/api/subscription.js
+++ b/server/lib/api/subscription.js
@@ -28,7 +28,7 @@ var subscription = module.exports = {
       })
     },
     ensurePlans: function(req, res, next){
-      Plan.find({}).sort({ 'level': -1 }).exec(function (err, plans) {
+      Plan.find({}).sort({ 'level': 1 }).exec(function (err, plans) {
         res.locals.plans = (plans || [])
         next()
       })
diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs
index 69ec88d..fcb4b94 100644
--- a/views/partials/edit-subscription.ejs
+++ b/views/partials/edit-subscription.ejs
@@ -8,13 +8,13 @@
 					<h3>Edit Subscription</h3>
 				</li>
 				<li class="freePlan">
-					You are currently using the free version of Vvalls.  For access to all of Vvalls features,
+					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">
+				<li class="paidPlan editing">
 					Your current plan level is <span data-role="planName"></span>
 					<table class="planInfo">
 						<tr class="planRow">
@@ -25,13 +25,13 @@
 						</tr>
 						<tr class="basicLayoutRow">
 							<th>Additional Basic layouts</th>
-							<td><span data-role="basicLayoutQuantity"></span></td>
+							<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>Additional Pro layouts</th>
-							<td><span data-role="proLayoutQuantity"></span></td>
+							<td><input type="number" min="0" max="100" data-role="proLayoutInput"><span data-role="proLayoutQuantity"></span></td>
 							<td>@ $<span data-role="proLayoutCost"></span> ...</td>
 							<td>$<span data-role="proLayoutTotal"></span>/<span data-role="billingInterval"></span></td>
 						</tr>
@@ -42,9 +42,30 @@
 							<td>$<span data-role="planTotal"></span>/<span data-role="billingInterval"></span></td>
 						</tr>
 					</table>
-					<button data-role="addLayouts">Buy more layouts</button>				
-					<button data-role="changePlan">Upgrade your plan</button>				
-					<button data-role="cancelSubscription">Cancel your subscription</button>
+					<div class="billingMenu">
+						<button data-role="showLayoutsMenu">Buy layouts</button>
+						<button data-role="showPlanMenu">Upgrade your plan</button>
+						<button data-role="cancelSubscription">Cancel your subscription</button>
+					</div>
+					<div class="layoutsMenu">
+						<button data-role="buyLayouts">Buy layouts</button>
+						<button data-role="closeMenu">Cancel</button>
+					</div>
+					<div class="planMenu">
+						<h3>Select desired plan:</h3>
+						<div>
+							<input type="radio" id="chooseBasicPlan" 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" name="planRadio" value="pro">
+							<label for="chooseProPlan" data-role="proPlanName"></label>
+							$<span data-role="proPlanCost"></span>/<span data-role="billingInterval"></span>
+						</div>
+						<button data-role="changePlan">Change plan</button>
+						<button data-role="closeMenu">Cancel</button>
+					</div>
 				</li>
 				<div class="gear"><span class="ion-gear-a"></span></div>
 			</ul>