From 2164c3ad2b6b14c459bc7e65b31556f36365af25 Mon Sep 17 00:00:00 2001 From: Joel Uong Date: Tue, 5 Dec 2023 12:19:18 -0500 Subject: [PATCH 1/3] revert changes from #1527 --- packages/commerce-sdk-react/CHANGELOG.md | 1 - .../storefront-preview.test.tsx | 8 ----- .../StorefrontPreview/storefront-preview.tsx | 34 +++++++++++-------- .../src/components/StorefrontPreview/utils.ts | 25 -------------- packages/commerce-sdk-react/src/constant.ts | 6 ++-- 5 files changed, 22 insertions(+), 52 deletions(-) diff --git a/packages/commerce-sdk-react/CHANGELOG.md b/packages/commerce-sdk-react/CHANGELOG.md index 2793620076..87c4263164 100644 --- a/packages/commerce-sdk-react/CHANGELOG.md +++ b/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) diff --git a/packages/commerce-sdk-react/src/components/StorefrontPreview/storefront-preview.test.tsx b/packages/commerce-sdk-react/src/components/StorefrontPreview/storefront-preview.test.tsx index 1214859aeb..656dc41f10 100644 --- a/packages/commerce-sdk-react/src/components/StorefrontPreview/storefront-preview.test.tsx +++ b/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( 'my-token'} onContextChange={() => undefined} />) - expect(window.STOREFRONT_PREVIEW.onContextChange).toBeDefined() - }) - test('experimental unsafe props are defined', () => { expect(window.STOREFRONT_PREVIEW.experimentalUnsafeNavigate).toBeDefined() }) diff --git a/packages/commerce-sdk-react/src/components/StorefrontPreview/storefront-preview.tsx b/packages/commerce-sdk-react/src/components/StorefrontPreview/storefront-preview.tsx index 9227ea28c1..cac75ce6d6 100644 --- a/packages/commerce-sdk-react/src/components/StorefrontPreview/storefront-preview.tsx +++ b/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 -type ContextChangeHandler = () => void | Promise -type OptionalWhenDisabled = ({enabled?: true} & T) | ({enabled: false} & Partial) /** * @@ -25,21 +23,19 @@ type OptionalWhenDisabled = ({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, 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 diff --git a/packages/commerce-sdk-react/src/components/StorefrontPreview/utils.ts b/packages/commerce-sdk-react/src/components/StorefrontPreview/utils.ts index e2f789e02a..1b5442b5c7 100644 --- a/packages/commerce-sdk-react/src/components/StorefrontPreview/utils.ts +++ b/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` - ) - } - } -} \ No newline at end of file diff --git a/packages/commerce-sdk-react/src/constant.ts b/packages/commerce-sdk-react/src/constant.ts index 4faa865a70..ec275d81a9 100644 --- a/packages/commerce-sdk-react/src/constant.ts +++ b/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' ]) From 2ca577095532641cc20cb48331ca0a15de78064f Mon Sep 17 00:00:00 2001 From: Joel Uong Date: Wed, 6 Dec 2023 09:35:37 -0500 Subject: [PATCH 2/3] Revert "revert changes from #1527" This reverts commit 2164c3ad2b6b14c459bc7e65b31556f36365af25. --- packages/commerce-sdk-react/CHANGELOG.md | 1 + .../storefront-preview.test.tsx | 8 +++++ .../StorefrontPreview/storefront-preview.tsx | 34 ++++++++----------- .../src/components/StorefrontPreview/utils.ts | 25 ++++++++++++++ packages/commerce-sdk-react/src/constant.ts | 6 ++-- 5 files changed, 52 insertions(+), 22 deletions(-) diff --git a/packages/commerce-sdk-react/CHANGELOG.md b/packages/commerce-sdk-react/CHANGELOG.md index 87c4263164..2793620076 100644 --- a/packages/commerce-sdk-react/CHANGELOG.md +++ b/packages/commerce-sdk-react/CHANGELOG.md @@ -1,4 +1,5 @@ ## 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) diff --git a/packages/commerce-sdk-react/src/components/StorefrontPreview/storefront-preview.test.tsx b/packages/commerce-sdk-react/src/components/StorefrontPreview/storefront-preview.test.tsx index 656dc41f10..1214859aeb 100644 --- a/packages/commerce-sdk-react/src/components/StorefrontPreview/storefront-preview.test.tsx +++ b/packages/commerce-sdk-react/src/components/StorefrontPreview/storefront-preview.test.tsx @@ -99,6 +99,14 @@ 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( 'my-token'} onContextChange={() => undefined} />) + expect(window.STOREFRONT_PREVIEW.onContextChange).toBeDefined() + }) + test('experimental unsafe props are defined', () => { expect(window.STOREFRONT_PREVIEW.experimentalUnsafeNavigate).toBeDefined() }) diff --git a/packages/commerce-sdk-react/src/components/StorefrontPreview/storefront-preview.tsx b/packages/commerce-sdk-react/src/components/StorefrontPreview/storefront-preview.tsx index cac75ce6d6..9227ea28c1 100644 --- a/packages/commerce-sdk-react/src/components/StorefrontPreview/storefront-preview.tsx +++ b/packages/commerce-sdk-react/src/components/StorefrontPreview/storefront-preview.tsx @@ -8,11 +8,13 @@ import React, {useEffect} from 'react' import PropTypes from 'prop-types' import {Helmet} from 'react-helmet' -import {detectStorefrontPreview, getClientScript} from './utils' +import {CustomPropTypes, detectStorefrontPreview, getClientScript} from './utils' import {useHistory} from 'react-router-dom' import type {LocationDescriptor} from 'history' type GetToken = () => string | undefined | Promise +type ContextChangeHandler = () => void | Promise +type OptionalWhenDisabled = ({enabled?: true} & T) | ({enabled: false} & Partial) /** * @@ -23,19 +25,21 @@ type GetToken = () => string | undefined | Promise export const StorefrontPreview = ({ children, enabled = true, - getToken + getToken, + onContextChange }: React.PropsWithChildren< - // getToken is required unless enabled is false - {enabled?: true; getToken: GetToken} | {enabled: false; getToken?: GetToken} + // Props are only required when Storefront Preview is enabled + OptionalWhenDisabled<{getToken: GetToken; onContextChange?: ContextChangeHandler}> >) => { const history = useHistory() const isHostTrusted = detectStorefrontPreview() - + useEffect(() => { if (enabled && isHostTrusted) { window.STOREFRONT_PREVIEW = { ...window.STOREFRONT_PREVIEW, getToken, + onContextChange, experimentalUnsafeNavigate: ( path: LocationDescriptor, action: 'push' | 'replace' = 'push', @@ -45,7 +49,7 @@ export const StorefrontPreview = ({ } } } - }, [enabled, getToken]) + }, [enabled, getToken, onContextChange]) return ( <> @@ -67,19 +71,11 @@ 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. - 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` - ) - } - } + // 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 } export default StorefrontPreview diff --git a/packages/commerce-sdk-react/src/components/StorefrontPreview/utils.ts b/packages/commerce-sdk-react/src/components/StorefrontPreview/utils.ts index 1b5442b5c7..e2f789e02a 100644 --- a/packages/commerce-sdk-react/src/components/StorefrontPreview/utils.ts +++ b/packages/commerce-sdk-react/src/components/StorefrontPreview/utils.ts @@ -24,3 +24,28 @@ 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` + ) + } + } +} \ No newline at end of file diff --git a/packages/commerce-sdk-react/src/constant.ts b/packages/commerce-sdk-react/src/constant.ts index ec275d81a9..4faa865a70 100644 --- a/packages/commerce-sdk-react/src/constant.ts +++ b/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([ - 'runtime.commercecloud.com', - 'runtime-admin-staging.mobify-storefront.com', - 'runtime-admin-preview.mobify-storefront.com' + 'https://runtime.commercecloud.com', + 'https://runtime-admin-staging.mobify-storefront.com', + 'https://runtime-admin-preview.mobify-storefront.com' ]) From a2b36e952f9253e96bb0b3058cf9c33541b2c88e Mon Sep 17 00:00:00 2001 From: Joel Uong Date: Wed, 6 Dec 2023 09:43:17 -0500 Subject: [PATCH 3/3] update changelog --- packages/commerce-sdk-react/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/commerce-sdk-react/CHANGELOG.md b/packages/commerce-sdk-react/CHANGELOG.md index 2793620076..7347040339 100644 --- a/packages/commerce-sdk-react/CHANGELOG.md +++ b/packages/commerce-sdk-react/CHANGELOG.md @@ -1,5 +1,5 @@ ## v1.2.0-preview.0 (Nov 30, 2023) -- Add StorefrontPreview component 'onContextChange' property. [#1527](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1527) +- Add StorefrontPreview component 'onContextChange' property to prepare for future Storefront Preview release [#1527](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1527) ## v1.1.0 (Nov 03, 2023)