diff options
Diffstat (limited to 'views/partials/edit-subscription.ejs')
| -rw-r--r-- | views/partials/edit-subscription.ejs | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs new file mode 100644 index 0000000..f3c3589 --- /dev/null +++ b/views/partials/edit-subscription.ejs @@ -0,0 +1,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> |