updated the useUpdateItem hook

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

@@ -26,8 +26,8 @@ export const fetcher: HookFetcher<Cart, AddItemBody> = (
   }
 
   return fetch({
-    url: options.url!,
-    method: options.method!,
+    url: options?.url ?? defaultOpts.url,
+    method: options?.method ?? defaultOpts.method,
     body: { item },
   })
 }

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

@@ -19,8 +19,8 @@ export const fetcher: HookFetcher<Cart | null, RemoveItemBody> = (
   fetch
 ) => {
   return fetch({
-    url: options.url!,
-    method: options.method!,
+    url: options?.url ?? defaultOpts.url,
+    method: options?.method ?? defaultOpts.method,
     body: { itemId },
   })
 }

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

@@ -1,50 +1,67 @@
 import { useCallback } from 'react'
 import debounce from 'lodash.debounce'
-import type { Fetcher } from '@lib/commerce'
+import { HookFetcher } from '@lib/commerce/utils/types'
 import { default as useCartUpdateItem } from '@lib/commerce/cart/use-update-item'
 import type { ItemBody, UpdateItemBody } from '../api/cart'
 import { fetcher as removeFetcher } from './use-remove-item'
 import { Cart, useCart } from '.'
 
+const defualtOpts = {
+  url: '/api/bigcommerce/cart',
+  method: 'PUT',
+}
+
 export type UpdateItemInput = Partial<{ id: string } & ItemBody>
 
-function fetcher(
-  fetch: Fetcher<Cart | null>,
-  { itemId, item }: UpdateItemBody
-) {
+export const fetcher: HookFetcher<Cart | null, UpdateItemBody> = (
+  options,
+  { itemId, item },
+  fetch
+) => {
   if (Number.isInteger(item.quantity)) {
     // Also allow the update hook to remove an item if the quantity is lower than 1
     if (item.quantity! < 1) {
-      return removeFetcher(fetch, { itemId })
+      return removeFetcher(null, { itemId }, fetch)
     }
   } else if (item.quantity) {
     throw new Error('The item quantity has to be a valid integer')
   }
 
   return fetch({
-    url: '/api/bigcommerce/cart',
-    method: 'PUT',
+    url: options?.url ?? defualtOpts.url,
+    method: options?.method ?? defualtOpts.method,
     body: { itemId, item },
   })
 }
 
-export default function useUpdateItem(item?: any, cfg?: { wait?: number }) {
-  const { mutate } = useCart()
-  const fn = useCartUpdateItem<Cart | null, UpdateItemBody>(fetcher)
+function extend(customFetcher: typeof fetcher, cfg?: { wait?: number }) {
+  const useUpdateItem = (item?: any) => {
+    const { mutate } = useCart()
+    const fn = useCartUpdateItem<Cart | null, UpdateItemBody>(
+      defualtOpts,
+      customFetcher
+    )
 
-  return useCallback(
-    debounce(async (input: UpdateItemInput) => {
-      const data = await fn({
-        itemId: input.id ?? item?.id,
-        item: {
-          productId: input.productId ?? item?.product_id,
-          variantId: input.productId ?? item?.variant_id,
-          quantity: input.quantity,
-        },
-      })
-      await mutate(data, false)
-      return data
-    }, cfg?.wait ?? 500),
-    [fn, mutate]
-  )
+    return useCallback(
+      debounce(async (input: UpdateItemInput) => {
+        const data = await fn({
+          itemId: input.id ?? item?.id,
+          item: {
+            productId: input.productId ?? item?.product_id,
+            variantId: input.productId ?? item?.variant_id,
+            quantity: input.quantity,
+          },
+        })
+        await mutate(data, false)
+        return data
+      }, cfg?.wait ?? 500),
+      [fn, mutate]
+    )
+  }
+
+  useUpdateItem.extend = extend
+
+  return useUpdateItem
 }
+
+export default extend(fetcher)

lib/commerce/cart/use-update-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 useUpdateItem<T, Input>(
-  fetcher: (fetch: Fetcher<T>, input: Input) => T | Promise<T>
+  options: HookFetcherOptions,
+  fetcher: HookFetcher<T, Input>
 ) {
   const { fetcherRef } = useCommerce()
 
   return useCallback(
     function updateItem(input: Input) {
-      return fetcher(fetcherRef.current, input)
+      return fetcher(options, input, fetcherRef.current)
     },
     [fetcher]
   )

lib/commerce/utils/types.ts

@@ -10,7 +10,7 @@ export type FetcherOptions = {
 }
 
 export type HookFetcher<T, Input> = (
-  options: HookFetcherOptions,
+  options: HookFetcherOptions | null,
   input: Input,
   fetch: Fetcher<T>
 ) => T | Promise<T>