From 452abe94be3137e78acd3422756e7463dfcab326 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Fri, 19 Aug 2016 14:51:07 +0100 Subject: [PATCH] Add coupon code, VAT and pricing breakdown. Styling adjustments. --- services/web/app/views/subscriptions/new.jade | 74 ++++++++++++++----- .../coffee/main/new-subscription.coffee | 4 + .../public/stylesheets/app/subscription.less | 11 ++- 3 files changed, 65 insertions(+), 24 deletions(-) diff --git a/services/web/app/views/subscriptions/new.jade b/services/web/app/views/subscriptions/new.jade index 8e8dcb8b23..b3ffdbc8b1 100644 --- a/services/web/app/views/subscriptions/new.jade +++ b/services/web/app/views/subscriptions/new.jade @@ -69,8 +69,6 @@ block content 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}} @@ -195,16 +193,18 @@ block content ng-class="paymentMethod === 'paypal' ? 'payment-method-toggle-switch-selected' : ''" ) i.fa.fa-cc-paypal.fa-2x - //- TODO Validation messages - div(ng-if="paymentMethod === 'credit_card'") - ol - li validation.correctCardNumber : {{ validation.correctCardNumber }} - li validation.correctExpiry : {{ validation.correctExpiry }} - li validation.correctCvv : {{ validation.correctCvv }} - li data.month : {{ data.month }} - li data.year : {{ data.year }} - li data.mmYY : {{ data.mmYY }} + + .alert.alert-warning.small(ng-show="genericError") + strong {{genericError}} + div(ng-if="paymentMethod === 'credit_card'") + //- ol + //- li validation.correctCardNumber : {{ validation.correctCardNumber }} + //- li validation.correctExpiry : {{ validation.correctExpiry }} + //- li validation.correctCvv : {{ validation.correctCvv }} + //- li data.month : {{ data.month }} + //- li data.year : {{ data.year }} + //- li data.mmYY : {{ data.mmYY }} .form-group label(for="card-name") Name on card input#card-name.form-control(type="text") @@ -244,16 +244,50 @@ block content ) ? .form-group(ng-class="validation.errorFields.country ? 'has-error' : ''") label(for="country") Country - select#country.form-control(data-recurly="country", ng-model="data.country", ng-change="updateCountry()", required) + select#country.form-control( + data-recurly="country" + ng-model="data.country" + ng-change="updateCountry()" + required + ) mixin countries_options() - .row.payment-form-submit - .col-xs-12 - button.btn.btn-success.btn-block(ng-click="submit()", ng-disabled="processing", sixpack-convert="payment-left-menu-bottom") Upgrade now, pay after 7 days - div(ng-if="paymentMethod === 'paypal'") - p Click the button below to login with PayPal and upgrade. - .row.payment-form-submit - .col-xs-12 - button.btn.btn-success.btn-block(ng-click="submit()", ng-disabled="processing", sixpack-convert="payment-left-menu-bottom") Continue + + div + if (showVatField) + .form-group + label(for="vat-no") #{translate('vat_number')} + input#vat-no.form-control( + type='text' + ng-blur="applyVatNumber()" + ng-model="data.vat_number" + ) + if (showCouponField) + .form-group + label(for="coupon-code") #{translate('coupon_code')} + input#coupon-code.form-control( + type='text' + ng-blur="applyCoupon()" + ng-model="data.coupon" + ) + + //- PRicing stuff + + p(ng-if="paymentMethod === 'paypal'") To upgrade, click on the button below and log on to PayPal using your email and password. + div.price-breakdown(ng-if="price.next.tax !== '0.00'") + hr.thin + span Total: + strong {{price.currency.symbol}}{{price.next.total}} + span ({{price.currency.symbol}}{{price.next.subtotal}} + {{price.currency.symbol}}{{price.next.tax}} tax) + span(ng-if="monthlyBilling") #{translate("every")} #{translate("month")} + span(ng-if="!monthlyBilling") #{translate("every")} #{translate("year")} + hr.thin + + div.payment-submit + button.btn.btn-success.btn-block( + ng-click="submit()" + ng-disabled="processing" + sixpack-convert="payment-left-menu-bottom" + ) {{ paymentMethod === 'credit_card' ? 'Upgrade now, pay after 7 days' : 'Continue' }} span(sixpack-switch="payment-left-menu-bottom") diff --git a/services/web/public/coffee/main/new-subscription.coffee b/services/web/public/coffee/main/new-subscription.coffee index 0d3b9f1728..ae81d73bb0 100644 --- a/services/web/public/coffee/main/new-subscription.coffee +++ b/services/web/public/coffee/main/new-subscription.coffee @@ -65,6 +65,7 @@ define [ $scope.price = pricing.price $scope.trialLength = pricing.items.plan.trial?.length $scope.monthlyBilling = pricing.items.plan.period.length == 1 + if pricing.items?.coupon?.discount?.type == "percent" basePrice = parseInt(pricing.price.base.plan.unit) $scope.normalPrice = basePrice @@ -100,6 +101,7 @@ define [ $scope.validation.correctCvv = recurly.validate.cvv($scope.data.cvv) $scope.updateCountry = -> + console.log 'update country' pricing.address({country:$scope.data.country}).done() $scope.changePaymentMethod = (paymentMethod)-> @@ -140,6 +142,8 @@ define [ isPaypal : postData.subscriptionDetails.isPaypal } + sixpack.convert "subscription-form" + $http.post("/user/subscription/create", postData) .success (data, status, headers)-> sixpack.convert "in-editor-free-trial-plan", pricing.items.plan.code, (err)-> diff --git a/services/web/public/stylesheets/app/subscription.less b/services/web/public/stylesheets/app/subscription.less index 1bafe10700..5e7656adc7 100644 --- a/services/web/public/stylesheets/app/subscription.less +++ b/services/web/public/stylesheets/app/subscription.less @@ -16,10 +16,13 @@ } } -.payment-form { - &-submit { - padding-top: (@line-height-computed / 2); - } +.price-breakdown { + text-align: center; + margin-bottom: -10px; +} + +.payment-submit { + padding-top: (@line-height-computed / 2); } .payment-method-toggle {