From 487ff4f505279e641a37c8681d7521a43c8ef08e Mon Sep 17 00:00:00 2001 From: M Fahru Date: Thu, 19 May 2022 07:57:36 -0400 Subject: [PATCH] Improvement on form data sync between group plan modal and new plan page (#8003) GitOrigin-RevId: 66a0a423fe48a8a8a7ddd292ba218cd5038dfdb1 --- .../Subscription/SubscriptionController.js | 27 ++++---- .../features/plans/group-plan-modal/index.js | 8 +-- .../plans/plans-v2-group-plan-modal.js | 67 +++++++------------ .../plans-v2/plans-v2-group-plan.js | 17 ++--- .../subscription/plans-v2/plans-v2-main.js | 17 ++--- .../plans-v2/plans-v2-subscription-button.js | 9 ++- 6 files changed, 62 insertions(+), 83 deletions(-) diff --git a/services/web/app/src/Features/Subscription/SubscriptionController.js b/services/web/app/src/Features/Subscription/SubscriptionController.js index c07099259b..e7bbd7cb73 100644 --- a/services/web/app/src/Features/Subscription/SubscriptionController.js +++ b/services/web/app/src/Features/Subscription/SubscriptionController.js @@ -45,20 +45,6 @@ async function plansPage(req, res) { } return defaultValue } - - let defaultGroupPlanModalCurrency = 'USD' - if (validGroupPlanModalOptions.currency.includes(recommendedCurrency)) { - defaultGroupPlanModalCurrency = recommendedCurrency - } - const groupPlanModalDefaults = { - plan_code: getDefault('plan', 'plan_code', 'collaborator'), - size: getDefault('number', 'size', '10'), - currency: getDefault('currency', 'currency', defaultGroupPlanModalCurrency), - usage: getDefault('usage', 'usage', 'enterprise'), - } - - AnalyticsManager.recordEventForSession(req.session, 'plans-page-view') - const newPlansPageAssignmentV2 = await SplitTestHandler.promises.getAssignment( req, @@ -70,6 +56,19 @@ async function plansPage(req, res) { newPlansPageAssignmentV2 && newPlansPageAssignmentV2.variant === 'new-plans-page' + let defaultGroupPlanModalCurrency = 'USD' + if (validGroupPlanModalOptions.currency.includes(recommendedCurrency)) { + defaultGroupPlanModalCurrency = recommendedCurrency + } + const groupPlanModalDefaults = { + plan_code: getDefault('plan', 'plan_code', 'collaborator'), + size: getDefault('number', 'size', newPlansPageVariantV2 ? '2' : '10'), + currency: getDefault('currency', 'currency', defaultGroupPlanModalCurrency), + usage: getDefault('usage', 'usage', 'enterprise'), + } + + AnalyticsManager.recordEventForSession(req.session, 'plans-page-view') + const standardPlanNameAssignment = await SplitTestHandler.promises.getAssignment( req, diff --git a/services/web/frontend/js/features/plans/group-plan-modal/index.js b/services/web/frontend/js/features/plans/group-plan-modal/index.js index 5b1ed7c856..4a102d8132 100644 --- a/services/web/frontend/js/features/plans/group-plan-modal/index.js +++ b/services/web/frontend/js/features/plans/group-plan-modal/index.js @@ -15,7 +15,7 @@ function getFormValues() { return { planCode, size, currency, usage } } -function updateGroupPlanView() { +export function updateGroupModalPlanPricing() { const groupPlans = getMeta('ol-groupPlans') const currencySymbols = getMeta('ol-currencySymbols') @@ -74,10 +74,10 @@ function showGroupPlanModal() { document .querySelectorAll('[data-ol-group-plan-form] select') - .forEach(el => el.addEventListener('change', updateGroupPlanView)) + .forEach(el => el.addEventListener('change', updateGroupModalPlanPricing)) document .querySelectorAll('[data-ol-group-plan-form] input') - .forEach(el => el.addEventListener('change', updateGroupPlanView)) + .forEach(el => el.addEventListener('change', updateGroupModalPlanPricing)) document.querySelectorAll('[data-ol-purchase-group-plan]').forEach(el => el.addEventListener('click', e => { e.preventDefault() @@ -131,7 +131,7 @@ document }) }) -updateGroupPlanView() +updateGroupModalPlanPricing() if (window.location.hash === '#groups') { showGroupPlanModal() diff --git a/services/web/frontend/js/features/plans/plans-v2-group-plan-modal.js b/services/web/frontend/js/features/plans/plans-v2-group-plan-modal.js index d852ee1514..07bf2a6669 100644 --- a/services/web/frontend/js/features/plans/plans-v2-group-plan-modal.js +++ b/services/web/frontend/js/features/plans/plans-v2-group-plan-modal.js @@ -1,11 +1,5 @@ import './group-plan-modal' -import getMeta from '../../utils/meta' - -const NEW_PLANS_PAGE_VARIANT = 'new-plans-page' - -export function checkIfGroupModalOpen() { - return window.location.hash.includes('groups') -} +import { updateMainGroupPlanPricing } from '../../pages/user/subscription/plans-v2/plans-v2-group-plan' export function changePlansV2MainPageGroupData() { const mainPlansPageFormEl = document.querySelector( @@ -30,52 +24,43 @@ export function changePlansV2MainPageGroupData() { const educationalDiscountEnabled = educationalDiscountChecked && groupPlanModalNumberOfLicenses >= 10 - if (checkIfGroupModalOpen()) { - // update license picker on the main plans page - mainPlansPageLicensePickerEl.value = groupPlanModalNumberOfLicenses - mainPlansPageLicensePickerEl.dispatchEvent(new Event('change')) + // update license picker on the main plans page + mainPlansPageLicensePickerEl.value = groupPlanModalNumberOfLicenses - // update educational discount checkbox on the main plans page - if (groupPlanModalNumberOfLicenses >= 10) { - mainPlansPageEducationalDiscountEl.checked = educationalDiscountEnabled - mainPlansPageEducationalDiscountEl.dispatchEvent(new Event('change')) - } else { - if (educationalDiscountChecked) { - mainPlansPageEducationalDiscountEl.checked = false - mainPlansPageEducationalDiscountEl.dispatchEvent(new Event('change')) - } + // 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 } -const plansPageVariant = - getMeta('ol-splitTestVariants')?.['plans-page-layout-v2'] ?? 'default' - -if (plansPageVariant === NEW_PLANS_PAGE_VARIANT) { - hideCurrencyPicker() - - // we need to sync the form data between group plan modal - // and the main plan page - document.querySelectorAll('[data-ol-group-plan-code]').forEach(el => { - // listening to new CustomEvent 'showmodal' - // we do this to check whether user clicks the "Standard (Collaborator)" plan or the "Professional" plan - // and the radio button on the group plan modal will then be 'checked' accordingly - el.addEventListener('showmodal', () => { - if (!checkIfGroupModalOpen()) { - el.checked = true - el.dispatchEvent(new Event('change')) - } - }) - }) -} - 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() diff --git a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-group-plan.js b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-group-plan.js index 023558ed94..6079611578 100644 --- a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-group-plan.js +++ b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-group-plan.js @@ -1,9 +1,10 @@ -import { checkIfGroupModalOpen } from '../../../../features/plans/plans-v2-group-plan-modal' +import { updateGroupModalPlanPricing } from '../../../../features/plans/group-plan-modal' +import '../../../../features/plans/plans-v2-group-plan-modal' import getMeta from '../../../../utils/meta' const MINIMUM_NUMBER_OF_LICENSES_EDUCATIONAL_DISCOUNT = 10 -export function updateGroupPricing() { +export function updateMainGroupPlanPricing() { const groupPlans = getMeta('ol-groupPlans') const currencySymbols = getMeta('ol-currencySymbols') const currentCurrencyCode = getMeta('ol-recommendedCurrency') @@ -116,10 +117,8 @@ export function changeGroupPlanModalNumberOfLicenses() { const groupPlanModalLicensePickerEl = modalEl.querySelector('#size') - if (!checkIfGroupModalOpen()) { - groupPlanModalLicensePickerEl.value = numberOfLicenses - groupPlanModalLicensePickerEl.dispatchEvent(new Event('change')) - } + groupPlanModalLicensePickerEl.value = numberOfLicenses + updateGroupModalPlanPricing() } export function changeGroupPlanModalEducationalDiscount() { @@ -129,8 +128,6 @@ export function changeGroupPlanModalEducationalDiscount() { '[data-ol-plans-v2-license-picker-educational-discount-input]' ).checked - if (!checkIfGroupModalOpen()) { - groupPlanModalEducationalDiscountEl.checked = educationalDiscountChecked - groupPlanModalEducationalDiscountEl.dispatchEvent(new Event('change')) - } + groupPlanModalEducationalDiscountEl.checked = educationalDiscountChecked + updateGroupModalPlanPricing() } diff --git a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js index 95dee47676..b13a12564f 100644 --- a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js +++ b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js @@ -21,10 +21,9 @@ import { changeGroupPlanModalNumberOfLicenses, hideGroupPlansLicensePicker, showGroupPlansLicensePicker, - updateGroupPricing, + updateMainGroupPlanPricing, } from './plans-v2-group-plan' import { setUpGroupSubscriptionButtonAction } from './plans-v2-subscription-button' -import { checkIfGroupModalOpen } from '../../../../features/plans/plans-v2-group-plan-modal' import { updateLinkTargets } from '../plans' function selectTab(viewTab) { @@ -48,7 +47,7 @@ function selectTab(viewTab) { if (viewTab === 'group') { disableMonthlyAnnualSwitching() hideMonthlyAnnualTooltip() - updateGroupPricing() + updateMainGroupPlanPricing() underlineAnnualText() showGroupPlansLicensePicker() hideMonthlyAnnualSwitchOnSmallScreen() @@ -81,10 +80,8 @@ function setUpGroupPlanPricingChange() { .querySelectorAll('[data-ol-plans-v2-license-picker-select]') .forEach(el => { el.addEventListener('change', () => { - updateGroupPricing() - if (!checkIfGroupModalOpen()) { - changeGroupPlanModalNumberOfLicenses() - } + updateMainGroupPlanPricing() + changeGroupPlanModalNumberOfLicenses() }) }) @@ -94,10 +91,8 @@ function setUpGroupPlanPricingChange() { ) .forEach(el => el.addEventListener('change', () => { - updateGroupPricing() - if (!checkIfGroupModalOpen()) { - changeGroupPlanModalEducationalDiscount() - } + updateMainGroupPlanPricing() + changeGroupPlanModalEducationalDiscount() }) ) } diff --git a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-subscription-button.js b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-subscription-button.js index fe35de948d..4cd13e1115 100644 --- a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-subscription-button.js +++ b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-subscription-button.js @@ -1,17 +1,20 @@ -function sendShowModalEvent(plan) { +import { updateGroupModalPlanPricing } from '../../../../features/plans/group-plan-modal' + +function changeGroupPlanModalRadioInputData(plan) { const groupPlan = plan.split('_')[1] const groupModalRadioInputEl = document.querySelector( `[data-ol-group-plan-code="${groupPlan}"]` ) - groupModalRadioInputEl.dispatchEvent(new CustomEvent('showmodal')) + groupModalRadioInputEl.checked = true + updateGroupModalPlanPricing() } function showGroupPlanModal(el) { const plan = el.getAttribute('data-ol-start-new-subscription') - sendShowModalEvent(plan) + changeGroupPlanModalRadioInputData(plan) const modalEl = $('[data-ol-group-plan-modal]') modalEl