chore: transfer repo

components/cart/CartPage.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import { container } from '@/lib/utils';
+import { useCart } from 'components/cart/cart-context';
+import { useTransition } from 'react';
+import { removeItem, updateItemQuantity } from './actions';
+import { CartDiscountForm } from './CartDiscountForm';
+import { CartSummary } from './CartSummary';
+import { EmptyCartMessage } from './EmptyCartMessage';
+import { useCartProcessing } from './hooks/useCartProcessing';
+import { BoxesSection } from './sections/BoxesSection';
+import { CartHeader } from './sections/CartHeader';
+import { CartLoading } from './sections/CartLoading';
+import { OrderNotes } from './sections/OrderNotes';
+import { ProductsSection } from './sections/ProductsSection';
+
+export default function CartPage() {
+  const { cart, updateCartItem } = useCart();
+  const [isPending, startTransition] = useTransition();
+  const { boxes, standaloneProducts, isGroupingComplete, didInitialProcess } = useCartProcessing(cart);
+
+  if (!cart?.lines.length) {
+    return <EmptyCartMessage />;
+  }
+
+  // Show loading state while processing cart items
+  if (!didInitialProcess || !isGroupingComplete) {
+    return <CartLoading />;
+  }
+
+  const handleUpdateCartItem = (merchandiseId: string, updateType: 'plus' | 'minus' | 'delete', itemId?: string) => {
+    // First update the client-side cart state for immediate feedback
+    updateCartItem(merchandiseId, updateType, itemId);
+    
+    // Update lastBoxState in localStorage if this is a box item
+    try {
+      const boxStateString = localStorage.getItem('lastBoxState');
+      if (boxStateString) {
+        const boxState = JSON.parse(boxStateString);
+        
+        // Check if this item belongs to a box
+        const cartItem = cart.lines.find(item => {
+          if (itemId && item.id) {
+            return item.id === itemId;
+          }
+          return item.merchandise.id === merchandiseId;
+        });
+        
+        if (cartItem) {
+          // Check if it's a box item by looking at attributes
+          const attrs = cartItem.attributes || [];
+          const boxType = attrs.find(attr => attr.key === '_box_type')?.value;
+          const boxGroupId = attrs.find(attr => attr.key === '_box_group_id')?.value;
+          
+          if (boxType && boxGroupId) {
+            // Find the corresponding item in the stored state
+            if (boxType === 'item' && boxState.productItems) {
+              if (updateType === 'delete') {
+                // Remove the item from productItems
+                boxState.productItems = boxState.productItems.filter((item: { id: string, variantId: string }) => 
+                  item.id !== cartItem.merchandise.product.id || 
+                  item.variantId !== cartItem.merchandise.id
+                );
+              } else {
+                // Update quantity
+                const productItem = boxState.productItems.find((item: { id: string, variantId: string }) => 
+                  item.id === cartItem.merchandise.product.id &&
+                  item.variantId === cartItem.merchandise.id
+                );
+                
+                if (productItem) {
+                  const newQuantity = updateType === 'plus' 
+                    ? cartItem.quantity + 1 
+                    : Math.max(1, cartItem.quantity - 1);
+                  productItem.quantity = newQuantity;
+                }
+              }
+              
+              // Save updated state back to localStorage
+              localStorage.setItem('lastBoxState', JSON.stringify(boxState));
+            }
+            else if (boxType === 'container' && boxState.boxItems) {
+              if (updateType === 'delete') {
+                // Remove the box
+                boxState.boxItems = boxState.boxItems.filter((item: { id: string }) => 
+                  item.id !== cartItem.merchandise.product.id
+                );
+              } else {
+                // Update quantity
+                const boxItem = boxState.boxItems.find((item: { id: string }) => 
+                  item.id === cartItem.merchandise.product.id
+                );
+                
+                if (boxItem) {
+                  const newQuantity = updateType === 'plus' 
+                    ? cartItem.quantity + 1 
+                    : Math.max(1, cartItem.quantity - 1);
+                  boxItem.quantity = newQuantity;
+                }
+              }
+              
+              // Save updated state back to localStorage
+              localStorage.setItem('lastBoxState', JSON.stringify(boxState));
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Error updating box state in localStorage', error);
+    }
+    
+    // Then update the server-side cart
+    startTransition(() => {
+      if (updateType === 'delete') {
+        // Call server action to remove item
+        removeItem({}, merchandiseId, itemId);
+      } else {
+        // Find the specific item to update, using both merchandise ID and item ID if provided
+        let item = cart.lines.find((item: { id?: string, merchandise: { id: string } }) => {
+          if (itemId && item.id) {
+            // If we have item ID, use it for more specific matching
+            return item.id === itemId;
+          }
+          // Fall back to merchandise ID only
+          return item.merchandise.id === merchandiseId;
+        });
+        
+        if (item) {
+          // Calculate new quantity based on the updateType
+          const newQuantity = updateType === 'plus' 
+            ? item.quantity + 1 
+            : Math.max(1, item.quantity - 1);
+          
+          // Call server action to update quantity
+          updateItemQuantity({}, { merchandiseId, quantity: newQuantity, itemId });
+        }
+      }
+    });
+  };
+
+  return (
+    <div className={container}>
+      <div className="pb-20">
+        <div className="flex flex-col lg:flex-row lg:justify-between gap-8">
+          {/* Left Side: Cart Items */}
+          <div className="lg:w-[62%]">
+            <CartHeader totalQuantity={cart.totalQuantity} />
+            
+            {/* Boxes Section */}
+            <BoxesSection 
+              boxes={boxes}
+              onUpdate={handleUpdateCartItem}
+              isPending={isPending}
+            />
+
+            {/* Standalone Products Section */}
+            <ProductsSection 
+              products={standaloneProducts}
+              onUpdate={handleUpdateCartItem}
+              isPending={isPending}
+            />
+
+            {/* Order Notes */}
+            <OrderNotes />
+
+            {/* Discount Form */}
+            <CartDiscountForm />
+          </div>
+
+          {/* Right Side: Order Summary */}
+          <div className="lg:w-[30%]">
+            <div className="mt-6 lg:mt-[72px]">
+              <CartSummary cart={cart} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}