Address base path duplication

Author: vcua-mobify

packages/commerce-sdk-react/src/components/StorefrontPreview/storefront-preview.test.tsx

@@ -14,7 +14,16 @@ import {useCommerceApi, useConfig} from '../../hooks'
 
 declare global {
     interface Window {
-        STOREFRONT_PREVIEW?: Record<string, unknown>
+        STOREFRONT_PREVIEW?: {
+            getToken?: () => string | undefined | Promise<string | undefined>
+            onContextChange?: () => void | Promise<void>
+            siteId?: string
+            experimentalUnsafeNavigate?: (
+                path: string | {pathname: string; search?: string; hash?: string; state?: unknown},
+                action?: 'push' | 'replace',
+                ...args: unknown[]
+            ) => void
+        }
     }
 }
 
@@ -28,9 +37,24 @@ jest.mock('./utils', () => {
 jest.mock('../../auth/index.ts')
 jest.mock('../../hooks/useConfig', () => jest.fn())
 
+const mockPush = jest.fn()
+const mockReplace = jest.fn()
+jest.mock('react-router-dom', () => {
+    const actual = jest.requireActual('react-router-dom')
+    return {
+        ...actual,
+        useHistory: () => ({
+            push: mockPush,
+            replace: mockReplace
+        })
+    }
+})
+
 describe('Storefront Preview Component', function () {
     beforeEach(() => {
         delete window.STOREFRONT_PREVIEW
+        mockPush.mockClear()
+        mockReplace.mockClear()
         ;(useConfig as jest.Mock).mockReturnValue({siteId: 'site-id'})
     })
     afterEach(() => {
@@ -107,6 +131,40 @@ describe('Storefront Preview Component', function () {
         expect(window.STOREFRONT_PREVIEW?.experimentalUnsafeNavigate).toBeDefined()
     })
 
+    test('experimentalUnsafeNavigate removes base path from path when getBasePath is provided', () => {
+        ;(detectStorefrontPreview as jest.Mock).mockReturnValue(true)
+
+        render(
+            <StorefrontPreview
+                enabled={true}
+                getToken={() => 'my-token'}
+                getBasePath={() => '/mybase'}
+            />
+        )
+
+        window.STOREFRONT_PREVIEW?.experimentalUnsafeNavigate?.('/mybase/product/123', 'push')
+        expect(mockPush).toHaveBeenCalledWith('/product/123')
+
+        mockPush.mockClear()
+        window.STOREFRONT_PREVIEW?.experimentalUnsafeNavigate?.('/mybase/account', 'replace')
+        expect(mockReplace).toHaveBeenCalledWith('/account')
+    })
+
+    test('experimentalUnsafeNavigate does not remove when path does not start with base path', () => {
+        ;(detectStorefrontPreview as jest.Mock).mockReturnValue(true)
+
+        render(
+            <StorefrontPreview
+                enabled={true}
+                getToken={() => 'my-token'}
+                getBasePath={() => '/mybase'}
+            />
+        )
+
+        window.STOREFRONT_PREVIEW?.experimentalUnsafeNavigate?.('/other/product/123', 'push')
+        expect(mockPush).toHaveBeenCalledWith('/other/product/123')
+    })
+
     test('cache breaker is added to the parameters of SCAPI requests, only if in storefront preview', () => {
         ;(detectStorefrontPreview as jest.Mock).mockReturnValue(true)
         mockQueryEndpoint('baskets/123', {})

packages/commerce-sdk-react/src/components/StorefrontPreview/storefront-preview.tsx

@@ -17,20 +17,49 @@ type GetToken = () => string | undefined | Promise<string | undefined>
 type ContextChangeHandler = () => void | Promise<void>
 type OptionalWhenDisabled<T> = ({enabled?: true} & T) | ({enabled: false} & Partial<T>)
 
+/**
+ * Strip the base path from a path
+ * 
+ * React Router history re-adds the base path to the path, so we
+ * remove it here to avoid base path duplication.
+ */
+function removeBasePathFromLocation<T>(
+    pathOrLocation: LocationDescriptor<T>,
+    basePath: string
+): LocationDescriptor<T> {
+    if (!basePath) return pathOrLocation
+    if (typeof pathOrLocation === 'string') {
+        return pathOrLocation.startsWith(basePath)
+            ? pathOrLocation.slice(basePath.length) || '/'
+            : pathOrLocation
+    }
+    const pathname = pathOrLocation.pathname ?? '/'
+    const strippedPathname = pathname.startsWith(basePath)
+        ? pathname.slice(basePath.length) || '/'
+        : pathname
+    return {...pathOrLocation, pathname: strippedPathname}
+}
+
 /**
  *
  * @param enabled - flag to turn on/off Storefront Preview feature. By default, it is set to true.
  * This flag only applies if storefront is running in a Runtime Admin iframe.
  * @param getToken - A method that returns the access token for the current user
+ * @param getBasePath - A method that returns the router base path of the app.
  */
 export const StorefrontPreview = ({
     children,
     enabled = true,
     getToken,
-    onContextChange
+    onContextChange,
+    getBasePath
 }: React.PropsWithChildren<
     // Props are only required when Storefront Preview is enabled
-    OptionalWhenDisabled<{getToken: GetToken; onContextChange?: ContextChangeHandler}>
+    OptionalWhenDisabled<{
+        getToken: GetToken
+        onContextChange?: ContextChangeHandler
+        getBasePath?: () => string
+    }>
 >) => {
     const history = useHistory()
     const isHostTrusted = detectStorefrontPreview()
@@ -49,11 +78,13 @@ export const StorefrontPreview = ({
                     action: 'push' | 'replace' = 'push',
                     ...args: unknown[]
                 ) => {
-                    history[action](path, ...args)
+                    const basePath = getBasePath?.() ?? ''
+                    const pathWithoutBase = removeBasePathFromLocation(path, basePath)
+                    history[action](pathWithoutBase, ...args)
                 }
             }
         }
-    }, [enabled, getToken, onContextChange, siteId])
+    }, [enabled, getToken, onContextChange, siteId, getBasePath])
 
     useEffect(() => {
         if (enabled && isHostTrusted) {
@@ -99,7 +130,8 @@ StorefrontPreview.propTypes = {
     // to get to a place where both these props are simply optional and we will provide default implementations.
     // This would make the API simpler to use.
     getToken: CustomPropTypes.requiredFunctionWhenEnabled,
-    onContextChange: PropTypes.func
+    onContextChange: PropTypes.func,
+    getBasePath: PropTypes.func
 }
 
 export default StorefrontPreview

packages/template-retail-react-app/app/components/_app/index.jsx

@@ -303,7 +303,7 @@ const App = (props) => {
 
     return (
         <Box className="sf-app" {...styles.container}>
-            <StorefrontPreview getToken={getTokenWhenReady}>
+            <StorefrontPreview getToken={getTokenWhenReady} getBasePath={getRouterBasePath}>
                 <IntlProvider
                     onError={(err) => {
                         if (!messages) {