Enable wishlist functionalities for Einstein recommended products

packages/pwa/CHANGELOG.md

@@ -1,6 +1,7 @@
 ## To be released
 
 -   Fix wishlist bugs and provide better hooks for wishlist features. [#64](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/64)
+-   Integrate wishlist with einstein recommended products. [#131](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/131)
 -   Lazy load Popover component. [#134](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/134)
 
 ## v1.0.0 (Sep 08, 2021)

packages/pwa/app/components/header/index.jsx

@@ -40,7 +40,7 @@ import {
     BasketIcon,
     HamburgerIcon,
     ChevronDownIcon,
-    WishlistIcon,
+    HeartIcon,
     SignoutIcon
 } from '../icons'
 
@@ -241,7 +241,7 @@ const Header = ({
                         aria-label={intl.formatMessage({
                             defaultMessage: 'Wishlist'
                         })}
-                        icon={<WishlistIcon />}
+                        icon={<HeartIcon />}
                         variant="unstyled"
                         {...styles.icons}
                         onClick={onWishlistClick}

packages/pwa/app/components/icons/index.jsx

@@ -47,8 +47,8 @@ import '../../assets/svg/signout.svg'
 import '../../assets/svg/user.svg'
 import '../../assets/svg/visibility.svg'
 import '../../assets/svg/visibility-off.svg'
-import '../../assets/svg/wishlist.svg'
-import '../../assets/svg/wishlist-solid.svg'
+import '../../assets/svg/heart.svg'
+import '../../assets/svg/heart-solid.svg'
 import '../../assets/svg/close.svg'
 
 // For non-square SVGs, we can use the symbol data from the import to set the
@@ -145,6 +145,6 @@ export const UserIcon = icon('user')
 export const VisaIcon = icon('cc-visa', {viewBox: VisaSymbol.viewBox})
 export const VisibilityIcon = icon('visibility')
 export const VisibilityOffIcon = icon('visibility-off')
-export const WishlistIcon = icon('wishlist')
-export const WishlistSolidIcon = icon('wishlist-solid')
+export const HeartIcon = icon('heart')
+export const HeartSolidIcon = icon('heart-solid')
 export const CloseIcon = icon('close')

packages/pwa/app/components/product-scroller/index.jsx

@@ -7,7 +7,6 @@
 import React, {forwardRef, useRef} from 'react'
 import PropTypes from 'prop-types'
 import {AspectRatio, Box, Heading, IconButton, Skeleton, Stack} from '@chakra-ui/react'
-import ProductTile from '../../components/product-tile'
 import {ChevronLeftIcon, ChevronRightIcon} from '../icons'
 
 /**
@@ -23,7 +22,7 @@ const ProductScroller = forwardRef(
             isLoading,
             scrollProps,
             itemWidth = {base: '70%', md: '40%', lg: 'calc(33.33% - 10px)'},
-            onProductClick = () => null,
+            renderProduct,
             ...props
         },
         ref
@@ -92,11 +91,7 @@ const ProductScroller = forwardRef(
                                             </Stack>
                                         </Stack>
                                     ) : (
-                                        <ProductTile
-                                            data-testid="product-scroller-item"
-                                            productSearchItem={product}
-                                            onClick={() => onProductClick(product)}
-                                        />
+                                        renderProduct(product)
                                     )}
                                 </Box>
                             )
@@ -160,8 +155,8 @@ ProductScroller.propTypes = {
     products: PropTypes.array,
     isLoading: PropTypes.bool,
     scrollProps: PropTypes.object,
-    itemWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
-    onProductClick: PropTypes.func
+    renderProduct: PropTypes.func,
+    itemWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object])
 }
 
 export default ProductScroller

packages/pwa/app/components/product-scroller/index.test.js

@@ -24,17 +24,30 @@ const testProducts = [1, 2, 3, 4].map((i) => ({
     currency: 'USD'
 }))
 
+const noop = () => {}
+
 describe('Product Scroller', () => {
     test('renders loading skeletons', () => {
-        renderWithProviders(<ProductScroller isLoading />)
+        renderWithProviders(<ProductScroller isLoading renderProduct={noop} />)
         expect(screen.getAllByTestId('product-scroller-item-skeleton')).toHaveLength(4)
     })
     test('renders nothing when no products and not loading', () => {
-        renderWithProviders(<ProductScroller />)
+        renderWithProviders(<ProductScroller renderProduct={noop} />)
         expect(screen.queryByTestId('product-scroller')).not.toBeInTheDocument()
     })
-    test('Renders scrollable product tiles and title', () => {
-        renderWithProviders(<ProductScroller title="Scroller Title" products={testProducts} />)
+    test('renders products with renderProduct prop', () => {
+        const mock = jest.fn()
+        renderWithProviders(<ProductScroller products={testProducts} renderProduct={mock} />)
+        expect(mock).toHaveBeenCalledTimes(testProducts.length)
+    })
+    test('Renders product items', () => {
+        renderWithProviders(
+            <ProductScroller
+                title="Scroller Title"
+                products={testProducts}
+                renderProduct={() => <div data-testid="product-scroller-item"></div>}
+            />
+        )
         expect(screen.getByText('Scroller Title')).toBeInTheDocument()
         expect(screen.getAllByTestId('product-scroller-item')).toHaveLength(4)
     })
@@ -43,12 +56,15 @@ describe('Product Scroller', () => {
             <ProductScroller
                 header={<h1 data-testid="custom-header">Scroller Header</h1>}
                 products={testProducts}
+                renderProduct={noop}
             />
         )
         expect(screen.getByTestId('custom-header')).toBeInTheDocument()
     })
     test('Renders left/right scroll buttons', () => {
-        renderWithProviders(<ProductScroller title="Scroller Title" products={testProducts} />)
+        renderWithProviders(
+            <ProductScroller title="Scroller Title" products={testProducts} renderProduct={noop} />
+        )
         user.click(screen.getByTestId('product-scroller-nav-right'))
         expect(window.HTMLElement.prototype.scrollBy).toHaveBeenCalledWith({
             top: 0,
@@ -66,7 +82,11 @@ describe('Product Scroller', () => {
     })
     test('Does not render left/right scroll buttons when less than 4 products', () => {
         renderWithProviders(
-            <ProductScroller title="Scroller Title" products={testProducts.slice(0, 2)} />
+            <ProductScroller
+                title="Scroller Title"
+                products={testProducts.slice(0, 2)}
+                renderProduct={noop}
+            />
         )
         expect(screen.queryByTestId('product-scroller-nav-left')).not.toBeInTheDocument()
         expect(screen.queryByTestId('product-scroller-nav-right')).not.toBeInTheDocument()

packages/pwa/app/components/product-tile/index.jsx

@@ -7,7 +7,7 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
-import {WishlistIcon, WishlistSolidIcon} from '../icons'
+import {HeartIcon, HeartSolidIcon} from '../icons'
 
 // Components
 import {
@@ -50,80 +50,47 @@ export const Skeleton = () => {
 }
 
 /**
- * The ProductTile is a simple visual representation of a product search hit
- * object. It will show it's default image, name and price.
+ * The ProductTile is a simple visual representation of a
+ * product object. It will show it's default image, name and price.
+ * It also supports favourite products, controlled by a heart icon.
  */
 const ProductTile = (props) => {
     const intl = useIntl()
-
-    // eslint-disable-next-line react/prop-types
-    const {
-        productSearchItem,
-        // eslint-disable-next-line react/prop-types
-        staticContext,
-        onAddToWishlistClick,
-        onRemoveWishlistClick,
-        isInWishlist,
-        isWishlistLoading,
-        ...rest
-    } = props
-    const {currency, image, price, productName} = productSearchItem
-    const styles = useMultiStyleConfig('ProductTile', {isLoading: isWishlistLoading})
+    const {product, enableFavourite = false, isFavourite, onFavouriteToggle, ...rest} = props
+    const {currency, image, price, productName, productId} = product
+    const styles = useMultiStyleConfig('ProductTile')
 
     return (
         <Link
             data-testid="product-tile"
             {...styles.container}
-            to={productUrlBuilder({id: productSearchItem?.productId}, intl.local)}
+            to={productUrlBuilder({id: productId}, intl.local)}
             {...rest}
         >
             <Box {...styles.imageWrapper}>
-                <AspectRatio {...styles.image} ratio={1}>
+                <AspectRatio {...styles.image}>
                     <Img alt={image.alt} src={image.disBaseLink} />
                 </AspectRatio>
-                {onAddToWishlistClick && onRemoveWishlistClick && (
-                    <>
-                        {isInWishlist ? (
-                            <IconButton
-                                aria-label={intl.formatMessage({
-                                    defaultMessage: 'wishlist-solid'
-                                })}
-                                icon={<WishlistSolidIcon />}
-                                variant="unstyled"
-                                {...styles.iconButton}
-                                onClick={(e) => {
-                                    e.preventDefault()
-                                    if (isWishlistLoading) return
-                                    onRemoveWishlistClick()
-                                }}
-                            />
-                        ) : (
-                            <IconButtonWithRegistration
-                                aria-label={intl.formatMessage({
-                                    defaultMessage: 'wishlist'
-                                })}
-                                icon={<WishlistIcon />}
-                                variant="unstyled"
-                                {...styles.iconButton}
-                                onClick={() => {
-                                    if (isWishlistLoading) return
-                                    onAddToWishlistClick()
-                                }}
-                            />
-                        )}
-                    </>
+
+                {enableFavourite && (
+                    <IconButtonWithRegistration
+                        aria-label={intl.formatMessage({
+                            defaultMessage: 'wishlist'
+                        })}
+                        icon={isFavourite ? <HeartSolidIcon /> : <HeartIcon />}
+                        {...styles.favIcon}
+                        onClick={() => {
+                            onFavouriteToggle(!isFavourite)
+                        }}
+                    />
                 )}
             </Box>
 
             {/* Title */}
-            <Text {...styles.title} aria-label="product name">
-                {productName}
-            </Text>
+            <Text {...styles.title}>{productName}</Text>
 
             {/* Price */}
-            <Text {...styles.price} aria-label="price">
-                {intl.formatNumber(price, {style: 'currency', currency})}
-            </Text>
+            <Text {...styles.price}>{intl.formatNumber(price, {style: 'currency', currency})}</Text>
         </Link>
     )
 }
@@ -135,20 +102,30 @@ ProductTile.propTypes = {
      * The product search hit that will be represented in this
      * component.
      */
-    productSearchItem: PropTypes.object.isRequired,
+    product: PropTypes.shape({
+        currency: PropTypes.string,
+        image: PropTypes.shape({
+            alt: PropTypes.string,
+            disBaseLink: PropTypes.string
+        }),
+        price: PropTypes.number,
+        productName: PropTypes.string,
+        productId: PropTypes.string
+    }),
     /**
-     * Types of lists the product/variant is added to. (eg: wishlist)
+     * Enable adding/removing product as a favourite.
+     * Use case: wishlist.
      */
-    isInWishlist: PropTypes.bool,
+    enableFavourite: PropTypes.bool,
     /**
-     * Callback function to be invoked when the user add item to wishlist
+     * Display the product as a faviourite.
      */
-    onAddToWishlistClick: PropTypes.func,
+    isFavourite: PropTypes.bool,
     /**
-     * Callback function to be invoked when the user removes item to wishlist
+     * Callback function to be invoked when the user
+     * interacts with favourite icon/button.
      */
-    onRemoveWishlistClick: PropTypes.func,
-    isWishlistLoading: PropTypes.bool
+    onFavouriteToggle: PropTypes.func
 }
 
 export default ProductTile

packages/pwa/app/components/product-tile/index.test.js

@@ -20,9 +20,7 @@ const mockProductSearchItem = {
 }
 
 test('Renders Breadcrumb', () => {
-    const {getAllByRole} = renderWithProviders(
-        <ProductTile productSearchItem={mockProductSearchItem} />
-    )
+    const {getAllByRole} = renderWithProviders(<ProductTile product={mockProductSearchItem} />)
 
     const link = getAllByRole('link')
     const img = getAllByRole('img')