Allow Adding to Wishlist from the Product List Page

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

@@ -2,8 +2,11 @@
  * Copyright (c) 2021 Mobify Research & Development Inc. All rights reserved. *
  * * *  *  * *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  * */
 import {useContext, useMemo, useEffect, useState} from 'react'
-import {isError, useCommerceAPI, CustomerProductListsContext, noop} from '../utils'
+import {isError, useCommerceAPI, CustomerProductListsContext} from '../utils'
+import {noop} from '../../utils/utils'
+
 import useCustomer from './useCustomer'
+import {customerProductListTypes} from '../../constants'
 // If the customerProductLists haven't yet loaded we store user actions inside
 // eventQueue and process the eventQueue once productLists have loaded
 const eventQueue = []
@@ -19,23 +22,37 @@ export default function useCustomerProductLists({eventHandler = noop, errorHandl
     const {customerProductLists, setCustomerProductLists} = useContext(CustomerProductListsContext)
     const [isLoading, setIsLoading] = useState(false)
 
-    const processEventQueue = () => {
-        eventQueue.forEach(async (event) => {
-            eventQueue.pop()
-
+    const processEventQueue = async () => {
+        while (eventQueue.length) {
+            // get the first item
+            const event = eventQueue.shift()
             switch (event.action) {
                 case eventActions.ADD: {
                     try {
-                        const productItem = {
-                            productId: event.item.id,
-                            quantity: event.item.quantity
-                        }
-                        await addItemToCustomerProductList(
-                            productItem,
-                            event.list?.id,
-                            event.listType
+                        const wishlist = self.getProductListPerType(
+                            customerProductListTypes.WISHLIST
                         )
-                        eventHandler(event)
+                        const productListItem = wishlist.customerProductListItems.find(
+                            ({productId}) => productId === event.item.id
+                        )
+                        // if the item is already in the wishlist
+                        // only update the quantity
+                        if (productListItem) {
+                            await self.updateCustomerProductListItem(wishlist, {
+                                ...productListItem,
+                                quantity: event.item.quantity + productListItem.quantity
+                            })
+                            eventHandler(event)
+                        } else {
+                            await self.createCustomerProductListItem(wishlist, {
+                                productId: event.item.productId,
+                                priority: 1,
+                                quantity: parseInt(event.item.quantity),
+                                public: false,
+                                type: 'product'
+                            })
+                            eventHandler(event)
+                        }
                     } catch (error) {
                         errorHandler(error)
                     }
@@ -51,30 +68,15 @@ export default function useCustomerProductLists({eventHandler = noop, errorHandl
                     }
                     break
             }
-        })
+        }
     }
 
     useEffect(() => {
-        if (eventQueue.length) {
+        if (eventQueue.length && customerProductLists?.data.length) {
             processEventQueue()
         }
     }, [customerProductLists])
 
-    const addItemToCustomerProductList = async (item, listId, listType) => {
-        // Either find the list by the id or by the type
-        const productList = listId
-            ? customerProductLists.data.find((list) => list.id === listId)
-            : customerProductLists.data.find((list) => list.type === listType)
-
-        return await self.createCustomerProductListItem(productList, {
-            productId: item.productId,
-            priority: 1,
-            quantity: item.quantity,
-            public: false,
-            type: 'product'
-        })
-    }
-
     const self = useMemo(() => {
         return {
             ...customerProductLists,
@@ -97,6 +99,7 @@ export default function useCustomerProductLists({eventHandler = noop, errorHandl
 
             /**
              * Fetches product lists for registered users or creates a new list if none exist
+             * due to the api limitation, we can not get the list based on type but all lists
              * @param {string} type type of list to fetch or create
              * @returns product lists for registered users
              */
@@ -196,7 +199,6 @@ export default function useCustomerProductLists({eventHandler = noop, errorHandl
             /**
              * Adds an item to the customer's product list.
              * @param {object} list
-             * @param {string} list.id id of the list to add the item to.
              * @param {Object} item item to be added to the list.
              */
             async createCustomerProductListItem(list, item) {

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/cart-item-variant/item-name.jsx

@@ -2,8 +2,8 @@
  * Copyright (c) 2021 Mobify Research & Development Inc. All rights reserved. *
  * * *  *  * *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  * */
 import React from 'react'
-import {Text} from '@chakra-ui/react'
 import {useCartItemVariant} from '.'
+import Link from '../link'
 
 /**
  * In the context of a cart product item variant, this components simply renders
@@ -15,9 +15,14 @@ const ItemName = (props) => {
     const variant = useCartItemVariant()
 
     return (
-        <Text fontWeight="bold" {...props}>
+        <Link
+            fontWeight="bold"
+            {...props}
+            color="black.600"
+            to={`/product/${variant?.master?.masterId}`}
+        >
             {variant.productName}
-        </Text>
+        </Link>
     )
 }
 

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,9 @@ const ProductTile = (props) => {
         productSearchItem,
         // eslint-disable-next-line react/prop-types
         staticContext,
+        onAddToWishlistClick = noop,
+        onRemoveWishlistClick = noop,
+        isInWishlist,
         ...rest
     } = props
     const {currency, image, price, productName} = productSearchItem
@@ -76,6 +84,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 +130,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/hooks/use-toast.js

@@ -60,10 +60,6 @@ export function useToast() {
                 )
             }
         }
-
-        // Prevent duplicate toasts
-        if (!toast.isActive(toastId)) {
-            toast(toastConfig)
-        }
+        toast(toastConfig)
     }
 }

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

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

packages/pwa/app/pages/cart/index.jsx

@@ -192,7 +192,6 @@ const Cart = () => {
         } catch (error) {
             showError(error)
         } finally {
-            // close the modal
             setCartItemLoading(false)
             setSelectedItem(undefined)
         }

packages/pwa/app/pages/cart/partials/cart-secondary-button-group.jsx

@@ -20,7 +20,7 @@ import {noop} from '../../../utils/utils'
 import useCustomer from '../../../commerce-api/hooks/useCustomer'
 
 export const REMOVE_CART_ITEM_CONFIRMATION_DIALOG_CONFIG = {
-    dialogTitle: defineMessage({defaultMessage: 'Confirm Remove Item'}),
+    dialogTitle: defineMessage({defaultMessage: 'Remove Item?'}),
     confirmationMessage: defineMessage({
         defaultMessage: 'Are you sure you want to remove this item from your cart?'
     }),