diff --git a/services/web/app/views/subscriptions/new.pug b/services/web/app/views/subscriptions/new.pug index 974237bc4b..834998594e 100644 --- a/services/web/app/views/subscriptions/new.pug +++ b/services/web/app/views/subscriptions/new.pug @@ -13,7 +13,6 @@ block head-scripts block content .content.content-alt - .container(ng-controller="NewSubscriptionController" ng-cloak) .row.card-group .col-md-5.col-md-push-4 @@ -47,13 +46,30 @@ block content .col-md-12.text-center div(ng-if="trialLength") span !{translate("first_few_days_free", {trialLen:'{{trialLength}}'})} - span(ng-if="discountMonths && discountRate")   - {{discountMonths}} #{translate("month")}s {{discountRate}}% Off + span(ng-if="coupon.discountMonths && coupon.discountRate")   - {{coupon.discountMonths}} #{translate("month")}s {{coupon.discountRate}}% Off + div(ng-if="price") - strong {{availableCurrencies[currencyCode]['symbol']}}{{price.next.total}} - span(ng-if="monthlyBilling") #{translate("every")} #{translate("month")} - span(ng-if="!monthlyBilling") #{translate("every")} #{translate("year")} - div(ng-if="normalPrice") - span.small Normally {{availableCurrencies[currencyCode]['symbol']}}{{normalPrice}} + - var priceAngularExp = "{{ availableCurrencies[currencyCode]['symbol'] }}{{ price.total }}"; + span(ng-if="!coupon.singleUse && monthlyBilling") + | !{translate("x_price_per_month", { price: priceAngularExp } )} + span(ng-if="!coupon.singleUse && !monthlyBilling") + | !{translate("x_price_per_year", { price: priceAngularExp } )} + span(ng-if="coupon.singleUse && monthlyBilling") + | !{translate("x_price_for_first_month", { price: priceAngularExp } )} + span(ng-if="coupon.singleUse && !monthlyBilling") + | !{translate("x_price_for_first_year", { price: priceAngularExp } )} + + div(ng-if="coupon && coupon.normalPrice") + - var noDiscountPriceAngularExp = "{{ availableCurrencies[currencyCode]['symbol']}}{{coupon.normalPrice | number:2 }}"; + span.small(ng-if="!coupon.singleUse && monthlyBilling") + | !{translate("normally_x_price_per_month", { price: noDiscountPriceAngularExp } )} + span.small(ng-if="!coupon.singleUse && !monthlyBilling") + | !{translate("normally_x_price_per_year", { price: noDiscountPriceAngularExp } )} + span.small(ng-if="coupon.singleUse && monthlyBilling") + | !{translate("then_x_price_per_month", { price: noDiscountPriceAngularExp } )} + span.small(ng-if="coupon.singleUse && !monthlyBilling") + | !{translate("then_x_price_per_year", { price: noDiscountPriceAngularExp } )} + .row(ng-hide="recurlyLoadError") div() .col-md-12() @@ -191,7 +207,7 @@ block content ng-model="data.company" ) - .form-group(ng-show="ui.addCompanyDetails && price.taxes.length") + .form-group(ng-show="ui.addCompanyDetails && taxes.length") label(for="vat-number") #{translate("vat_number")} input#vat-number.form-control( type="text" @@ -212,20 +228,24 @@ block content p(ng-if="paymentMethod.value === 'paypal'") #{translate("paypal_upgrade")} div.price-breakdown( - ng-show="price.taxes.length" + ng-show="taxes.length" ) + - var priceBreakdownAngularExp = "{{ availableCurrencies[currencyCode]['symbol'] }}{{ price.total }}"; + - priceBreakdownAngularExp += " ({{availableCurrencies[currencyCode]['symbol']}}{{ price.subtotal }}"; + - priceBreakdownAngularExp += " + " ; + - priceBreakdownAngularExp += "{{availableCurrencies[currencyCode]['symbol']}}{{ price.tax }} tax)"; hr.thin span | Total: | - strong - | {{availableCurrencies[currencyCode]['symbol']}}{{price.next.total}} - | - span - | ({{availableCurrencies[currencyCode]['symbol']}}{{price.next.subtotal}} + {{availableCurrencies[currencyCode]['symbol']}}{{price.next.tax}} tax) - | - span(ng-if="monthlyBilling") #{translate("every")} #{translate("month")} - span(ng-if="!monthlyBilling") #{translate("every")} #{translate("year")} + span(ng-if="!coupon.singleUse && monthlyBilling") + | !{translate("x_price_per_month", { price: priceBreakdownAngularExp } )} + span(ng-if="!coupon.singleUse && !monthlyBilling") + | !{translate("x_price_per_year", { price: priceBreakdownAngularExp } )} + span(ng-if="coupon.singleUse && monthlyBilling") + | !{translate("x_price_for_first_month", { price: priceBreakdownAngularExp } )} + span(ng-if="coupon.singleUse && !monthlyBilling") + | !{translate("x_price_for_first_year", { price: priceBreakdownAngularExp } )} hr.thin div.payment-submit diff --git a/services/web/app/views/subscriptions/successful_subscription.pug b/services/web/app/views/subscriptions/successful_subscription.pug index ac21595e28..558e630454 100644 --- a/services/web/app/views/subscriptions/successful_subscription.pug +++ b/services/web/app/views/subscriptions/successful_subscription.pug @@ -8,9 +8,11 @@ block content .card(ng-cloak) .page-header h2 #{translate("thanks_for_subscribing")} + .alert.alert-success - p !{translate("next_payment_of_x_collectected_on_y", {paymentAmmount:""+personalSubscription.recurly.price+"", collectionDate:""+personalSubscription.recurly.nextPaymentDueAt+""})} - include ./_price_exceptions + - if (personalSubscription.recurly.trial_ends_at) + p !{translate("next_payment_of_x_collectected_on_y", {paymentAmmount:""+personalSubscription.recurly.price+"", collectionDate:""+personalSubscription.recurly.nextPaymentDueAt+""})} + include ./_price_exceptions p #{translate("to_modify_your_subscription_go_to")} a(href="/user/subscription") #{translate("manage_subscription")}. p diff --git a/services/web/frontend/js/main/new-subscription.js b/services/web/frontend/js/main/new-subscription.js index 2ebfc503e3..f03faa92b1 100644 --- a/services/web/frontend/js/main/new-subscription.js +++ b/services/web/frontend/js/main/new-subscription.js @@ -117,10 +117,13 @@ export default App.controller('NewSubscriptionController', function( pricing.on('change', () => { $scope.planName = pricing.items.plan.name - $scope.price = pricing.price + if (pricing.items.plan.trial) { $scope.trialLength = pricing.items.plan.trial.length } + + $scope.price = $scope.trialLength ? pricing.price.next : pricing.price.now + $scope.taxes = pricing.price.taxes $scope.monthlyBilling = pricing.items.plan.period.length === 1 $scope.availableCurrencies = {} @@ -137,20 +140,25 @@ export default App.controller('NewSubscriptionController', function( pricing.items.coupon.discount && pricing.items.coupon.discount.type === 'percent' ) { - const basePrice = parseInt(pricing.price.base.plan.unit) - $scope.normalPrice = basePrice + const basePrice = parseInt(pricing.price.base.plan.unit, 10) + $scope.coupon = { + singleUse: pricing.items.coupon.single_use, + normalPrice: basePrice + } if ( pricing.items.coupon.applies_for_months > 0 && pricing.items.coupon.discount.rate && pricing.items.coupon.applies_for_months ) { - $scope.discountMonths = pricing.items.coupon.applies_for_months - $scope.discountRate = pricing.items.coupon.discount.rate * 100 + $scope.coupon.discountMonths = pricing.items.coupon.applies_for_months + $scope.coupon.discountRate = pricing.items.coupon.discount.rate * 100 } if (pricing.price.taxes[0] && pricing.price.taxes[0].rate) { - $scope.normalPrice += basePrice * pricing.price.taxes[0].rate + $scope.coupon.normalPrice += basePrice * pricing.price.taxes[0].rate } + } else { + $scope.coupon = null } $scope.$apply() })