// screens-checkout.jsx — Cart, QRIS payment, Dispense, Result // ───────────────────────────────────────────────────────────── // CART — items belong to one machine (no cross-machine cart) // ───────────────────────────────────────────────────────────── const ScreenCart = ({ cart, machine, onBack, onAdd, onRemove, onClear, onCheckout, user, useVoucher, setUseVoucher, reservationLeft, onVoucherPicker }) => { const lines = Object.entries(cart).map(([pid, qty]) => ({ p: MOCK_PRODUCTS.find(x => x.id === pid), qty, })).filter(l => l.p); const subtotal = lines.reduce((s, l) => s + l.p.price * l.qty, 0); const voucher = useVoucher ? user?.vouchers.find(v => v.id === useVoucher) : null; const voucherAmount = voucher ? Math.min(voucher.amount, subtotal) : 0; const total = subtotal - voucherAmount; return (
0 && ( ) } /> {lines.length === 0 ? (
Belum ada produk
Pindai QR di mesin untuk mulai belanja
) : ( <>
{/* Machine reference + reservation */}
{machine && (
Mesin {machine.name}
{machine.location}
)}
Slot kamu di-reserve
Selesaikan dalam {mmss(reservationLeft)} agar tidak diambil pembeli lain
{/* Cart lines — flat list (single machine) */}
{lines.map((l, idx) => (
0 ? '1px solid var(--eb-line-soft)' : 'none', }}>
{l.p.name}
{l.p.unit}
{fmtRp(l.p.price)}
{l.qty}
))}
{/* Voucher */} {user && (
)} {/* Summary */}
Rincian
Subtotal ({lines.reduce((s,l) => s+l.qty, 0)} pcs) {fmtRp(subtotal)}
{voucher && (
Voucher {voucher.code} −{fmtRp(voucherAmount)}
)}
Total bayar {fmtRp(total)}
{/* Bottom CTA */}
)}
); }; // ───────────────────────────────────────────────────────────── // QRIS PAYMENT // ───────────────────────────────────────────────────────────── const ScreenQris = ({ total, onBack, onPaid, onCancel }) => { const [secs, setSecs] = React.useState(180); // 3 minute window const [status, setStatus] = React.useState('waiting'); // waiting | paid React.useEffect(() => { const t = setInterval(() => setSecs(s => Math.max(0, s - 1)), 1000); return () => clearInterval(t); }, []); React.useEffect(() => { if (status === 'paid') { const t = setTimeout(onPaid, 900); return () => clearTimeout(t); } }, [status, onPaid]); const simulatePay = () => setStatus('paid'); return (
Total tagihan
{fmtRp(total)}
QR berlaku {mmss(secs)}
{/* QR */}
{/* QRIS header strip */}
Q QRIS
NMID: ID2020 0234
{status === 'paid' ? (
Pembayaran berhasil
) : ( )}
MERCHANT · {(window.BRAND && window.BRAND.merchantName) || 'ELEKTROBEE VENDING'} — KOS SAKURA
{/* Wallet logos hint */}
Pindai dengan dompet digital atau m-banking apa pun
{['GoPay', 'OVO', 'DANA', 'ShopeePay', 'BCA', 'Mandiri', 'BRI', 'BNI'].map(w => ( {w} ))}
{/* Steps */}
Cara bayar
{[ 'Buka aplikasi dompet digital / m-banking', 'Pilih menu pindai QRIS', 'Arahkan kamera ke QR di atas', 'Konfirmasi nominal dan bayar', ].map((s, i) => (
{i + 1} {s}
))}
); }; // ───────────────────────────────────────────────────────────── // DISPENSE — the magic moment (spinner rotation per item) // ───────────────────────────────────────────────────────────── const ScreenDispense = ({ cart, machine, onFinish }) => { const lines = Object.entries(cart).map(([pid, qty]) => ({ p: MOCK_PRODUCTS.find(x => x.id === pid), qty, })).filter(l => l.p); // Per-item queue const queue = React.useMemo(() => { const q = []; lines.forEach(l => { for (let i = 0; i < l.qty; i++) q.push({ p: l.p, idx: i }); }); return q; }, []); const machineProducts = machine ? PRODUCTS_FOR_MACHINE(machine.id) : []; const slotCount = machineProducts.length; const [stepIdx, setStepIdx] = React.useState(-1); const [phase, setPhase] = React.useState('idle'); // idle | rotating | dispensing | done const [results, setResults] = React.useState({}); const [rotation, setRotation] = React.useState(0); const [dropped, setDropped] = React.useState([]); // pids that landed in the tray const [done, setDone] = React.useState(false); // Force item at index 0 in cart to fail (demo voucher refund) const failPolicy = (p, occurrence) => p.id === 'C2-0' && occurrence === 0; // Index of current product on the machine's ring const currentSlotIdx = stepIdx >= 0 && stepIdx < queue.length ? machineProducts.findIndex(p => p.id === queue[stepIdx].p.id) : -1; React.useEffect(() => { if (stepIdx === -1) { const t = setTimeout(() => setStepIdx(0), 600); return () => clearTimeout(t); } if (stepIdx >= queue.length) { const t = setTimeout(() => { setPhase('done'); setDone(true); }, 700); return () => clearTimeout(t); } const item = queue[stepIdx]; const targetSlot = machineProducts.findIndex(p => p.id === item.p.id); if (targetSlot === -1) { // Product not on this machine — shouldn't happen but skip safely setStepIdx(stepIdx + 1); return; } // Rotate so target slot is at top (12 o'clock). Each slot occupies 360/N degrees. // Wedge i centers at angle (i * wedgeAngle). To bring it to top (0deg = top), // we rotate the ring by -(i * wedgeAngle). const wedge = 360 / slotCount; // Accumulate rotation to always spin same direction (looks nicer) setRotation(prev => { const targetRot = -targetSlot * wedge; // Normalize so the spin is forward (negative): find the equivalent angle // less than current, then add a full extra turn for drama let next = targetRot; const turns = Math.floor((prev - next) / 360); next = next + (turns + 1) * -360; // ensure next < prev (one extra full rotation) return next; }); setPhase('rotating'); const willFail = failPolicy(item.p, item.idx); const t1 = setTimeout(() => { setPhase('dispensing'); }, 1500); const t2 = setTimeout(() => { if (!willFail) { setDropped(prev => [...prev, { id: `${item.p.id}-${stepIdx}`, p: item.p }]); } setResults(prev => { const cur = prev[item.p.id] || { success: 0, failed: 0, total: 0 }; return { ...prev, [item.p.id]: { ...cur, success: cur.success + (willFail ? 0 : 1), failed: cur.failed + (willFail ? 1 : 0), total: cur.total + 1, }, }; }); setPhase('idle'); }, 2300); const t3 = setTimeout(() => setStepIdx(stepIdx + 1), 2700); return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); }; }, [stepIdx, slotCount]); React.useEffect(() => { if (done) { const t = setTimeout(() => onFinish(results), 900); return () => clearTimeout(t); } }, [done]); const currentItem = stepIdx >= 0 && stepIdx < queue.length ? queue[stepIdx] : null; const progress = Math.min(stepIdx + 1, queue.length) / queue.length; return (
Sedang mengeluarkan} sub={ {machine ? `${machine.name} · ${queue.length} barang` : `${queue.length} barang`} } transparent />
{/* Progress bar */}
{Math.min(stepIdx + 1, queue.length)} dari {queue.length} selesai
{/* SPINNER STAGE */}
{/* Dispense tray (catches dropped items) */}
{dropped.slice(-6).map((d, i) => (
))} {dropped.length > 6 && ( +{dropped.length - 6} )}
{/* Current item card */} {currentItem && !done && (
{phase === 'rotating' ? 'Memutar spinner' : phase === 'dispensing' ? 'Sedang keluar' : 'Mempersiapkan'}
{currentItem.p.name}
posisi {currentSlotIdx + 1}/{slotCount}
)} {done && (
Selesai
Ambil barang dari pintu mesin
)} {/* Per-product progress list */}
Daftar barang
{lines.map(l => { const r = results[l.p.id] || { success: 0, failed: 0, total: 0 }; const remaining = l.qty - r.total; let state = remaining > 0 && r.total === 0 ? 'waiting' : remaining > 0 ? 'inprogress' : r.failed > 0 ? 'partial' : 'success'; if (r.failed === l.qty) state = 'failed'; return (
{l.p.name}
{l.qty}× dipesan
{state === 'waiting' && ( Menunggu )} {state === 'inprogress' && ( )} {state === 'success' && ( {l.qty}/{l.qty} )} {state === 'partial' && (
{r.success}/{l.qty} keluar + voucher Rp {(r.failed * l.p.price).toLocaleString('id-ID')}
)} {state === 'failed' && ( Gagal — voucher )}
); })}
); }; // ───────────────────────────────────────────────────────────── // SpinnerRing — turntable view: products arranged in a circle, // dispense arrow at top (12 o'clock), ring rotates via CSS transform. // ───────────────────────────────────────────────────────────── const SpinnerRing = ({ products, rotation, currentSlotIdx, phase }) => { const N = products.length; const wedge = 360 / N; const SIZE = 280; const RADIUS = SIZE / 2 - 14; const HUB_R = RADIUS * 0.32; const THUMB_DIST = RADIUS * 0.66; // distance from center to thumb center const THUMB_SIZE = Math.min(54, RADIUS * 0.42); return (
{/* Outer chassis */}
{/* Top dispense arrow (fixed, doesn't rotate) */}
{/* Rotating ring */}
{/* Background disc */} {/* wedge separators */} {Array.from({ length: N }).map((_, i) => { const a = (i * wedge - wedge / 2 - 90) * Math.PI / 180; const r = (SIZE - 18) / 2; const x1 = r + Math.cos(a) * HUB_R; const y1 = r + Math.sin(a) * HUB_R; const x2 = r + Math.cos(a) * (r - 4); const y2 = r + Math.sin(a) * (r - 4); return ( ); })} {/* center hub */} {/* Product thumbnails — positioned around the ring, counter-rotate so labels stay readable */} {products.map((p, i) => { const a = (i * wedge - 90) * Math.PI / 180; // -90 puts slot 0 at top const cx = (SIZE - 18) / 2 + Math.cos(a) * THUMB_DIST; const cy = (SIZE - 18) / 2 + Math.sin(a) * THUMB_DIST; const isActive = i === currentSlotIdx; return (
); })}
{/* Active wedge glow at top */} {phase === 'dispensing' && (
)}
); }; // ───────────────────────────────────────────────────────────── // RESULT — receipt + voucher claim // ───────────────────────────────────────────────────────────── const ScreenResult = ({ cart, results, total, onDone, onScanAgain, user, onRegisterPrompt }) => { const lines = Object.entries(cart).map(([pid, qty]) => ({ p: MOCK_PRODUCTS.find(x => x.id === pid), qty, })).filter(l => l.p); const failedLines = lines.filter(l => (results[l.p.id]?.failed || 0) > 0); const totalFailedRupiah = failedLines.reduce((s, l) => s + l.p.price * (results[l.p.id]?.failed || 0), 0); const anyFailed = totalFailedRupiah > 0; const allFailed = lines.every(l => (results[l.p.id]?.success || 0) === 0); const headline = allFailed ? 'Pesanan gagal' : anyFailed ? 'Sebagian berhasil' : 'Berhasil'; const headlineColor = allFailed ? 'var(--eb-danger)' : anyFailed ? 'var(--eb-warn)' : 'var(--eb-success)'; const tagline = allFailed ? 'Voucher ganti rugi sudah kami siapkan.' : anyFailed ? `${failedLines.length} barang gagal keluar. Voucher penggantian sudah masuk.` : 'Semua barang sudah keluar dari kotak. Selamat menikmati 🐝'; return (
{/* Hero status */}
{headline}
{tagline}
{/* Voucher claim card */} {anyFailed && (
Voucher penggantian
{fmtRp(totalFailedRupiah)}
{user ? 'Sudah masuk ke akun kamu' : 'Daftar untuk mengklaim'}
{!user && ( )}
)} {/* Items */}
Detail transaksi
{lines.map((l, idx) => { const r = results[l.p.id] || { success: 0, failed: 0 }; return (
0 ? '1px solid var(--eb-line-soft)' : 'none', }}>
{l.p.name}
{l.qty}×
{fmtRp(l.p.price * l.qty)} {r.failed > 0 && (
{r.failed} gagal
)}
); })}
{/* Meta */}
Total bayar} v={{fmtRp(total)}} />
); }; const Row = ({ k, v }) => (
{k} {v}
); Object.assign(window, { ScreenCart, ScreenQris, ScreenDispense, ScreenResult, SpinnerRing });