Make use-add-item hook extendable

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

@@ -1,12 +1,21 @@
 import { useCallback } from 'react'
-import type { Fetcher } from '@lib/commerce'
+import { HookFetcher } from '@lib/commerce/utils/types'
 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
 
-function fetcher(fetch: Fetcher<Cart>, { item }: AddItemBody) {
+const defaultOpts = {
+  url: '/api/bigcommerce/cart',
+  method: 'POST',
+}
+
+export const fetcher: HookFetcher<Cart, AddItemBody> = (
+  options,
+  { item },
+  fetch
+) => {
   if (
     item.quantity &&
     (!Number.isInteger(item.quantity) || item.quantity! < 1)
@@ -16,19 +25,31 @@ function fetcher(fetch: Fetcher<Cart>, { item }: AddItemBody) {
     )
   }
 
-  return fetch({ url: '/api/bigcommerce/cart', method: 'POST', body: { item } })
+  return fetch({
+    url: options.url!,
+    method: options.method!,
+    body: { item },
+  })
 }
 
-export default function useAddItem() {
-  const { mutate } = useCart()
-  const fn = useCartAddItem<Cart, AddItemBody>(fetcher)
+function extend(customFetcher: typeof fetcher) {
+  const useAddItem = () => {
+    const { mutate } = useCart()
+    const fn = useCartAddItem<Cart, AddItemBody>(defaultOpts, customFetcher)
 
-  return useCallback(
-    async function addItem(input: UpdateItemInput) {
-      const data = await fn({ item: input })
-      await mutate(data, false)
-      return data
-    },
-    [fn, mutate]
-  )
+    return useCallback(
+      async function addItem(input: UpdateItemInput) {
+        const data = await fn({ item: input })
+        await mutate(data, false)
+        return data
+      },
+      [fn, mutate]
+    )
+  }
+
+  useAddItem.extend = extend
+
+  return useAddItem
 }
+
+export default extend(fetcher)