overleaf/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js
Rebeka Dekany 140b312eca Merge pull request #14799 from overleaf/rd-report-tablist-plan
Accessibility - help the user to navigate through the tabs on the plans page

GitOrigin-RevId: 93822277edd3a44eaf8e1219a4902e28d31e198a
2024-01-26 09:03:36 +00:00

265 lines
8.2 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 getMeta from '../../../../utils/meta'
const currentCurrencyCode = getMeta('ol-recommendedCurrency')
function setUpSubscriptionTracking(linkEl) {
linkEl.addEventListener('click', function () {
const plan =
linkEl.getAttribute('data-ol-tracking-plan') ||
linkEl.getAttribute('data-ol-start-new-subscription')
const location = linkEl.getAttribute('data-ol-location')
const period = linkEl.getAttribute('data-ol-item-view')
const DEFAULT_EVENT_TRACKING_KEY = 'plans-page-click'
const eventTrackingKey =
linkEl.getAttribute('data-ol-event-tracking-key') ||
DEFAULT_EVENT_TRACKING_KEY
const eventTrackingSegmentation = {
button: plan,
location,
'billing-period': period,
}
eventTracking.sendMB('plans-page-start-trial') // deprecated by plans-page-click
eventTracking.sendMB(eventTrackingKey, eventTrackingSegmentation)
})
}
const searchParams = new URLSearchParams(window.location.search)
export function updateLinkTargets() {
document.querySelectorAll('[data-ol-start-new-subscription]').forEach(el => {
if (el.hasAttribute('data-ol-has-custom-href')) return
const plan = el.getAttribute('data-ol-start-new-subscription')
const view = el.getAttribute('data-ol-item-view')
// annual split test trial (nudge, no-nudge, default)
const annualTrialsVariant = getMeta('ol-splitTestVariants')?.[
'annual-trials'
]
let suffix = ''
if (view === 'annual') {
if (annualTrialsVariant === 'nudge') {
suffix = '-annual_free_trial_7_days'
} else if (annualTrialsVariant === 'no-nudge') {
suffix = '-annual_free_trial_7_days'
} else if (annualTrialsVariant === 'default') {
suffix = '-annual'
}
} else {
suffix = '_free_trial_7_days'
}
const planCode = `${plan}${suffix}`
const location = el.getAttribute('data-ol-location')
const itmCampaign = searchParams.get('itm_campaign') || 'plans'
const itmContent =
itmCampaign === 'plans' ? location : searchParams.get('itm_content')
const queryString = new URLSearchParams({
planCode,
currency: currentCurrencyCode,
itm_campaign: itmCampaign,
})
if (itmContent) {
queryString.set('itm_content', itmContent)
}
if (searchParams.get('itm_referrer')) {
queryString.set('itm_referrer', searchParams.get('itm_referrer'))
}
el.href = `/user/subscription/new?${queryString.toString()}`
})
}
// 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 => {
const tab = el.querySelector('[data-ol-plans-v2-view-tab] button')
if (tab) {
const isActive =
tab.parentElement.getAttribute('data-ol-plans-v2-view-tab') === viewTab
tab.parentElement.classList.toggle('active', isActive)
tab.setAttribute('aria-selected', isActive)
}
})
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)
})
})
const tabs = document.querySelectorAll(
'[data-ol-plans-v2-view-tab] [role="tab"]'
)
if (tabs) {
tabs.forEach(tab => {
tab.addEventListener('keydown', event => {
if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
const currentIndex = Array.from(tabs).indexOf(tab)
const nextIndex =
event.key === 'ArrowLeft' ? currentIndex - 1 : currentIndex + 1
const newIndex = (nextIndex + tabs.length) % tabs.length
tabs[newIndex].focus()
}
})
})
}
}
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
const currentURL = window.location.pathname + window.location.search
history.replaceState('', document.title, currentURL)
// Add a small delay since it seems the scroll won't behave correctly on this scenario:
// 1. Open plans page
// 2. Click on "Group Plans"
// 3. Scroll down to footer
// 4. Click "For students" link
//
// I assume this is happening because the `selectTab` function above is doing a lot
// of computation to change the view and it somehow prevents the `window.scrollTo` command
// to behave correctly.
const SCROLL_TO_TOP_DELAY = 50
window.setTimeout(() => {
window.scrollTo({ top: 0, behavior: 'smooth' })
}, SCROLL_TO_TOP_DELAY)
}
}
} 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)
})
document
.querySelectorAll('[data-ol-start-new-subscription]')
.forEach(setUpSubscriptionTracking)
setUpTabSwitching()
setUpGroupPlanPricingChange()
setUpMonthlyAnnualSwitching()
setUpGroupSubscriptionButtonAction()
setUpStickyHeaderObserver()
updateLinkTargets()
selectViewFromHash()
window.addEventListener('hashchange', selectViewFromHash)