diff --git a/services/web/app/views/subscriptions/_modal_group_upgrade.pug b/services/web/app/views/subscriptions/_modal_group_upgrade.pug index 397b4b0d98..115fbb7f7b 100644 --- a/services/web/app/views/subscriptions/_modal_group_upgrade.pug +++ b/services/web/app/views/subscriptions/_modal_group_upgrade.pug @@ -1,16 +1,16 @@ script(type="text/ng-template", id="groupPlanModalUpgradeTemplate") .modal-header - h3 Save 30% or more with a group license - .modal-body.plans + h2 Customise your group subscription + h3 Save 30% or more + .modal-body.plans.group-subscription-modal .container-fluid .row .col-md-6.text-center .circle.circle-lg | {{ displayPrice.total }} + span.small / year br - span.small per year - br - span.circle-subtext For {{ selected.size }} users + span.circle-subtext {{displayPricePerUser}} per user ul.list-unstyled li Each user will have access to: li   @@ -24,8 +24,9 @@ script(type="text/ng-template", id="groupPlanModalUpgradeTemplate") .form-group label(for='plan_code') | Plan - select.form-control(id="plan_code", ng-model="selected.plan_code") - option(ng-repeat="plan_code in options.plan_codes", value="{{plan_code.code}}") {{ plan_code.display }} + label(ng-repeat="plan_code in options.plan_codes" class="group-plan-option") + input(type="radio" name="plan_code" ng-model="selected.plan_code" value="{{plan_code.code}}") + span {{plan_code.display}} .form-group label(for='size') | Number of users @@ -38,13 +39,18 @@ script(type="text/ng-template", id="groupPlanModalUpgradeTemplate") option(ng-repeat="currency in options.currencies", value="{{currency.code}}") {{ currency.display }} .form-group label(for='usage') - | Usage - select.form-control(id="usage", ng-model="selected.usage") - option(ng-repeat="usage in options.usages", value="{{usage.code}}") {{ usage.display }} - p.small.text-center.row-spaced-small(ng-show="selected.usage == 'educational'") - | The 40% educational discount can be used by students or faculty using Overleaf for teaching - p.small.text-center.row-spaced-small(ng-show="selected.usage == 'enterprise'") - | Save an additional 40% on groups of 10 or more with our educational discount + | Overleaf offers a 40% educational discount for groups of 10 or more. + label.group-plan-option + input(id="usage", type="checkbox" ng-model="selected.usage" ng-true-value="'educational'" ng-false-value="'enterprise'") + span This license is for educational purposes (applies to students or faculty using Overleaf for teaching) + .row + .col-md-12.text-center + .educational-discount-badge + div(ng-hide="selected.usage !== 'educational'") + p.applied(ng-show="discountEligible") + | 40% educational discount applied! + p.ineligible(ng-hide="discountEligible") + | The educational discount is available for groups of 10 or more .modal-footer .text-center p(ng-show="displayPrice.includesTax") Total: diff --git a/services/web/app/views/subscriptions/plans-marketing/_group_plan_modal.pug b/services/web/app/views/subscriptions/plans-marketing/_group_plan_modal.pug index 3ed3238fe2..69858ea480 100644 --- a/services/web/app/views/subscriptions/plans-marketing/_group_plan_modal.pug +++ b/services/web/app/views/subscriptions/plans-marketing/_group_plan_modal.pug @@ -63,7 +63,7 @@ div.modal.fade(tabindex="-1" role="dialog" data-ol-group-plan-modal) | Overleaf offers a 40% educational discount for groups of 10 or more. label.group-plan-option input(id="usage", type="checkbox") - span This licence is for educational purposes (applies to students or faculty using Overleaf for teaching) + span This license is for educational purposes (applies to students or faculty using Overleaf for teaching) .row .col-md-12.text-center diff --git a/services/web/frontend/js/main/subscription-dashboard.js b/services/web/frontend/js/main/subscription-dashboard.js index 16cb578bd4..0741ce37fb 100644 --- a/services/web/frontend/js/main/subscription-dashboard.js +++ b/services/web/frontend/js/main/subscription-dashboard.js @@ -31,6 +31,14 @@ const ensureRecurlyIsSetup = _.once(() => { return true }) +function getPricePerUser(price, currencySymbol, size) { + let perUserPrice = price / size + if (perUserPrice % 1 !== 0) { + perUserPrice = perUserPrice.toFixed(2) + } + return `${currencySymbol}${perUserPrice}` +} + App.controller('MetricsEmailController', function ($scope, $http) { $scope.institutionEmailSubscription = function (institutionId) { const inst = _.find(window.managedInstitutions, function (institution) { @@ -88,6 +96,7 @@ App.factory('RecurlyPricing', function ($q, MultiCurrencyPricing) { } resolve({ total: `${currencySymbol}${total}`, + totalValue: total, subtotal: `${currencySymbol}${totalPriceExTax.toFixed(2)}`, tax: `${currencySymbol}${taxAmount.toFixed(2)}`, includesTax: taxAmount !== 0, @@ -147,13 +156,21 @@ App.controller( const subscription = getMeta('ol-subscription') const { taxRate } = subscription.recurly const { usage, plan_code, currency, size } = $scope.selected - const placeholder = { total: '...' } + $scope.discountEligible = size >= 10 + const pricePlaceholder = { total: '...' } + let pricePerUserPlaceholder = '...' + const currencySymbol = $scope.options.currencySymbols[currency] if (taxRate === 0) { const basePrice = $scope.prices[usage][plan_code][currency][size] - const currencySymbol = $scope.options.currencySymbols[currency] - placeholder.total = `${currencySymbol}${basePrice}` + pricePlaceholder.total = `${currencySymbol}${basePrice}` + pricePerUserPlaceholder = getPricePerUser( + basePrice, + currencySymbol, + size + ) } - $scope.displayPrice = placeholder // Placeholder while we talk to recurly + $scope.displayPrice = pricePlaceholder // Placeholder while we talk to recurly + $scope.displayPricePerUser = pricePerUserPlaceholder // Placeholder while we talk to recurly const recurlyPlanCode = `group_${plan_code}_${size}_${usage}` RecurlyPricing.loadDisplayPriceWithTax( recurlyPlanCode, @@ -161,6 +178,11 @@ App.controller( taxRate ).then(price => { $scope.displayPrice = price + $scope.displayPricePerUser = getPricePerUser( + price.totalValue, + currencySymbol, + size + ) }) }