/* ========================================================================= MIZUONE — CORE: ikon, helper, komponen bersama ========================================================================= */ const { useState, useEffect, useRef } = React; const imgSrc = (k) => (window.MZ_MEDIA && window.MZ_MEDIA[k]) || 'assets/' + k; const imgOpt = (k) => (window.MZ_MEDIA && window.MZ_MEDIA[k]) || undefined; /* ---- helper format ---- */ const fmtRp = (n)=> 'Rp ' + Number(n).toLocaleString('id-ID'); const fmtRpShort = (n)=> n>=1000 ? 'Rp '+(n/1000).toLocaleString('id-ID')+'rb' : 'Rp '+n; /* ---- ikon (stroke currentColor) ---- */ const Ic = { drop: (p)=>(), home: (p)=>(), bolt: (p)=>(), card: (p)=>(), camera:(p)=>(), arrow: (p)=>(), back: (p)=>(), plus: (p)=>(), check: (p)=>(), clock: (p)=>(), user: (p)=>(), wallet:(p)=>(), gift: (p)=>(), shield:(p)=>(), list: (p)=>(), qr: (p)=>(), phone: (p)=>(), tap: (p)=>(), ext: (p)=>(), }; /* ---- art (gambar) ---- */ function DropletArt({ className="w-8 h-8" }){ return ; } function Logo({ className="h-8" }){ return MizuOne; } /* ========================================================================= WATER HEADER — animasi air signature + ripple on click ========================================================================= */ function WaterHeader({ className='', children }){ const ref = useRef(null); const [ripples, setRipples] = useState([]); const last = useRef(0); const spawn = (cx, cy, scale=0.9)=>{ const el = ref.current; if(!el) return; const r = el.getBoundingClientRect(); const size = Math.max(r.width, r.height) * scale; const id = Date.now()+Math.random(); setRipples(rs=>[...rs,{ id, x:cx-r.left, y:cy-r.top, size }]); setTimeout(()=>setRipples(rs=>rs.filter(p=>p.id!==id)), 720); }; const bubbles = React.useMemo(()=>Array.from({length:11}).map((_,i)=>({ left:4+(i*8.6)%92, size:5+(i%4)*4, dur:7+(i%5)*2.2, delay:(i*0.9)%6 })),[]); return (
spawn(e.clientX,e.clientY,0.95)} onPointerMove={(e)=>{ if(e.pointerType==='touch')return; const now=Date.now(); if(now-last.current<480)return; last.current=now; spawn(e.clientX,e.clientY,0.5); }} className={"overflow-hidden wh-flow text-white select-none "+(/\babsolute\b/.test(className)?'':'relative')+" "+className} role="img" aria-label="Animasi air mengalir"> {ripples.map(r=>())}
{children}
); } /* ========================================================================= PRIMITIVES ========================================================================= */ function Card({ className='', children, ...rest }){ return
{children}
; } function Button({ variant='primary', size='md', className='', children, icon, iconRight, ...rest }){ const base = "inline-flex items-center justify-center gap-2 font-semibold rounded-xl transition active:scale-[.98] focus:outline-none focus-visible:ring-4 focus-visible:ring-mizu/30 disabled:opacity-50 disabled:pointer-events-none"; const sizes = { sm:"px-3 py-2 text-sm min-h-[40px]", md:"px-4 py-2.5 text-[15px] min-h-[44px]", lg:"px-5 py-3.5 text-base min-h-[52px]" }; const variants = { primary:"bg-mizu text-white hover:bg-mizu-600 shadow-soft", secondary:"bg-mizu-light text-mizu-700 hover:bg-[#d6e9ff]", outline:"border border-slate-300 dark:border-slate-600 text-ink dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-800 bg-white dark:bg-slate-900", ghost:"bg-transparent text-mizu-700 dark:text-mizu-light hover:bg-mizu-light/70 dark:hover:bg-slate-800", white:"bg-white text-mizu-700 hover:bg-white/90 shadow-soft", glass:"bg-white/15 text-white border border-white/35 hover:bg-white/25 backdrop-blur", success:"bg-success text-white hover:brightness-95 shadow-soft", }; return ; } function Badge({ tone='mizu', children, className='' }){ const tones = { mizu:"bg-mizu-light text-mizu-700", success:"bg-success/12 text-success", promo:"bg-warning text-[#3d2a00]", warning:"bg-warning/20 text-[#946200]", slate:"bg-slate-100 text-slate-500", }; return {children}; } const inputCls = "w-full rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 px-3.5 py-3 text-[15px] min-h-[48px] outline-none focus:border-mizu focus:ring-4 focus:ring-mizu/15 placeholder:text-slate-400 transition"; /* Header layar dengan back + judul. light=teks putih (di atas header air). */ function ScreenTop({ onBack, title, light=false }){ return (

{title}

); } /* ========================================================================= FAUX QR — placeholder QR deterministik ========================================================================= */ function FauxQR({ size=160 }){ const n = 21, cell = size/n; const finder = (gx,gy)=>{ // true bila piksel di area finder pattern for(const [ox,oy] of [[0,0],[n-7,0],[0,n-7]]){ if(gx>=ox&&gx=oy&&gy=2&&ix<=4&&iy>=2&&iy<=4; return edge||core; } } return null; }; const cells = []; for(let y=0;yn-9&&y<8)||(x<8&&y>n-9); on = inFinderClear ? false : ((x*7+y*13+x*y)%3===0); } if(on) cells.push(); } return ( {cells} ); } /* ========================================================================= PAYMENT MODAL — Faspay + countdown 15 menit + status Buka redirect_url Faspay di tab baru (bukan QR code) ========================================================================= */ function QrisModal({ open, amount=0, qrContent=null, orderId=null, onClose, onPaid, checkStatus=null }){ const [secs, setSecs] = useState(15*60); const [paid, setPaid] = useState(false); useEffect(()=>{ if(!open) return; setSecs(15*60); setPaid(false); const tick = setInterval(()=>setSecs(s=> s>0 ? s-1 : 0), 1000); return ()=>clearInterval(tick); },[open]); // Poll status setiap 3 detik bila orderId tersedia useEffect(()=>{ if(!open || !orderId || paid || !window.AquAPI) return; const fn = checkStatus || window.AquAPI.checkTopupStatus; const poll = setInterval(async()=>{ try { const r = await fn(orderId); if(r.status === 'success') setPaid(true); } catch(e){} }, 3000); return ()=>clearInterval(poll); },[open, orderId, paid, checkStatus]); useEffect(()=>{ if(!paid) return; const t = setTimeout(()=> onPaid && onPaid(), 1500); return ()=>clearTimeout(t); },[paid]); if(!open) return null; const mm = String(Math.floor(secs/60)).padStart(2,'0'); const ss = String(secs%60).padStart(2,'0'); return (
Pembayaran · Faspay
{!paid ? ( secs === 0 ? (

Sesi Kedaluwarsa

Waktu habis. Silakan buat pembayaran baru.

) : (

Selesaikan pembayaran

Total {fmtRp(amount)}

{qrContent ? ( Buka Halaman Pembayaran ) : (
Menyiapkan pembayaran…
)}

Halaman pembayaran akan terbuka di tab baru

Berlaku {mm}:{ss}
Menunggu konfirmasi pembayaran…
) ) : (

Pembayaran diterima ✓

{fmtRp(amount)} berhasil dibayar

)}
); } /* ========================================================================= BOTTOM NAV — member (Home · Topup · Riwayat · Akun) ========================================================================= */ function BottomNav({ active, flow, go, notice }){ const home = flow==='kartu' ? 'kartu-home' : 'digital-home'; const topup = flow==='kartu' ? 'kartu-topup' : 'digital-topup'; const items = [ { key:'home', label:'Beranda', icon:Ic.home, onClick:()=>go(home) }, { key:'topup', label:'Topup', icon:Ic.wallet, onClick:()=>go(topup) }, { key:'riwayat', label:'Riwayat', icon:Ic.clock, onClick:()=>go(flow==='kartu'?'kartu-riwayat':'digital-riwayat') }, { key:'akun', label:'Akun', icon:Ic.user, onClick:()=>go(flow==='kartu'?'kartu-akun':'digital-akun') }, ]; return ( ); } /* ========================================================================= FASPAY REDIRECT — interstitial (BUKAN QR in-app; redirect ke hosted page) ========================================================================= */ function FaspayRedirect({ open, onDone }){ useEffect(()=>{ if(!open) return; const t = setTimeout(()=> onDone && onDone(), 2800); return ()=>clearTimeout(t); },[open]); if(!open) return null; return (

Mengarahkan ke halaman pembayaran Faspay…

Jangan tutup halaman ini.

Pembayaran diproses aman oleh Faspay (QRIS)

); } /* ========================================================================= PIN SHEET — PIN aplikasi 4-digit (keamanan dompet; demo: 1234) ========================================================================= */ function PinSheet({ open, onClose, onSuccess, onVerify=null, expect='1234', hint=true, errMsg='PIN salah, coba lagi', title='Masukkan PIN', subtitle='PIN melindungi saldomu dari penggunaan orang lain.' }){ const [pin, setPin] = useState(''); const [err, setErr] = useState(false); const [busy, setBusy] = useState(false); useEffect(()=>{ if(open){ setPin(''); setErr(false); setBusy(false); } },[open]); useEffect(()=>{ if(pin.length<4) return; if(onVerify){ setBusy(true); onVerify(pin).then(r=>{ if(r && (r.status==='ok' || r.status==='no_pin')){ onSuccess && onSuccess(pin, r.status); } else { setErr(true); setTimeout(()=>{ setPin(''); setErr(false); setBusy(false); }, 600); } }).catch(()=>{ setErr(true); setTimeout(()=>{ setPin(''); setErr(false); setBusy(false); }, 600); }); return; } if(expect===null || pin===expect){ const t=setTimeout(()=> onSuccess && onSuccess(pin), 200); return ()=>clearTimeout(t); } const t=setTimeout(()=>{ setErr(true); setTimeout(()=>{ setPin(''); setErr(false); }, 600); }, 80); return ()=>clearTimeout(t); },[pin]); if(!open) return null; const press = (d)=>{ if(busy) return; setPin(p=> p.length<4 ? p+d : p); }; const modal = (

{title}

{subtitle}

{[0,1,2,3].map(i=>())}

{errMsg}

{['1','2','3','4','5','6','7','8','9'].map(d=>())}
{busy &&

Memverifikasi…

} {hint && !onVerify && expect!==null &&

PIN demo: 1234

}
); return ReactDOM.createPortal(modal, document.body); } /* ---- container responsif standar ---- */ const wrapWide = "max-w-lg sm:max-w-2xl lg:max-w-5xl mx-auto"; const wrapNarrow = "max-w-lg sm:max-w-xl mx-auto"; /* ========================================================================= TAUTAN EKSTERNAL & HELPER ========================================================================= */ const LINKS = { wa: 'https://wa.me/6285105840777', // Asisten Mizu (WhatsApp) tg: 'https://t.me/MizukiBot', // Asisten Mizuki (Telegram) — TODO: username bot final ig: 'https://instagram.com/mizuone.id', // TODO: ganti ke IG resmi }; const openExt = (url)=>{ try{ window.open(url, '_blank', 'noopener,noreferrer'); }catch(e){} }; /* ID transaksi Faspay dummy yang menyerupai format asli */ function faspayId(){ const d = new Date(); const p = n=>String(n).padStart(2,'0'); const rnd = Math.floor(Math.random()*1e6).toString().padStart(6,'0'); return 'FSP'+d.getFullYear()+p(d.getMonth()+1)+p(d.getDate())+rnd; } /* Bentuk objek struk dari satu baris riwayat */ function mkStruk(row, flow){ const topup = row.type==='topup'; const transfer = row.type==='transfer'; return { type: row.type, flow, title: topup ? (flow==='kartu'?'Topup Kartu':'Topup Saldo') : transfer ? 'Transfer ke Kartu' : 'Beli Air'+(row.liter?` ${row.liter}L`:''), amt: row.amt, liter: row.liter || 0, date: row.d || row.date || 'Hari ini', time: row.time || '', via: row.via || (topup?'QRIS Faspay':transfer?'Saldo digital → Kartu fisik':'Saldo digital'), method: topup ? 'QRIS · Faspay' : transfer ? 'Saldo digital' : (row.via || (flow==='kartu'?'Tap kartu di mesin':'Saldo digital')), status: 'Berhasil', id: row.orderId || faspayId(), }; } /* ========================================================================= OTP RESEND — countdown lalu tombol kirim ulang ========================================================================= */ function OtpResend({ seconds=60, onResend }){ const [s, setS] = useState(seconds); useEffect(()=>{ if(s<=0) return; const t=setTimeout(()=>setS(x=>x-1),1000); return ()=>clearTimeout(t); },[s]); return (

{s>0 ? Tidak menerima kode? Kirim ulang dalam {s}s : }

); } /* ========================================================================= CHAT FAB — asisten mengambang (Mizu WA · Mizuki Telegram) ========================================================================= */ function ChatFab(){ const [open, setOpen] = useState(false); const Opt = ({ img, name, plat, tint, onClick })=>( ); return ( {open &&
setOpen(false)} aria-hidden="true">
}
{open && (
{ setOpen(false); openExt(LINKS.wa); }}/> { setOpen(false); openExt(LINKS.tg); }}/>
)}
); } Object.assign(window, { React, useState, useEffect, useRef, fmtRp, fmtRpShort, Ic, DropletArt, Logo, WaterHeader, Card, Button, Badge, inputCls, ScreenTop, FauxQR, QrisModal, BottomNav, FaspayRedirect, PinSheet, LINKS, openExt, faspayId, mkStruk, OtpResend, ChatFab, wrapWide, wrapNarrow, });