add remove item hook

packages/sylius/src/cart/use-remove-item.tsx

@@ -1,20 +1,44 @@
-import { MutationHook } from '@vercel/commerce/utils/types'
+import { MutationHook, MutationHookContext } from '@vercel/commerce/utils/types'
 import useRemoveItem, {
   UseRemoveItem,
 } from '@vercel/commerce/cart/use-remove-item'
+import { getCartToken } from '../utils/token/cart-token'
+import useCart from './use-cart'
+import { RemoveItemHook } from '@vercel/commerce/types/cart'
+import { useCallback } from 'react'
+import { normalizeCart } from '../utils/normalize/normalize-cart'
 
 export default useRemoveItem as UseRemoveItem<typeof handler>
 
 export const handler: MutationHook<any> = {
   fetchOptions: {
-    query: '',
+    url: '/api/v2/shop/orders',
+    method: 'DELETE',
+  },
+  fetcher: async ({ input: { itemId }, options, fetch }) => {
+    await fetch({
+      url: `${options.url}/${getCartToken()}/items/${itemId}`,
+      method: options.method,
+    })
+    const syliusCart = await fetch({
+      url: `${options.url}/${getCartToken()}`,
+      method: 'GET',
+    })
+    return normalizeCart(syliusCart)
   },
-  async fetcher({ input, options, fetch }) {},
   useHook:
-    ({ fetch }) =>
+    ({ fetch }: MutationHookContext<RemoveItemHook>) =>
     () => {
-      return async function removeItem(input) {
-        return {}
-      }
+      const { mutate } = useCart()
+
+      return useCallback(
+        async function removeItem(input) {
+          const data = await fetch({ input: { itemId: input.id } })
+          console.log('remove item', data)
+          await mutate(data, false)
+          return data
+        },
+        [fetch, mutate]
+      )
     },
 }

packages/sylius/src/utils/handle-fetch-response.ts

@@ -1,7 +1,7 @@
 import { FetcherError } from '@vercel/commerce/utils/errors'
 
 export function getError(errors: any[] | null, status: number) {
-  errors = errors ?? [{ message: 'Failed to fetch Shopify API' }]
+  errors = errors ?? [{ message: 'Failed to fetch Sylius API' }]
   return new FetcherError({ errors, status })
 }
 
@@ -12,6 +12,9 @@ export async function getAsyncError(res: Response) {
 
 const handleFetchResponse = async (res: Response) => {
   if (res.ok) {
+    if (res.status === 204) {
+      return true
+    }
     return await res.json()
   }