'use client'; import { useState } from 'react'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; import { Trash2, Loader2, Tag, X, ArrowRight, Truck, ShieldCheck, Check } from 'lucide-react'; import { formatPrice } from '@/lib/utils'; import { QtySelector } from './AddToCartButton'; type Item = { id: string; productId: string; slug: string; name: string; image: string; price: number; qty: number; variant: string | null; stock: number; maxQty: number; lineTotal: number; }; export default function CartClient({ items: initialItems, subtotal, discount, shipping, total, coupon, freeShippingOver, }: { items: Item[]; subtotal: number; discount: number; shipping: number; total: number; coupon: { code: string; value: number; type: string; description?: string | null } | null; freeShippingOver: number; }) { const router = useRouter(); const [items, setItems] = useState(initialItems); const [couponCode, setCouponCode] = useState(coupon?.code || ''); const [appliedCoupon, setAppliedCoupon] = useState(coupon); const [busy, setBusy] = useState(null); const [couponMsg, setCouponMsg] = useState<{ type: 'ok' | 'err'; text: string } | null>(null); const [couponLoading, setCouponLoading] = useState(false); const sub = items.reduce((s, i) => s + i.price * i.qty, 0); let disc = 0; if (appliedCoupon) { if (appliedCoupon.type === 'percent') disc = (sub * appliedCoupon.value) / 100; else if (appliedCoupon.type === 'fixed') disc = appliedCoupon.value; disc = Math.min(disc, sub); } const ship = appliedCoupon?.type === 'freeship' || sub - disc >= freeShippingOver ? 0 : shipping; const tot = Math.max(0, sub - disc + ship); const remaining = Math.max(0, freeShippingOver - (sub - disc)); async function updateQty(itemId: string, qty: number) { setBusy(itemId); setItems((prev) => qty <= 0 ? prev.filter((i) => i.id !== itemId) : prev.map((i) => (i.id === itemId ? { ...i, qty } : i)) ); try { await fetch('/api/cart', { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ itemId, qty }), }); router.refresh(); } catch { /* revert on next refresh */ } finally { setBusy(null); } } async function removeItem(itemId: string) { setBusy(itemId); setItems((prev) => prev.filter((i) => i.id !== itemId)); try { await fetch(`/api/cart?itemId=${itemId}`, { method: 'DELETE' }); router.refresh(); } finally { setBusy(null); } } async function applyCoupon(e: React.FormEvent) { e.preventDefault(); setCouponLoading(true); setCouponMsg(null); try { const res = await fetch('/api/cart/coupon', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ code: couponCode }), }); const data = await res.json(); if (!res.ok) throw new Error(data.error || 'Invalid coupon'); setAppliedCoupon(data.coupon); setCouponMsg({ type: 'ok', text: `Coupon "${data.coupon.code}" applied!` }); router.refresh(); } catch (e: any) { setCouponMsg({ type: 'err', text: e.message }); setAppliedCoupon(null); } finally { setCouponLoading(false); } } async function removeCoupon() { setAppliedCoupon(null); setCouponCode(''); setCouponMsg(null); await fetch('/api/cart/coupon', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ code: '' }), }); router.refresh(); } return (
{/* Items */}
{remaining > 0 ? (

Add {formatPrice(remaining)} more for FREE delivery!

) : (
Congratulations! You've qualified for FREE delivery.
)}
{items.map((it) => (
{it.image && ( // eslint-disable-next-line @next/next/no-img-element {it.name} )}
{it.name} {it.variant &&

Size/Colour: {it.variant}

}

{formatPrice(it.price)} each

updateQty(it.id, q)} max={it.maxQty} size="sm" /> {formatPrice(it.price * it.qty)}
))}
← Continue shopping Recalculate
{/* Summary */}
); }