// === SHOP SCREEN === const ShopScreen = ({ theme, initialCategory, cart, onAddToCart, onViewCart, onBack }) => { const m = theme.mobile; const [items, setItems] = React.useState([]); const [loading, setLoading] = React.useState(true); const [tab, setTab] = React.useState(initialCategory || 'space-infuser'); const [added, setAdded] = React.useState(null); React.useEffect(() => { fetch('/api/shop/items') .then(r => r.json()) .then(data => { setItems(data); setLoading(false); }) .catch(() => setLoading(false)); }, []); const filtered = items.filter(i => i.category === tab); const cartCount = cart.reduce((s, c) => s + c.qty, 0); const handleAdd = (item) => { onAddToCart(item); setAdded(item.id); setTimeout(() => setAdded(null), 1200); }; const tabLabel = { 'space-infuser': 'Space Infusers', 'car-diffuser': 'Car Diffusers' }; return (
{/* Header */}
— home & car
{tabLabel[tab]}
{cartCount > 0 && ( )}
{/* Category tabs */}
{Object.entries(tabLabel).map(([key, label]) => ( ))}
{/* Product grid */}
{loading ? (
Loading…
) : filtered.length === 0 ? (
No items yet
) : (
{filtered.map(item => (
{/* Image */}
{item.imageUrl ? ( {item.name} ) : (
No image
)}
{/* Info */}
{item.name}
{item.description && (
{item.description}
)}
R {item.price.toFixed(0)}
))}
)}
{/* Back */}
); }; // === CART SCREEN === const CartScreen = ({ theme, cart, onUpdateQty, onRemove, onCheckout, onBack }) => { const m = theme.mobile; const total = cart.reduce((s, c) => s + c.item.price * c.qty, 0); if (cart.length === 0) return (
Your cart is empty
); return (
— your cart
Review your order
{cart.map(({ item, qty }) => (
{item.imageUrl && {item.name}} {!item.imageUrl &&
}
{item.name}
R {item.price.toFixed(0)} each
{qty}
R {(item.price * qty).toFixed(0)}
))} {/* Totals */}
Subtotal R {total.toFixed(0)}
Shipping R 120
Total R {(total + 120).toFixed(0)}
); }; // === SHOP CHECKOUT SCREEN === const ShopCheckoutField = ({ label, fk, type='text', placeholder, span=1, required=false, theme, m, form, set }) => ( ); const ShopCheckoutScreen = ({ theme, cart, onComplete, onBack }) => { const m = theme.mobile; const total = cart.reduce((s, c) => s + c.item.price * c.qty, 0); const [form, setForm] = React.useState({ name: '', email: '', phone: '', address: '', city: '', postal: '' }); const [submitting, setSubmitting] = React.useState(false); const [error, setError] = React.useState(''); const set = (k, v) => setForm(f => ({ ...f, [k]: v })); const valid = form.name && form.email && form.address && form.city; const submit = () => { if (!valid || submitting) return; setSubmitting(true); setError(''); var itemsJson = JSON.stringify( cart.map(c => ({ id: c.item.id, name: c.item.name, price: c.item.price, qty: c.qty })) ); var grandTotal = total + 120; fetch('/api/paystack/initialize', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: form.email, name: form.name, phone: form.phone, address: form.address, city: form.city, postal: form.postal, amount: Math.round(grandTotal * 100), orderType: 'shop', itemsJson: itemsJson, }) }) .then(r => r.ok ? r.json() : r.text().then(t => { throw new Error(t); })) .then(data => { setSubmitting(false); try { var popup = new window.PaystackPop(); popup.resumeTransaction(data.accessCode, { onSuccess: function(response) { onComplete(data.orderNumber); fetch('/api/paystack/verify', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ reference: response.reference, orderType: 'shop' }) }).catch(() => {}); }, onCancel: function() { setSubmitting(false); } }); } catch(e) { setError('Payment error: ' + (e.message || String(e))); } }) .catch(err => { setSubmitting(false); setError('Could not start payment: ' + (err.message || err)); }); }; return (
— checkout
Delivery details
{/* Order summary */}
— order summary {cart.map(({ item, qty }) => (
{item.name} × {qty} R {(item.price * qty).toFixed(0)}
))}
ShippingR 120
TotalR {(total + 120).toFixed(0)}
{error &&
{error}
}
); }; // === SHOP ORDER SUCCESS === const ShopSuccessScreen = ({ theme, orderNumber, onHome }) => { const m = theme.mobile; return (
— order confirmed
Thank you.
Your order {orderNumber} has been placed. We'll be in touch by email with your tracking details once it ships.
Questions? Email us at hello@moyahaus.co.za
); }; Object.assign(window, { ShopScreen, CartScreen, ShopCheckoutScreen, ShopSuccessScreen });