github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-06 11:02:00 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #5722 from overleaf/hb-improve-group-buy-ux

Browse source 
Update the UX for the group subscription modal

GitOrigin-RevId: 6700a5c4907e0c966ee3b2954b6417ccf9edf37e
This commit is contained in:
Hugh O'Brien 2021-11-16 14:15:15 +00:00 • committed by Copybot
parent 519b0fa155
commit 7d932f0b92
3 changed files with 81 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,8 +2,9 @@ div.modal.fade(tabindex="-1" role="dialog" data-ol-group-plan-modal)
.modal-dialog(role="document")
.modal-content
.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
@ -11,7 +12,7 @@ div.modal.fade(tabindex="-1" role="dialog" data-ol-group-plan-modal)
span(data-ol-group-plan-display-price) ...
span.small / year
br
span.circle-subtext(data-ol-group-plan-for-n-users) For ... users
span.circle-subtext(data-ol-group-plan-price-per-user) ...
ul.list-unstyled
li Each user will have access to:
li  
@ -31,12 +32,10 @@ div.modal.fade(tabindex="-1" role="dialog" data-ol-group-plan-modal)
.form-group
label(for='plan_code')
| Plan
select.form-control(id="plan_code")
for plan_code in groupPlanModalOptions.plan_codes
option(
value=plan_code.code
selected=(plan_code.code === groupPlanModalDefaults.plan_code)
) #{plan_code.display}
for plan_code in groupPlanModalOptions.plan_codes
label.group-plan-option
input(type="radio" name="plan_code" checked=(plan_code.code === "collaborator") value=plan_code.code )
span #{plan_code.display}
.form-group
label(for='size')
| Number of users
@ -57,24 +56,19 @@ div.modal.fade(tabindex="-1" role="dialog" data-ol-group-plan-modal)
) #{currency.display}
.form-group
label(for='usage')
| Usage
select.form-control(id="usage")
for usage in groupPlanModalOptions.usages
option(
value=usage.code
selected=(usage.code === groupPlanModalDefaults.usage)
) #{usage.display}
p.small.text-center.row-spaced-small
span(
hidden=(groupPlanModalDefaults.usage !== 'educational')
data-ol-group-plan-usage='educational'
)
| The 40% educational discount can be used by students or faculty using Overleaf for teaching
span(
hidden=(groupPlanModalDefaults.usage !== 'enterprise')
data-ol-group-plan-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")
span This licence is for educational purposes (applies to students or faculty using Overleaf for teaching)
.row
.col-md-12.text-center
.educational-discount-badge
div(hidden=(groupPlanModalDefaults.usage !== 'educational') data-ol-group-plan-educational-discount)
p.applied(hidden=true data-ol-group-plan-educational-discount-applied)
| 40% educational discount applied!
p.ineligible(hidden=true data-ol-group-plan-educational-discount-ineligible)
| The educational discount is available for groups of 10 or more
.modal-footer
.text-center
button.btn.btn-primary.btn-lg(data-ol-purchase-group-plan) Purchase Now

26
services/web/frontend/js/features/plans/group-plan-modal/index.js
View file

@ -4,10 +4,13 @@ import * as eventTracking from '../../../infrastructure/event-tracking'
function getFormValues() {
const modalEl = document.querySelector('[data-ol-group-plan-modal]')
const planCode = modalEl.querySelector('#plan_code').value
const planCode = modalEl.querySelector('input[name="plan_code"]:checked')
.value
const size = modalEl.querySelector('#size').value
const currency = modalEl.querySelector('#currency').value
const usage = modalEl.querySelector('#usage').value
const usage = modalEl.querySelector('#usage').checked
? 'educational'
: 'enterprise'
return { planCode, size, currency, usage }
}
@ -21,6 +24,7 @@ function updateGroupPlanView() {
const price = prices[usage][planCode][currency][size]
const currencySymbol = currencySymbols[currency]
const displayPrice = `${currencySymbol}${price}`
const perUserPrice = parseFloat((price / size).toFixed(2))
modalEl.querySelectorAll('[data-ol-group-plan-plan-code]').forEach(el => {
el.hidden = el.getAttribute('data-ol-group-plan-plan-code') !== planCode
@ -32,8 +36,19 @@ function updateGroupPlanView() {
'[data-ol-group-plan-display-price]'
).innerText = displayPrice
modalEl.querySelector(
'[data-ol-group-plan-for-n-users]'
).innerText = `For ${size} users`
'[data-ol-group-plan-price-per-user]'
).innerText = `${currencySymbol}${perUserPrice} per user`
modalEl.querySelector('[data-ol-group-plan-educational-discount]').hidden =
usage !== 'educational'
modalEl.querySelector(
'[data-ol-group-plan-educational-discount-applied]'
).hidden = size < 10
modalEl.querySelector(
'[data-ol-group-plan-educational-discount-ineligible]'
).hidden = size >= 10
}
const modalEl = $('[data-ol-group-plan-modal]')
@ -58,6 +73,9 @@ function showGroupPlanModal() {
document
.querySelectorAll('[data-ol-group-plan-form] select')
.forEach(el => el.addEventListener('change', updateGroupPlanView))
document
.querySelectorAll('[data-ol-group-plan-form] input')
.forEach(el => el.addEventListener('change', updateGroupPlanView))
document.querySelectorAll('[data-ol-purchase-group-plan]').forEach(el =>
el.addEventListener('click', e => {
e.preventDefault()

38
services/web/frontend/stylesheets/app/plans.less
View file

@ -484,3 +484,41 @@
}
}
}
.group-subscription-modal {
.modal-header {
text-align: center;
}
.group-plan-option {
display: block;
span {
padding-left: 5px;
font-weight: normal;
}
}
.educational-discount-badge {
height: 50px;
padding-top: 25px;
p {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
font-weight: bold;
font-size: @font-size-small;
}
.applied {
background-color: rgba(@ol-dark-green, 0.1);
color: @ol-dark-green;
}
.ineligible {
background-color: @ol-blue-gray-0;
color: @ol-blue-gray-4;
}
}
}