import { Head, Link, router, useForm } from '@inertiajs/react'; type CartItem = { id: number; quantity: number; product: { name: string; slug: string; sku: string; price: string; discount_price: string | null; stock_quantity: number; reserved_quantity: number; images: { path: string; alt_text: string | null; is_main: boolean }[]; }; }; export default function CartIndex({ cart, totals, }: { cart: { items: CartItem[] }; totals: { subtotal: number; discount_total: number; total: number }; }) { const { data, setData, post, processing, errors } = useForm({ discount_code: '' }); function updateQuantity(item: CartItem, quantity: number) { router.patch(`/cart/items/${item.id}`, { quantity }, { preserveScroll: true }); } return ( <>

Cart

Continue shopping
{cart.items.map((item) => { const image = item.product.images.find((entry) => entry.is_main); const unitPrice = item.product.discount_price ?? item.product.price; return (
{image ? ( {image.alt_text ) : ( No image )}
{item.product.name}

SKU {item.product.sku}

{unitPrice}

updateQuantity(item, Number(event.target.value))} type="number" min="0" max={item.product.stock_quantity - item.product.reserved_quantity} className="w-24 rounded-md border border-slate-300 px-3 py-2 text-sm" />
); })} {cart.items.length === 0 ? (
Your cart is empty.
) : null}
); }