From a47b25d4b298fa7834bca4bd942b26a3b24f47d4 Mon Sep 17 00:00:00 2001 From: Henry Oswald Date: Mon, 22 Dec 2014 12:55:29 +0000 Subject: [PATCH] works with multi plan and currency, auto updates view on change --- services/web/app/views/subscriptions/new.jade | 27 ++++++++++++++----- .../coffee/main/new-subscription.coffee | 26 +++++++++++++----- 2 files changed, 41 insertions(+), 12 deletions(-) diff --git a/services/web/app/views/subscriptions/new.jade b/services/web/app/views/subscriptions/new.jade index 878d802984..3926847169 100644 --- a/services/web/app/views/subscriptions/new.jade +++ b/services/web/app/views/subscriptions/new.jade @@ -35,10 +35,25 @@ block content ) {{currency}} ({{value['symbol']}}) h1 #{translate("new_subscription")} hr + form + + .row + .col-md-9 + h2 {{planName}} + span First {{trialLength}} days free + .col-md-3 + h2.pull-right {{price}} + span.pull-right every {{billingCycleType}} + + input(type='text', data-recurly='coupon') + + + + .form-group input.form-control.input-lg-1(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly='number', ng-model='data.number', placeholder='Credit Card Number') - input.form-control.input-lg-1(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly='cvv', ng-model='data.cvv') + input.form-control.input-lg-1(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly='cvv', ng-model='data.cvv') .form-group label #{translate("month")} select.form-control(data-recurly='month', ng-model='data.month') @@ -71,23 +86,23 @@ block content option(value="2026") 2026 .form-group label #{translate("first_name")} - input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="first_name", ng-model="data.first_name") + input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="first_name", ng-model="data.first_name") .form-group label #{translate("last_name")} - input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="last_name", ng-model="data.last_name") + input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="last_name", ng-model="data.last_name") .form-group label #{translate("address")} - input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="address1", ng-model="data.address1") + input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="address1", ng-model="data.address1") .form-group label #{translate("city")} - input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="city", ng-model="data.city") + input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="city", ng-model="data.city") .form-group label #{translate("country")} select.form-control(data-recurly="country", ng-model="data.country") mixin countries_options() .form-group label #{translate("country")} - input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="postal_code", ng-model="data.postal_code") + input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="postal_code", ng-model="data.postal_code") .form-group button.btn.btn-success(ng-click="submit()") #{translate("submit")} diff --git a/services/web/public/coffee/main/new-subscription.coffee b/services/web/public/coffee/main/new-subscription.coffee index 61741825d0..a1d106f723 100644 --- a/services/web/public/coffee/main/new-subscription.coffee +++ b/services/web/public/coffee/main/new-subscription.coffee @@ -3,12 +3,14 @@ define [ ], (App)-> App.controller "NewSubscriptionController", ($scope, MultiCurrencyPricing, abTestManager, $http)-> + throw new Error("Recurly API Library Missing.") if typeof recurly is "undefined" $scope.currencyCode = MultiCurrencyPricing.currencyCode $scope.plans = MultiCurrencyPricing.plans $scope.changeCurrency = (newCurrency)-> - window.location = "/user/subscription/new?planCode=#{window.plan_code}¤cy=#{newCurrency}" + $scope.currencyCode = newCurrency + updatePlan() $scope.switchToStudent = ()-> window.location = "/user/subscription/new?planCode=student¤cy=#{$scope.currencyCode}" @@ -28,16 +30,28 @@ define [ address1 : "7 somewhere" city:"london" country:"GB" + recurly.configure __api_key + pricing = recurly.Pricing() + #pricing.attach(document.querySelector('#pricing')) + window.pricing = pricing + + $scope.planName = "no yet set" + + updatePlan = -> + pricing.plan(window.plan_code, { quantity: 1 }).currency($scope.currencyCode).done() + + updatePlan() + pricing.on "change", => + $scope.planName = pricing.items.plan.name + $scope.price = pricing.price.currency.symbol+pricing.price.next.total + $scope.trialLength = pricing.items.plan.trial.length + $scope.billingCycleType = if pricing.items.plan.period.interval == "months" then "month" else "year" + $scope.$apply() $scope.submit = -> - throw new Error("Recurly API Library Missing.") if typeof recurly is "undefined" - console.log $scope.data $scope.error = "" - if !configured - recurly.configure __api_key - configured = true recurly.token $scope.data, (err, recurly_token_id) -> if err $scope.error = err.message