update routes.jsx to match docs guidance

Author: hajinsuha1

packages/template-retail-react-app/app/routes.jsx

@@ -12,11 +12,12 @@
 // we don't want it to count toward coverage until we figure out how to cover the `functions`
 // metric for this file in its test.
 
-import React from 'react'
+import React, {useEffect} from 'react'
+import {withRouter} from 'react-router-dom'
 import loadable from '@loadable/component'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
-import {withRouter} from 'react-router-dom'
-import {useEffect} from 'react'
+import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
+
 // Components
 import {Skeleton} from '@salesforce/retail-react-app/app/components/shared/ui'
 import {configureRoutes} from '@salesforce/retail-react-app/app/utils/routes-utils'
@@ -122,6 +123,9 @@ export const routes = [
     }
 ]
 
+// Remove SFRA/SiteGenesis routes from PWA Kit
+const ecomRoutes = ['/cart', '/checkout', '*']
+
 export default () => {
     const config = getConfig()
     const enableHybrid = config?.app?.enableHybrid
@@ -132,9 +136,6 @@ export default () => {
     const passwordlessLoginEnabled = loginConfig?.passwordless?.enabled
     const passwordlessLoginLandingPath = loginConfig?.passwordless?.landingPath
 
-    // Paths handled by SFRA in hybrid mode
-    const hybridPaths = ['/cart', '/checkout', '/checkout/confirmation/:orderNo']
-
     // Add dynamic routes conditionally (only if features are enabled and paths are defined)
     const dynamicRoutes = [
         resetPasswordLandingPath && {
@@ -156,53 +157,46 @@ export default () => {
             }
     ].filter(Boolean)
 
-    const allRoutes = configureRoutes(
-        [...routes, ...dynamicRoutes].filter(
-            (r) => !enableHybrid || !hybridPaths.includes(r.path)
-        ),
-        config,
-        {ignoredRoutes: ['/callback'], fuzzyPathMatching: true}
-    )
-
-    // Add catch-all route at the end so it doesn't match before dynamic routes
-    return [
-        ...allRoutes,
+    const allBaseRoutes = [...routes, ...dynamicRoutes]
+
+    const hybridRoutes = [
+        ...allBaseRoutes.filter((route) => !ecomRoutes.includes(route.path)),
         {
             path: '*',
             component: withRouter((props) => {
                 const {location} = props
                 const urlParams = new URLSearchParams(location.search)
+                const {site} = useMultiSite()
+                const siteId = site && site.id ? site.id : config?.app?.defaultSite
 
-                useEffect(() => {
-                    if (enableHybrid && !urlParams.has('redirected')) {
-                        // Redirect client-side navigations directly to SFRA
-                        const sfccOrigin = getConfig()?.app?.sfccOrigin
-                        const siteId = getConfig()?.app?.defaultSite || 'RefArchGlobal'
-                        // Strip the PWA Kit site/locale prefix (e.g. /global/en-GB) from the path
-                        const pwaPath = location.pathname.replace(
-                            /^\/[^/]+\/[^/]+\//,
-                            '/'
-                        )
-                        const isLocalhost = window.location.hostname === 'localhost'
-                        const target =
-                            sfccOrigin && !isLocalhost
-                                ? `${sfccOrigin}/s/${siteId}${pwaPath}`
-                                : `/s/${siteId}${pwaPath}`
-                        window.location.replace(target)
-                        return
-                    }
-                    const newURL = new URL(window.location)
-                    if (!urlParams.has('redirected')) {
-                        newURL.searchParams.append('redirected', '1')
-                        window.location.href = newURL
-                    }
-                }, [window.location.href])
+                if (typeof window !== 'undefined') {
+                    useEffect(() => {
+                        const newURL = new URL(window.location)
+                        if (!urlParams.has('redirected')) {
+                            newURL.searchParams.append('redirected', '1')
+                            newURL.pathname = `/s/${siteId}/${window.location.pathname
+                                .split('/')
+                                .slice(2)
+                                .join('/')}`
+                            window.location.replace(newURL)
+                        }
+                    }, [window.location.href])
+                }
 
                 if (urlParams.has('redirected')) {
                     return <PageNotFound {...props} />
                 }
+
                 return null
             })
         }
     ]
+
+    // Only use these routes if we are in hybrid mode otherwise use defaults
+    // This is driven via the config and env variables
+    const routesToConfigure = enableHybrid ? hybridRoutes : allBaseRoutes
+
+    return configureRoutes(routesToConfigure, config, {
+        ignoredRoutes: ['/callback', '*']
+    })
 }