Added wishlist button component

components/product/ProductCard/ProductCard.tsx

@@ -1,15 +1,14 @@
-import React, { FC, ReactNode, Component } from 'react'
+import type { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
 import usePrice from '@lib/bigcommerce/use-price'
-import { Heart } from '@components/icons'
 import { EnhancedImage } from '@components/core'
 import s from './ProductCard.module.css'
+import WishlistButton from '@components/wishlist/WishlistButton'
 
 interface Props {
   className?: string
-  children?: ReactNode[] | Component[] | any[]
   product: ProductNode
   variant?: 'slim' | 'simple'
   imgWidth: number
@@ -25,7 +24,7 @@ const ProductCard: FC<Props> = ({
   imgHeight,
   priority,
 }) => {
-  const src = p.images.edges?.[0]?.node.urlOriginal!
+  const src = p.images.edges?.[0]?.node?.urlOriginal!
   const { price } = usePrice({
     amount: p.prices?.price?.value,
     baseAmount: p.prices?.retailPrice?.value,
@@ -65,9 +64,11 @@ const ProductCard: FC<Props> = ({
             </h3>
             <span className={s.productPrice}>{price}</span>
           </div>
-          <div className={s.wishlistButton}>
-            <Heart />
-          </div>
+          <WishlistButton
+            className={s.wishlistButton}
+            productId={p.entityId}
+            variant={p.variants.edges?.[0]!}
+          />
         </div>
         <div className={cn(s.imageContainer)}>
           <EnhancedImage

components/wishlist/WishlistButton/WishlistButton.tsx

@@ -0,0 +1,65 @@
+import React, { FC, useState } from 'react'
+import cn from 'classnames'
+import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
+import useAddItem from '@lib/bigcommerce/wishlist/use-add-item'
+import useWishlist from '@lib/bigcommerce/wishlist/use-wishlist'
+import useCustomer from '@lib/bigcommerce/use-customer'
+import { Heart } from '@components/icons'
+import { useUI } from '@components/ui/context'
+
+type Props = {
+  productId: number
+  variant: NonNullable<ProductNode['variants']['edges']>[0]
+} & React.ButtonHTMLAttributes<HTMLButtonElement>
+
+const WishlistButton: FC<Props> = ({
+  productId,
+  variant,
+  className,
+  ...props
+}) => {
+  const addItem = useAddItem()
+  const { data } = useWishlist()
+  const { data: customer } = useCustomer()
+  const [loading, setLoading] = useState(false)
+  const { openModal, setModalView } = useUI()
+  const isInWishlist = data?.items?.some(
+    (item) =>
+      item.product_id === productId &&
+      item.variant_id === variant?.node.entityId
+  )
+
+  const addToWishlist = async (e: any) => {
+    e.preventDefault()
+    setLoading(true)
+
+    // A login is required before adding an item to the wishlist
+    if (!customer) {
+      setModalView('LOGIN_VIEW')
+      return openModal()
+    }
+
+    try {
+      await addItem({
+        productId,
+        variantId: variant?.node.entityId!,
+      })
+
+      setLoading(false)
+    } catch (err) {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <button
+      {...props}
+      className={cn({ 'opacity-50': loading }, className)}
+      onClick={addToWishlist}
+    >
+      <Heart fill={isInWishlist ? 'white' : 'none'} />
+    </button>
+  )
+}
+
+export default WishlistButton

components/wishlist/WishlistButton/index.ts

@@ -0,0 +1 @@
+export { default } from './WishlistButton'

lib/bigcommerce/api/operations/get-customer-wishlist.ts

@@ -41,7 +41,7 @@ async function getCustomerWishlist({
 
   const { data } = await config.storeApiFetch<
     RecursivePartial<{ data: Wishlist[] }>
-  >(`/v3/wishlists/customer_id=${variables.customerId}`)
+  >(`/v3/wishlists?customer_id=${variables.customerId}`)
   const wishlists = (data as RecursiveRequired<typeof data>) ?? []
   const wishlist = wishlists[0]
 

lib/bigcommerce/api/wishlist/handlers/add-item.ts

@@ -38,11 +38,14 @@ const addItem: WishlistHandlers['addItem'] = async ({
             items: [parseWishlistItem(item)],
           }
         : {
+            name: 'Wishlist',
             customer_id: customerId,
             items: [parseWishlistItem(item)],
+            is_public: false,
           }
     ),
   }
+
   const { data } = wishlist
     ? await config.storeApiFetch(`/v3/wishlists/${wishlist.id}/items`, options)
     : await config.storeApiFetch('/v3/wishlists', options)

lib/bigcommerce/api/wishlist/index.ts

@@ -75,7 +75,7 @@ const wishlistApi: BigcommerceApiHandler<Wishlist, WishlistHandlers> = async (
     const { wishlistId, itemId, customerId } = req.body
 
     // Return current wishlist info
-    if (req.method === 'GET' && wishlistId) {
+    if (req.method === 'GET') {
       const body = { customerToken }
       return await handlers['getWishlist']({ req, res, config, body })
     }