github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-09-16 02:52:31 -04:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #6169 from overleaf/tm-group-plan-upgrade-ui-changes

Browse source 
Tweak group plan upgrade modal to match UI changes of marketing page group plans purchase modal

GitOrigin-RevId: 91db5de38fa4d273ae50924eec5db2b8e12ed7f9
This commit is contained in:
Thomas 2022-01-11 16:08:57 +01:00 committed by Copybot
parent 1678ea5de3
commit a3ab9468a4
3 changed files with 47 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
services/web/app/views/subscriptions/_modal_group_upgrade.pug
View file

@ -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:

2
services/web/app/views/subscriptions/plans-marketing/_group_plan_modal.pug
View file

@ -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

30
services/web/frontend/js/main/subscription-dashboard.js
View file

@ -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
)
})
}