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

67 lines
2.7 KiB
JavaScript
Raw Normal View History

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