Allow Adding to Wishlist from the Product List Page

packages/pwa/app/commerce-api/hooks/useCustomerProductLists.js

@@ -106,7 +106,7 @@ export default function useCustomerProductLists() {
             },
 
             get loaded() {
-                return customerProductLists?.data?.length
+                return !!customerProductLists?.data?.length
             },
 
             getProductListPerType(type) {

packages/pwa/app/commerce-api/hooks/useShopper.js

@@ -86,17 +86,16 @@ const useShopper = () => {
     useEffect(() => {
         // Fetch product details for new items in product-lists
         const hasCustomerProductLists = customerProductLists?.loaded
-        if (hasCustomerProductLists) {
-            customerProductLists.data.forEach((list) => {
-                let ids = list.customerProductListItems?.map((item) => item.productId)
-                if (list?._productItemsDetail) {
-                    ids = ids.filter((id) => !list?._productItemsDetail[id])
-                }
+        if (!hasCustomerProductLists) return
+        customerProductLists.data.forEach((list) => {
+            let ids = list.customerProductListItems?.map((item) => item.productId)
+            if (list?._productItemsDetail) {
+                ids = ids.filter((id) => !list?._productItemsDetail[id])
+            }
 
-                customerProductLists.getProductsInList(ids?.toString(), list.id)
-            })
-        }
-    }, [customerProductLists])
+            customerProductLists.getProductsInList(ids?.toString(), list.id)
+        })
+    }, [customerProductLists.data])
 
     return {customer, basket}
 }

packages/pwa/app/components/confirmation-modal/index.jsx

