@W-14544940@ Revert Storefront Preview changes from #1527 for release

packages/commerce-sdk-react/CHANGELOG.md

@@ -1,5 +1,4 @@
 ## v1.2.0-preview.0 (Nov 30, 2023)
-- Add StorefrontPreview component 'onContextChange' property.  [#1527](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1527)
 
 ## v1.1.0 (Nov 03, 2023)
 

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

@@ -99,14 +99,6 @@ describe('Storefront Preview Component', function () {
         expect(window.STOREFRONT_PREVIEW.getToken).toBeDefined()
     })
 
-    test('onContextChange is defined in window.STOREFRONT_PREVIEW when it is defined', () => {
-        window.STOREFRONT_PREVIEW = {}
-        ;(detectStorefrontPreview as jest.Mock).mockReturnValue(true)
-
-        render(<StorefrontPreview enabled={true} getToken={() => 'my-token'} onContextChange={() => undefined} />)
-        expect(window.STOREFRONT_PREVIEW.onContextChange).toBeDefined()
-    })
-
     test('experimental unsafe props are defined', () => {
         expect(window.STOREFRONT_PREVIEW.experimentalUnsafeNavigate).toBeDefined()
     })

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

@@ -8,13 +8,11 @@
 import React, {useEffect} from 'react'
 import PropTypes from 'prop-types'
 import {Helmet} from 'react-helmet'
-import {CustomPropTypes, detectStorefrontPreview, getClientScript} from './utils'
+import {detectStorefrontPreview, getClientScript} from './utils'
 import {useHistory} from 'react-router-dom'
 import type {LocationDescriptor} from 'history'
 
 type GetToken = () => string | undefined | Promise<string | undefined>
-type ContextChangeHandler = () => void | Promise<void>
-type OptionalWhenDisabled<T> = ({enabled?: true} & T) | ({enabled: false} & Partial<T>)
 
 /**
  *
@@ -25,21 +23,19 @@ type OptionalWhenDisabled<T> = ({enabled?: true} & T) | ({enabled: false} & Part
 export const StorefrontPreview = ({
     children,
     enabled = true,
-    getToken,
-    onContextChange
+    getToken
 }: React.PropsWithChildren<
-    // Props are only required when Storefront Preview is enabled
-    OptionalWhenDisabled<{getToken: GetToken; onContextChange?: ContextChangeHandler}>
+    // getToken is required unless enabled is false
+    {enabled?: true; getToken: GetToken} | {enabled: false; getToken?: GetToken}
 >) => {
     const history = useHistory()
     const isHostTrusted = detectStorefrontPreview()
- 
+
     useEffect(() => {
         if (enabled && isHostTrusted) {
             window.STOREFRONT_PREVIEW = {
                 ...window.STOREFRONT_PREVIEW,
                 getToken,
-                onContextChange,
                 experimentalUnsafeNavigate: (
                     path: LocationDescriptor<unknown>,
                     action: 'push' | 'replace' = 'push',
@@ -49,7 +45,7 @@ export const StorefrontPreview = ({
                 }
             }
         }
-    }, [enabled, getToken, onContextChange])
+    }, [enabled, getToken])
 
     return (
         <>
@@ -71,11 +67,19 @@ export const StorefrontPreview = ({
 StorefrontPreview.propTypes = {
     children: PropTypes.node,
     enabled: PropTypes.bool,
-    // A custom prop type function to only require this prop if enabled is true. Ultimately we would like
-    // 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: CustomPropTypes.requiredFunctionWhenEnabled,
-    onContextChange: PropTypes.func
+    // a custom prop type function to only require this prop if enabled is true.
+    getToken: function (props: any, propName: any, componentName: any) {
+        if (
+            props['enabled'] === true &&
+            (props[propName] === undefined || typeof props[propName] !== 'function')
+        ) {
+            return new Error(
+                `${String(propName)} is a required function for ${String(
+                    componentName
+                )} when enabled is true`
+            )
+        }
+    }
 }
 
 export default StorefrontPreview

packages/commerce-sdk-react/src/components/StorefrontPreview/utils.ts

@@ -24,28 +24,3 @@ export const getClientScript = () => {
         ? `${parentOrigin}/mobify/bundle/development/static/storefront-preview.js`
         : `${parentOrigin}/cc/b2c/preview/preview.client.js`
 }
-
-// Custom Prop Types.
-export const CustomPropTypes = {
-    /**
-     * This custom PropType ensures that the prop is only required when the known prop
-     * "enabled" is set to "true".
-     * 
-     * @param props 
-     * @param propName 
-     * @param componentName 
-     * @returns
-     */
-    requiredFunctionWhenEnabled: (props: any, propName: any, componentName: any) => {
-        if (
-            props['enabled'] === true &&
-            (props[propName] === undefined || typeof props[propName] !== 'function')
-        ) {
-            return new Error(
-                `${String(propName)} is a required function for ${String(
-                    componentName
-                )} when enabled is true`
-            )
-        }
-    }
-}

packages/commerce-sdk-react/src/constant.ts

@@ -9,7 +9,7 @@
  * This list contains domains that can host code in iframe
  */
 export const IFRAME_HOST_ALLOW_LIST = Object.freeze([
-    'https://runtime.commercecloud.com',
-    'https://runtime-admin-staging.mobify-storefront.com',
-    'https://runtime-admin-preview.mobify-storefront.com'
+    'runtime.commercecloud.com',
+    'runtime-admin-staging.mobify-storefront.com',
+    'runtime-admin-preview.mobify-storefront.com'
 ])