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

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

@@ -5,9 +5,9 @@
  * 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'
+import useMultiSite from '@salesforce/retail-react-app/app/hooks/use-multi-site'
 
 // Components
 import {
@@ -21,14 +21,20 @@ 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 {productUrlBuilder, rebuildPathWithParams} from '@salesforce/retail-react-app/app/utils/url'
 import {useCurrency} from '@salesforce/retail-react-app/app/hooks'
+import {filterImageGroups} from '../../utils/product-utils'
 
 const IconButtonWithRegistration = withRegistration(IconButton)
 
@@ -56,36 +62,87 @@ 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 = 'large',
         isFavourite,
         onFavouriteToggle,
-        dynamicImageProps,
+        product,
+        selectableAttributeId = 'color',
         ...rest
     } = props
+    const {currency, imageGroups, price, productId, hitType} = product
+
+    const intl = useIntl()
+    const {buildUrl} = useMultiSite()
+    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)
+
+    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])
+
+    const productUrl = useMemo(() => {
+        return rebuildPathWithParams(productUrlBuilder({id: productId}), {
+            [selectableAttributeId]: selectableAttributeValue
+        })
+    }, [product, selectableAttributeId, selectableAttributeValue])
+
+    // NOTE: variationAttributes are only defined for master/variant type products.
+    const variationAttributes = useMemo(() => {
+        // NOTE: Decorate the product variant attributes to easily access images and hrefs.
+        return product?.variationAttributes?.map((variationAttribute) => ({
+            ...variationAttribute,
+            values: variationAttribute.values.map((value) => {
+                const variationValues = {[selectableAttributeId]: value.value}
+                const swatchImage = filterImageGroups(product.imageGroups, {
+                    viewType: 'swatch',
+                    variationValues
+                })?.[0]?.images[0]
+                const productHref = buildUrl(rebuildPathWithParams(productUrl, variationValues))
+
+                return {
+                    ...value,
+                    image: swatchImage,
+                    href: productHref
+                }
+            })
+        }))
+    }, [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}>
@@ -104,6 +161,50 @@ const ProductTile = (props) => {
                     )}
                 </Box>
 
+                {/* Swatches */}
+                {variationAttributes
+                    ?.filter(({id}) => selectableAttributeId == id)
+                    ?.map(({id, values}) => {
+                        const attributeId = id
+                        return (
+                            <SwatchGroup key={id}>
+                                {values?.map(({href, name, image, value}) => {
+                                    const content = image ? (
+                                        <Box
+                                            height="100%"
+                                            width="100%"
+                                            minWidth="32px"
+                                            backgroundRepeat="no-repeat"
+                                            backgroundSize="cover"
+                                            backgroundColor={name.toLowerCase()}
+                                            backgroundImage={`url(${
+                                                image.disBaseLink || image.link
+                                            })`}
+                                        />
+                                    ) : (
+                                        name
+                                    )
+
+                                    return (
+                                        <Swatch
+                                            key={value}
+                                            href={href}
+                                            handleMouseEnter={(value) =>
+                                                setSelectableAttributeValue(value)
+                                            }
+                                            value={value}
+                                            name={name}
+                                            variant={attributeId === 'color' ? 'circle' : 'square'}
+                                            selected={value === selectableAttributeValue}
+                                        >
+                                            {content}
+                                        </Swatch>
+                                    )
+                                })}
+                            </SwatchGroup>
+                        )
+                    })}
+
                 {/* Title */}
                 <Text {...styles.title}>{localizedProductName}</Text>
 
@@ -186,6 +287,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 +302,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 +321,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
 }
 

packages/template-retail-react-app/app/components/swatch-group/index.jsx

