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() }