@salesforce/commerce-sdk-react 5.1.0 → 5.1.1

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## v5.1.1 (Mar 20, 2026)
+- Update storefront preview to support base paths [#3614](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3614)
+- Remove base path from /__pwa-kit route requests when showBasePath is false [#3758](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3758)
+
 ## 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/components/StorefrontPreview/storefront-preview.d.ts

@@ -12,17 +12,21 @@ type OptionalWhenDisabled<T> = ({
  * @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.
+ * Required if using a base path for router routes (showBasePath is true in url config).
  */
 export declare const StorefrontPreview: {
-    ({ children, enabled, getToken, onContextChange }: React.PropsWithChildren<OptionalWhenDisabled<{
+    ({ children, enabled, getToken, onContextChange, getBasePath }: React.PropsWithChildren<OptionalWhenDisabled<{
         getToken: GetToken;
         onContextChange?: ContextChangeHandler | undefined;
+        getBasePath?: (() => string) | undefined;
     }>>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         enabled: PropTypes.Requireable<boolean>;
         getToken: (props: any, propName: any, componentName: any) => Error | undefined;
         onContextChange: PropTypes.Requireable<(...args: any[]) => any>;
+        getBasePath: PropTypes.Requireable<(...args: any[]) => any>;
     };
 };
 export default StorefrontPreview;

package/components/StorefrontPreview/storefront-preview.js

@@ -22,17 +22,69 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
+/**
+ * Remove the base path from a path string.
+ * Only strips when path equals basePath or path starts with basePath + '/'.
+ */
+function removeBasePathFromPath(path, basePath) {
+  const matches = path.startsWith(basePath + '/') || path === basePath;
+  return matches ? path.slice(basePath.length) || '/' : path;
+}
+const PWA_KIT_PATH_PREFIX = '/__pwa-kit/';
+
+/**
+ * Runtime Admin always prepends envBasePath to /__pwa-kit/ paths (e.g. /test/__pwa-kit/refresh),
+ * but when showBasePath is false, React Router has no basename and expects /__pwa-kit/refresh.
+ * 
+ * This ensures that regardless of the showBasePath setting, these paths are normalized to 
+ * remove the base path.
+ */
+function normalizePwaKitPath(pathOrLocation) {
+  if (typeof pathOrLocation === 'string') {
+    const idx = pathOrLocation.indexOf(PWA_KIT_PATH_PREFIX);
+    return idx > 0 ? pathOrLocation.slice(idx) : pathOrLocation;
+  }
+  const pathname = pathOrLocation.pathname ?? '/';
+  const idx = pathname.indexOf(PWA_KIT_PATH_PREFIX);
+  if (idx > 0) {
+    return _objectSpread(_objectSpread({}, pathOrLocation), {}, {
+      pathname: pathname.slice(idx)
+    });
+  }
+  return pathOrLocation;
+}
+
+/**
+ * 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(pathOrLocation, basePath) {
+  if (!basePath) return pathOrLocation;
+  if (typeof pathOrLocation === 'string') {
+    return removeBasePathFromPath(pathOrLocation, basePath);
+  }
+  const pathname = pathOrLocation.pathname ?? '/';
+  return _objectSpread(_objectSpread({}, 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.
+ * Required if using a base path for router routes (showBasePath is true in url config).
  */
 const StorefrontPreview = ({
   children,
   enabled = true,
   getToken,
-  onContextChange
+  onContextChange,
+  getBasePath
 }) => {
   const history = (0, _reactRouterDom.useHistory)();
   const isHostTrusted = (0, _utils.detectStorefrontPreview)();
@@ -47,11 +99,14 @@ const StorefrontPreview = ({
         onContextChange,
         siteId,
         experimentalUnsafeNavigate: (path, action = 'push', ...args) => {
-          history[action](path, ...args);
+          const basePath = (getBasePath === null || getBasePath === void 0 ? void 0 : getBasePath()) ?? '';
+          const normalizedPath = normalizePwaKitPath(path);
+          const pathWithoutBase = removeBasePathFromLocation(normalizedPath, basePath);
+          history[action](pathWithoutBase, ...args);
         }
       });
     }
-  }, [enabled, getToken, onContextChange, siteId]);
+  }, [enabled, getToken, onContextChange, siteId, getBasePath]);
   (0, _react.useEffect)(() => {
     if (enabled && isHostTrusted) {
       // In Storefront Preview mode, add cache breaker for all SCAPI's requests.
@@ -85,6 +140,7 @@ 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: _utils.CustomPropTypes.requiredFunctionWhenEnabled,
-  onContextChange: _propTypes.default.func
+  onContextChange: _propTypes.default.func,
+  getBasePath: _propTypes.default.func
 };
 var _default = exports.default = StorefrontPreview;

package/components/StorefrontPreview/utils.js

@@ -30,9 +30,7 @@ const detectStorefrontPreview = () => {
 exports.detectStorefrontPreview = detectStorefrontPreview;
 const getClientScript = () => {
   const parentOrigin = (0, _utils.getParentOrigin)() ?? 'https://runtime.commercecloud.com';
-  return parentOrigin === _utils.DEVELOPMENT_ORIGIN
-  // TODO: This will need to be updated to support base paths with storefront preview
-  ? `${parentOrigin}${LOCAL_BUNDLE_PATH}/static/storefront-preview.js` : `${parentOrigin}/cc/b2c/preview/preview.client.js`;
+  return parentOrigin === _utils.DEVELOPMENT_ORIGIN ? `${parentOrigin}${LOCAL_BUNDLE_PATH}/static/storefront-preview.js` : `${parentOrigin}/cc/b2c/preview/preview.client.js`;
 };
 
 // Custom Prop Types.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/commerce-sdk-react",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "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",
     "@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",
     "jsonwebtoken": "^9.0.0",
     "nock": "^13.3.0",
     "nodemon": "^2.0.22",
@@ -97,5 +97,5 @@
   "publishConfig": {
     "directory": "dist"
   },
-  "gitHead": "6d0cfd2308b9f25d8badd722469074889bd3b891"
+  "gitHead": "d09ed57f84432913ab3e55e3073802d319c5dc3c"
 }