Fix Page Designer ImageWithText Link component

packages/template-retail-react-app/app/page-designer/assets/image-with-text/index.jsx

@@ -6,8 +6,9 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
-import {Box, Image, Text} from '@chakra-ui/react'
+import {Box, Image, Link as ChakraLink, Text} from '@chakra-ui/react'
 import Link from '../../../components/link'
+import {isAbsoluteURL} from '../../utils'
 
 /**
  * Image with text component
@@ -22,6 +23,9 @@ import Link from '../../../components/link'
  */
 export const ImageWithText = ({ITCLink, ITCText, image, heading, alt}) => {
     const hasCaption = ITCText || heading
+    const isAbsoulte = isAbsoluteURL(ITCLink)
+    const LinkWrapper = isAbsoulte ? ChakraLink : Link
+    const linkProps = isAbsoulte ? {href: ITCLink} : {to: ITCLink}
 
     return (
         <Box className={'image-with-text'}>
@@ -35,7 +39,7 @@ export const ImageWithText = ({ITCLink, ITCText, image, heading, alt}) => {
                 <picture>
                     <source srcSet={image?.src?.tablet} media="(min-width: 48em)" />
                     <source srcSet={image?.src?.desktop} media="(min-width: 64em)" />
-                    <Link to={ITCLink}>
+                    <LinkWrapper {...linkProps}>
                         <Image
                             className={'image-with-text-image'}
                             data-testid={'image-with-text-image'}
@@ -45,7 +49,7 @@ export const ImageWithText = ({ITCLink, ITCText, image, heading, alt}) => {
                             title={alt}
                             filter={'brightness(40%)'}
                         />
-                    </Link>
+                    </LinkWrapper>
                 </picture>
                 {hasCaption && (
                     <Text as="figcaption">

packages/template-retail-react-app/app/page-designer/utils.js

@@ -0,0 +1,14 @@
+/*
+ * 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
+ */
+
+/**
+ * Determines whether the specified URL is absolute
+ *
+ * @param {string} url The URL to test
+ * @returns {boolean} True if the specified URL is absolute, otherwise false
+ */
+export const isAbsoluteURL = (url) => /^([a-z][a-z\d+\-.]*:)?\/\//i.test(url)

packages/template-retail-react-app/app/pages/page-viewer/index.jsx

@@ -0,0 +1,61 @@
+/*
+ * 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 React from 'react'
+import {Box} from '@chakra-ui/react'
+import {Page, pageType} from '../../page-designer'
+import {ImageTile, ImageWithText} from '../../page-designer/assets'
+import {
+    Carousel,
+    MobileGrid1r1c,
+    MobileGrid2r1c,
+    MobileGrid2r2c,
+    MobileGrid2r3c,
+    MobileGrid3r1c,
+    MobileGrid3r2c
+} from '../../page-designer/layouts'
+
+import {HTTPError, HTTPNotFound} from 'pwa-kit-react-sdk/ssr/universal/errors'
+
+const PAGEDESIGNER_TO_COMPONENT = {
+    'commerce_assets.photoTile': ImageTile,
+    'commerce_assets.imageAndText': ImageWithText,
+    'commerce_layouts.carousel': Carousel,
+    'commerce_layouts.mobileGrid1r1c': MobileGrid1r1c,
+    'commerce_layouts.mobileGrid2r1c': MobileGrid2r1c,
+    'commerce_layouts.mobileGrid2r2c': MobileGrid2r2c,
+    'commerce_layouts.mobileGrid2r3c': MobileGrid2r3c,
+    'commerce_layouts.mobileGrid3r1c': MobileGrid3r1c,
+    '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)
+    }
+
+    return {page}
+}
+
+PageViewer.displayName = 'PageViewer'
+
+PageViewer.propTypes = {
+    page: pageType.isRequired
+}
+
+export default PageViewer

packages/template-retail-react-app/app/routes.jsx

@@ -35,6 +35,7 @@ const LoginRedirect = loadable(() => import('./pages/login-redirect'), {fallback
 const ProductDetail = loadable(() => import('./pages/product-detail'), {fallback})
 const ProductList = loadable(() => import('./pages/product-list'), {fallback})
 const Wishlist = loadable(() => import('./pages/account/wishlist'), {fallback})
+const PageViewer = loadable(() => import('./pages/page-viewer'), {fallback})
 const PageNotFound = loadable(() => import('./pages/page-not-found'))
 
 const routes = [
@@ -98,6 +99,10 @@ const routes = [
         path: '/account/wishlist',
         component: Wishlist
     },
+    {
+        path: '/page-viewer/:pageId',
+        component: PageViewer
+    },
     {
         path: '*',
         component: PageNotFound