Merge branch 'v3' into feature/template-extensibility

* v3:
  split ssr build on local (#1155) (#1156)
  [V3] Update Page Designer (#1128)
  [V3][Hooks Integration 🪝] Replace last of the `getProps` (#1149)
  Fix Page Designer ImageWithText Link component (#1092)

# Conflicts:
#	packages/template-retail-react-app/app/components/_app-config/index.jsx

Author: bfeister

packages/commerce-sdk-react/package.json

@@ -17,7 +17,7 @@
   "files": [
     "CHANGELOG.md",
     "LICENSE",
-    "+(auth|hooks|scripts)/**/!(*.test*).{ts,js}",
+    "+(auth|components|hooks|scripts)/**/!(*.test*).{ts,js}",
     "*.{js,d.ts}",
     "!*.test*.{js,d.ts}",
     "!test*.*",
@@ -75,6 +75,9 @@
     "react": "^17",
     "react-helmet": "6"
   },
+  "optionalDependencies": {
+    "prop-types": "^15.8.1"
+  },
   "engines": {
     "node": "^16.0.0 || ^18.0.0",
     "npm": "^7.0.0 || ^8.0.0 || ^9.0.0"

packages/commerce-sdk-react/src/components/ShopperExperience/Region/index.tsx

@@ -5,8 +5,18 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 import React from 'react'
-import {Region as RegionType} from '../types'
+import PropTypes from 'prop-types'
 import {Component} from '../Component'
+import {componentPropType} from '../prop-types'
+import {Region as RegionType} from '../types'
+
+/**
+ * This PropType represents a `region` object from the ShopperExperience API.
+ */
+export const propType = PropTypes.shape({
+    id: PropTypes.string,
+    components: PropTypes.arrayOf(componentPropType)
+})
 
 interface RegionProps extends React.ComponentProps<'div'> {
     region: RegionType
@@ -36,4 +46,9 @@ export const Region = (props: RegionProps) => {
 
 Region.displayName = 'Region'
 
+Region.propTypes = {
+    region: propType.isRequired,
+    className: PropTypes.string
+}
+
 export default Region

packages/commerce-sdk-react/src/components/ShopperExperience/index.ts

@@ -4,6 +4,8 @@
  * 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
  */
+
 export * from './Component'
-export * from './Page'
 export * from './Region'
+export * from './Page'
+export * from './prop-types'

packages/template-retail-react-app/app/page-designer/core/types.js packages/commerce-sdk-react/src/components/ShopperExperience/prop-types.ts

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types'
 /**
  * This PropType represents a `component` object from the ShopperExperience API.
  */
-export const componentType = PropTypes.shape({
+export const componentPropType = PropTypes.shape({
     data: PropTypes.object,
     id: PropTypes.string,
     typeId: PropTypes.string
@@ -18,9 +18,9 @@ export const componentType = PropTypes.shape({
 /**
  * This PropType represents a `region` object from the ShopperExperience API.
  */
-export const regionType = PropTypes.shape({
+export const regionPropType = PropTypes.shape({
     id: PropTypes.string,
-    components: PropTypes.arrayOf(componentType)
+    components: PropTypes.arrayOf(componentPropType)
 })
 
 /**
@@ -31,6 +31,6 @@ export const pageType = PropTypes.shape({
     description: PropTypes.string,
     id: PropTypes.string,
     name: PropTypes.string,
-    regions: PropTypes.arrayOf(regionType),
+    regions: PropTypes.arrayOf(regionPropType),
     typeId: PropTypes.string
 })

packages/pwa-kit-dev/src/configs/webpack/config.js

@@ -412,7 +412,11 @@ const renderer =
                 devtool: mode === development ? 'eval-source-map' : false,
                 output: {
                     path: buildDir,
-                    filename: 'server-renderer.js',
+
+                    // We want to split the build on local development to reduce memory usage.
+                    // It is required to have a single entry point for the remote server.
+                    // See pwa-kit-runtime/ssr/server/build-remote-server.js render method.
+                    filename: mode === development ? '[name].js' : 'server-renderer.js',
                     libraryTarget: 'commonjs2'
                 },
                 plugins: [

packages/pwa-kit-react-sdk/src/ssr/universal/components/route-component/index.js

@@ -56,11 +56,12 @@ const withErrorHandling = (Wrapped) => {
  */
 export const routeComponent = (Wrapped, isPage, locals) => {
     const AppConfig = getAppConfig()
-    const extraArgs = AppConfig.extraGetPropsArgs(locals)
 
     const hocs = AppConfig.getHOCsInUse()
     const getPropsEnabled = hocs.indexOf(withLegacyGetProps) >= 0
 
+    const extraArgs = getPropsEnabled ? AppConfig.extraGetPropsArgs(locals) : {}
+
     /* istanbul ignore next */
     const wrappedComponentName = Wrapped.displayName || Wrapped.name
 

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

@@ -18,7 +18,6 @@ import {getConfig} from 'pwa-kit-runtime/utils/ssr-config'
 import {createUrlTemplate} from '../../utils/url'
 
 import {CommerceApiProvider} from 'commerce-sdk-react-preview'
-import {withLegacyGetProps} from 'pwa-kit-react-sdk/ssr/universal/components/with-legacy-get-props'
 import {withReactQuery} from 'pwa-kit-react-sdk/ssr/universal/components/with-react-query'
 import {useCorrelationId} from 'pwa-kit-react-sdk/ssr/universal/hooks'
 import {getAppOrigin} from 'pwa-kit-react-sdk/utils/url'
@@ -86,14 +85,6 @@ AppConfig.restore = (locals = {}) => {
 
 AppConfig.freeze = () => undefined
 
-AppConfig.extraGetPropsArgs = (locals = {}) => {
-    return {
-        buildUrl: locals.buildUrl,
-        site: locals.site,
-        locale: locals.locale,
-    }
-}
-
 AppConfig.propTypes = {
     children: PropTypes.node,
     locals: PropTypes.object,
@@ -119,4 +110,4 @@ const options = {
     }
 }
 
-export default withReactQuery(withLegacyGetProps(AppConfig), options)
+export default withReactQuery(AppConfig, options)

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

@@ -11,7 +11,7 @@ import {useHistory, useLocation} from 'react-router-dom'
 import {getAssetUrl} from 'pwa-kit-react-sdk/ssr/universal/utils'
 import {getAppOrigin} from 'pwa-kit-react-sdk/utils/url'
 import {getConfig} from 'pwa-kit-runtime/utils/ssr-config'
-import {useQueries} from '@tanstack/react-query'
+import {useQuery, useQueries} from '@tanstack/react-query'
 import {
     useAccessToken,
     useCategory,
@@ -62,7 +62,6 @@ import {
 } from '../../constants'
 
 import Seo from '../seo'
-import {resolveLocaleFromUrl, resolveSiteFromUrl} from '../../utils/site-utils'
 
 const onClient = typeof window !== 'undefined'
 
@@ -99,7 +98,7 @@ const useLazyLoadCategories = () => {
 }
 
 const App = (props) => {
-    const {children, targetLocale = DEFAULT_LOCALE, messages = {}} = props
+    const {children} = props
     const {data: categoriesTree} = useLazyLoadCategories()
     const categories = flatten(categoriesTree || {}, 'categories')
 
@@ -116,6 +115,31 @@ const App = (props) => {
 
     const {isOpen, onOpen, onClose} = useDisclosure()
 
+    const targetLocale = getTargetLocale({
+        getUserPreferredLocales: () => {
+            // CONFIG: This function should return an array of preferred locales. They can be
+            // derived from various sources. Below are some examples of those:
+            //
+            // - client side: window.navigator.languages
+            // - the page URL they're on (example.com/en-GB/home)
+            // - cookie (if their previous preference is saved there)
+            //
+            // If this function returns an empty array (e.g. there isn't locale in the page url),
+            // then the app would use the default locale as the fallback.
+
+            // NOTE: Your implementation may differ, this is just what we did.
+            return [locale?.id || DEFAULT_LOCALE]
+        },
+        l10nConfig: site.l10n
+    })
+
+    // Fetch the translation message data using the target locale.
+    const {data: messages} = useQuery({
+        queryKey: ['app', 'translationas', 'messages', targetLocale],
+        queryFn: () => fetchTranslations(targetLocale),
+        enabled: isServer
+    })
+
     // Used to conditionally render header/footer for checkout page
     const isCheckout = /\/checkout$/.test(location?.pathname)
 
@@ -201,6 +225,11 @@ const App = (props) => {
         <Box className="sf-app" {...styles.container}>
             <IntlProvider
                 onError={(err) => {
+                    if (!messages) {
+                        // During the ssr prepass phase the messages object has not loaded, so we can suppress
+                        // errors during this time.
+                        return
+                    }
                     if (err.code === 'MISSING_TRANSLATION') {
                         // NOTE: Remove the console error for missing translations during development,
                         // as we knew translations would be added later.
@@ -314,44 +343,8 @@ const App = (props) => {
     )
 }
 
-App.shouldGetProps = () => {
-    // In this case, we only want to fetch data for the app once, on the server.
-    return typeof window === 'undefined'
-}
-
-App.getProps = async ({res}) => {
-    const site = resolveSiteFromUrl(res.locals.originalUrl)
-    const locale = resolveLocaleFromUrl(res.locals.originalUrl)
-    const l10nConfig = site.l10n
-    const targetLocale = getTargetLocale({
-        getUserPreferredLocales: () => {
-            // CONFIG: This function should return an array of preferred locales. They can be
-            // derived from various sources. Below are some examples of those:
-            //
-            // - client side: window.navigator.languages
-            // - the page URL they're on (example.com/en-GB/home)
-            // - cookie (if their previous preference is saved there)
-            //
-            // If this function returns an empty array (e.g. there isn't locale in the page url),
-            // then the app would use the default locale as the fallback.
-
-            // NOTE: Your implementation may differ, this is just what we did.
-            return [locale?.id]
-        },
-        l10nConfig
-    })
-    const messages = await fetchTranslations(targetLocale)
-
-    return {
-        targetLocale,
-        messages
-    }
-}
-
 App.propTypes = {
-    children: PropTypes.node,
-    targetLocale: PropTypes.string,
-    messages: PropTypes.object
+    children: PropTypes.node
 }
 
 /**

packages/template-retail-react-app/app/components/_app/index.test.js

@@ -65,19 +65,6 @@ describe('App', () => {
         expect(screen.getByText('Any children here')).toBeInTheDocument()
     })
 
-    test('shouldGetProps returns true only server-side', () => {
-        windowSpy.mockImplementation(() => undefined)
-
-        expect(App.shouldGetProps()).toBe(true)
-
-        windowSpy.mockImplementation(() => ({
-            location: {
-                origin: 'http://localhost:3000/'
-            }
-        }))
-        expect(App.shouldGetProps()).toBe(false)
-    })
-
     test('The localized hreflang links exist in the html head', () => {
         useMultiSite.mockImplementation(() => resultUseMultiSite)
         renderWithProviders(

packages/template-retail-react-app/app/page-designer/README.md

@@ -7,10 +7,12 @@
 
 ---
 
-This folder contains React components and utilities that render pages from [Page Designer](https://documentation.b2c.commercecloud.salesforce.com/DOC2/topic/com.demandware.dochelp/content/b2c_commerce/topics/page_designer/b2c_creating_pd_pages.html).
+This folder contains the React components used when rendering the pages from [Page Designer](https://documentation.b2c.commercecloud.salesforce.com/DOC2/topic/com.demandware.dochelp/content/b2c_commerce/topics/page_designer/b2c_creating_pd_pages.html).
 
 Use this folder to add React components that can render Page Designer components that have been serialized to JSON.
 
+> NOTE: If you are creating components that do not already exist in Page Designer, follow [this](https://documentation.b2c.commercecloud.salesforce.com/DOC1/index.jsp) guide to first create your Page Designer components before creating their matching PWA-Kit React components.
+
 This folder includes components for layout and visualization of images, grids, and carousels.
 
 **By default, Page Designer integration is not enabled in the Retail React App.** Additionally, to utilize the `shopperExperience`
@@ -20,8 +22,7 @@ for more information on configuring your SLAS client.
 
 ## Folder Structure
 
--   **`/core`** - Base components for rendering: `<Page>`, `<Region>`, and `<Component>`. Use `<Page>` to render Page Designer content. Use `<Region>` and `<Component>` for creating new assets.
--   **`/assets`** - Non-visual components used in Page Designer. Includes `<Image>` and `<ImageWithText>` as well as any other Page Designer assets that you want to use in your PWA-Kit app. If you need to visualize a component, add it here.
+-   **`/assets`** - Visual components used in Page Designer. Includes `<Image>` and `<ImageWithText>` as well as any other Page Designer assets that you want to use in your PWA-Kit app. If you need to visualize a component, add it here.
 -   **`/layouts`** - Components responsible for layout. Includes various grids and a `<Carousel>` component.
 
 ## Sample Usage
@@ -32,8 +33,10 @@ Create a new file called `app/pages/page-viewer/index.jsx`, and add the followin
 // app/pages/page-viewer/index.jsx
 
 import React from 'react'
+import {useParams} from 'react-router-dom'
 import {Box} from '@chakra-ui/react'
-import {Page, pageType} from '../../page-designer'
+import {usePage} from 'commerce-sdk-react-preview'
+import {Page} from 'commerce-sdk-react-preview/components'
 import {ImageTile, ImageWithText} from '../../page-designer/assets'
 import {
     Carousel,
@@ -59,32 +62,24 @@ const PAGEDESIGNER_TO_COMPONENT = {
     'commerce_layouts.mobileGrid3r2c': MobileGrid3r2c
 }
 
-const PageViewer = ({page}) => (
-    <Box layerStyle={'page'}>
-        <Page page={page} components={PAGEDESIGNER_TO_COMPONENT} />
-    </Box>
-)
-
-PageViewer.getProps = async ({api, params}) => {
-    const {pageId} = params
-    const page = await api.shopperExperience.getPage({
-        parameters: {pageId}
-    })
-
-    if (page.isError) {
-        let ErrorClass = page.type?.endsWith('page-not-found') ? HTTPNotFound : HTTPError
-        throw new ErrorClass(page.detail)
+const PageViewer = () => {
+    const {pageId} = useParams()
+    const {data: page, error}= usePage({parameters: {pageId}})
+
+    if (error) {
+        let ErrorClass = error.response?.status === 404 ? HTTPNotFound : HTTPError
+        throw new ErrorClass(error.response?.statusText)
     }
 
-    return {page}
+    return (
+        <Box layerStyle={'page'}>
+            <Page page={page} components={PAGEDESIGNER_TO_COMPONENT} />
+        </Box>
+    )
 }
 
 PageViewer.displayName = 'PageViewer'
 
-PageViewer.propTypes = {
-    page: pageType.isRequired
-}
-
 export default PageViewer
 ```
 
@@ -104,4 +99,4 @@ Open `app/routes.jsx` and add a route for `<PageViewer>`:
 +    },
 ```
 
-Using the local development server, you can now see Page Designer pages rendered in React.js at `http://localhost:3000/page-viewer/:pageid` by providing their `pageid`.
+Using the local development server, you can now see Page Designer pages rendered in React.js at `http://localhost:3000/page-viewer/:pageid` by providing their `pageid` defined in Business Manager.

packages/template-retail-react-app/app/page-designer/core/index.js packages/template-retail-react-app/app/page-designer/assets/index.js

@@ -5,7 +5,5 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-export * from './component'
-export * from './page'
-export * from './region'
-export * from './types'
+export * from './image-tile'
+export * from './image-with-text'