V2 Storefront Preview add siteId query parameter to shopper context calls (@W-15976653@) (#1876)

* Add siteId from getConfig

* Add getConfig docs & tests

* clean up

* lint

Author: adamraya

packages/pwa-kit-react-sdk/CHANGELOG.md

@@ -1,3 +1,6 @@
+## v2.8.4 (Apr 09, 2024)
+-   Updated StorefrontPreview component to make siteId available [#1876](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1876)
+
 ## v2.8.3 (Apr 09, 2024)
 ## v2.8.2 (Dec 01, 2023)
 ## v2.8.1 (Nov 08, 2023)

packages/pwa-kit-react-sdk/src/ssr/universal/components/storefront-preview/index.jsx

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types'
 import {Helmet} from 'react-helmet'
 import {detectStorefrontPreview, getClientScript} from './utils'
 import {useHistory} from 'react-router-dom'
+import {getConfig} from 'pwa-kit-runtime/utils/ssr-config'
 
 /**
  *
@@ -28,11 +29,18 @@ export const StorefrontPreview = ({
     const history = useHistory()
     const isHostTrusted = detectStorefrontPreview()
 
+    // The result of getConfig is a mutable object. When it is changed, it affects subsequent calls of getConfig.
+    // Inside the render, we update the configuration object with the current siteId. This change gets serialized
+    // and placed in the DOM. We should be aware that the mutable behavior could introduce potential bugs.
+    const {app} = getConfig()
+    const siteId = app.commerceAPI.parameters.siteId
+
     useEffect(() => {
         if (enabled && isHostTrusted) {
             window.STOREFRONT_PREVIEW = {
                 ...window.STOREFRONT_PREVIEW,
                 getToken,
+                siteId,
                 experimentalUnsafeNavigate: (path, action = 'push', ...args) => {
                     history[action](path, ...args)
                 },
@@ -43,6 +51,7 @@ export const StorefrontPreview = ({
     }, [
         enabled,
         getToken,
+        siteId,
         experimentalUnsafeAdditionalSearchParams,
         experimentalUnsafeReloadServerSide
     ])

packages/pwa-kit-react-sdk/src/ssr/universal/components/storefront-preview/index.test.js

@@ -10,6 +10,7 @@ import {StorefrontPreview} from './index'
 import {detectStorefrontPreview} from './utils'
 import {Helmet} from 'react-helmet'
 import {useHistory} from 'react-router-dom'
+import {getConfig} from 'pwa-kit-runtime/utils/ssr-config'
 
 jest.mock('./utils', () => {
     const origin = jest.requireActual('./utils')
@@ -30,17 +31,28 @@ jest.mock('react-router-dom', () => {
     }
 })
 
+jest.mock('pwa-kit-runtime/utils/ssr-config', () => ({
+    getConfig: jest.fn()
+}))
+
 describe('Storefront Preview Component', function () {
     const oldWindow = window
 
     beforeEach(() => {
         // eslint-disable-next-line
         window = {...oldWindow}
+
+        getConfig.mockReturnValue({
+            app: {
+                commerceAPI: {proxyPath: '/mobify/proxy/api', parameters: {siteId: 'site-id'}}
+            }
+        })
     })
 
     afterEach(() => {
         // eslint-disable-next-line
         window = oldWindow
+        jest.resetAllMocks()
     })
 
     test('Renders children when enabled', async () => {
@@ -104,20 +116,26 @@ describe('Storefront Preview Component', function () {
 
         mount(<StorefrontPreview getToken={() => 'my-token'} />)
         expect(window.STOREFRONT_PREVIEW.getToken).toBeDefined()
+        expect(window.STOREFRONT_PREVIEW.siteId).toBeDefined()
         expect(window.STOREFRONT_PREVIEW.experimentalUnsafeNavigate).toBeDefined()
         expect(window.STOREFRONT_PREVIEW.experimentalUnsafeAdditionalSearchParams).toBeDefined()
         expect(window.STOREFRONT_PREVIEW.experimentalUnsafeReloadServerSide).toBeDefined()
     })
 
     test('window.STOREFRONT_PREVIEW.experimentalUnsafeNavigate', () => {
         detectStorefrontPreview.mockReturnValue(true)
+        const replace = jest.fn()
+        const push = jest.fn()
+
+        useHistory.mockReturnValue({replace, push})
+
         mount(<StorefrontPreview getToken={() => 'my-token'} />)
 
         window.STOREFRONT_PREVIEW.experimentalUnsafeNavigate('/', 'replace')
-        expect(useHistory().replace).toHaveBeenCalledWith('/')
+        expect(replace).toHaveBeenCalledWith('/')
 
         window.STOREFRONT_PREVIEW.experimentalUnsafeNavigate('/')
-        expect(useHistory().push).toHaveBeenCalledWith('/')
+        expect(push).toHaveBeenCalledWith('/')
     })
 
     test('window.STOREFRONT_PREVIEW.experimentalUnsafeAdditionalSearchParams', async () => {