Updated the useRemoveItem hook

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

@@ -4,13 +4,13 @@ import { default as useCartAddItem } from '@lib/commerce/cart/use-add-item'
 import type { ItemBody, AddItemBody } from '../api/cart'
 import { Cart, useCart } from '.'
 
-export type UpdateItemInput = ItemBody
-
 const defaultOpts = {
   url: '/api/bigcommerce/cart',
   method: 'POST',
 }
 
+export type UpdateItemInput = ItemBody
+
 export const fetcher: HookFetcher<Cart, AddItemBody> = (
   options,
   { item },

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

@@ -1,34 +1,51 @@
 import { useCallback } from 'react'
-import type { Fetcher } from '@lib/commerce'
+import { HookFetcher } from '@lib/commerce/utils/types'
 import { default as useCartRemoveItem } from '@lib/commerce/cart/use-remove-item'
 import type { RemoveItemBody } from '../api/cart'
 import { Cart, useCart } from '.'
 
+const defaultOpts = {
+  url: '/api/bigcommerce/cart',
+  method: 'DELETE',
+}
+
 export type RemoveItemInput = {
   id: string
 }
 
-export function fetcher(
-  fetch: Fetcher<Cart | null>,
-  { itemId }: RemoveItemBody
-) {
+export const fetcher: HookFetcher<Cart | null, RemoveItemBody> = (
+  options,
+  { itemId },
+  fetch
+) => {
   return fetch({
-    url: '/api/bigcommerce/cart',
-    method: 'DELETE',
+    url: options.url!,
+    method: options.method!,
     body: { itemId },
   })
 }
 
-export default function useRemoveItem(item?: any) {
-  const { mutate } = useCart()
-  const fn = useCartRemoveItem<Cart | null, RemoveItemBody>(fetcher)
+function extend(customFetcher: typeof fetcher) {
+  const useRemoveItem = (item?: any) => {
+    const { mutate } = useCart()
+    const fn = useCartRemoveItem<Cart | null, RemoveItemBody>(
+      defaultOpts,
+      customFetcher
+    )
 
-  return useCallback(
-    async function removeItem(input: RemoveItemInput) {
-      const data = await fn({ itemId: input.id ?? item?.id })
-      await mutate(data, false)
-      return data
-    },
-    [fn, mutate]
-  )
+    return useCallback(
+      async function removeItem(input: RemoveItemInput) {
+        const data = await fn({ itemId: input.id ?? item?.id })
+        await mutate(data, false)
+        return data
+      },
+      [fn, mutate]
+    )
+  }
+
+  useRemoveItem.extend = extend
+
+  return useRemoveItem
 }
+
+export default extend(fetcher)

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

@@ -1,14 +1,16 @@
 import { useCallback } from 'react'
-import { Fetcher, useCommerce } from '..'
+import { HookFetcher, HookFetcherOptions } from '../utils/types'
+import { useCommerce } from '..'
 
 export default function useRemoveItem<T, Input>(
-  fetcher: (fetch: Fetcher<T>, input: Input) => T | Promise<T>
+  options: HookFetcherOptions,
+  fetcher: HookFetcher<T, Input>
 ) {
   const { fetcherRef } = useCommerce()
 
   return useCallback(
     function removeItem(input: Input) {
-      return fetcher(fetcherRef.current, input)
+      return fetcher(options, input, fetcherRef.current)
     },
     [fetcher]
   )