overleaf/services/web/frontend/js/features/plans/group-plan-modal/index.js
Hugh O'Brien 7d932f0b92 Merge pull request #5722 from overleaf/hb-improve-group-buy-ux
Update the UX for the group subscription modal

GitOrigin-RevId: 6700a5c4907e0c966ee3b2954b6417ccf9edf37e
2021-11-17 09:04:06 +00:00

124 lines
3.9 KiB
JavaScript

import getMeta from '../../../utils/meta'
import { swapModal } from '../../utils/swapModal'
import * as eventTracking from '../../../infrastructure/event-tracking'
function getFormValues() {
const modalEl = document.querySelector('[data-ol-group-plan-modal]')
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').checked
? 'educational'
: 'enterprise'
return { planCode, size, currency, usage }
}
function updateGroupPlanView() {
const prices = getMeta('ol-groupPlans')
const currencySymbols = getMeta('ol-currencySymbols')
const modalEl = document.querySelector('[data-ol-group-plan-modal]')
const { planCode, size, currency, usage } = getFormValues()
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
})
modalEl.querySelectorAll('[data-ol-group-plan-usage]').forEach(el => {
el.hidden = el.getAttribute('data-ol-group-plan-usage') !== usage
})
modalEl.querySelector(
'[data-ol-group-plan-display-price]'
).innerText = displayPrice
modalEl.querySelector(
'[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]')
modalEl
.on('shown.bs.modal', function () {
const path = `${window.location.pathname}${window.location.search}`
history.replaceState(null, document.title, path + '#groups')
})
.on('hidden.bs.modal', function () {
history.replaceState(null, document.title, window.location.pathname)
})
function showGroupPlanModal() {
modalEl.modal()
eventTracking.send(
'subscription-funnel',
'plans-page',
'group-inquiry-potential'
)
}
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()
const { planCode, size, currency, usage } = getFormValues()
const queryParams = new URLSearchParams(
Object.entries({
planCode: `group_${planCode}_${size}_${usage}`,
currency,
itm_campaign: 'groups',
})
)
const itmContent = getMeta('ol-itm_content')
if (itmContent) {
queryParams.set('itm_content', itmContent)
}
const url = new URL('/user/subscription/new', window.origin)
url.search = queryParams.toString()
window.location = url.toString()
})
)
document.querySelectorAll('[data-ol-open-group-plan-modal]').forEach(el => {
el.addEventListener('click', function (e) {
e.preventDefault()
showGroupPlanModal()
})
})
document
.querySelectorAll('[data-ol-open-contact-form-for-more-than-50-licenses]')
.forEach(el => {
el.addEventListener('click', function (e) {
e.preventDefault()
swapModal(
'[data-ol-group-plan-modal]',
'[data-ol-contact-form-modal="general"]'
)
})
})
updateGroupPlanView()
if (window.location.hash === '#groups') {
showGroupPlanModal()
}