Improvement on form data sync between group plan modal and new plan page (#8003)

GitOrigin-RevId: 66a0a423fe48a8a8a7ddd292ba218cd5038dfdb1

services/web/app/src/Features/Subscription/SubscriptionController.js

@@ -45,6 +45,16 @@ async function plansPage(req, res) {
     }
     return defaultValue
   }
+  const newPlansPageAssignmentV2 =
+    await SplitTestHandler.promises.getAssignment(
+      req,
+      res,
+      'plans-page-layout-v2'
+    )
+
+  const newPlansPageVariantV2 =
+    newPlansPageAssignmentV2 &&
+    newPlansPageAssignmentV2.variant === 'new-plans-page'
 
   let defaultGroupPlanModalCurrency = 'USD'
   if (validGroupPlanModalOptions.currency.includes(recommendedCurrency)) {
@@ -52,24 +62,13 @@ async function plansPage(req, res) {
   }
   const groupPlanModalDefaults = {
     plan_code: getDefault('plan', 'plan_code', 'collaborator'),
-    size: getDefault('number', 'size', '10'),
+    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 newPlansPageAssignmentV2 =
-    await SplitTestHandler.promises.getAssignment(
-      req,
-      res,
-      'plans-page-layout-v2'
-    )
-
-  const newPlansPageVariantV2 =
-    newPlansPageAssignmentV2 &&
-    newPlansPageAssignmentV2.variant === 'new-plans-page'
-
   const standardPlanNameAssignment =
     await SplitTestHandler.promises.getAssignment(
       req,

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

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

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

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

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