--wip-- [skip ci]

Author: matthewvolk

core/app/[locale]/(default)/cart/_actions/update-line-item.ts

@@ -363,7 +363,11 @@ export const updateLineItem = async (
 
     case 'delete': {
       try {
-        await removeItem({ lineItemEntityId: submission.value.id });
+        const ids = submission.value.id.split(',');
+
+        console.log('ids', ids);
+
+        await Promise.all(ids.map((id) => removeItem({ lineItemEntityId: id })));
       } catch (error) {
         // eslint-disable-next-line no-console
         console.error(error);
@@ -384,10 +388,12 @@ export const updateLineItem = async (
         return { ...prevState, lastResult: submission.reply({ formErrors: [String(error)] }) };
       }
 
-      const deletedItem = submission.value;
+      const deletedItems = new Set(submission.value.id.split(','));
+
+      console.log(prevState.lineItems.filter((item) => !deletedItems.has(item.id)));
 
       return {
-        lineItems: prevState.lineItems.filter((item) => item.id !== deletedItem.id),
+        lineItems: prevState.lineItems.filter((item) => !deletedItems.has(item.id)),
         lastResult: submission.reply({ resetForm: true }),
       };
     }

core/vibes/soul/sections/cart/client.tsx

@@ -10,6 +10,7 @@ import {
   useActionState,
   useEffect,
   useOptimistic,
+  useRef,
 } from 'react';
 import { useFormStatus } from 'react-dom';
 
@@ -175,6 +176,8 @@ export function CartClient<LineItem extends CartLineItem>({
   shipping,
 }: CartProps<LineItem>) {
   const events = useEvents();
+  const requestedLineItemsToDelete = useRef<string[]>([]);
+  const batchDeleteTimeout = useRef<NodeJS.Timeout | null>(null);
   const [state, formAction] = useActionState(lineItemAction, {
     lineItems: cart.lineItems,
     lastResult: null,
@@ -314,27 +317,47 @@ export function CartClient<LineItem extends CartLineItem>({
                   lineItem={lineItem}
                   onSubmit={(formData) => {
                     startTransition(() => {
-                      formAction(formData);
                       setOptimisticLineItems(formData);
 
                       const intent = formData.get('intent');
 
-                      if (intent === 'increment') {
-                        formData.set('quantity', '1');
-
-                        events.onAddToCart?.(formData);
+                      if (intent === 'delete') {
+                        if (batchDeleteTimeout.current) {
+                          clearTimeout(batchDeleteTimeout.current);
+                        }
+
+                        batchDeleteTimeout.current = setTimeout(() => {
+                          startTransition(() => {
+                            formData.set('id', requestedLineItemsToDelete.current.join(','));
+                            formAction(formData);
+                            events.onRemoveFromCart?.(formData);
+                          });
+
+                          requestedLineItemsToDelete.current = [];
+                        }, 1000);
+
+                        const id = formData.get('id');
+
+                        if (id) {
+                          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                          requestedLineItemsToDelete.current.push(id as string);
+                        }
                       }
 
-                      if (intent === 'decrement') {
-                        formData.set('quantity', '1');
+                      if (intent !== 'delete') {
+                        formAction(formData);
 
-                        events.onRemoveFromCart?.(formData);
-                      }
+                        if (intent === 'increment') {
+                          formData.set('quantity', '1');
 
-                      if (intent === 'delete') {
-                        formData.set('quantity', lineItem.quantity.toString());
+                          events.onAddToCart?.(formData);
+                        }
+
+                        if (intent === 'decrement') {
+                          formData.set('quantity', '1');
 
-                        events.onRemoveFromCart?.(formData);
+                          events.onRemoveFromCart?.(formData);
+                        }
                       }
                     });
                   }}