overleaf/services/web/frontend/js/features/plans/group-plan-modal/index.js

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 groupPlans = getMeta('ol-groupPlans')
  const currencySymbols = getMeta('ol-currencySymbols')

  const modalEl = document.querySelector('[data-ol-group-plan-modal]')
  const { planCode, size, currency, usage } = getFormValues()

  const priceInCents =
    groupPlans[usage][planCode][currency][size].price_in_cents
  const priceInUnit = (priceInCents / 100).toFixed()
  const currencySymbol = currencySymbols[currency]
  const displayPrice = `${currencySymbol}${priceInUnit}`
  const perUserPrice = parseFloat((priceInCents / 100 / 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
}

function getGroupModalOpeningLocation() {
  const modalEl = $('[data-ol-group-plan-modal]')
  return modalEl.data('ol-modal-opening-location')
}

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(location) {
  modalEl.modal()
  if (location) {
    modalEl.data('ol-modal-opening-location', location)
  }
  eventTracking.send(
    'subscription-funnel',
    'plans-page',
    'group-inquiry-potential'
  ) // deprecated by plans-page-click
}

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)
    } else {
      const openingLocation = getGroupModalOpeningLocation()
      if (openingLocation === 'toggle') {
        queryParams.set('itm_content', openingLocation)
      }
    }
    eventTracking.sendMB('groups-modal-click', {
      plan: planCode,
      users: size,
      currency: currency,
      type: usage,
    })
    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 => {
  const location = el.getAttribute('data-ol-location')
  el.addEventListener('click', function (e) {
    e.preventDefault()
    eventTracking.sendMB('plans-page-click', {
      button: 'group',
      location,
      period: 'annual',
    })
    showGroupPlanModal(location)
  })
})

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