@W-21566314@ - Bump version for 3.17.1-preview.0 (#3749)

* W-2129587: removed wrapperStyle, add position fixed for LoadingSpinner to have full screen overlay

* bump version to preview.1

* @W-21414441@ Bugfix - Fix adding to cart from a master product in the wishlist (#3732)

* Fix add to cart bug and add e2e test

* Update CHANGELOG.md

* W-21432256 fix redirect payment methods status value during preview t… (#3734)

* W-21432256 fix redirect payment methods status value during preview testing

* @W-21551291: [1CC][PWA Kit] Custom billing address lost after OTP registration (#3741)

* @W-21551291: [1CC][PWA Kit] Custom billing address lost after OTP registration

Signed-off-by: d.phan <d.phan@salesforce.com>

* add changelog

Signed-off-by: d.phan <d.phan@salesforce.com>

* lint fix

Signed-off-by: d.phan <d.phan@salesforce.com>

* lint fix

Signed-off-by: d.phan <d.phan@salesforce.com>

---------

Signed-off-by: d.phan <d.phan@salesforce.com>

* clean up changelog

* bump versions

* Add missing overrides to extensible app (#3745)

* Add missing overrides to extensible app

* Update CHANGELOG.md

* Bump versions

* @W-20784635@ Productize base paths (#3614)

* @W-20784722@ Move envBasePath into ssrParameters (#3590)

* Move envBasePath into ssrParameters

* Apply MRT restrictions on supported base paths

* Update changelogs

* one more changelog

* Update express.test.js

* Remove whitespace trimming

* Remove test base path

* Add comment

* @W-20784635@ Support adding base paths to shopper facing URLs (#3615)

* Add base path to react router routes

* Handle basename for urls that bypass react router

* Add a feature toggle for app base names

* Add tests

* Update config templates

* Rename getBasename to getRouterBasePath

* Update changelogs

* Test fixes

* Remove unused import and cleanup comments

* Apply suggestions

* Clean up redundant code

* Fix issues from merge conflict

* Update CHANGELOG.md

* [Storefront Preview] Address base path duplication for manually entered urls (#3666)

* Address base path duplication

* Update CHANGELOG.md

* Update CHANGELOG.md

* Update CHANGELOG.md

* Apply suggestions

* Fix unwanted basePath removal if base path is a substring

* Lint

* Add console warn

* Update refresh component to avoid duplicate base paths

* Fix merge issue

* Add tests for coverage

* Squash changelogs

* Remove warning

---------

Signed-off-by: vcua-mobify <47404250+vcua-mobify@users.noreply.github.com>

* Bump version to 3.17.1-preview.0

* Update CHANGELOG.md

---------

Signed-off-by: nayanavishwa <nayana.vishwa@salesforce.com>
Signed-off-by: d.phan <d.phan@salesforce.com>
Signed-off-by: vcua-mobify <47404250+vcua-mobify@users.noreply.github.com>
Co-authored-by: nayanavishwa <nayana.vishwa@salesforce.com>
Co-authored-by: amittapalli <amittapalli@yahoo.com>
Co-authored-by: Danny Phan <125327707+dannyphan2000@users.noreply.github.com>

Author: 4 people

e2e/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "e2e-scripts",
-  "version": "3.17.0",
+  "version": "3.17.1-preview.0",
   "description": "E2E test scripts for PWA Kit",
   "main": "index.js",
   "private": true,
@@ -15,7 +15,7 @@
     "@actions/core": "^1.11.1",
     "@aws-sdk/client-s3": "3.450.0",
     "@aws-sdk/client-sts": "3.450.0",
-    "@salesforce/pwa-kit-dev": "3.17.0",
+    "@salesforce/pwa-kit-dev": "3.17.1-preview.0",
     "jest": "^29.7.0"
   },
   "jest": {

e2e/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.17.0",
+  "version": "3.17.1-preview.0",
   "packages": [
     "packages/*",
     "e2e"

lerna.json

@@ -1,6 +1,6 @@
 {
     "name": "pwa-kit",
-    "version": "3.17.0",
+    "version": "3.17.1-preview.0",
     "scripts": {
         "bump-version": "node ./scripts/bump-version/index.js",
         "bump-version:retail-react-app": "node ./scripts/bump-version/index.js --package=@salesforce/retail-react-app",

package-lock.json

@@ -1,3 +1,6 @@
+## v5.1.1-preview.0 (Mar 13, 2026)
+- Update storefront preview to support base paths [#3614](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3614)
+
 ## v5.1.0 (Mar 12, 2026)
 - Add Page Designer Support [#3727](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3727)
 - Bump commerce-sdk-isomorphic to 5.1.0 [#3725](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3725)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/commerce-sdk-react",
-  "version": "5.1.0",
+  "version": "5.1.1-preview.0",
   "description": "A library that provides react hooks for fetching data from Commerce Cloud",
   "homepage": "https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/ecom-react-hooks#readme",
   "bugs": {
@@ -46,7 +46,7 @@
     "jwt-decode": "^4.0.0"
   },
   "devDependencies": {
-    "@salesforce/pwa-kit-dev": "3.17.0",
+    "@salesforce/pwa-kit-dev": "3.17.1-preview.0",
     "@tanstack/react-query": "^4.28.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -61,7 +61,7 @@
     "@types/react-helmet": "~6.1.6",
     "@types/react-router-dom": "~5.3.3",
     "cross-env": "^5.2.1",
-    "internal-lib-build": "3.17.0",
+    "internal-lib-build": "3.17.1-preview.0",
     "jsonwebtoken": "^9.0.0",
     "nock": "^13.3.0",
     "nodemon": "^2.0.22",

packages/commerce-sdk-react/CHANGELOG.md

@@ -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,88 @@ 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('experimentalUnsafeNavigate does not strip when path has basePath only as substring (e.g. /shop vs /shopping/cart)', () => {
+        ;(detectStorefrontPreview as jest.Mock).mockReturnValue(true)
+
+        render(
+            <StorefrontPreview
+                enabled={true}
+                getToken={() => 'my-token'}
+                getBasePath={() => '/shop'}
+            />
+        )
+
+        window.STOREFRONT_PREVIEW?.experimentalUnsafeNavigate?.('/shopping/cart', 'push')
+        expect(mockPush).toHaveBeenCalledWith('/shopping/cart')
+    })
+
+    test('experimentalUnsafeNavigate strips to / when path exactly equals basePath', () => {
+        ;(detectStorefrontPreview as jest.Mock).mockReturnValue(true)
+
+        render(
+            <StorefrontPreview
+                enabled={true}
+                getToken={() => 'my-token'}
+                getBasePath={() => '/mybase'}
+            />
+        )
+
+        window.STOREFRONT_PREVIEW?.experimentalUnsafeNavigate?.('/mybase', 'push')
+        expect(mockPush).toHaveBeenCalledWith('/')
+    })
+
+    test('experimentalUnsafeNavigate removes base path from location object when getBasePath is provided', () => {
+        ;(detectStorefrontPreview as jest.Mock).mockReturnValue(true)
+
+        render(
+            <StorefrontPreview
+                enabled={true}
+                getToken={() => 'my-token'}
+                getBasePath={() => '/mybase'}
+            />
+        )
+
+        window.STOREFRONT_PREVIEW?.experimentalUnsafeNavigate?.(
+            {pathname: '/mybase/product/123', search: '?q=1'},
+            'push'
+        )
+        expect(mockPush).toHaveBeenCalledWith({pathname: '/product/123', search: '?q=1'})
+    })
+
     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/package-lock.json

@@ -17,20 +17,58 @@ type GetToken = () => string | undefined | Promise<string | undefined>
 type ContextChangeHandler = () => void | Promise<void>
 type OptionalWhenDisabled<T> = ({enabled?: true} & T) | ({enabled: false} & Partial<T>)
 
+/**
+ * Remove the base path from a path string.
+ * Only strips when path equals basePath or path starts with basePath + '/'.
+ */
+function removeBasePathFromPath(path: string, basePath: string): string {
+    const matches =
+        path.startsWith(basePath + '/') || path === basePath
+    return matches ? path.slice(basePath.length) || '/' : path
+}
+
+/**
+ * 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 removeBasePathFromPath(pathOrLocation, basePath) as LocationDescriptor<T>
+    }
+    const pathname = pathOrLocation.pathname ?? '/'
+    return {
+        ...pathOrLocation,
+        pathname: removeBasePathFromPath(pathname, basePath)
+    }
+}
+
 /**
  *
  * @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. Requird if using
+ * base path for router routes (showBasePath is true in url config).
  */
 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 +87,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 +139,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