[v3] Fix StorefrontPreview component add siteId query parameter to shopper context calls (@W-16225140@) (#1891)

* Add siteId from useConfig

* Bump versions

Author: adamraya

packages/commerce-sdk-react/CHANGELOG.md

@@ -1,3 +1,6 @@
+## v2.0.2 (Jul 12, 2024)
+- Updated StorefrontPreview component to make siteId available [#1874](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1874)
+
 ## v2.0.1 (Jul 08, 2024)
 - Fix private slas proxy config for commerce api in provider [#1883](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1883)
 - Fix `useCustomQuery` error handling [#1883](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1883)

packages/commerce-sdk-react/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/commerce-sdk-react",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "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": {

packages/commerce-sdk-react/package.json

@@ -10,7 +10,7 @@ import StorefrontPreview from './storefront-preview'
 import {detectStorefrontPreview} from './utils'
 import {Helmet} from 'react-helmet'
 import {mockQueryEndpoint, renderWithProviders} from '../../test-utils'
-import {useCommerceApi} from '../../hooks'
+import {useCommerceApi, useConfig} from '../../hooks'
 
 declare global {
     interface Window {
@@ -26,10 +26,13 @@ jest.mock('./utils', () => {
     }
 })
 jest.mock('../../auth/index.ts')
+jest.mock('../../hooks/useConfig', () => jest.fn())
 
 describe('Storefront Preview Component', function () {
     beforeEach(() => {
         delete window.STOREFRONT_PREVIEW
+        ;(useConfig as jest.Mock).mockReturnValue({siteId: 'site-id'})
+
     })
     afterEach(() => {
         jest.restoreAllMocks()
@@ -101,6 +104,7 @@ describe('Storefront Preview Component', function () {
         )
         expect(window.STOREFRONT_PREVIEW?.getToken).toBeDefined()
         expect(window.STOREFRONT_PREVIEW?.onContextChange).toBeDefined()
+        expect(window.STOREFRONT_PREVIEW?.siteId).toBeDefined()
         expect(window.STOREFRONT_PREVIEW?.experimentalUnsafeNavigate).toBeDefined()
     })
 

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

@@ -11,7 +11,7 @@ import {Helmet} from 'react-helmet'
 import {CustomPropTypes, detectStorefrontPreview, getClientScript, proxyRequests} from './utils'
 import {useHistory} from 'react-router-dom'
 import type {LocationDescriptor} from 'history'
-import {useCommerceApi} from '../../hooks'
+import {useCommerceApi, useConfig} from '../../hooks'
 
 type GetToken = () => string | undefined | Promise<string | undefined>
 type ContextChangeHandler = () => void | Promise<void>
@@ -35,13 +35,15 @@ export const StorefrontPreview = ({
     const history = useHistory()
     const isHostTrusted = detectStorefrontPreview()
     const apiClients = useCommerceApi()
+    const {siteId} = useConfig()
 
     useEffect(() => {
         if (enabled && isHostTrusted) {
             window.STOREFRONT_PREVIEW = {
                 ...window.STOREFRONT_PREVIEW,
                 getToken,
                 onContextChange,
+                siteId,
                 experimentalUnsafeNavigate: (
                     path: LocationDescriptor<unknown>,
                     action: 'push' | 'replace' = 'push',
@@ -51,7 +53,7 @@ export const StorefrontPreview = ({
                 }
             }
         }
-    }, [enabled, getToken, onContextChange])
+    }, [enabled, getToken, onContextChange, siteId])
 
     useEffect(() => {
         if (enabled && isHostTrusted) {

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

@@ -23,5 +23,6 @@ export {default as useEncUserId} from './useEncUserId'
 export {default as useUsid} from './useUsid'
 export {default as useCustomerId} from './useCustomerId'
 export {default as useCustomerType} from './useCustomerType'
+export {default as useConfig} from './useConfig'
 export {useCustomQuery} from './useQuery'
 export {useCustomMutation} from './useMutation'

packages/commerce-sdk-react/src/hooks/index.ts

@@ -1,3 +1,9 @@
+## v3.0.2 (Jul 11, 2024)
+
+### Bug Fixes
+
+- Fix StorefrontPreview component add siteId query parameter to shopper context calls [#1891](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1891)
+
 ## v3.0.1 (Jul 9, 2024)
 
 ### Bug Fixes 

packages/template-retail-react-app/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/retail-react-app",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "license": "See license in LICENSE",
   "author": "cc-pwa-kit@salesforce.com",
   "ccExtensibility": {
@@ -45,7 +45,7 @@
     "@lhci/cli": "^0.11.0",
     "@loadable/component": "^5.15.3",
     "@peculiar/webcrypto": "^1.4.2",
-    "@salesforce/commerce-sdk-react": "2.0.1",
+    "@salesforce/commerce-sdk-react": "2.0.2",
     "@salesforce/pwa-kit-dev": "3.6.0",
     "@salesforce/pwa-kit-react-sdk": "3.6.0",
     "@salesforce/pwa-kit-runtime": "3.6.0",

packages/template-retail-react-app/package-lock.json

@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "@loadable/component": "^5.15.3",
-    "@salesforce/commerce-sdk-react": "2.0.1",
+    "@salesforce/commerce-sdk-react": "2.0.2",
     "@salesforce/pwa-kit-dev": "3.6.0",
     "@salesforce/pwa-kit-react-sdk": "3.6.0",
     "@salesforce/pwa-kit-runtime": "3.6.0",