@salesforce/retail-react-app 10.2.0-preview.0 → 10.2.1-preview.0

package/CHANGELOG.md

@@ -1,4 +1,7 @@
-## v10.2.0-preview.0 (Aug 07, 2026)
+## v10.2.1-preview.0
+- [Bugfix] Keep the Page Designer preview URL bar synchronized with client-side navigation. The storefront now parses the exact `mode` query parameter, and the Page Designer initializer emits `notifyClientRouteChanged(url)` after the preview channel is connected whenever the SPA route changes. Bumps `@salesforce/storefront-next-runtime` to `1.3.1`. [#4021](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/4021)
+
+## v10.2.0 (Aug 12, 2026)
 - [Bugfix] Fix the Data Cloud recommender catalog event field name: `personalizationContextId` → `personalizationContentId`. The official `@salesforce/cc-datacloud-typescript` SDK type and Salesforce docs both define `personalizationContentId` (Content); the `Context` spelling did not match, so the recommender UUID (`__recoUUID`) was sent under a key Data Cloud does not recognize and is expected to be dropped on ingest.
 - [Feature] Add `cc_showFab` for the Commerce Client shopper-agent widget: when `'true'`, renders a floating action button at `cc_widgetPosition` that opens the agent panel and hides while it is open. Defaults to `'false'`.
 - [Bugfix] Honor `cc_dialogFullHeight: 'false'`, which was previously dropped from the widget options so the bundle's full-height default always won.
@@ -581,4 +584,4 @@ The versions published below were not published on npm, and the versioning match
 
 ### v1.0.0 (Sep 08, 2021)
 
-- PWA Kit General Availability and open source. 🎉
+- PWA Kit General Availability and open source. 🎉

package/app/components/_app/index.jsx

@@ -179,8 +179,9 @@ const App = (props) => {
     // Determine Page Designer mode from URL - use req for server-side detection
     const pageDesignerMode = useMemo(() => {
         const queryParams = location?.search || ''
-        if (queryParams.includes('mode=EDIT')) return 'EDIT'
-        else if (queryParams.includes('mode=PREVIEW')) return 'PREVIEW'
+        const mode = new URLSearchParams(queryParams).get('mode')
+        if (mode === 'EDIT') return 'EDIT'
+        if (mode === 'PREVIEW') return 'PREVIEW'
         return undefined
     }, [req?.url])
 

package/app/components/page-designer-init/index.jsx

@@ -6,10 +6,11 @@
  */
 
 import React, {useEffect} from 'react'
-import {Prompt} from 'react-router-dom'
+import {Prompt, useLocation} from 'react-router-dom'
 import {
     usePageDesignerMode,
-    useGlobalAnchorBlock
+    useGlobalAnchorBlock,
+    usePreviewContext
 } from '@salesforce/commerce-sdk-react/page-designer'
 import {getAssetUrl} from '@salesforce/pwa-kit-react-sdk/ssr/universal/utils'
 
@@ -55,6 +56,8 @@ import {getAssetUrl} from '@salesforce/pwa-kit-react-sdk/ssr/universal/utils'
  */
 export function PageDesignerInit() {
     const {isDesignMode} = usePageDesignerMode()
+    const {pathname, search, hash} = useLocation()
+    const {notifyClientRouteChanged, isConnected} = usePreviewContext()
 
     // Block anchor navigation when in design mode
     // Pass isDesignMode to control when navigation blocking is active
@@ -81,6 +84,18 @@ export function PageDesignerInit() {
         return () => link.remove()
     }, [isDesignMode])
 
+    // Push client-side route changes back to Business Manager so the preview URL bar
+    // tracks navigation. Gated on isConnected so we don't emit before the messaging
+    // channel handshake completes.
+    useEffect(() => {
+        if (!isConnected) return
+        const url =
+            typeof window !== 'undefined'
+                ? `${window.location.origin}${pathname}${search || ''}${hash || ''}`
+                : `${pathname}${search || ''}${hash || ''}`
+        notifyClientRouteChanged(url)
+    }, [pathname, search, hash, isConnected, notifyClientRouteChanged])
+
     // When the message function returns false, navigation is completely blocked (no dialog shown)
     return (
         <React.Fragment>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/retail-react-app",
-  "version": "10.2.0-preview.0",
+  "version": "10.2.1-preview.0",
   "license": "See license in LICENSE",
   "author": "cc-pwa-kit@salesforce.com",
   "ccExtensibility": {
@@ -46,11 +46,11 @@
     "@loadable/component": "^5.15.3",
     "@peculiar/webcrypto": "^1.4.2",
     "@salesforce/cc-datacloud-typescript": "1.1.2",
-    "@salesforce/commerce-sdk-react": "5.4.0-preview.0",
-    "@salesforce/pwa-kit-dev": "3.20.0-preview.0",
-    "@salesforce/pwa-kit-react-sdk": "3.20.0-preview.0",
-    "@salesforce/pwa-kit-runtime": "3.20.0-preview.0",
-    "@salesforce/storefront-next-runtime": "0.4.2",
+    "@salesforce/commerce-sdk-react": "5.4.1-preview.0",
+    "@salesforce/pwa-kit-dev": "3.20.0",
+    "@salesforce/pwa-kit-react-sdk": "3.20.0",
+    "@salesforce/pwa-kit-runtime": "3.20.0",
+    "@salesforce/storefront-next-runtime": "1.3.1",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-query-devtools": "^4.29.1",
     "@testing-library/dom": "^9.0.1",
@@ -111,8 +111,8 @@
     },
     {
       "path": "build/vendor.js",
-      "maxSize": "400 kB"
+      "maxSize": "402 kB"
     }
   ],
-  "gitHead": "63b3848e2c46b8e1ca540f8c80e7f9d96a4a7cb9"
+  "gitHead": "8f31e6fea2071d0cf04b8ff2f5071c75f69bbf0a"
 }