works with multi plan and currency, auto updates view on change

This commit is contained in:
Henry Oswald 2014-12-22 12:55:29 +00:00
parent 5305cbfd3e
commit a47b25d4b2
2 changed files with 41 additions and 12 deletions

View file

@ -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")}

View file

@ -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}&currency=#{newCurrency}"
$scope.currencyCode = newCurrency
updatePlan()
$scope.switchToStudent = ()->
window.location = "/user/subscription/new?planCode=student&currency=#{$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