Merge pull request #18714 from overleaf/mf-fix-group-plan-modal-hash-plans-table

[web] Fix loading plans page with group plan modal hash (#groups) does not enable the group plan table

GitOrigin-RevId: acd2e683d8e8d3f2b3325c3745856fe27c96eed6

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

@@ -8,6 +8,8 @@ import {
 import { getSplitTestVariant } from '@/utils/splitTestUtils'
 import { formatCurrencyLocalized } from '@/shared/utils/currency'
 
+export const GROUP_PLAN_MODAL_HASH = '#groups'
+
 function getFormValues() {
   const modalEl = document.querySelector('[data-ol-group-plan-modal]')
   const planCode = modalEl.querySelector(
@@ -71,11 +73,11 @@ const modalEl = $('[data-ol-group-plan-modal]')
 modalEl
   .on('shown.bs.modal', function () {
     const path = `${window.location.pathname}${window.location.search}`
-    history.replaceState(null, document.title, path + '#groups')
+    history.replaceState(null, document.title, path + GROUP_PLAN_MODAL_HASH)
     eventTracking.sendMB('form-submitted-groups-modal-open')
   })
   .on('hidden.bs.modal', function () {
-    const path = `${window.location.pathname}${window.location.search}`
+    const path = `${window.location.pathname}${window.location.search}${window.location.hash}`
     history.replaceState(null, document.title, path)
   })
 
@@ -166,6 +168,6 @@ window.addEventListener('load', () => {
   updateGroupModalPlanPricingIfAvailable()
 })
 
-if (window.location.hash === '#groups') {
+if (window.location.hash === GROUP_PLAN_MODAL_HASH) {
   showGroupPlanModal()
 }

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

@@ -1,11 +1,16 @@
+import { GROUP_PLAN_MODAL_HASH } from '@/features/plans/group-plan-modal'
+
 export function getViewInfoFromHash() {
-  const hash = window.location.hash.substring(1)
+  const hashValue = window.location.hash.replace('#', '')
+
+  const groupPlanModalHashValue = GROUP_PLAN_MODAL_HASH.replace('#', '')
 
-  switch (hash) {
+  switch (hashValue) {
     case 'individual-monthly':
       return ['individual', 'monthly']
     case 'individual-annual':
       return ['individual', 'annual']
+    case groupPlanModalHashValue:
     case 'group':
       return ['group', 'annual']
     case 'student-monthly':
@@ -24,7 +29,7 @@ export function getViewInfoFromHash() {
  */
 export function setHashFromViewTab(viewTab, period) {
   const newHash = viewTab === 'group' ? 'group' : `${viewTab}-${period}`
-  if (window.location.hash.substring(1) !== newHash) {
+  if (window.location.hash.replace('#', '') !== newHash) {
     window.location.hash = newHash
   }
 }