Added useRemoveItem and other fixes

components/wishlist/WishlistButton/WishlistButton.tsx

@@ -2,6 +2,7 @@ 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 useRemoveItem from '@lib/bigcommerce/wishlist/use-remove-item'
 import useWishlist from '@lib/bigcommerce/wishlist/use-wishlist'
 import useCustomer from '@lib/bigcommerce/use-customer'
 import { Heart } from '@components/icons'
@@ -19,19 +20,21 @@ const WishlistButton: FC<Props> = ({
   ...props
 }) => {
   const addItem = useAddItem()
+  const removeItem = useRemoveItem()
   const { data } = useWishlist()
   const { data: customer } = useCustomer()
   const [loading, setLoading] = useState(false)
   const { openModal, setModalView } = useUI()
-  const isInWishlist = data?.items?.some(
+  const itemInWishlist = data?.items?.find(
     (item) =>
       item.product_id === productId &&
       item.variant_id === variant?.node.entityId
   )
 
-  const addToWishlist = async (e: any) => {
+  const handleWishlistChange = async (e: any) => {
     e.preventDefault()
-    setLoading(true)
+
+    if (loading) return
 
     // A login is required before adding an item to the wishlist
     if (!customer) {
@@ -39,11 +42,17 @@ const WishlistButton: FC<Props> = ({
       return openModal()
     }
 
+    setLoading(true)
+
     try {
-      await addItem({
-        productId,
-        variantId: variant?.node.entityId!,
-      })
+      if (itemInWishlist) {
+        await removeItem({ id: itemInWishlist.id! })
+      } else {
+        await addItem({
+          productId,
+          variantId: variant?.node.entityId!,
+        })
+      }
 
       setLoading(false)
     } catch (err) {
@@ -55,9 +64,9 @@ const WishlistButton: FC<Props> = ({
     <button
       {...props}
       className={cn({ 'opacity-50': loading }, className)}
-      onClick={addToWishlist}
+      onClick={handleWishlistChange}
     >
-      <Heart fill={isInWishlist ? 'white' : 'none'} />
+      <Heart fill={itemInWishlist ? 'white' : 'none'} />
     </button>
   )
 }

lib/bigcommerce/api/utils/fetch-store-api.ts

@@ -41,7 +41,7 @@ export default async function fetchStoreApi<T>(
     throw new BigcommerceApiError(msg, res, data)
   }
 
-  if (!isJSON) {
+  if (res.status !== 204 && !isJSON) {
     throw new BigcommerceApiError(
       `Fetch to Bigcommerce API failed, expected JSON content but found: ${contentType}`,
       res

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

@@ -1,20 +1,34 @@
+import getCustomerId from '../../operations/get-customer-id'
+import getCustomerWishlist, {
+  Wishlist,
+} from '../../operations/get-customer-wishlist'
 import type { WishlistHandlers } from '..'
 
 // Return current wishlist info
 const removeItem: WishlistHandlers['removeItem'] = async ({
   res,
-  body: { wishlistId, itemId },
+  body: { customerToken, itemId },
   config,
 }) => {
-  if (!wishlistId || !itemId) {
+  const customerId =
+    customerToken && (await getCustomerId({ customerToken, config }))
+  const { wishlist } =
+    (customerId &&
+      (await getCustomerWishlist({
+        variables: { customerId },
+        config,
+      }))) ||
+    {}
+
+  if (!wishlist || !itemId) {
     return res.status(400).json({
       data: null,
       errors: [{ message: 'Invalid request' }],
     })
   }
 
-  const result = await config.storeApiFetch<{ data: any } | null>(
-    `/v3/wishlists/${wishlistId}/items/${itemId}`,
+  const result = await config.storeApiFetch<{ data: Wishlist } | null>(
+    `/v3/wishlists/${wishlist.id}/items/${itemId}`,
     { method: 'DELETE' }
   )
   const data = result?.data ?? null

lib/bigcommerce/api/wishlist/index.ts

@@ -22,7 +22,7 @@ export type ItemBody = {
 
 export type AddItemBody = { item: ItemBody }
 
-export type RemoveItemBody = { wishlistId: string; itemId: string }
+export type RemoveItemBody = { itemId: string }
 
 export type WishlistBody = {
   customer_id: number
@@ -52,7 +52,7 @@ export type WishlistHandlers = {
   >
   removeItem: BigcommerceHandler<
     Wishlist,
-    { wishlistId: string } & Body<RemoveItemBody>
+    { customerToken?: string } & Body<RemoveItemBody>
   >
   removeWishlist: BigcommerceHandler<Wishlist, { wishlistId: string }>
 }
@@ -93,11 +93,8 @@ const wishlistApi: BigcommerceApiHandler<Wishlist, WishlistHandlers> = async (
     }
 
     // Remove an item from the wishlist
-    if (req.method === 'DELETE' && wishlistId && itemId) {
-      const body = {
-        wishlistId: wishlistId as string,
-        itemId: itemId as string,
-      }
+    if (req.method === 'DELETE') {
+      const body = { ...req.body, customerToken }
       return await handlers['removeItem']({ req, res, config, body })
     }
 

lib/bigcommerce/cart/use-remove-item.tsx

@@ -26,7 +26,7 @@ export const fetcher: HookFetcher<Cart | null, RemoveItemBody> = (
 }
 
 export function extendHook(customFetcher: typeof fetcher) {
-  const useRemoveItem = (item?: any) => {
+  const useRemoveItem = () => {
     const { mutate } = useCart()
     const fn = useCartRemoveItem<Cart | null, RemoveItemBody>(
       defaultOpts,
@@ -35,7 +35,7 @@ export function extendHook(customFetcher: typeof fetcher) {
 
     return useCallback(
       async function removeItem(input: RemoveItemInput) {
-        const data = await fn({ itemId: input.id ?? item?.id })
+        const data = await fn({ itemId: input.id })
         await mutate(data, false)
         return data
       },

lib/bigcommerce/wishlist/use-add-item.tsx

@@ -45,7 +45,7 @@ export function extendHook(customFetcher: typeof fetcher) {
         await mutate(data, false)
         return data
       },
-      [fn, mutate]
+      [fn, mutate, customer]
     )
   }
 

lib/bigcommerce/wishlist/use-remove-item.tsx

@@ -1,45 +1,55 @@
 import { useCallback } from 'react'
 import { HookFetcher } from '@lib/commerce/utils/types'
-import useAction from '@lib/commerce/utils/use-action'
+import { CommerceError } from '@lib/commerce/utils/errors'
+import useWishlistRemoveItem from '@lib/commerce/wishlist/use-remove-item'
 import type { RemoveItemBody } from '../api/wishlist'
+import useCustomer from '../use-customer'
 import useWishlist, { Wishlist } from './use-wishlist'
 
 const defaultOpts = {
-  url: '/api/bigcommerce/wishlists',
+  url: '/api/bigcommerce/wishlist',
   method: 'DELETE',
 }
 
 export type RemoveItemInput = {
-  id: string
+  id: string | number
 }
 
 export const fetcher: HookFetcher<Wishlist | null, RemoveItemBody> = (
   options,
-  { wishlistId, itemId },
+  { itemId },
   fetch
 ) => {
   return fetch({
     ...defaultOpts,
     ...options,
-    body: { wishlistId, itemId },
+    body: { itemId },
   })
 }
 
 export function extendHook(customFetcher: typeof fetcher) {
-  const useRemoveItem = (wishlistId: string, item?: any) => {
+  const useRemoveItem = () => {
+    const { data: customer } = useCustomer()
     const { mutate } = useWishlist()
-    const fn = useAction<Wishlist | null, RemoveItemBody>(
+    const fn = useWishlistRemoveItem<Wishlist | null, RemoveItemBody>(
       defaultOpts,
       customFetcher
     )
 
     return useCallback(
       async function removeItem(input: RemoveItemInput) {
-        const data = await fn({ wishlistId, itemId: input.id ?? item?.id })
+        if (!customer) {
+          // A signed customer is required in order to have a wishlist
+          throw new CommerceError({
+            message: 'Signed customer not found',
+          })
+        }
+
+        const data = await fn({ itemId: String(input.id) })
         await mutate(data, false)
         return data
       },
-      [fn, mutate]
+      [fn, mutate, customer]
     )
   }
 

lib/commerce/wishlist/use-remove-item.tsx

@@ -0,0 +1,5 @@
+import useAction from '../utils/use-action'
+
+const useRemoveItem = useAction
+
+export default useRemoveItem