/* global React, Icon */ const { useState, useEffect, useCallback } = React; const BRIDGE_URL = 'https://ipbridge.indiegroup.id'; // ============================================================ // CART DRAWER // ============================================================ function CartDrawer({ cart, onClose, onRemove, onUpdateQty, navigate }) { const subtotal = cart.reduce((s, item) => s + (item.qty * (item.paper.price?.A4 || item.paper.price_min || 0)), 0); return (
e.stopPropagation()}>

Cart ({cart.length} item)

{cart.length === 0 ? (

Cart kosong.

) : ( <>
{cart.map((item, i) => { const price = item.paper.price?.[item.format] || item.paper.price_min || 0; return (
{item.paper.name}
{item.format} · {item.paper.gsm}gsm
Rp {price.toLocaleString('id-ID')} / lembar
{item.qty}
Rp {(price * item.qty).toLocaleString('id-ID')}
); })}
Subtotal Rp {subtotal.toLocaleString('id-ID')}

Ongkir: Rp 20.000 Jabodetabek · Rp 50.000 luar Jabodetabek

)}
); } // ============================================================ // CHECKOUT PAGE // ============================================================ function CheckoutPage({ cart, navigate, onOrderSuccess, authProfile }) { const [form, setForm] = useState({ name: authProfile?.full_name || '', email: authProfile?.email || '', phone: authProfile?.phone || authProfile?.phone_normalized || '', studio: '', street: '', city: '', province: '', postal_code: '', notes: '' }); const [addresses, setAddresses] = useState([]); const [selectedAddrId, setSelectedAddrId] = useState(null); const [saveAddr, setSaveAddr] = useState(false); // Load saved addresses kalau user login React.useEffect(() => { if (authProfile && window.IndieAuth) { window.IndieAuth.loadAddresses().then(addrs => { setAddresses(addrs); // Auto-fill alamat default kalau ada const def = addrs.find(a => a.is_default) || addrs[0]; if (def) { setSelectedAddrId(def.id); setForm(f => ({ ...f, street: def.street || '', city: def.city || '', province: def.province || '', postal_code: def.postal_code || '', })); } }); } }, [authProfile]); // Update form kalau authProfile berubah (user baru login) React.useEffect(() => { if (authProfile) { setForm(f => ({ ...f, name: f.name || authProfile.full_name || '', email: f.email || authProfile.email || '', phone: f.phone || authProfile.phone || authProfile.phone_normalized || '', })); } }, [authProfile]); const applyAddress = (addr) => { setSelectedAddrId(addr.id); setForm(f => ({ ...f, street: addr.street || '', city: addr.city || '', province: addr.province || '', postal_code: addr.postal_code || '', })); }; const [loading, setLoading] = useState(false); const [redirecting, setRedirecting] = useState(false); const [error, setError] = useState(null); const subtotal = cart.reduce((s, item) => { const price = item.paper.price?.[item.format] || item.paper.price?.A4 || item.paper.price_min || 0; return s + (price * item.qty); }, 0); const JABODETABEK = ['jakarta','bogor','depok','tangerang','bekasi','serpong','ciputat','pamulang','bintaro']; const isJabo = JABODETABEK.some(k => form.city.toLowerCase().includes(k)); const shippingCost = form.city ? (isJabo ? 20000 : 50000) : 0; const total = subtotal + shippingCost; const set = (k, v) => setForm(f => ({...f, [k]: v})); const handleSubmit = async () => { if (!form.name || !form.email || !form.phone || !form.street || !form.city) { setError('Mohon lengkapi semua field yang wajib diisi.'); return; } setLoading(true); setError(null); try { const items = cart.map(item => { const price = item.paper.price?.[item.format] || item.paper.price_min || 0; return { acc_product_id: item.paper.acc_id, // selectedGsm = key dari price map (contoh: "176") // name_suffix di Acc App = gsm string (contoh: "176") acc_variant_id: item.paper.variants?.find(v => { const suffix = (v.name_suffix || '').trim(); const varGsm = parseInt(suffix, 10); const selectedGsm = parseInt(item.format, 10); // item.format menyimpan gsm key return varGsm > 0 && varGsm === selectedGsm; })?.id || null, product_name: item.paper.name, sku: item.paper.sku || null, format: item.format, gsm: item.paper.gsm, qty: item.qty, unit_price: price, }; }); const res = await fetch(BRIDGE_URL + '/checkout', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ customer: { name: form.name, email: form.email, phone: form.phone, studio: form.studio || undefined }, shipping: { street: form.street, city: form.city, province: form.province, postal_code: form.postal_code, notes: form.notes || undefined }, items, }), }); const data = await res.json(); if (!data.ok) throw new Error(data.error || 'Checkout gagal'); // Redirect ke Xendit payment page // Simpan alamat kalau user checklist if (saveAddr && authProfile && window.IndieAuth) { window.IndieAuth.saveAddress({ street: form.street, city: form.city, province: form.province, postal_code: form.postal_code, recipient_name: form.name, phone: form.phone, is_default: addresses.length === 0, label: form.city || 'Alamat', }).catch(e => console.warn('[Checkout] saveAddress error:', e.message)); } onOrderSuccess(data.order_number); setRedirecting(true); // Delay 1.5s supaya state ter-render dulu, baru redirect setTimeout(() => { window.location.href = data.payment_url; }, 1500); } catch (err) { setError(err.message); setLoading(false); } }; if (redirecting) { return (

Menuju halaman pembayaran…

Mohon tunggu, jangan tutup halaman ini.

); } if (cart.length === 0 && !redirecting) { return (

Cart kosong

); } return (
{/* LEFT — form */}

Shipping details

set('name', e.target.value)} placeholder="Nama lengkap" />
set('email', e.target.value)} placeholder="hello@studio.com" />
set('phone', e.target.value)} placeholder="+62 81..." />
set('studio', e.target.value)} placeholder="Studio Tertier" />

Alamat pengiriman

{addresses.length > 0 && (
Alamat tersimpan
{addresses.map(addr => (
applyAddress(addr)} >
{addr.label || 'Alamat'}
{addr.street}, {addr.city} {addr.postal_code}
))}
a.id===selectedAddrId) ? " is-active" : "")} onClick={() => { setSelectedAddrId(null); setForm(f=>({...f, street:'', city:'', province:'', postal_code:''})); }} >
+ Alamat baru
)}