[V3] Update Page Designer

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/template-retail-react-app/app/page-designer/README.md

 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`. 
@@ -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
 ```
 

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'