Hybrid Override routes.jsx

routes.jsx

import {routes as defaultRoutes} from '@salesforce/retail-react-app/app/routes'

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 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'

const fallback = <Skeleton height="75vh" width="100%" />

// Pages
const PageViewer = loadable(() => import('./pages/page-viewer'), {fallback})
const PageNotFound = loadable(
    () => import('@salesforce/retail-react-app/app/pages/page-not-found'),
    {fallback}
)

export const routes = defaultRoutes
// add custom routes here
routes.splice(-1, 0, {
    path: '/page-viewer/:pageId',
    component: PageViewer
})

// Remove SFRA/SiteGenesis routes from PWA Kit
const ecomRoutes = ['/cart', '/checkout', '*']

const hybridRoutes = [
    ...routes.filter((route) => !ecomRoutes.includes(route.path)),
    {
        path: '*',
        component: withRouter((props) => {
            const config = getConfig()
            const {location} = props
            const urlParams = new URLSearchParams(location.search)
            const {site} = useMultiSite()
            const siteId = site && site.id ? site.id : config?.app?.defaultSite

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

export default () => {
    const config = getConfig()
    // Only use these routes if we are in hybrid mode otherwise use defaults
    // This is driven via the config and env variables
    const routesToConfigure = config.app.enableHybrid ? hybridRoutes : routes
    return configureRoutes(routesToConfigure, config, {
        ignoredRoutes: ['/callback', '*']
    })
}