overleaf/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js
M Fahru 781c1c97c7 Implement new three-way split test for the plans page (#11493)
* Update split test config and infrastructure for plans-page-layout-v3

* Implement view for `old-plans-page-annual` variant of the new split test:
    - Make `annual` the default view for all elements on the old plans page
    - Change the tooltip background to green for monthly/student view

* Implement a new design for the new plans page:
    - switch annual and monthly locations (annual on the left now)
    - change the tooltip background to green color for all choice
    - make the monthly-annual switch has green background if annual is chosen

* Fix mobile view plans page header style

GitOrigin-RevId: b2b3c6ac6adbe26bf6def7e072493f503793cfcb
2023-01-30 09:02:45 +00:00

144 lines
4.3 KiB
JavaScript

import '../../../../marketing'
import * as eventTracking from '../../../../infrastructure/event-tracking'
import { setUpStickyHeaderObserver } from './plans-v2-sticky-header'
import {
setUpMonthlyAnnualSwitching,
switchMonthlyAnnual,
toggleMonthlyAnnualSwitching,
} from './plans-v2-m-a-switch'
import {
changeGroupPlanModalEducationalDiscount,
changeGroupPlanModalNumberOfLicenses,
updateMainGroupPlanPricing,
} from './plans-v2-group-plan'
import { setUpGroupSubscriptionButtonAction } from './plans-v2-subscription-button'
import { updateLinkTargets } from '../plans'
// We need this mutable variable because the group tab only have annual.
// There's some difference between the monthly and annual UI
// and since monthly-annual switch is disabled for the group tab,
// we need to introduce a new variable to store the information
let currentMonthlyAnnualSwitchValue = 'annual'
function selectTab(viewTab) {
document.querySelectorAll('[data-ol-plans-v2-view-tab]').forEach(el => {
el.classList.toggle(
'active',
el.getAttribute('data-ol-plans-v2-view-tab') === viewTab
)
})
document.querySelectorAll('[data-ol-plans-v2-view]').forEach(el => {
el.hidden = el.getAttribute('data-ol-plans-v2-view') !== viewTab
})
document.querySelector('[data-ol-plans-v2-m-a-tooltip]').hidden =
viewTab === 'group'
document.querySelector('[data-ol-plans-v2-license-picker-container]').hidden =
viewTab !== 'group'
document
.querySelector('[data-ol-plans-v2-m-a-switch-container]')
.setAttribute('data-ol-current-view', viewTab)
// group tab is special because group plan only has annual value
// so we need to perform some UI changes whenever user click the group tab
if (viewTab === 'group') {
updateMainGroupPlanPricing()
toggleMonthlyAnnualSwitching(viewTab, 'annual')
} else {
toggleMonthlyAnnualSwitching(viewTab, currentMonthlyAnnualSwitchValue)
}
toggleUniversityInfo(viewTab)
}
function setUpTabSwitching() {
document.querySelectorAll('[data-ol-plans-v2-view-tab]').forEach(el => {
const viewTab = el.getAttribute('data-ol-plans-v2-view-tab')
el.querySelector('button').addEventListener('click', function (e) {
e.preventDefault()
eventTracking.send(
'subscription-funnel',
'plans-page',
`${viewTab}-prices`
)
selectTab(viewTab)
})
})
}
function setUpGroupPlanPricingChange() {
document
.querySelectorAll('[data-ol-plans-v2-license-picker-select]')
.forEach(el => {
el.addEventListener('change', () => {
updateMainGroupPlanPricing()
changeGroupPlanModalNumberOfLicenses()
})
})
document
.querySelectorAll(
'[data-ol-plans-v2-license-picker-educational-discount-input]'
)
.forEach(el =>
el.addEventListener('change', () => {
updateMainGroupPlanPricing()
changeGroupPlanModalEducationalDiscount()
})
)
}
function toggleUniversityInfo(viewTab) {
const el = document.querySelector('[data-ol-plans-university-info-container]')
el.hidden = viewTab !== 'student'
}
function selectViewFromHash() {
try {
const params = new URLSearchParams(window.location.hash.substring(1))
const view = params.get('view')
if (view) {
// make sure the selected view is valid
if (document.querySelector(`[data-ol-plans-v2-view-tab="${view}"]`)) {
// set annual as the default
currentMonthlyAnnualSwitchValue = 'annual'
selectTab(view)
// clear the hash so it doesn't persist when switching plans
window.location.hash = ''
}
}
} catch {
// do nothing
}
}
document
.querySelector('[data-ol-plans-v2-m-a-switch]')
.addEventListener('click', () => {
const isMonthlyPricing = document.querySelector(
'[data-ol-plans-v2-m-a-switch] input[type="checkbox"]'
).checked
if (isMonthlyPricing) {
currentMonthlyAnnualSwitchValue = 'monthly'
} else {
currentMonthlyAnnualSwitchValue = 'annual'
}
switchMonthlyAnnual(currentMonthlyAnnualSwitchValue)
})
setUpTabSwitching()
setUpGroupPlanPricingChange()
setUpMonthlyAnnualSwitching()
setUpGroupSubscriptionButtonAction()
setUpStickyHeaderObserver()
updateLinkTargets()
selectViewFromHash()
window.addEventListener('hashchange', selectViewFromHash)