Merge pull request #19664 from overleaf/jel-plans-js

[web] Fix interstitial payment page when loaded with a hash in the URL

GitOrigin-RevId: 81cdf27cd13aed149f5453a997df05949eb6b01b

services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-m-a-switch.js

@@ -7,14 +7,16 @@ export function toggleMonthlyAnnualSwitching(
   const containerEl = document.querySelector(
     '[data-ol-plans-v2-m-a-switch-container]'
   )
-  const checkbox = containerEl.querySelector('input[type="checkbox"]')
+  if (containerEl) {
+    const checkbox = containerEl.querySelector('input[type="checkbox"]')
 
-  containerEl.classList.toggle('disabled', view === 'group')
+    containerEl.classList.toggle('disabled', view === 'group')
 
-  checkbox.disabled = view === 'group'
-  checkbox.checked = currentMonthlyAnnualSwitchValue === 'monthly'
+    checkbox.disabled = view === 'group'
+    checkbox.checked = currentMonthlyAnnualSwitchValue === 'monthly'
 
-  switchMonthlyAnnual(currentMonthlyAnnualSwitchValue)
+    switchMonthlyAnnual(currentMonthlyAnnualSwitchValue)
+  }
 }
 
 export function switchMonthlyAnnual(currentMonthlyAnnualSwitchValue) {

services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-main.js

@@ -117,14 +117,24 @@ function selectTab(viewTab) {
     el.hidden = el.getAttribute('data-ol-plans-v2-view') !== viewTab
   })
 
-  document.querySelector('[data-ol-plans-v2-m-a-tooltip]').hidden =
-    viewTab === 'group'
-  document.querySelector('[data-ol-plans-v2-license-picker-container]').hidden =
-    viewTab !== 'group'
+  const tooltipEl = document.querySelector('[data-ol-plans-v2-m-a-tooltip]')
+  if (tooltipEl) {
+    tooltipEl.hidden = viewTab === 'group'
+  }
 
-  document
-    .querySelector('[data-ol-plans-v2-m-a-switch-container]')
-    .setAttribute('data-ol-current-view', viewTab)
+  const licensePickerEl = document.querySelector(
+    '[data-ol-plans-v2-license-picker-container]'
+  )
+  if (licensePickerEl) {
+    licensePickerEl.hidden = viewTab !== 'group'
+  }
+
+  const monthlyAnnualSwitch = document.querySelector(
+    '[data-ol-plans-v2-m-a-switch-container]'
+  )
+  if (monthlyAnnualSwitch) {
+    monthlyAnnualSwitch.setAttribute('data-ol-current-view', viewTab)
+  }
 
   if (viewTab === 'group') {
     updateMainGroupPlanPricing()
@@ -208,8 +218,9 @@ function setUpGroupPlanPricingChange() {
 
 function toggleUniversityInfo(viewTab) {
   const el = document.querySelector('[data-ol-plans-university-info-container]')
-
-  el.hidden = viewTab !== 'student'
+  if (el) {
+    el.hidden = viewTab !== 'student'
+  }
 }
 
 // This is the old scheme for hashing redirection