// screens-flow.jsx — Home, Scan, Cluster browse + Product sheet // ───────────────────────────────────────────────────────────── // HOME SCREEN // ───────────────────────────────────────────────────────────── const ScreenHome = ({ user, onScan, onOpenProfile, onOpenVouchers, onOpenRiwayat, onOpenProduct, onOpenCari, onOpenMap, navbar }) => { const isGuest = !user; const recentTx = MOCK_RECENT_TX.slice(0, 2); const popular = MOCK_POPULAR_IDS.map(id => MOCK_PRODUCTS.find(p => p.id === id)).filter(Boolean); return (
{/* ─── HEADER (navy band) ─────────────────────────── */}
{/* subtle bee dot grid */}
{/* logo + actions */}
{!isGuest && ( )}
{/* greeting */}
{(() => { const b = window.BRAND || {}; const g = b.greeting || {}; if (isGuest) { return ( <>
{g.guestPre || 'Selamat datang di'}
{g.guestTitle || 'Warung 24 jam\ndi sebelah kamu'}
); } return ( <>
{g.loggedInPre || 'Halo,'} {user.name.split(' ')[0]} 👋
{g.loggedInTitle || 'Mau ambil apa\nmalam ini?'}
); })()}
{/* HERO SCAN CARD */}
{/* ─── PROMO BANNER ───────────────────────────────── */}
{/* ─── CARI BAR (jumps to Cari screen) ──────────────── */}
{/* ─── PRODUK POPULER ─────────────────────────────── */}
Produk populer
{popular.map(p => ( ))}
{/* ─── PETA MESIN ─────────────────────────────────── */}
{/* ─── LOGGED-IN ONLY: VOUCHER + RIWAYAT ──────────── */} {!isGuest && user.vouchers.length > 0 && ( <>
Voucher aktif
)} {!isGuest && ( <>
Transaksi terakhir
{recentTx.map(tx => ( ))}
)} {/* ─── GUEST ONLY: CARA PAKAI + DAFTAR ─────────────── */} {isGuest && ( <>
Cara pakai
{((window.BRAND && window.BRAND.howSteps) || [ { n: 1, t: 'Pindai QR', d: 'di kotak mesin', icon: 'qr' }, { n: 2, t: 'Pilih & bayar', d: 'QRIS otomatis', icon: 'card' }, { n: 3, t: 'Ambil barang', d: 'dari kotak menyala', icon: 'package' }, ]).map(s => (
{s.t}
{s.d}
))}
)}
{navbar}
); }; // ───────────────────────────────────────────────────────────── // PROMO BANNER — swipeable horizontal carousel with dots // ───────────────────────────────────────────────────────────── const PromoBanner = ({ promos }) => { const [i, setI] = React.useState(0); const scrollerRef = React.useRef(null); const onScroll = (e) => { const w = e.target.clientWidth; const idx = Math.round(e.target.scrollLeft / w); if (idx !== i) setI(idx); }; return (
{promos.map((p, idx) => ( ))}
{promos.map((_, idx) => (
); }; const PromoSlide = ({ promo }) => (
); // ───────────────────────────────────────────────────────────── // NEARBY CARD — used in horizontal strip // ───────────────────────────────────────────────────────────── const NearbyCard = ({ n, locOn, onTap }) => { const fmtDist = (m) => m < 1000 ? `${m} m` : `${(m/1000).toFixed(1).replace('.', ',')} km`; return ( ); }; // ───────────────────────────────────────────────────────────── // SCAN SCREEN — camera viewport with QR overlay // ───────────────────────────────────────────────────────────── const ScreenScan = ({ onBack, onDetected }) => { const [hint, setHint] = React.useState('Arahkan kamera ke QR di kotak'); // Simulate auto-detect after a moment if user taps "Simulasikan" React.useEffect(() => { const t = setTimeout(() => setHint('Cari kotak yang menyala kuning — itu QR-nya'), 3500); return () => clearTimeout(t); }, []); return (
{/* fake camera feed — dark navy backdrop with subtle vignette */}
{/* subtle pretend "wall of cubes" hint behind the scanner */}
{Array.from({ length: 8 }).map((_, i) => (
))}
{/* Top bar */}
Pindai QR Kotak
{/* Bottom instruction + simulate button */}
{hint}
Pindai QR pada mesin yang kamu pilih
); }; // ───────────────────────────────────────────────────────────── // MACHINE VIEW — products inside one scanned machine (max 9 SKUs) // No search, no filter, no categories. Spinner mechanism shown as hero. // ───────────────────────────────────────────────────────────── const ScreenMachine = ({ machine, cart, onAddToCart, onRemoveFromCart, onBack, onOpenCart, onOpenProduct, onSwitchMachine }) => { const products = PRODUCTS_FOR_MACHINE(machine.id); const cartCount = Object.values(cart).reduce((s, v) => s + v, 0); const cartTotal = Object.entries(cart).reduce((s, [pid, qty]) => { const p = MOCK_PRODUCTS.find(x => x.id === pid); return s + (p?.price || 0) * qty; }, 0); const inStockCount = products.filter(p => p.stock > 0).length; return (
{cartCount > 0 && ( {cartCount} )} } />
{/* Machine status banner */}
Mesin aktif
{products.length} produk · {inStockCount} tersedia · spinner siap
{/* Adult-only banner */} {machine.adultOnly && (
Mesin ini berisi produk khusus 21+. Pembelian memerlukan verifikasi KTP.
)} {/* Product grid — max 9 items, 2 columns */} {products.length === 0 ? (
Mesin sedang kosong
Operator sedang mengisi ulang
) : (
{products.map(p => ( ))}
)} {cartCount > 0 &&
}
{/* Sticky cart bar */} {cartCount > 0 && (
{cartCount}
Keranjang · habis 2:47
{fmtRp(cartTotal)}
)}
); }; // ───────────────────────────────────────────────────────────── // PRODUCT SHEET — bottom sheet with detail + add to cart // ───────────────────────────────────────────────────────────── const ProductSheet = ({ product, cart, onAdd, onRemove, onClose, onBuyNow, onAgeGate, user, machine }) => { if (!product) return null; const qty = cart[product.id] || 0; const handleAdd = () => { if (product.isAdult && !user?.verifiedAge) { onAgeGate(product); return; } onAdd(product); }; const handleBuyNow = () => { if (product.isAdult && !user?.verifiedAge) { onAgeGate(product); return; } onBuyNow(product); }; return (
{/* Hero */}
{product.brand} {product.isAdult && 21+}
{product.name}
{product.unit}
{fmtRp(product.price)}
{/* Stock + machine */}
5 ? 'var(--eb-success)' : product.stock > 0 ? 'var(--eb-warn)' : 'var(--eb-danger)' }} />
{product.stock === 0 ? 'Habis di mesin ini' : product.stock <= 5 ? `Tinggal ${product.stock} pcs` : `Tersedia ${product.stock} pcs`}
Stok diperbarui beberapa detik lalu
{machine && (
Mesin {machine.no} · {machine.name}
Spinner siap dispense
)}
{/* Description */}
Deskripsi
{productDescription(product)}
{/* 21+ warning */} {product.isAdult && (
Produk khusus 21+. Perlu verifikasi usia (KTP) untuk membeli. Login dulu jika belum.
)}
{/* Sticky bottom actions */}
{qty > 0 ? (
{qty}
) : ( )}
); }; // Short rule-based product blurb function productDescription(p) { const c = p.category; const tail = p.isAdult ? 'Dijual eceran khusus dewasa.' : 'Dijual satuan — beli sebatas yang kamu butuhkan.'; if (c === 'obat') return `${p.name} dijual 1 strip / 1 sachet. ${tail}`; if (c === 'kopi') return `Sachet siap seduh. ${tail}`; if (c === 'makanan') return `Mi instan / makanan ringan, ambil satuan. ${tail}`; if (c === 'snack') return `Snack porsi sekali makan. ${tail}`; if (c === 'perawatan') return `Saset sekali pakai — pas untuk traveling atau coba dulu. ${tail}`; if (c === 'dewasa') return `Produk eceran khusus 21+. ${tail}`; return `Tersedia eceran di mesin ini. ${tail}`; } Object.assign(window, { ScreenHome, ScreenScan, ScreenMachine, ProductSheet, PromoBanner, PromoSlide, NearbyCard });