mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-10 16:18:48 -05:00
140b312eca
Accessibility - help the user to navigate through the tabs on the plans page GitOrigin-RevId: 93822277edd3a44eaf8e1219a4902e28d31e198a
265 lines
8.2 KiB
JavaScript
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)
|