Fix Page Designer ImageWithText Link component (#1092)

* Fix PD ImageWithText Link component by using Chakra UI Link

* Use isAbsoluteURL to use react-router Link or Chakra Link component

* PR Feedback

* Clean up

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

Co-authored-by: Ben Chypak <bchypak@mobify.com>

* Remove temporal page-viewer page to facilitate review

---------

Co-authored-by: Ben Chypak <bchypak@mobify.com>

Author: adamraya

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 isAbsolute = isAbsoluteURL(ITCLink)
+    const LinkWrapper = isAbsolute ? ChakraLink : Link
+    const linkProps = isAbsolute ? {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)