@W-14118931: Require getToken prop if enabled to true in StorefrontPr…

…eview Component (#1440) * require getToken prop if enabled to true
SalesforceCommerceCloud · Sep 19, 2023 · 034dbe6 · 034dbe6
1 parent 5449ff5
commit 034dbe6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/packages/pwa-kit-react-sdk/src/ssr/universal/components/storefront-preview/index.jsx b/packages/pwa-kit-react-sdk/src/ssr/universal/components/storefront-preview/index.jsx
@@ -12,8 +12,9 @@ import {detectStorefrontPreview, getClientScript} from './utils'
 
 /**
  *
- * @param {boolean} enabled - flag to turn on/off Storefront Preview feature
- * @param {{function():string}} getToken - a STOREFRONT_PREVIEW customised function that fetches token of storefront
+ * @param {boolean} enabled - flag to turn on/off Storefront Preview feature. By default, it is set to true.
+ * This flag only applies if storefront is ran in Runtime Admin iframe.
+ * @param {function(): string | Promise<string>} getToken - A method that returns the access token for the current user
  */
 export const StorefrontPreview = ({enabled = true, getToken}) => {
     let isHostTrusted
@@ -42,7 +43,21 @@ export const StorefrontPreview = ({enabled = true, getToken}) => {
     ) : null
 }
 
+StorefrontPreview.defaultProps = {
+    enabled: true
+}
+
 StorefrontPreview.propTypes = {
     enabled: PropTypes.bool,
-    getToken: PropTypes.func
+    // a custom prop type function to only require this prop if enabled is true.
+    getToken: function (props, propName, componentName) {
+        if (
+            props['enabled'] === true &&
+            (props[propName] === undefined || typeof props[propName] !== 'function')
+        ) {
+            return new Error(
+                `${propName} is a required function for ${componentName} when enabled is true`
+            )
+        }
+    }
 }
diff --git a/packages/template-retail-react-app/app/components/_app/index.jsx b/packages/template-retail-react-app/app/components/_app/index.jsx
@@ -113,7 +113,7 @@ const App = (props) => {
     const {children} = props
     const {data: categoriesTree} = useLazyLoadCategories()
     const categories = flatten(categoriesTree || {}, 'categories')
-
+    const {getTokenWhenReady} = useAccessToken()
     const appOrigin = getAppOrigin()
 
     const history = useHistory()
@@ -294,7 +294,7 @@ const App = (props) => {
                 defaultLocale={DEFAULT_LOCALE}
             >
                 <CurrencyProvider currency={currency}>
-                    <StorefrontPreview />
+                    <StorefrontPreview getToken={getTokenWhenReady} />
                     <Seo>
                         <meta name="theme-color" content={THEME_COLOR} />
                         <meta name="apple-mobile-web-app-title" content={DEFAULT_SITE_TITLE} />