chore: transfer repo

components/cart/hooks/useCartProcessing.ts

@@ -0,0 +1,100 @@
+'use client';
+
+import { Cart } from 'lib/shopify/types';
+import { useEffect, useState } from 'react';
+
+export function useCartProcessing(cart: Cart | undefined) {
+  const [boxGroups, setBoxGroups] = useState(new Map<string, { box: any; products: any[] }>());
+  const [standaloneProducts, setStandaloneProducts] = useState<any[]>([]);
+  const [isGroupingComplete, setIsGroupingComplete] = useState(false);
+  const [didInitialProcess, setDidInitialProcess] = useState(false);
+
+  // First-time cart load processing with delay
+  useEffect(() => {
+    if (!cart?.lines?.length) {
+      setIsGroupingComplete(true);
+      return;
+    }
+    
+    // Use a small timeout to ensure cart data is fully loaded
+    const timeoutId = setTimeout(() => {
+      processCartItems();
+    }, 100); // 100ms delay
+    
+    return () => clearTimeout(timeoutId);
+  }, []);
+
+  // Process cart items whenever the cart changes after initial load
+  useEffect(() => {
+    if (!didInitialProcess && cart?.lines?.length) {
+      // Skip first update - handled by the first effect
+      return;
+    }
+    
+    if (!cart?.lines?.length) {
+      setIsGroupingComplete(true);
+      return;
+    }
+    
+    processCartItems();
+  }, [cart, didInitialProcess]);
+  
+  // Process cart items function
+  const processCartItems = () => {
+    if (!cart) return;
+    
+    // Set grouping as incomplete at the start
+    setIsGroupingComplete(false);
+    
+    const newBoxGroups = new Map<string, { box: any; products: any[] }>();
+    const newStandaloneProducts: any[] = [];
+
+    // First, sort all items into boxes or standalone products
+    cart.lines.forEach(item => {
+      // Skip items without attributes (avoid runtime errors)
+      if (!item.attributes || item.attributes.length === 0) {
+        newStandaloneProducts.push(item);
+        return;
+      }
+      
+      const boxType = item.attributes.find(attr => attr.key === '_box_type')?.value;
+      const boxGroupId = item.attributes.find(attr => attr.key === '_box_group_id')?.value;
+
+      if (boxType === 'container' && boxGroupId) {
+        // This is a box container
+        if (!newBoxGroups.has(boxGroupId)) {
+          newBoxGroups.set(boxGroupId, { box: item, products: [] });
+        } else {
+          newBoxGroups.get(boxGroupId)!.box = item;
+        }
+      } else if (boxType === 'item' && boxGroupId) {
+        // This is an item that belongs in a box
+        if (!newBoxGroups.has(boxGroupId)) {
+          newBoxGroups.set(boxGroupId, { box: null, products: [item] });
+        } else {
+          newBoxGroups.get(boxGroupId)!.products.push(item);
+        }
+      } else {
+        // This is a standalone product
+        newStandaloneProducts.push(item);
+      }
+    });
+    
+    setBoxGroups(newBoxGroups);
+    setStandaloneProducts(newStandaloneProducts);
+    setDidInitialProcess(true);
+    
+    // Mark grouping as complete
+    setIsGroupingComplete(true);
+  };
+
+  // Get boxes array from the map for rendering
+  const boxes = Array.from(boxGroups.values()).filter(group => group.box);
+
+  return {
+    boxes,
+    standaloneProducts,
+    isGroupingComplete,
+    didInitialProcess
+  };
+}