@W-14016114: Move Storefront Preview Set up to the SDK

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

@@ -6,9 +6,10 @@
  */
 
 /**
- * This list contain domains that can host code in iframe
+ * This list contains domains that can host code in iframe
  */
 export const IFRAME_HOST_ALLOW_LIST = [
     'runtime.commercecloud.com',
+    'runtime-admin-staging.mobify-storefront.com',
     'runtime-admin-preview.mobify-storefront.com'
 ]

packages/pwa-kit-react-sdk/src/ssr/server/react-rendering.js

@@ -18,7 +18,11 @@ import {StaticRouter as Router, matchPath} from 'react-router-dom'
 import serialize from 'serialize-javascript'
 
 import {getAssetUrl} from '../universal/utils'
-import {ServerContext, CorrelationIdProvider} from '../universal/contexts'
+import {
+    ServerContext,
+    CorrelationIdProvider,
+    PreviewStorefrontProvider
+} from '../universal/contexts'
 
 import Document from '../universal/components/_document'
 import App from '../universal/components/_app'

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

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types'
 import {Switch as RouterSwitch, Route} from 'react-router-dom'
 import AppErrorBoundary from '../app-error-boundary'
 import {UIDReset, UIDFork} from 'react-uid'
+import {StorefrontPreviewProvider} from '../../contexts'
 
 /**
  * The Switch component packages up the bits of rendering that are shared between
@@ -25,20 +26,22 @@ const Switch = (props) => {
         <UIDReset>
             <AppErrorBoundary error={error}>
                 {!error && (
-                    <App preloadedProps={appState.appProps}>
-                        <RouterSwitch>
-                            {routes.map((route, i) => {
-                                const {component: Component, ...routeProps} = route
-                                return (
-                                    <Route key={i} {...routeProps}>
-                                        <UIDFork>
-                                            <Component preloadedProps={appState.pageProps} />
-                                        </UIDFork>
-                                    </Route>
-                                )
-                            })}
-                        </RouterSwitch>
-                    </App>
+                    <StorefrontPreviewProvider>
+                        <App preloadedProps={appState.appProps}>
+                            <RouterSwitch>
+                                {routes.map((route, i) => {
+                                    const {component: Component, ...routeProps} = route
+                                    return (
+                                        <Route key={i} {...routeProps}>
+                                            <UIDFork>
+                                                <Component preloadedProps={appState.pageProps} />
+                                            </UIDFork>
+                                        </Route>
+                                    )
+                                })}
+                            </RouterSwitch>
+                        </App>
+                    </StorefrontPreviewProvider>
                 )}
             </AppErrorBoundary>
         </UIDReset>

packages/pwa-kit-react-sdk/src/ssr/universal/contexts/index.js

@@ -8,9 +8,13 @@
 import React, {useEffect, useRef} from 'react'
 import PropTypes from 'prop-types'
 import {useLocation} from 'react-router-dom'
+import {getClientScript, detectStorefrontPreview} from '../hooks/storefront-preview'
+import {Helmet} from 'react-helmet'
+import {isServer} from '@tanstack/react-query'
 
 const CorrelationIdContext = React.createContext()
 const ServerContext = React.createContext()
+const StorefrontPreviewContext = React.createContext()
 
 /**
  * This provider initializes the correlation id,
@@ -61,4 +65,21 @@ CorrelationIdProvider.propTypes = {
     location: PropTypes.object
 }
 
-export {CorrelationIdContext, CorrelationIdProvider, ServerContext}
+const StorefrontPreviewProvider = ({children}) => {
+    const enabled = detectStorefrontPreview()
+    return (
+        <StorefrontPreviewContext.Provider value={{}}>
+            {/*{!isServer && enabled && (*/}
+            {/*    <Helmet>*/}
+            {/*        <script src={getClientScript()} type="text/javascript"></script>*/}
+            {/*    </Helmet>*/}
+            {/*)}*/}
+            {children}
+        </StorefrontPreviewContext.Provider>
+    )
+}
+
+StorefrontPreviewProvider.propTypes = {
+    children: PropTypes.element.isRequired
+}
+export {CorrelationIdContext, CorrelationIdProvider, ServerContext, StorefrontPreviewProvider}