@@ -24,16 +24,18 @@ const SwatchGroup = (props) => {
     const styles = useStyleConfig('SwatchGroup')
     return (
         <Flex {...styles.swatchGroup} role="radiogroup" aria-label={label}>
-            <HStack {...styles.swatchLabel}>
-                <Box fontWeight="semibold">
-                    <FormattedMessage
-                        id="swatch_group.selected.label"
-                        defaultMessage="{label}:"
-                        values={{label}}
-                    />
-                </Box>
-                <Box>{displayName}</Box>
-            </HStack>
+            {label && (
+                <HStack {...styles.swatchLabel}>
+                    <Box fontWeight="semibold">
+                        <FormattedMessage
+                            id="swatch_group.selected.label"
+                            defaultMessage="{label}:"
+                            values={{label}}
+                        />
+                    </Box>
+                    <Box>{displayName}</Box>
+                </HStack>
+            )}
             <Flex {...styles.swatchesWrapper}>{children}</Flex>
         </Flex>
     )

packages/template-retail-react-app/app/components/swatch-group/swatch.jsx

@@ -5,7 +5,7 @@
  * 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 React, {useCallback} from 'react'
 import PropTypes from 'prop-types'
 import {
     Button,
@@ -14,6 +14,7 @@ import {
     useMultiStyleConfig
 } from '@salesforce/retail-react-app/app/components/shared/ui'
 import {Link as RouteLink} from 'react-router-dom'
+import {noop} from '@salesforce/retail-react-app/app/utils/utils'
 
 /**
  * The Swatch Component displays item inside `SwatchGroup`. For proper keyboard accessibility,
@@ -27,11 +28,13 @@ const Swatch = ({
     name,
     selected,
     isFocusable,
+    value,
+    handleMouseEnter = noop,
     variant = 'square'
 }) => {
     const styles = useMultiStyleConfig('SwatchGroup', {variant, disabled, selected})
-    /** Mimic the behavior of native radio inputs by using arrow keys to select prev/next value. */
-    const onKeyDown = (evt) => {
+
+    const onKeyDown = useCallback((evt) => {
         let sibling
         // This is not a very react-y way implementation... ¯\_(ツ)_/¯
         switch (evt.key) {
@@ -52,7 +55,12 @@ const Swatch = ({
         }
         sibling?.click()
         sibling?.focus()
-    }
+    }, [])
+
+    const onMouseEnter = useCallback((e) => {
+        e.preventDefault()
+        handleMouseEnter(value)
+    }, [])
 
     return (
         <Button
@@ -61,9 +69,10 @@ const Swatch = ({
             to={href}
             aria-label={name}
             aria-checked={selected}
+            onMouseEnter={onMouseEnter}
+            onKeyDown={onKeyDown}
             variant="outline"
             role="radio"
-            onKeyDown={onKeyDown}
             // To mimic the behavior of native radio inputs, only one input should be focusable.
             // (The rest are selectable via arrow keys.)
             tabIndex={isFocusable ? 0 : -1}
@@ -115,7 +124,11 @@ Swatch.propTypes = {
     /**
      * Whether the swatch can receive tab focus
      */
-    isFocusable: PropTypes.bool
+    isFocusable: PropTypes.bool,
+    /**
+     * This function is called whenever the mouse enters the swatch. The values is passed as the first argument.
+     */
+    handleMouseEnter: PropTypes.func
 }
 
 export default Swatch

packages/template-retail-react-app/app/hooks/use-variation-attributes.js

@@ -14,7 +14,7 @@ import {useVariationParams} from '@salesforce/retail-react-app/app/hooks/use-var
 // Utils
 import {updateSearchParams} from '@salesforce/retail-react-app/app/utils/url'
 import {usePDPSearchParams} from '@salesforce/retail-react-app/app/hooks/use-pdp-search-params'
-
+import {filterImageGroups} from '@salesforce/retail-react-app/app/utils/product-utils'
 /**
  * Return the first image in the `swatch` type image group for a given
  * variation value of a product.
@@ -23,21 +23,15 @@ import {usePDPSearchParams} from '@salesforce/retail-react-app/app/hooks/use-pdp
  * @param {Object} variationValue
  * @returns {Object} image
  */
-const getVariantValueSwatch = (product, variationValue) => {
+export const getVariantValueSwatch = (product, variationValue) => {
     const {imageGroups = []} = product
 
-    const imageGroup = imageGroups
-        .filter(({viewType}) => viewType === 'swatch')
-        .find(({variationAttributes = []}) => {
-            const colorAttribute = variationAttributes.find(({id}) => id === 'color')
-            const colorValues = colorAttribute?.values || []
-
-            // A single image can represent multiple variation values, so we only need
-            // ensure the variation values appears in once of the images represented values.
-            return colorValues.some(({value}) => value === variationValue.value)
-        })
-
-    return imageGroup?.images?.[0]
+    return filterImageGroups(imageGroups, {
+        viewType: 'swatch',
+        variationValues: {
+            ['color']: variationValue.value
+        }
+    })?.[0]?.images?.[0]
 }
 
 /**
@@ -48,7 +42,7 @@ const getVariantValueSwatch = (product, variationValue) => {
  * @param {Object} location
  * @returns {String} a product url for the current variation value.
  */
-const buildVariantValueHref = ({
+export const buildVariantValueHref = ({
     pathname,
     existingParams,
     newParams,
@@ -76,7 +70,7 @@ const buildVariantValueHref = ({
  * @param {Object} variationParams
  * @returns
  */
-const isVariantValueOrderable = (product, variationParams) => {
+export const isVariantValueOrderable = (product, variationParams) => {
     return product.variants
         .filter(({variationValues}) =>
             Object.keys(variationParams).every(

packages/template-retail-react-app/app/pages/product-list/index.jsx

@@ -150,6 +150,10 @@ const ProductList = (props) => {
         {
             parameters: {
                 ...restOfParams,
+                perPricebook: true,
+                allVariationProperties: true,
+                expand: ['promotions', 'variations', 'prices', 'images'],
+                allImages: true,
                 refine: _refine
             }
         },