From 40cc9cf6826ee87797bd2b5a2e0c6e78148594c2 Mon Sep 17 00:00:00 2001
From: Vula Builder <deploy@vula.app>
Date: Tue, 23 Jun 2026 08:47:47 +0000
Subject: [PATCH] Deploy

---
 src/app/order/page.tsx | 124 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 124 insertions(+)
 create mode 100644 src/app/order/page.tsx

diff --git a/src/app/order/page.tsx b/src/app/order/page.tsx
new file mode 100644
index 0000000..b57ae37
--- /dev/null
+++ b/src/app/order/page.tsx
@@ -0,0 +1,124 @@
+'use client'
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react'
+import { broadcastCartCount } from '@/hooks/useMedusaCart'
+
+interface CartItem {
+  id: string
+  title: string
+  product_title?: string
+  thumbnail: string | null
+  quantity: number
+  unit_price: number
+}
+
+const PUB_KEY = process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || ''
+
+async function medusaFetch(path: string, options?: RequestInit) {
+  const res = await fetch('/api/medusa' + path, {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      'x-publishable-api-key': PUB_KEY,
+      ...(options?.headers || {}),
+    },
+    signal: AbortSignal.timeout(30000),
+  })
+  if (!res.ok) throw new Error(await res.text())
+  return res.json()
+}
+
+export default function OrderPage() {
+  const [cartItems, setCartItems] = useState<CartItem[]>([])
+  const [loading, setLoading] = useState(true)
+
+  const loadCart = async () => {
+    const cartId = localStorage.getItem('medusa_cart_id')
+    if (!cartId) { setLoading(false); return }
+    try {
+      const data = await medusaFetch('/store/carts/' + cartId)
+      setCartItems((data.cart.items ?? []).map((i: any) => ({
+        id: i.id, title: i.title, product_title: i.product_title,
+        thumbnail: i.thumbnail, quantity: i.quantity, unit_price: i.unit_price,
+      })))
+    } catch { /* ignore */ }
+    setLoading(false)
+  }
+
+  useEffect(() => { loadCart() }, [])
+
+  const removeItem = async (lineItemId: string) => {
+    const cartId = localStorage.getItem('medusa_cart_id')
+    if (!cartId) return
+    try {
+      await medusaFetch('/store/carts/' + cartId + '/line-items/' + lineItemId, { method: 'DELETE' })
+      const updated = cartItems.filter(i => i.id !== lineItemId)
+      setCartItems(updated)
+      broadcastCartCount(updated.reduce((s, i) => s + i.quantity, 0))
+    } catch { /* ignore */ }
+  }
+
+  const updateQuantity = async (lineItemId: string, qty: number) => {
+    if (qty < 1) return removeItem(lineItemId)
+    const cartId = localStorage.getItem('medusa_cart_id')
+    if (!cartId) return
+    try {
+      await medusaFetch('/store/carts/' + cartId + '/line-items/' + lineItemId, {
+        method: 'POST', body: JSON.stringify({ quantity: qty }),
+      })
+      const updated = cartItems.map(i => i.id === lineItemId ? { ...i, quantity: qty } : i)
+      setCartItems(updated)
+      broadcastCartCount(updated.reduce((s, i) => s + i.quantity, 0))
+    } catch { /* ignore */ }
+  }
+
+  const subtotal = cartItems.reduce((s, i) => s + i.unit_price * i.quantity, 0)
+
+  if (loading) return <div className="min-h-screen flex items-center justify-center"><div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary" /></div>
+
+  return (
+    <main className="min-h-screen bg-background">
+      <div className="container mx-auto px-4 py-12 max-w-2xl">
+        <Link href="/menu" className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground mb-8 transition-colors">
+          <ArrowLeft className="h-4 w-4" />Back to Menu
+        </Link>
+        <h1 className="text-3xl font-bold mb-8 flex items-center gap-3">
+          <ShoppingCart className="h-7 w-7" />Your Order
+        </h1>
+        {cartItems.length === 0 ? (
+          <div className="text-center py-20">
+            <p className="text-muted-foreground text-lg mb-6">Your order is empty</p>
+            <Link href="/menu" className="bg-primary text-primary-foreground px-6 py-3 rounded-lg hover:bg-primary/90 transition-colors">Browse Menu</Link>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {cartItems.map(item => (
+              <div key={item.id} className="flex items-center gap-4 bg-card border border-border rounded-xl p-4">
+                {item.thumbnail && <img src={item.thumbnail} alt={item.product_title || item.title} className="w-16 h-16 object-cover rounded-lg" />}
+                <div className="flex-1">
+                  <p className="font-semibold">{item.product_title || item.title}</p>
+                  <p className="text-primary font-bold">R{(item.unit_price / 100).toFixed(2)}</p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <button onClick={() => updateQuantity(item.id, item.quantity - 1)} className="h-8 w-8 rounded-full border flex items-center justify-center hover:bg-accent"><Minus className="h-3 w-3" /></button>
+                  <span className="w-8 text-center font-semibold">{item.quantity}</span>
+                  <button onClick={() => updateQuantity(item.id, item.quantity + 1)} className="h-8 w-8 rounded-full border flex items-center justify-center hover:bg-accent"><Plus className="h-3 w-3" /></button>
+                  <button onClick={() => removeItem(item.id)} className="ml-2 text-destructive hover:text-destructive/80"><Trash2 className="h-4 w-4" /></button>
+                </div>
+              </div>
+            ))}
+            <div className="bg-card border border-border rounded-xl p-6 mt-6">
+              <div className="flex justify-between mb-4 text-lg font-bold">
+                <span>Total</span><span>R{(subtotal / 100).toFixed(2)}</span>
+              </div>
+              <Link href="/checkout" className="block w-full bg-primary text-primary-foreground py-3 rounded-lg hover:bg-primary/90 transition-colors font-semibold text-center">
+                Proceed to Checkout
+              </Link>
+            </div>
+          </div>
+        )}
+      </div>
+    </main>
+  )
+}