packages/pwa-kit-react-sdk/src/ssr/universal/hooks/index.js

@@ -42,3 +42,5 @@ export const useServerContext = () => {
 
     return serverContext
 }
+
+export {useStorefrontPreview} from './storefront-preview'

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

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+
+import {useEffect} from 'react'
+
+/** Origins that are allowed to run Storefront Preview. */
+const TRUSTED_ORIGINS = [
+    'https://runtime.commercecloud.com',
+    'https://runtime-admin-staging.mobify-storefront.com',
+    'https://runtime-admin-preview.mobify-storefront.com'
+]
+
+/** Origin used for local Runtime Admin. */
+const DEVELOPMENT_ORIGIN = 'http://localhost:4000'
+
+/** Detects whether the storefront is running in an iframe. */
+const detectInIframe = () => typeof window !== 'undefined' && window.parent !== window.self
+
+/** Gets the parent origin when running in an iframe. */
+const getParentOrigin = () => {
+    if (detectInIframe()) {
+        if (window.location.ancestorOrigins) return window.location.ancestorOrigins[0]
+        // ancestorOrigins does not exist in Firefox, so we use referrer as a fallback
+        if (document.referrer) return new URL(document.referrer).origin
+    }
+}
+
+const isParentOriginTrusted = (parentOrigin) => {
+    return window.location.hostname === 'localhost'
+        ? parentOrigin === DEVELOPMENT_ORIGIN // Development
+        : TRUSTED_ORIGINS.includes(parentOrigin) // Production
+}
+
+/** Detects whether the storefront is running in an iframe as part of Storefront Preview. */
+export const detectStorefrontPreview = () => {
+    const parentOrigin = getParentOrigin()
+    return Boolean(parentOrigin) && isParentOriginTrusted(parentOrigin)
+}
+
+/** Returns the URL to load the Storefront Preview client script from the parent origin. */
+export const getClientScript = () => {
+    const parentOrigin = getParentOrigin() ?? 'https://runtime.commercecloud.com'
+    return parentOrigin === DEVELOPMENT_ORIGIN
+        ? `${parentOrigin}/mobify/bundle/development/static/storefront-preview.js`
+        : `${parentOrigin}/cc/b2c/preview/preview.client.js`
+}

packages/template-retail-react-app/app/components/_app/index.jsx

@@ -6,9 +6,9 @@
  */
 
 import React, {useState, useEffect} from 'react'
-import {Helmet} from 'react-helmet'
 import PropTypes from 'prop-types'
 import {useHistory, useLocation} from 'react-router-dom'
+// import {useStorefrontPreview} from '@salesforce/pwa-kit-react-sdk/ssr/universal/hooks'
 import {getAssetUrl} from '@salesforce/pwa-kit-react-sdk/ssr/universal/utils'
 import {getAppOrigin} from '@salesforce/pwa-kit-react-sdk/utils/url'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
@@ -269,17 +269,8 @@ const App = (props) => {
         history.push(path)
     }
 
-    // Storefront Preview script. Your storefront needs to load this script for Storefront Preview feature
-    const storefrontPreviewClientScript =
-        process.env.NODE_ENV === 'development'
-            ? 'http://localhost:4000/mobify/bundle/development/static/storefront-preview.js'
-            : 'https://runtime.commercecloud.com/cc/b2c/preview/preview.client.js'
-
     return (
         <Box className="sf-app" {...styles.container}>
-            <Helmet>
-                <script src={storefrontPreviewClientScript} type="text/javascript"></script>
-            </Helmet>
             <IntlProvider
                 onError={(err) => {
                     if (!messages) {