[Shopper Experience] ImageTile component (#967)

* Initial `ImageAndText` component * Rename to `ImageTile` component * Add basic test * PR Feedback * Update JSDocs * Update test * Restore `zzrf-001` config in test project * PR Feedback * Update JSDoc * Cleanup
SalesforceCommerceCloud · Feb 13, 2023 · 0748de1 · 0748de1
1 parent 24b8b16
commit 0748de1
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 11 deletions.
diff --git a/.github/actions/setup_ubuntu/action.yml b/.github/actions/setup_ubuntu/action.yml
@@ -28,6 +28,8 @@ runs:
         node ./scripts/check-dependencies.js
 
         # Install Snyk CLI
+        # TODO: Ticket W-12425059. Revisit Snyk CLI integration to monitor manifest files on generated projects.  
+        # TODO: Latest Snyk CLI version is currently failing on npm i. We use the alternative Snyk GitHub integration.
         # sudo npm install -g snyk
 
         # Install Lighthouse CI CLI

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -191,11 +191,13 @@ jobs:
         with:
           path: packages/pwa-kit-create-app/local-npm-repo/verdaccio.log
 
-#      - name: Audit Generated Project
-#        if: env.IS_NOT_FORK == 'true' && env.IS_TEMPLATE_FROM_RETAIL_REACT_APP == 'true' && env.DEVELOP == 'true'
-#        uses: "./.github/actions/snyk"
-#        with:
-#          snyk_token: ${{ secrets.SNYK_TOKEN }}
+      # TODO: Ticket W-12425059. Revisit Snyk CLI integration to monitor manifest files on generated projects.
+      # TODO: Update the SNYK_TOKEN stored in GitHub with a token generated from the proper Snyk org.
+      #      - name: Audit Generated Project
+      #        if: env.IS_NOT_FORK == 'true' && env.IS_TEMPLATE_FROM_RETAIL_REACT_APP == 'true' && env.DEVELOP == 'true'
+      #        uses: "./.github/actions/snyk"
+      #        with:
+      #          snyk_token: ${{ secrets.SNYK_TOKEN }}
 
       - name: Send metrics to Datadog
         if: env.IS_NOT_FORK == 'true' && env.IS_TEMPLATE_FROM_RETAIL_REACT_APP == 'true'

diff --git a/packages/template-retail-react-app/app/components/experience/image-tile/index.jsx b/packages/template-retail-react-app/app/components/experience/image-tile/index.jsx
@@ -0,0 +1,51 @@
+/*
+ * 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 ImageTile component that can be used inside any Layout component.
+ * @param image Object containing the image url, _type and focalPoint.
+ * @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
diff --git a/packages/template-retail-react-app/app/components/experience/image-tile/index.test.js b/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')}`)
+})
diff --git a/packages/test-commerce-sdk-react/app/components/_app-config/index.tsx b/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}

diff --git a/packages/test-commerce-sdk-react/package.json b/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"
         }
       ]