diff --git a/services/web/app/views/subscriptions/_modal_group_upgrade.pug b/services/web/app/views/subscriptions/_modal_group_upgrade.pug index a6320af348..397b4b0d98 100644 --- a/services/web/app/views/subscriptions/_modal_group_upgrade.pug +++ b/services/web/app/views/subscriptions/_modal_group_upgrade.pug @@ -6,8 +6,9 @@ script(type="text/ng-template", id="groupPlanModalUpgradeTemplate") .row .col-md-6.text-center .circle.circle-lg - | {{ displayPrice }} - span.small / year + | {{ displayPrice.total }} + br + span.small per year br span.circle-subtext For {{ selected.size }} users ul.list-unstyled @@ -46,6 +47,9 @@ script(type="text/ng-template", id="groupPlanModalUpgradeTemplate") | Save an additional 40% on groups of 10 or more with our educational discount .modal-footer .text-center + p(ng-show="displayPrice.includesTax") Total: + strong {{ displayPrice.total }} + | ({{displayPrice.subtotal}} + {{displayPrice.tax}} tax) per year p strong Your new subscription will be billed immediately to your current payment method. hr.thin diff --git a/services/web/frontend/js/main/subscription-dashboard.js b/services/web/frontend/js/main/subscription-dashboard.js index 95588d6aaf..e80e9e4d4d 100644 --- a/services/web/frontend/js/main/subscription-dashboard.js +++ b/services/web/frontend/js/main/subscription-dashboard.js @@ -76,15 +76,20 @@ App.factory('RecurlyPricing', function ($q, MultiCurrencyPricing) { .currency(currency) .done(function (price) { const totalPriceExTax = parseFloat(price.next.total) - let taxAmmount = totalPriceExTax * taxRate - if (isNaN(taxAmmount)) { - taxAmmount = 0 + let taxAmount = totalPriceExTax * taxRate + if (isNaN(taxAmount)) { + taxAmount = 0 } - let total = totalPriceExTax + taxAmmount + let total = totalPriceExTax + taxAmount if (total % 1 !== 0) { total = total.toFixed(2) } - resolve(`${currencySymbol}${total}`) + resolve({ + total: `${currencySymbol}${total}`, + subtotal: `${currencySymbol}${totalPriceExTax.toFixed(2)}`, + tax: `${currencySymbol}${taxAmount.toFixed(2)}`, + includesTax: taxAmount !== 0, + }) }) }) }, @@ -117,7 +122,7 @@ App.controller('ChangePlanToGroupFormController', function ($scope, $modal) { App.controller( 'GroupPlansModalUpgradeController', - function ($scope, $modal, $location, $http) { + function ($scope, $modal, $location, $http, RecurlyPricing) { $scope.options = { plan_codes: [ { @@ -174,10 +179,24 @@ App.controller( } $scope.recalculatePrice = function () { + const subscription = getMeta('ol-subscription') + const { taxRate } = subscription.recurly const { usage, plan_code, currency, size } = $scope.selected - const price = $scope.prices[usage][plan_code][currency][size] - const currencySymbol = $scope.options.currencySymbols[currency] - $scope.displayPrice = `${currencySymbol}${price}` + const placeholder = { total: '...' } + if (taxRate === 0) { + const basePrice = $scope.prices[usage][plan_code][currency][size] + const currencySymbol = $scope.options.currencySymbols[currency] + placeholder.total = `${currencySymbol}${basePrice}` + } + $scope.displayPrice = placeholder // Placeholder while we talk to recurly + const recurlyPlanCode = `group_${plan_code}_${size}_${usage}` + RecurlyPricing.loadDisplayPriceWithTax( + recurlyPlanCode, + currency, + taxRate + ).then(price => { + $scope.displayPrice = price + }) } $scope.$watch('selected', $scope.recalculatePrice, true) @@ -234,7 +253,7 @@ App.controller( $scope.price = '...' // Placeholder while we talk to recurly RecurlyPricing.loadDisplayPriceWithTax(planCode, currency, taxRate).then( price => { - $scope.price = price + $scope.price = price.total } ) }) @@ -380,7 +399,7 @@ App.controller( $scope.studentPrice = '...' // Placeholder while we talk to recurly RecurlyPricing.loadDisplayPriceWithTax('student', currency, taxRate).then( price => { - $scope.studentPrice = price + $scope.studentPrice = price.total } )