@@ -29,18 +29,23 @@ const ConfirmationModal = ({
 }) => {
     const {formatMessage} = useIntl()
 
-    const handleConfirmClicked = () => {
+    const handleConfirmClick = () => {
         onPrimaryAction()
         props.onClose()
     }
 
-    const handleCancelClicked = () => {
+    const handleAlternateActionClick = () => {
         onAlternateAction()
         props.onClose()
     }
 
     return (
-        <AlertDialog isOpen={props.isOpen} isCentered onClose={handleCancelClicked} {...props}>
+        <AlertDialog
+            isOpen={props.isOpen}
+            isCentered
+            onClose={handleAlternateActionClick}
+            {...props}
+        >
             <AlertDialogOverlay />
             <AlertDialogContent>
                 <AlertDialogHeader>{formatMessage(dialogTitle)}</AlertDialogHeader>
@@ -49,10 +54,10 @@ const ConfirmationModal = ({
                 </AlertDialogBody>
 
                 <AlertDialogFooter>
-                    <Button variant="ghost" mr={3} onClick={handleCancelClicked}>
+                    <Button variant="ghost" mr={3} onClick={handleAlternateActionClick}>
                         {formatMessage(alternateActionLabel)}
                     </Button>
-                    <Button variant="solid" onClick={handleConfirmClicked}>
+                    <Button variant="solid" onClick={handleConfirmClick}>
                         {formatMessage(primaryActionLabel)}
                     </Button>
                 </AlertDialogFooter>

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

@@ -13,6 +13,15 @@ import CartItemVariantPrice from '../cart-item-variant/item-price'
 import LoadingSpinner from '../loading-spinner'
 import {noop} from '../../utils/utils'
 
+/**
+ * Component representing a product item usually in a list with details about the product - name, variant, pricing, etc.
+ * @param {Object} product Product to be represented in the list item.
+ * @param {node} primaryAction Child component representing the most prominent action to be performed by the user.
+ * @param {node} secondaryActions Child component representing the other actions relevant to the product to be performed by the user.
+ * @param {func} onItemQuantityChange callback function to be invoked whenever item quantity changes.
+ * @param {boolean} showLoading Renders a loading spinner with overlay if set to true.
+ * @returns A JSX element representing product item in a list (eg: wishlist, cart, etc).
+ */
 const ProductItem = ({
     product,
     primaryAction,

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

@@ -4,6 +4,7 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
+import {WishlistIcon, WishlistSolidIcon} from '../icons'
 
 // Components
 import {
@@ -14,16 +15,20 @@ import {
     Skeleton as ChakraSkeleton,
     Text,
     Stack,
-    useMultiStyleConfig
+    useMultiStyleConfig,
+    IconButton
 } from '@chakra-ui/react'
 
 // Hooks
 import {useIntl} from 'react-intl'
 
 // Other
 import {productUrlBuilder} from '../../utils/url'
-import {isServer} from '../../utils/utils'
+import {isServer, noop} from '../../utils/utils'
 import Link from '../link'
+import withRegistration from '../../hoc/with-registration'
+
+const IconButtonWithRegistration = withRegistration(IconButton)
 
 // Component Skeleton
 export const Skeleton = () => {
@@ -56,6 +61,10 @@ const ProductTile = (props) => {
         productSearchItem,
         // eslint-disable-next-line react/prop-types
         staticContext,
+        // onWishlistItemToggled = noop,
+        onAddToWishlistClick = noop,
+        onRemoveWishlistClick = noop,
+        isInWishlist,
         ...rest
     } = props
     const {currency, image, price, productName} = productSearchItem
@@ -76,6 +85,30 @@ const ProductTile = (props) => {
                 <AspectRatio {...styles.image} ratio={1} display={isServer ? 'none' : 'block'}>
                     <Image alt={image.alt} src={image.disBaseLink} ignoreFallback={true} />
                 </AspectRatio>
+                {isInWishlist ? (
+                    <IconButton
+                        aria-label={intl.formatMessage({
+                            defaultMessage: 'Wishlist'
+                        })}
+                        icon={<WishlistSolidIcon />}
+                        variant="unstyled"
+                        {...styles.iconButton}
+                        onClick={(e) => {
+                            e.preventDefault()
+                            onRemoveWishlistClick()
+                        }}
+                    />
+                ) : (
+                    <IconButtonWithRegistration
+                        aria-label={intl.formatMessage({
+                            defaultMessage: 'Wishlist'
+                        })}
+                        icon={<WishlistIcon />}
+                        variant="unstyled"
+                        {...styles.iconButton}
+                        onClick={onAddToWishlistClick}
+                    />
+                )}
             </Box>
 
             {/* Title */}
@@ -98,7 +131,19 @@ ProductTile.propTypes = {
      * The product search hit that will be represented in this
      * component.
      */
-    productSearchItem: PropTypes.object.isRequired
+    productSearchItem: PropTypes.object.isRequired,
+    /**
+     * Types of lists the product/variant is added to. (eg: wishlist)
+     */
+    isInWishlist: PropTypes.bool,
+    /**
+     * Callback function to be invoked when the user add item to wishlist
+     */
+    onAddToWishlistClick: PropTypes.func,
+    /**
+     * Callback function to be invoked when the user removes item to wishlist
+     */
+    onRemoveWishlistClick: PropTypes.func
 }
 
 export default ProductTile

packages/pwa/app/hoc/with-registration/index.jsx

@@ -21,7 +21,8 @@ const withRegistration = (Component) => {
         const {formatMessage} = useIntl()
         const showToast = useToast()
 
-        const handleClick = () => {
+        const handleClick = (e) => {
+            e.preventDefault()
             if (customer?.authType !== 'registered') {
                 // Do not show auth modal if users is already on the login page
                 if (isLoginPage) {

packages/pwa/app/pages/account/wishlist/index.jsx

@@ -49,10 +49,11 @@ const AccountWishlist = () => {
             const wishlist = customerProductLists.getProductListPerType(
                 customerProductListTypes.WISHLIST
             )
-
-            setWishlist(wishlist)
+            if (wishlist?._productItemsDetail) {
+                setWishlist(wishlist)
+            }
         }
-    }, [customerProductLists])
+    }, [customerProductLists.data])
 
     if (!wishlist) {
         return (