overleaf/services/web/frontend/js/features/plans/plans-v2-group-plan-modal.js
M Fahru 3b4968e263 Change number of users in group plan to have a dynamic value in the new plans page (#8592)
GitOrigin-RevId: 008c0a1120e5b99945f18f0b4eee60bfcb08a331
2022-07-13 08:05:33 +00:00

74 lines
2.8 KiB
JavaScript

import './group-plan-modal'
import { updateMainGroupPlanPricing } from '../../pages/user/subscription/plans-v2/plans-v2-group-plan'
export function changePlansV2MainPageGroupData() {
const mainPlansPageFormEl = document.querySelector(
'[data-ol-plans-v2-license-picker-form]'
)
const mainPlansPageLicensePickerEl = mainPlansPageFormEl.querySelector(
'[data-ol-plans-v2-license-picker-select]'
)
const mainPlansPageEducationalDiscountEl = mainPlansPageFormEl.querySelector(
'[data-ol-plans-v2-license-picker-educational-discount-input]'
)
const groupPlanModalNumberOfLicenses = document.querySelector(
'[data-ol-group-plan-modal] #size'
).value
const educationalDiscountChecked = document.querySelector(
'[data-ol-group-plan-modal] #usage'
).checked
const educationalDiscountEnabled =
educationalDiscountChecked && groupPlanModalNumberOfLicenses >= 10
// update license picker on the main plans page
mainPlansPageLicensePickerEl.value = groupPlanModalNumberOfLicenses
// update educational discount checkbox on the main plans page
//
// extra note
// for number of users < 10, there is a difference on the checkbox behaviour
// between the group plan modal and the main plan page
//
// On the group plan modal, the checkbox button is not visually disabled for number of users < 10 (checkbox can still be clicked)
// but the logic is disabled and there will be an extra text whether or not the discount is applied
//
// However, on the main group plan page, the checkbox button is visually disabled for number of users < 10 (checkbox can not be clicked)
// Hence, there's a possibility that the checkbox on the group plan modal is checked, but the discount is not applied.
// i.e user can still click the checkbox with number of users < 10. The price won't be discounted, but the checkbox is checked.
if (groupPlanModalNumberOfLicenses >= 10) {
mainPlansPageEducationalDiscountEl.checked = educationalDiscountEnabled
} else {
// The code below is for disabling the checkbox button on the main plan page for number of users <10
// while still checking the educational discount
if (educationalDiscountChecked) {
mainPlansPageEducationalDiscountEl.checked = false
}
}
updateMainGroupPlanPricing()
}
function hideCurrencyPicker() {
document.querySelector('[data-ol-group-plan-form-currency]').hidden = true
}
document.querySelectorAll('[data-ol-group-plan-form] select').forEach(el =>
el.addEventListener('change', () => {
changePlansV2MainPageGroupData()
})
)
document
.querySelectorAll('[data-ol-group-plan-form] input')
.forEach(el => el.addEventListener('change', changePlansV2MainPageGroupData))
const isGroupPlanModalAvailable = document.querySelector(
'[data-ol-group-plan-modal]'
)
if (isGroupPlanModalAvailable) {
hideCurrencyPicker()
}