[Storefront Preview] - 3P CDN, add search parameters to be returned on context refresh (#1478)

* added new prop to storefront preview component to accept qs search params to append on context change refresh

* added text for new storefront preview prop

* code review updates

* updating test

* added getAdditionalSearchParams to the dependency array

* renaming getAdditionalSearchParams to additionalSearchParams since it will be a static array

* adding reloadServerSide prop to force a server-side refresh

* renaming props to experimental unsafe as this API will be removed in the future and should be used for experimental use only

* updated refresh to use replace, updated test cases

* tweaks to get test coverage up 0.1%

* lint

---------

Co-authored-by: Adam Raya Navarro <arayanavarro@salesforce.com>

Author: sandragolden

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

@@ -39,6 +39,19 @@ const Refresh = () => {
                 console.warn('Could not find `referrer` search param - redirecting to home page.')
                 referrer = '/'
             }
+
+            // if experimentalUnsafeReloadServerSide is true, reload the page on server side
+            const experimentalUnsafeReloadServerSide = new URLSearchParams(location.search).get(
+                'experimentalUnsafeReloadServerSide'
+            )
+            if (experimentalUnsafeReloadServerSide === 'true') {
+                console.warn(
+                    '"experimentalUnsafeReloadServerSide" was set to true - reloading page on server side'
+                )
+                window.location.replace(referrer)
+                return
+            }
+
             history.replace(referrer)
         }
         refetchData()

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

@@ -64,3 +64,39 @@ test('navigate to homepage if `referrer` search param cannot be found in the pag
     expect(console.warn).toHaveBeenCalled()
     expect(useHistory().replace).toHaveBeenCalledWith('/')
 })
+
+test('hard refresh to the referrer should occur', async () => {
+    // Delete the real properties from window, so we can mock them
+    delete window.location
+    window.location = {replace: jest.fn()}
+
+    jest.spyOn(console, 'warn')
+
+    useLocation.mockImplementationOnce(() => ({
+        search: `?referrer=${referrerURL}&experimentalUnsafeReloadServerSide=true`
+    }))
+    mount(<Refresh />)
+    jest.runAllTimers()
+    await runAllPromises()
+
+    expect(console.warn).toHaveBeenCalled()
+    expect(window.location.replace).toHaveBeenCalled()
+})
+
+test('hard refresh to the referrer should not occur', async () => {
+    // Delete the real properties from window, so we can mock them
+    delete window.location
+    window.location = {replace: jest.fn()}
+
+    jest.spyOn(console, 'warn')
+
+    useLocation.mockImplementationOnce(() => ({
+        search: `?referrer=${referrerURL}`
+    }))
+    mount(<Refresh />)
+    jest.runAllTimers()
+    await runAllPromises()
+
+    expect(console.warn).not.toHaveBeenCalled()
+    expect(window.location.replace).not.toHaveBeenCalled()
+})

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

@@ -15,8 +15,16 @@ import {useHistory} from 'react-router-dom'
  *
  * @param {boolean} enabled - flag to turn on/off Storefront Preview feature
  * @param  {function(): string | Promise<string>} getToken - A method that returns the access token for the current user
+ * @param  {Array} experimentalUnsafeAdditionalSearchParams - An array of key/value search params to add when context changes
+ * @param  {boolean} experimentalUnsafeReloadServerSide - if true, will reload the page on server side when context changes
  */
-export const StorefrontPreview = ({children, enabled = true, getToken}) => {
+export const StorefrontPreview = ({
+    children,
+    enabled = true,
+    getToken,
+    experimentalUnsafeAdditionalSearchParams = [],
+    experimentalUnsafeReloadServerSide
+}) => {
     const history = useHistory()
     const isHostTrusted = detectStorefrontPreview()
 
@@ -25,13 +33,19 @@ export const StorefrontPreview = ({children, enabled = true, getToken}) => {
             window.STOREFRONT_PREVIEW = {
                 ...window.STOREFRONT_PREVIEW,
                 getToken,
-                navigate: (path, action = 'push', ...args) => {
+                experimentalUnsafeNavigate: (path, action = 'push', ...args) => {
                     history[action](path, ...args)
-                }
+                },
+                experimentalUnsafeAdditionalSearchParams,
+                experimentalUnsafeReloadServerSide
             }
         }
-    }, [enabled, getToken])
-
+    }, [
+        enabled,
+        getToken,
+        experimentalUnsafeAdditionalSearchParams,
+        experimentalUnsafeReloadServerSide
+    ])
     return (
         <>
             {enabled && isHostTrusted && (
@@ -50,7 +64,8 @@ export const StorefrontPreview = ({children, enabled = true, getToken}) => {
 }
 
 StorefrontPreview.defaultProps = {
-    enabled: true
+    enabled: true,
+    experimentalUnsafeReloadServerSide: false
 }
 
 StorefrontPreview.propTypes = {
@@ -66,7 +81,9 @@ StorefrontPreview.propTypes = {
                 `${propName} is a required function for ${componentName} when enabled is true`
             )
         }
-    }
+    },
+    experimentalUnsafeAdditionalSearchParams: PropTypes.array,
+    experimentalUnsafeReloadServerSide: PropTypes.bool
 }
 
 export default StorefrontPreview

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

