@W-13974769 - Show Color Attribute on ProductTile 🀄️

packages/pwa-kit-create-app/assets/bootstrap/js/package.json.hbs

@@ -21,7 +21,7 @@
   "bundlesize": [
     {
       "path": "build/main.js",
-      "maxSize": "43 kB"
+      "maxSize": "44 kB"
     },
     {
       "path": "build/vendor.js",

packages/template-retail-react-app/app/components/_app/index.jsx

@@ -16,7 +16,6 @@ import {useQuery} from '@tanstack/react-query'
 import {
     useAccessToken,
     useCategory,
-    useCustomerBaskets,
     useShopperBasketsMutation
 } from '@salesforce/commerce-sdk-react'
 

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

@@ -5,9 +5,8 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import React, {useRef} from 'react'
+import React, {useMemo, useRef, useState} from 'react'
 import PropTypes from 'prop-types'
-import {HeartIcon, HeartSolidIcon} from '@salesforce/retail-react-app/app/components/icons'
 
 // Components
 import {
@@ -21,14 +20,24 @@ import {
 } from '@salesforce/retail-react-app/app/components/shared/ui'
 import DynamicImage from '@salesforce/retail-react-app/app/components/dynamic-image'
 
+// Project Components
+import {HeartIcon, HeartSolidIcon} from '@salesforce/retail-react-app/app/components/icons'
+import Link from '@salesforce/retail-react-app/app/components/link'
+import Swatch from '@salesforce/retail-react-app/app/components/swatch-group/swatch'
+import SwatchGroup from '@salesforce/retail-react-app/app/components/swatch-group'
+import withRegistration from '@salesforce/retail-react-app/app/components/with-registration'
+
 // Hooks
 import {useIntl} from 'react-intl'
 
 // Other
-import {productUrlBuilder} from '@salesforce/retail-react-app/app/utils/url'
-import Link from '@salesforce/retail-react-app/app/components/link'
-import withRegistration from '@salesforce/retail-react-app/app/components/with-registration'
+import {
+    PRODUCT_TILE_IMAGE_VIEW_TYPE,
+    PRODUCT_TILE_SELECTABLE_ATTRIBUTE_ID
+} from '@salesforce/retail-react-app/app/constants'
+import {productUrlBuilder, rebuildPathWithParams} from '@salesforce/retail-react-app/app/utils/url'
 import {useCurrency} from '@salesforce/retail-react-app/app/hooks'
+import {filterImageGroups, getDecoratedVariationAttributes} from '../../utils/product-utils'
 
 const IconButtonWithRegistration = withRegistration(IconButton)
 
@@ -56,54 +65,135 @@ export const Skeleton = () => {
  * It also supports favourite products, controlled by a heart icon.
  */
 const ProductTile = (props) => {
-    const intl = useIntl()
     const {
-        product,
+        dynamicImageProps,
         enableFavourite = false,
+        imageViewType = PRODUCT_TILE_IMAGE_VIEW_TYPE,
         isFavourite,
         onFavouriteToggle,
-        dynamicImageProps,
+        product,
+        selectableAttributeId = PRODUCT_TILE_SELECTABLE_ATTRIBUTE_ID,
         ...rest
     } = props
+    const {currency, imageGroups, price, productId, hitType} = product
+
+    const intl = useIntl()
+    const {currency: activeCurrency} = useCurrency()
+    const isFavouriteLoading = useRef(false)
+    const styles = useMultiStyleConfig('ProductTile')
 
-    const {currency, image, price, productId, hitType} = product
+    const isMasterVariant = ['master', 'variant'].includes(hitType)
+    const initialVariationValue = isMasterVariant
+        ? product?.variants?.find((variant) => variant.productId == product.representedProduct.id)
+              ?.variationValues?.[selectableAttributeId]
+        : undefined
+
+    const [selectableAttributeValue, setSelectableAttributeValue] = useState(initialVariationValue)
+
+    // Primary image for the tile, the image is determined from the product and selected variation attributes.
+    const image = useMemo(() => {
+        // NOTE: If the selectable variation attribute doesn't exist in the products variation attributes
+        // array, lets not filter the image groups on it. This ensures we always return an image for non-variant
+        // type products.
+        const hasSelectableAttribute = product?.variationAttributes?.find(
+            ({id}) => id === selectableAttributeId
+        )
+
+        const variationValues = {[selectableAttributeId]: selectableAttributeValue}
+        const filteredImageGroups = filterImageGroups(imageGroups, {
+            viewType: imageViewType,
+            variationValues: hasSelectableAttribute ? variationValues : {}
+        })
+
+        // Return the first image of the first group.
+        return filteredImageGroups?.[0]?.images[0]
+    }, [product, selectableAttributeId, selectableAttributeValue, imageViewType])
+
+    // Primary URL user to wrap the ProduceTile.
+    const productUrl = useMemo(
+        () =>
+            rebuildPathWithParams(productUrlBuilder({id: productId}), {
+                [selectableAttributeId]: selectableAttributeValue
+            }),
+        [product, selectableAttributeId, selectableAttributeValue]
+    )
+
+    // NOTE: variationAttributes are only defined for master/variant type products.
+    const variationAttributes = useMemo(() => getDecoratedVariationAttributes(product), [product])
 
     // ProductTile is used by two components, RecommendedProducts and ProductList.
     // RecommendedProducts provides a localized product name as `name` and non-localized product
     // name as `productName`. ProductList provides a localized name as `productName` and does not
     // use the `name` property.
     const localizedProductName = product.name ?? product.productName
 
-    const {currency: activeCurrency} = useCurrency()
-    const isFavouriteLoading = useRef(false)
-    const styles = useMultiStyleConfig('ProductTile')
-
     return (
         <Box {...styles.container}>
-            <Link
-                data-testid="product-tile"
-                to={productUrlBuilder({id: productId}, intl.local)}
-                {...styles.link}
-                {...rest}
-            >
+            <Link data-testid="product-tile" to={productUrl} {...styles.link} {...rest}>
                 <Box {...styles.imageWrapper}>
-                    {image && (
-                        <AspectRatio {...styles.image}>
-                            <DynamicImage
-                                src={`${image.disBaseLink || image.link}[?sw={width}&q=60]`}
-                                widths={dynamicImageProps?.widths}
-                                imageProps={{
-                                    // treat img as a decorative item, we don't need to pass `image.alt`
-                                    // since it is the same as product name
-                                    // which can cause confusion for individuals who uses screen readers
-                                    alt: '',
-                                    ...dynamicImageProps?.imageProps
-                                }}
-                            />
-                        </AspectRatio>
-                    )}
+                    <AspectRatio {...styles.image}>
+                        <DynamicImage
+                            src={`${
+                                image?.disBaseLink ||
+                                image?.link ||
+                                product?.image?.disBaseLink ||
+                                product?.image?.disBaseLink
+                            }[?sw={width}&q=60]`}
+                            widths={dynamicImageProps?.widths}
+                            imageProps={{
+                                // treat img as a decorative item, we don't need to pass `image.alt`
+                                // since it is the same as product name
+                                // which can cause confusion for individuals who uses screen readers
+                                alt: '',
+                                ...dynamicImageProps?.imageProps
+                            }}
+                        />
+                    </AspectRatio>
                 </Box>
 
+                {/* Swatches */}
+                {variationAttributes
+                    ?.filter(({id}) => selectableAttributeId === id)
+                    ?.map(({id, values}) => (
+                        <SwatchGroup
+                            key={id}
+                            value={selectableAttributeValue}
+                            handleChange={(value) => {
+                                setSelectableAttributeValue(value)
+                            }}
+                        >
+                            {values?.map(({name, swatch, value}) => {
+                                const content = swatch ? (
+                                    <Box
+                                        height="100%"
+                                        width="100%"
+                                        minWidth="32px"
+                                        backgroundRepeat="no-repeat"
+                                        backgroundSize="cover"
+                                        backgroundColor={name.toLowerCase()}
+                                        backgroundImage={`url(${
+                                            swatch?.disBaseLink || swatch.link
+                                        })`}
+                                    />
+                                ) : (
+                                    name
+                                )
+
+                                return (
+                                    <Swatch
+                                        key={value}
+                                        value={value}
+                                        name={name}
+                                        variant={'circle'}
+                                        isFocusable={true}
+                                    >
+                                        {content}
+                                    </Swatch>
+                                )
+                            })}
+                        </SwatchGroup>
+                    ))}
+
                 {/* Title */}
                 <Text {...styles.title}>{localizedProductName}</Text>
 
@@ -186,6 +276,7 @@ ProductTile.propTypes = {
             disBaseLink: PropTypes.string,
             link: PropTypes.string
         }),
+        imageGroups: PropTypes.array,
         price: PropTypes.number,
         // `name` is present and localized when `product` is provided by a RecommendedProducts component
         // (from Shopper Products `getProducts` endpoint), but is not present when `product` is
@@ -200,7 +291,10 @@ ProductTile.propTypes = {
         // Note: useEinstein() transforms snake_case property names from the API response to camelCase
         productName: PropTypes.string,
         productId: PropTypes.string,
-        hitType: PropTypes.string
+        representedProduct: PropTypes.object,
+        hitType: PropTypes.string,
+        variationAttributes: PropTypes.array,
+        variants: PropTypes.array
     }),
     /**
      * Enable adding/removing product as a favourite.
@@ -216,6 +310,15 @@ ProductTile.propTypes = {
      * interacts with favourite icon/button.
      */
     onFavouriteToggle: PropTypes.func,
+    /**
+     * The `viewType` of the image component. This defaults to 'large'.
+     */
+    imageViewType: PropTypes.string,
+    /**
+     * When displaying a master/variant product, this value represents the variation attribute that is displayed
+     * as a swatch below the main image. The default for this property is `color`.
+     */
+    selectableAttributeId: PropTypes.string,
     dynamicImageProps: PropTypes.object
 }