Fix bugs with optimistic.

components/cart/edit-item-quantity-button.tsx

@@ -47,7 +47,7 @@ export function EditItemQuantityButton({
   return (
     <form
       action={async () => {
-        optimisticUpdate({ itemId: payload.lineId, newQuantity: payload.quantity });
+        optimisticUpdate({ itemId: payload.lineId, newQuantity: payload.quantity, type });
         await actionWithVariant();
       }}
     >

components/cart/modal.tsx

@@ -24,6 +24,7 @@ type MerchandiseSearchParams = {
 type NewState = {
   itemId: string;
   newQuantity: number;
+  type: 'plus' | 'minus';
 };
 
 function reducer(state: Cart | undefined, newState: NewState) {
@@ -31,10 +32,17 @@ function reducer(state: Cart | undefined, newState: NewState) {
     return state;
   }
 
-  const updatedLines = state.lines.map((item: CartItem) => {
+  let updatedLines = state.lines
+    .map((item: CartItem) => {
       if (item.id === newState.itemId) {
+        if (newState.type === 'minus' && newState.newQuantity === 0) {
+          // Remove the item if quantity becomes 0
+          return null;
+        }
+
         const singleItemAmount = Number(item.cost.totalAmount.amount) / item.quantity;
-      const newTotalAmount = Number(item.cost.totalAmount.amount) + singleItemAmount;
+        const newTotalAmount = singleItemAmount * newState.newQuantity;
+
         return {
           ...item,
           quantity: newState.newQuantity,
@@ -48,7 +56,8 @@ function reducer(state: Cart | undefined, newState: NewState) {
         };
       }
       return item;
-  });
+    })
+    .filter(Boolean) as CartItem[];
 
   const newTotalQuantity = updatedLines.reduce((sum, item) => sum + item.quantity, 0);
   const newTotalAmount = updatedLines.reduce(
@@ -56,6 +65,22 @@ function reducer(state: Cart | undefined, newState: NewState) {
     0
   );
 
+  // If there are no items left, return an empty cart
+  if (updatedLines.length === 0) {
+    return {
+      ...state,
+      lines: [],
+      totalQuantity: 0,
+      cost: {
+        ...state.cost,
+        totalAmount: {
+          ...state.cost.totalAmount,
+          amount: '0'
+        }
+      }
+    };
+  }
+
   return {
     ...state,
     lines: updatedLines,