@@ -104,17 +104,68 @@ describe('Storefront Preview Component', function () {
 
         mount(<StorefrontPreview getToken={() => 'my-token'} />)
         expect(window.STOREFRONT_PREVIEW.getToken).toBeDefined()
-        expect(window.STOREFRONT_PREVIEW.navigate).toBeDefined()
+        expect(window.STOREFRONT_PREVIEW.experimentalUnsafeNavigate).toBeDefined()
+        expect(window.STOREFRONT_PREVIEW.experimentalUnsafeAdditionalSearchParams).toBeDefined()
+        expect(window.STOREFRONT_PREVIEW.experimentalUnsafeReloadServerSide).toBeDefined()
     })
 
-    test('window.STOREFRONT_PREVIEW.navigate', () => {
+    test('window.STOREFRONT_PREVIEW.experimentalUnsafeNavigate', () => {
         detectStorefrontPreview.mockReturnValue(true)
         mount(<StorefrontPreview getToken={() => 'my-token'} />)
 
-        window.STOREFRONT_PREVIEW.navigate('/', 'replace')
+        window.STOREFRONT_PREVIEW.experimentalUnsafeNavigate('/', 'replace')
         expect(useHistory().replace).toHaveBeenCalledWith('/')
 
-        window.STOREFRONT_PREVIEW.navigate('/')
+        window.STOREFRONT_PREVIEW.experimentalUnsafeNavigate('/')
         expect(useHistory().push).toHaveBeenCalledWith('/')
     })
+
+    test('window.STOREFRONT_PREVIEW.experimentalUnsafeAdditionalSearchParams', async () => {
+        detectStorefrontPreview.mockReturnValue(true)
+
+        const getSearchParamsToAdd = () => {
+            return [
+                {
+                    name: 'vse',
+                    value: 'my-custom-vse-{{effectiveDateTimeUnix}}.staging.content.io'
+                },
+                {
+                    name: 'vse-timestamp',
+                    value: '{{effectiveDateTimeUnix}}'
+                }
+            ]
+        }
+
+        mount(
+            <StorefrontPreview
+                getToken={() => 'my-token'}
+                experimentalUnsafeAdditionalSearchParams={getSearchParamsToAdd()}
+            />
+        )
+        expect(window.STOREFRONT_PREVIEW.experimentalUnsafeAdditionalSearchParams).toBeDefined()
+        expect(window.STOREFRONT_PREVIEW.experimentalUnsafeAdditionalSearchParams.length).toBe(
+            getSearchParamsToAdd().length
+        )
+    })
+
+    test('window.STOREFRONT_PREVIEW.experimentalUnsafeReloadServerSide to be false', async () => {
+        detectStorefrontPreview.mockReturnValue(true)
+
+        mount(<StorefrontPreview getToken={() => 'my-token'} />)
+        expect(window.STOREFRONT_PREVIEW.experimentalUnsafeReloadServerSide).toBeDefined()
+        expect(window.STOREFRONT_PREVIEW.experimentalUnsafeReloadServerSide).toBe(false)
+    })
+
+    test('window.STOREFRONT_PREVIEW.experimentalUnsafeReloadServerSide to be true', async () => {
+        detectStorefrontPreview.mockReturnValue(true)
+
+        mount(
+            <StorefrontPreview
+                getToken={() => 'my-token'}
+                experimentalUnsafeReloadServerSide={true}
+            />
+        )
+        expect(window.STOREFRONT_PREVIEW.experimentalUnsafeReloadServerSide).toBeDefined()
+        expect(window.STOREFRONT_PREVIEW.experimentalUnsafeReloadServerSide).toBe(true)
+    })
 })