[Shopper Experience] ImageTile component

packages/template-retail-react-app/app/components/experience/image-tile/index.jsx

@@ -0,0 +1,52 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import {Image} from '@chakra-ui/react'
+
+/**
+ * Simple Image tile component that can be used inside any Layout component
+ * @param image Object containing the image url, _type and focalPoint.
+ * @param rest The rest of the potential image parameters.
+ * @returns {JSX.Element}
+ */
+const ImageTile = ({image}) => {
+    return (
+        <div className={'image-tile'}>
+            <figure className={'image-tile-figure'}>
+                <picture>
+                    <source srcSet={image?.src?.tablet} media="(min-width: 48em)" />
+                    <source srcSet={image?.src?.desktop} media="(min-width: 64em)" />
+                    <Image
+                        className={'image-tile-image'}
+                        data-testid={'image-tile-image'}
+                        src={image?.src?.mobile ? image?.src?.mobile : image?.url}
+                        ignoreFallback={true}
+                        alt={image?.alt}
+                        title={image?.alt}
+                    />
+                </picture>
+            </figure>
+        </div>
+    )
+}
+
+ImageTile.propTypes = {
+    image: PropTypes.shape({
+        _type: PropTypes.string,
+        focalPoint: PropTypes.shape({
+            _type: PropTypes.string,
+            x: PropTypes.number,
+            y: PropTypes.number
+        }),
+        url: PropTypes.string,
+        alt: PropTypes.string,
+        src: PropTypes.string || PropTypes.object
+    })
+}
+
+export default ImageTile

packages/template-retail-react-app/app/components/experience/image-tile/index.test.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2023, salesforce.com, 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 {renderWithProviders} from '../../../utils/test-utils'
+import ImageTile from './index'
+import {getAssetUrl} from 'pwa-kit-react-sdk/ssr/universal/utils'
+
+test('ImageTile renders without errors', () => {
+    const {getByTestId} = renderWithProviders(
+        <ImageTile
+            image={{
+                _type: 'Image',
+                focalPoint: {
+                    _type: 'Imagefocalpoint',
+                    x: 0.5,
+                    y: 0.5
+                },
+                url: `${getAssetUrl('static/img/hero.png')}`
+            }}
+        />
+    )
+
+    const image = getByTestId('image-tile-image')
+
+    expect(image).toHaveAttribute('src', `${getAssetUrl('static/img/hero.png')}`)
+})

packages/template-retail-react-app/app/pages/experience/index.jsx

@@ -0,0 +1,46 @@
+/*
+ * 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, Container} from '@chakra-ui/react'
+import ImageTile from '../../components/experience/image-tile'
+import {getAssetUrl} from 'pwa-kit-react-sdk/ssr/universal/utils'
+
+// TODO: Example Page designer Test page. Remove before merging.
+const Experience = () => {
+    return (
+        <Box bg="gray.50" py={[8, 16]}>
+            <Container
+                paddingTop={16}
+                width={['100%', '407px']}
+                bg="white"
+                paddingBottom={14}
+                marginTop={8}
+                marginBottom={8}
+                borderRadius="base"
+            >
+                <ImageTile
+                    image={{
+                        _type: 'Image',
+                        focalPoint: {
+                            _type: 'Imagefocalpoint',
+                            x: 0.5,
+                            y: 0.5
+                        },
+                        url: `${getAssetUrl('static/img/hero.png')}`
+                    }}
+                />
+            </Container>
+        </Box>
+    )
+}
+
+Experience.getTemplateName = () => 'experience'
+
+Experience.propTypes = {}
+
+export default Experience

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

@@ -35,6 +35,8 @@ 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})
+// TODO: Example Page designer Test page. Remove before merging.
+const Experience = loadable(() => import('./pages/experience'), {fallback})
 const PageNotFound = loadable(() => import('./pages/page-not-found'))
 
 const routes = [
@@ -98,6 +100,11 @@ const routes = [
         path: '/account/wishlist',
         component: Wishlist
     },
+    // TODO: Example Page designer Test page. Remove before merging.
+    {
+        path: '/experience',
+        component: Experience
+    },
     {
         path: '*',
         component: PageNotFound

packages/test-commerce-sdk-react/app/components/_app-config/index.tsx

@@ -30,10 +30,9 @@ const AppConfig = (props: AppConfigProps): ReactElement => {
     return (
         <CommerceApiProvider
             siteId={siteId}
-            // TODO: On Feb 08 restore zzrf_001 details
-            shortCode="sandbox-001"
-            clientId="06bb7d20-93fa-4707-ade6-2ecd858331bd"
-            organizationId="f_ecom_bjnl_dev"
+            shortCode="8o7m175y"
+            clientId="c9c45bfd-0ed3-4aa2-9971-40f88962b836"
+            organizationId="f_ecom_zzrf_001"
             redirectURI="http://localhost:3000/callback"
             proxy="http://localhost:3000/mobify/proxy/api"
             locale={locale}

packages/test-commerce-sdk-react/package.json

@@ -52,11 +52,11 @@
       "ssrFunctionNodeVersion": "14.x",
       "proxyConfigs": [
         {
-          "host": "sandbox-001.api.commercecloud.salesforce.com",
+          "host": "kv7kzm78.api.commercecloud.salesforce.com",
           "path": "api"
         },
         {
-          "host": "development-functional38-qa222.demandware.net",
+          "host": "zzrf-001.dx.commercecloud.salesforce.com",
           "path": "ocapi"
         }
       ]