Fix Page Designer ImageWithText Link component (#1092) (#1148)

* 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 * Remove temporal page-viewer page to facilitate review --------- Co-authored-by: Ben Chypak <[email protected]>
SalesforceCommerceCloud · Apr 24, 2023 · 733fe86 · 733fe86
1 parent 2f73309
commit 733fe86
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/packages/template-retail-react-app/app/page-designer/assets/image-with-text/index.jsx b/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">

diff --git a/packages/template-retail-react-app/app/page-designer/utils.js b/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)