1// app/pages/page-viewer/index.jsx
2
3import React from 'react'
4import {useParams} from 'react-router-dom'
5import {Box} from '@salesforce/retail-react-app/app/components/shared/ui'
6import {usePage, usePages} from '@salesforce/commerce-sdk-react'
7import {Page} from '@salesforce/commerce-sdk-react/components'
8// Map Page Designer components to your React components.
9import {ImageTile, ImageWithText} from '../../page-designer/assets'
10import {
11 Carousel,
12 MobileGrid1r1c,
13 MobileGrid2r1c,
14 MobileGrid2r2c,
15 MobileGrid2r3c,
16 MobileGrid3r1c,
17 MobileGrid3r2c
18} from '../../page-designer/layouts'
19
20import {HTTPError, HTTPNotFound} from '@salesforce/pwa-kit-react-sdk/ssr/universal/errors'
21
22const PAGEDESIGNER_TO_COMPONENT = {
23 'commerce_assets.photoTile': ImageTile,
24 'commerce_assets.imageAndText': ImageWithText,
25 'commerce_layouts.carousel': Carousel,
26 'commerce_layouts.mobileGrid1r1c': MobileGrid1r1c,
27 'commerce_layouts.mobileGrid2r1c': MobileGrid2r1c,
28 'commerce_layouts.mobileGrid2r2c': MobileGrid2r2c,
29 'commerce_layouts.mobileGrid2r3c': MobileGrid2r3c,
30 'commerce_layouts.mobileGrid3r1c': MobileGrid3r1c,
31 'commerce_layouts.mobileGrid3r2c': MobileGrid3r2c
32
33// Add your custom Page Designer React component implementation here.
34
35}
36
37
38
39const PageViewer = () => {
40 const {pageId} = useParams()
41 const {data: page, error} = usePage({parameters: {pageId}})
42
43 if (error) {
44 let ErrorClass = error.response?.status === 404 ? HTTPNotFound : HTTPError
45 throw new ErrorClass(error.response?.statusText)
46 }
47
48 return (
49 <Box layerStyle={'page'}>
50 <Page page={page} components={PAGEDESIGNER_TO_COMPONENT} />
51 </Box>
52 )
53}
54
55PageViewer.displayName = 'PageViewer'
56
57export default PageViewer
j