diff --git a/services/web/app/coffee/Features/Subscription/SubscriptionController.coffee b/services/web/app/coffee/Features/Subscription/SubscriptionController.coffee index 5821a09d9c..b7d948a47c 100644 --- a/services/web/app/coffee/Features/Subscription/SubscriptionController.coffee +++ b/services/web/app/coffee/Features/Subscription/SubscriptionController.coffee @@ -41,7 +41,7 @@ module.exports = SubscriptionController = res.redirect "/user/subscription" else currency = req.query.currency?.toUpperCase() - GeoIpLookup.getCurrencyCode req.query?.ip || req.ip, (err, recomendedCurrency)-> + GeoIpLookup.getCurrencyCode req.query?.ip || req.ip, (err, recomendedCurrency, countryCode)-> return next(err) if err? if recomendedCurrency? and !currency? currency = recomendedCurrency @@ -56,6 +56,7 @@ module.exports = SubscriptionController = title : "subscribe" plan_code: req.query.planCode currency: currency + countryCode:countryCode plan:plan showStudentPlan: req.query.ssp recurlyConfig: JSON.stringify diff --git a/services/web/app/coffee/infrastructure/GeoIpLookup.coffee b/services/web/app/coffee/infrastructure/GeoIpLookup.coffee index a49627d0cb..5b64b8e6f4 100644 --- a/services/web/app/coffee/infrastructure/GeoIpLookup.coffee +++ b/services/web/app/coffee/infrastructure/GeoIpLookup.coffee @@ -48,4 +48,4 @@ module.exports = GeoIpLookup = countryCode = ipDetails?.country_code?.toUpperCase() currencyCode = currencyMappings[countryCode] || "USD" logger.log ip:ip, currencyCode:currencyCode, ipDetails:ipDetails, "got currencyCode for ip" - callback(err, currencyCode) \ No newline at end of file + callback(err, currencyCode, countryCode) \ No newline at end of file diff --git a/services/web/app/views/subscriptions/new.jade b/services/web/app/views/subscriptions/new.jade index 36cbefc310..e82c56635c 100644 --- a/services/web/app/views/subscriptions/new.jade +++ b/services/web/app/views/subscriptions/new.jade @@ -5,6 +5,7 @@ block scripts script(type='text/javascript'). window.recomendedCurrency = '#{currency}' + window.countryCode = '#{countryCode}' window.plan_code = '#{plan_code}' window.recurlyApiKey = "!{settings.apis.recurly.publicKey}" @@ -38,117 +39,122 @@ block content a( ng-click="changeCurrency(currency)", ) {{currency}} ({{value['symbol']}}) - h2.pull-right.totalPrice {{price}} - hr - .row - .col-md-offset-1.col-md-10 - form(ng-show="planName") - + h2.pull-right.totalPrice {{price.currency.symbol}}{{price.next.total}} + .row + .col-md-12 + form(ng-show="planName") + + .row + .col-md-12 + .form-group + .row + .col-md-6 + label.radio-inline + input.paymentTypeOption(type="radio",value="credit_card", ng-model="paymentMethod") + i.fa.fa-cc-mastercard.fa-3x + span   + i.fa.fa-cc-visa.fa-3x + .col-md-6 + label.radio-inline + input.paymentTypeOption(type="radio", value="paypal", ng-model="paymentMethod") + i.fa.fa-cc-paypal.fa-3x + + + + .alert.alert-warning.small(ng-show="genericError") + strong {{genericError}} + + span(ng-hide="paymentMethod == 'paypal'") .row .col-md-12 .form-group - .row - .col-md-6 - label.radio-inline - input.paymentTypeOption(type="radio",value="credit_card", ng-model="paymentMethod") - i.fa.fa-cc-mastercard.fa-3x - span   - i.fa.fa-cc-visa.fa-3x - .col-md-6 - label.radio-inline - input.paymentTypeOption(type="radio", value="paypal", ng-model="paymentMethod") - i.fa.fa-cc-paypal.fa-3x - - - - .alert.alert-warning.small(ng-show="genericError") - strong {{genericError}} - - span(ng-hide="paymentMethod == 'paypal'") - .row - .col-md-12 - .form-group - div.alert.alert-warning.small(ng-hide="validation.correctCvv") #{translate("invalid")} CVV - div.alert.alert-warning.small(ng-hide="validation.correctCardNumber") #{translate("invalid")} #{translate("credit_card_number")} - .row - .col-md-6 - .form-group(ng-class="validation.correctCardNumber ? '' : 'has-error' ") - input.form-control(ng-model='data.number', ng-blur="validateCardNumber()", placeholder="#{translate('credit_card_number')}") - .col-md-3 - .form-group(ng-class="validation.correctCvv ? '' : 'has-error' ") - input.form-control(ng-model='data.cvv', ng-blur="validateCvv()", placeholder="CVV") - .row - .col-md-12 - div.alert.alert-warning.small(ng-hide="validation.correctExpiry") #{translate("invalid")} #{translate("expiry")} - .col-md-2 - .form-group(ng-class="validation.correctExpiry ? '' : 'has-error' ") - select(data-recurly='month', ng-change="validateExpiry()", ng-model='data.month') - option(value="", disabled, selected) Month - option(value="01") 01 - option(value="02") 02 - option(value="03") 03 - option(value="04") 04 - option(value="05") 05 - option(value="06") 06 - option(value="07") 07 - option(value="08") 08 - option(value="09") 09 - option(value="10") 10 - option(value="11") 11 - option(value="12") 12 - .col-md-3 - .form-group(ng-class="validation.correctExpiry ? '' : 'has-error' ") - select(data-recurly='year', ng-change="validateExpiry()", ng-model='data.year') - option(value="", disabled, selected) Year - option(value="2015") 2015 - option(value="2016") 2016 - option(value="2017") 2017 - option(value="2018") 2018 - option(value="2019") 2019 - option(value="2020") 2020 - option(value="2021") 2021 - option(value="2022") 2022 - option(value="2023") 2023 - option(value="2024") 2024 - option(value="2025") 2025 - option(value="2026") 2026 + div.alert.alert-warning.small(ng-hide="validation.correctCvv") #{translate("invalid")} CVV + div.alert.alert-warning.small(ng-hide="validation.correctCardNumber") #{translate("invalid")} #{translate("credit_card_number")} .row .col-md-6 - .form-group - input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="first_name", ng-model="data.first_name", required, placeholder="#{translate('first_name')}") - .col-md-6 - .form-group - input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="last_name", ng-model="data.last_name", required, placeholder="#{translate('last_name')}") - hr + .form-group(ng-class="validation.correctCardNumber ? '' : 'has-error' ") + input.form-control(ng-model='data.number', ng-blur="validateCardNumber()", placeholder="#{translate('credit_card_number')}") + .col-md-3 + .form-group(ng-class="validation.correctCvv ? '' : 'has-error' ") + input.form-control(ng-model='data.cvv', ng-blur="validateCvv()", placeholder="CVV") .row .col-md-12 + div.alert.alert-warning.small(ng-hide="validation.correctExpiry") #{translate("invalid")} #{translate("expiry")} + .col-md-2 + .form-group(ng-class="validation.correctExpiry ? '' : 'has-error' ") + select(data-recurly='month', ng-change="validateExpiry()", ng-model='data.month') + option(value="", disabled, selected) Month + option(value="01") 01 + option(value="02") 02 + option(value="03") 03 + option(value="04") 04 + option(value="05") 05 + option(value="06") 06 + option(value="07") 07 + option(value="08") 08 + option(value="09") 09 + option(value="10") 10 + option(value="11") 11 + option(value="12") 12 + .col-md-3 + .form-group(ng-class="validation.correctExpiry ? '' : 'has-error' ") + select(data-recurly='year', ng-change="validateExpiry()", ng-model='data.year') + option(value="", disabled, selected) Year + option(value="2015") 2015 + option(value="2016") 2016 + option(value="2017") 2017 + option(value="2018") 2018 + option(value="2019") 2019 + option(value="2020") 2020 + option(value="2021") 2021 + option(value="2022") 2022 + option(value="2023") 2023 + option(value="2024") 2024 + option(value="2025") 2025 + option(value="2026") 2026 + .row + .col-md-6 + .form-group + input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="first_name", ng-model="data.first_name", required, placeholder="#{translate('first_name')}") + .col-md-6 + .form-group + input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="last_name", ng-model="data.last_name", required, placeholder="#{translate('last_name')}") + hr + .row + .col-md-12 + .form-group + label #{translate("billing_address")} + input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', ng-model="data.address1", placeholder="#{translate('address')}") + .form-group + input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', ng-model="data.address2", placeholder="#{translate('address')}") + .row + .col-md-7 + .form-group + input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="city", ng-model="data.city", placeholder="#{translate('city')}") + .col-md-5 + input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="postal_code", ng-model="data.postal_code", placeholder="#{translate('zip_post_code')}") + .row + .col-md-7 + .form-group + select.form-control(data-recurly="country", ng-model="data.country", ng-change="updateCountry()",required) + mixin countries_options() + .row + .col-md-8 + if showCouponField == 'true' .form-group - label #{translate("billing_address")} - input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', ng-model="data.address1", placeholder="#{translate('address')}") - .form-group - input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', ng-model="data.address2", placeholder="#{translate('address')}") - .row - .col-md-7 - .form-group - input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="city", ng-model="data.city", placeholder="#{translate('city')}") - .col-md-5 - input.form-control(type='text', value='', maxlength='255', tabindex='1', onkeyup='', data-recurly="postal_code", ng-model="data.postal_code", placeholder="#{translate('zip_post_code')}") - .row - .col-md-7 - .form-group - select.form-control(data-recurly="country", ng-model="data.country", required) - mixin countries_options() - .row - .col-md-8 - if showCouponField == 'true' - .form-group - input.form-control(type='text', ng-blur="applyCoupon()", ng-model="data.coupon", placeholder="#{translate('coupon')}") - - .form-group - button.btn.btn-success(ng-click="submit()", ng-disabled="processing") #{translate("upgrade_now")} + input.form-control(type='text', ng-blur="applyCoupon()", ng-model="data.coupon", placeholder="#{translate('coupon')}") + .form-group + button.btn.btn-success(ng-click="submit()", ng-disabled="processing") #{translate("upgrade_now")} + .row + .col-md-12 + span.pull-right + div Subtotal - {{price.currency.symbol}}{{price.next.subtotal}} + div Tax - {{price.currency.symbol}}{{price.next.tax}} + div + strong Total - {{price.currency.symbol}}{{price.next.total}} diff --git a/services/web/public/coffee/main/new-subscription.coffee b/services/web/public/coffee/main/new-subscription.coffee index 7b3cf0e55e..cac4ccfae5 100644 --- a/services/web/public/coffee/main/new-subscription.coffee +++ b/services/web/public/coffee/main/new-subscription.coffee @@ -25,7 +25,7 @@ define [ address1 : "" address2 : "" city:"" - country:"" + country:window.countryCode $scope.validation = correctCardNumber : true @@ -39,12 +39,11 @@ define [ pricing = recurly.Pricing() window.pricing = pricing - pricing.plan(window.plan_code, { quantity: 1 }).currency($scope.currencyCode).done() - + pricing.plan(window.plan_code, { quantity: 1 }).address({country: $scope.data.country}).tax({tax_code: 'digital', vat_number: ''}).currency($scope.currencyCode).done() pricing.on "change", => $scope.planName = pricing.items.plan.name - $scope.price = pricing.price.currency.symbol+pricing.price.next.total + $scope.price = pricing.price $scope.trialLength = pricing.items.plan.trial.length $scope.billingCycleType = if pricing.items.plan.period.interval == "months" then "month" else "year" $scope.$apply() @@ -68,6 +67,9 @@ define [ if $scope.data.cvv? $scope.validation.correctCvv = recurly.validate.cvv($scope.data.cvv) + $scope.updateCountry = -> + pricing.address({country:$scope.data.country}).done() + $scope.changePaymentMethod = (paymentMethod)-> if paymentMethod == "paypal" $scope.usePaypal = true