diff options
| -rw-r--r-- | public/assets/javascripts/ui/site/EditSubscriptionModal.js | 57 | ||||
| -rwxr-xr-x | public/assets/stylesheets/app.css | 14 | ||||
| -rw-r--r-- | views/partials/edit-subscription.ejs | 43 |
3 files changed, 56 insertions, 58 deletions
diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js index 384460d..6e5dc9e 100644 --- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js +++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js @@ -7,6 +7,7 @@ var EditSubscriptionModal = ModalView.extend({ destroyAction: "/api/subscription/destroy", fixedClose: true, + editing: false, subscriber: null, tempSubscriber: null, @@ -17,14 +18,13 @@ var EditSubscriptionModal = ModalView.extend({ "click .gear": 'sync', "click .planList button": 'followLink', - "click [data-role=showLayoutsMenu]": "layoutsMode", - "click [data-role=showPlanMenu]": "planMode", + "click [data-role=showEditMenu]": "editMode", "click [data-role=closeMenu]": "resetMode", "input [data-role=basicLayoutInput]": "updateQuantity", "input [data-role=proLayoutInput]": "updateQuantity", - "click [data-role=saveQuantity]": "saveQuantity", + "click [data-role=saveChanges]": "saveChanges", "change [name=planRadio]": "updatePlan", "click [data-role=savePlan]": "savePlan", @@ -186,21 +186,28 @@ var EditSubscriptionModal = ModalView.extend({ this.$planTotal.toDollars ( totals.plan_total ) }, - resetMode: function(e){ - e && e.preventDefault() - this.$paidPlan.removeClass("editLayouts editPlan") - this.reset() - }, - - layoutsMode: function(e){ + editMode: function(e){ e && e.preventDefault() - this.$paidPlan.addClass("editLayouts") + + this.editing = true + this.$el.addClass("editing") this.tempSubscriber = defaults({}, this.subscriber) this.$basicLayoutInput.val( this.subscriber.basic_layouts ) this.$proLayoutInput.val( this.subscriber.pro_layouts ) this.$basicLayoutRow.show() this.$proLayoutRow.toggle(this.subscriber.plan_type == "pro") + switch (this.subscriber.plan_type) { + case 'basic': this.$basicPlanInput.prop('checked', true); break; + case 'pro': this.$proPlanInput.prop('checked', true); break; + } }, + resetMode: function(e){ + e && e.preventDefault() + this.editing = false + this.$el.removeClass("editing") + this.reset() + }, + updateQuantity: function(e){ e && e.preventDefault() var plan = this.getPlan( this.tempSubscriber.plan_type ) @@ -213,34 +220,24 @@ var EditSubscriptionModal = ModalView.extend({ this.$basicLayoutRow.show() this.$proLayoutRow.toggle(this.tempSubscriber.plan_type == "pro") }, - saveQuantity: function(e){ + saveChanges: function(e){ e && e.preventDefault() + if (this.tempSubscriber.plan_type != this.subscriber.plan_type + || this.tempSubscriber.basic_layouts != this.subscriber.basic_layouts + || this.tempSubscriber.pro_layouts != this.subscriber.pro_layouts) { + // update plan_type + } this.subscriber = this.tempSubscriber this.resetMode() // blabla.. save }, - planMode: function(e){ - e && e.preventDefault() - this.$paidPlan.addClass("editPlan") - switch (this.subscriber.plan_type) { - case 'basic': this.$basicPlanInput.prop('checked', true); break; - case 'pro': this.$proPlanInput.prop('checked', true); break; - } - this.tempSubscriber = defaults({}, this.subscriber) - }, updatePlan: function(e){ e && e.preventDefault() - var plan_type = this.$("[name=planRadio]:checked").val() - var plan = this.getPlan( plan_type ) - this.displayTotals(this.tempSubscriber, plan) - }, - savePlan: function(e){ - e && e.preventDefault() - this.subscriber.plan_type = this.$("[name=planRadio]:checked").val() - this.resetMode() - // blabla.. save + this.tempSubscriber.plan_type = this.$("[name=planRadio]:checked").val() + this.updateQuantity() }, + sync: function(){ this.$gear.addClass("turning") $.ajax({ diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index b58bb01..ffb133d 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1071,12 +1071,14 @@ form .paidPlan label { float: none; font-size: 2vw; margin: 0 10px; } .paidPlan .upgradeMenu div { padding: 5px 10px; } .paidPlan .layoutsMenu { display: none } .paidPlan .planMenu { display: none } -.paidPlan.editLayouts .layoutsMenu { display: block } -.paidPlan.editLayouts .billingMenu { display: none } -.paidPlan.editLayouts input[type=number] { display: inline-block } -.paidPlan.editLayouts input[type=number]+span { display: none } -.paidPlan.editPlan .planMenu { display: block } -.paidPlan.editPlan .billingMenu { display: none } + +.editing .section_break { display: none } +.editing .paidPlan .currentPlanLevel { display: none } +.editing .paidPlan .billingMenu { display: none } +.editing .paidPlan .layoutsMenu { display: block } +.editing .paidPlan .planMenu { display: block } +.editing .paidPlan input[type=number] { display: inline-block } +.editing .paidPlan input[type=number]+span { display: none } /* LAYOUTS MODAL */ diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs index 1b0fc41..38c6dfc 100644 --- a/views/partials/edit-subscription.ejs +++ b/views/partials/edit-subscription.ejs @@ -14,8 +14,23 @@ <div class="planList"></div> <br><br><br> </li> - <li class="paidPlan editing"> - Your current plan level is <span data-role="planName"></span> + <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> @@ -24,13 +39,13 @@ <td>$<span data-role="planCost"></span>/<span data-role="billingInterval"></span></td> </tr> <tr class="basicLayoutRow"> - <th>Additional Basic layouts</th> + <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>Additional Pro layouts</th> + <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> @@ -43,27 +58,11 @@ </tr> </table> <div class="billingMenu"> - <button data-role="showLayoutsMenu">Buy more layouts</button><br> - <button data-role="showPlanMenu">Upgrade your plan</button><br> + <button data-role="showEditMenu">Edit Your Plan</button><br> <button data-role="cancelSubscription">Cancel your subscription</button> </div> <div class="layoutsMenu"> - <button data-role="saveQuantity">Save Subscription</button> - <button data-role="closeMenu">Cancel</button> - </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> - <button data-role="savePlan">Change plan</button> + <button data-role="saveChanges">Save Subscription</button> <button data-role="closeMenu">Cancel</button> </div> </li> |