chore: transfer repo

components/cart/sections/BoxesSection.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useTranslation } from '@/lib/hooks/useTranslation';
+import { CartItem } from 'lib/shopify/types';
+import { CartBoxItem } from '../CartBoxItem';
+
+interface BoxesSectionProps {
+  boxes: Array<{ box: CartItem; products: CartItem[] }>;
+  onUpdate: (merchandiseId: string, updateType: 'plus' | 'minus' | 'delete', itemId?: string) => void;
+  isPending: boolean;
+}
+
+export function BoxesSection({ boxes, onUpdate, isPending }: BoxesSectionProps) {
+  const { t } = useTranslation();
+  
+  if (boxes.length === 0) return null;
+  
+  return (
+    <div className="mb-6">
+      <h2 className="text-lg font-medium mb-4">{t('cart.boxes')}</h2>
+      <div className="space-y-4">
+        {boxes.map((boxGroup) => (
+          <CartBoxItem
+            key={boxGroup.box.id}
+            boxItem={boxGroup.box}
+            boxProducts={boxGroup.products}
+            onUpdate={onUpdate}
+            isPending={isPending}
+          />
+        ))}
+      </div>
+    </div>
+  );
+} 

components/cart/sections/CartHeader.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { Heading, Text } from '@/components/ui/Typography';
+import { useTranslation } from '@/lib/hooks/useTranslation';
+
+interface CartHeaderProps {
+  totalQuantity: number;
+}
+
+export function CartHeader({ totalQuantity }: CartHeaderProps) {
+  const { t } = useTranslation();
+  return (
+    <div className="my-6 flex items-center justify-between">
+      <Heading level={2}>{t('cart.title')}</Heading>
+      <div className="bg-gray-100 rounded-md px-4 py-2">
+        <Text>{t('cart.itemCount').replace('{count}', totalQuantity.toString())}</Text>
+      </div>
+    </div>
+  );
+} 

components/cart/sections/CartLoading.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { useTranslation } from '@/lib/hooks/useTranslation';
+import { container } from '@/lib/utils';
+
+export function CartLoading() {
+  const { t } = useTranslation();
+  
+  return (
+    <div className={container}>
+      <div className="flex justify-center items-center py-12">
+        <div className="animate-pulse text-center">
+          <p className="text-lg">{t('cart.loading')}</p>
+        </div>
+      </div>
+    </div>
+  );
+} 

components/cart/sections/OrderNotes.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { Label } from '@/components/ui/Typography';
+import { useTranslation } from '@/lib/hooks/useTranslation';
+
+export function OrderNotes() {
+  const { t } = useTranslation();
+  
+  return (
+    <div className="mt-8">
+      <Label className="mb-2">{t('cart.notes')}</Label>
+      <textarea
+        className="w-full border rounded-md p-3 min-h-[100px]"
+        placeholder={t('cart.notesPlaceholder')}
+      />
+    </div>
+  );
+} 

components/cart/sections/ProductsSection.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useTranslation } from '@/lib/hooks/useTranslation';
+import { CartItem } from 'lib/shopify/types';
+import { CartProductItem } from '../CartProductItem';
+import { getUniqueItemKey } from '../processCartItems';
+
+interface ProductsSectionProps {
+  products: CartItem[];
+  onUpdate: (merchandiseId: string, updateType: 'plus' | 'minus' | 'delete', itemId?: string) => void;
+  isPending: boolean;
+}
+
+export function ProductsSection({ products, onUpdate, isPending }: ProductsSectionProps) {
+  const { t } = useTranslation();
+  
+  if (products.length === 0) return null;
+  
+  return (
+    <div className="mb-6">
+      <h2 className="text-lg font-medium mb-4">{t('cart.products')}</h2>
+      <div className="space-y-6">
+        {products.map((item, index) => (
+          <CartProductItem
+            key={getUniqueItemKey(item, 'standalone', index)}
+            item={item}
+            onUpdate={onUpdate}
+            isPending={isPending}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}