From 5b29729e9be2e9bd9d941de4c7b38f5cc1c18d08 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Wed, 5 Jun 2024 10:42:25 -0700
Subject: [PATCH] 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
---
 .../js/features/plans/group-plan-modal/index.js     |  8 +++++---
 .../user/subscription/plans-v2/plans-v2-hash.js     | 13 +++++++++----
 2 files changed, 14 insertions(+), 7 deletions(-)

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 be15ab28f7..abf318601a 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
@@ -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()
 }
diff --git a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-hash.js b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-hash.js
index 83ba26a950..2321f83db8 100644
--- a/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-hash.js
+++ b/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-hash.js
@@ -1,11 +1,16 @@
-export function getViewInfoFromHash() {
-  const hash = window.location.hash.substring(1)
+import { GROUP_PLAN_MODAL_HASH } from '@/features/plans/group-plan-modal'
 
-  switch (hash) {
+export function getViewInfoFromHash() {
+  const hashValue = window.location.hash.replace('#', '')
+
+  const groupPlanModalHashValue = GROUP_PLAN_MODAL_HASH.replace('#', '')
+
+  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
   }
 }