// CartDrawer.jsx β€” slide-in cart + checkout flow function CartDrawer() { const [open, setOpen] = React.useState(false); const [cart, setCart] = React.useState(window.BB_STORE.cart.slice()); const [step, setStep] = React.useState('cart'); // 'cart' | 'checkout' | 'done' const [addons, setAddons] = React.useState({}); // checkout fields const [occasion, setOccasion] = React.useState(''); const [note, setNote] = React.useState(''); const [rName, setRName] = React.useState(''); const [rPhone, setRPhone] = React.useState(''); const [email, setEmail] = React.useState(window.BB_STORE.user?.email || ''); const [pincode, setPincode] = React.useState(''); const [pinResult, setPinResult] = React.useState(null); const [addr, setAddr] = React.useState({ flat: '', street: '', area: '' }); const [city, setCity] = React.useState(''); const [slotId, setSlotId] = React.useState('today-eve'); const [payMethod, setPayMethod] = React.useState('upi'); const [sending, setSending] = React.useState(false); const [sendErr, setSendErr] = React.useState(''); React.useEffect(() => { const onOpen = () => { setOpen(true); setStep('cart'); }; const onUpdate = () => setCart(window.BB_STORE.cart.slice()); window.addEventListener('bb-open-cart', onOpen); window.addEventListener('bb-cart-update', onUpdate); return () => { window.removeEventListener('bb-open-cart', onOpen); window.removeEventListener('bb-cart-update', onUpdate); }; }, []); const close = () => setOpen(false); // Pincode logic (uses shared gsCheckPin from GiftShop.jsx) const checkPin = (val) => { const r = window.gsCheckPin(val); setPinResult(r); if (r.status === 'same-day') setCity(r.city); }; const onPin = (e) => { const v = e.target.value.replace(/[^0-9]/g, '').slice(0, 6); setPincode(v); if (v.length === 6) checkPin(v); else setPinResult(null); }; const serviceable = pinResult && (pinResult.status === 'same-day' || pinResult.status === 'next-day'); const canOrder = serviceable && rName.trim() && addr.flat.trim(); // Totals const subtotal = window.BB_STORE.cartTotal(); const addonList = (window.GS_ADDONS || []); const addonTotal = addonList.filter(a => addons[a.id]).reduce((s, a) => s + a.price, 0); const slots = window.GS_DELIVERY_SLOTS || []; const slot = slots.find(s => s.id === slotId) || slots[0] || {}; const grandTotal = subtotal + addonTotal + (slot.fee || 0); const placeOrder = async () => { setSending(true); setSendErr(''); try { const user = window.BB_STORE.user; const res = await fetch('/api/order', { method: 'POST', headers: { 'Content-Type': 'application/json', ...(user ? { 'x-user-token': user.token } : {}) }, body: JSON.stringify({ items: cart, addons, note, occasion, recipient: { name: rName, phone: rPhone }, customerEmail: email, pincode, address: addr, city, slot: slot ? { when: slot.when, range: slot.range, tag: slot.tag } : {}, paymentMethod: payMethod, total: grandTotal, }), }); if (!res.ok) throw new Error('Server error'); window.BB_STORE.clearCart(); window.BB_STORE.notify('Your gift is on its way! 🎁', 'success'); setStep('done'); } catch { setSendErr('Could not place order β€” please WhatsApp us directly.'); } finally { setSending(false); } }; const OCCASIONS = ['Thank you', 'Congratulations', 'Happy Birthday', 'Welcome', 'Sorry', 'Just because']; const INPUT = { width: '100%', padding: '10px 12px', background: 'var(--bb-cream)', border: '1px solid var(--line)', borderRadius: 8, fontFamily: 'var(--font-serif)', fontSize: 14, color: 'var(--bb-cocoa)', outline: 'none', boxSizing: 'border-box' }; const LBL = { display: 'block', fontFamily: 'var(--font-display)', fontSize: 8.5, letterSpacing: '0.22em', color: 'var(--bb-gold-deep)', marginBottom: 5, marginTop: 12 }; if (!open) return null; return ( <> {/* Backdrop */}
{/* Drawer */}
{/* Header bar */}
{step === 'cart' ? 'YOUR CART' : step === 'checkout' ? 'CHECKOUT' : 'ORDER PLACED βœ“'}
{step === 'cart' && cart.length > 0 && (
{window.BB_STORE.cartCount()} item{window.BB_STORE.cartCount() !== 1 ? 's' : ''}  Β·  ₹{subtotal.toLocaleString('en-IN')}
)}
{/* Progress steps */} {step !== 'done' && (
{['cart', 'checkout'].map((s, i) => { const active = step === s; const done = (s === 'cart' && step === 'checkout'); return (
{ if (done) setStep(s); }} style={{ flex: 1, padding: '10px 0', textAlign: 'center', cursor: done ? 'pointer' : 'default', borderBottom: active ? '2px solid var(--bb-burgundy)' : '2px solid transparent', transition: 'all 200ms' }}> {done ? 'βœ“ ' : (i + 1) + '. '}{s === 'cart' ? 'CART' : 'CHECKOUT'}
); })}
)} {/* Scrollable content */}
{/* ── DONE ── */} {step === 'done' && (
🎁

Gift on its way!

We've received your order and will WhatsApp you with live updates. Thank you for choosing Blissful Bites.

)} {/* ── CART ── */} {step === 'cart' && ( <> {cart.length === 0 ? (
🛍

Your cart is empty

) : ( <> {/* Cart items */} {cart.map(item => (
{item.name}
{item.tag}
{item.name}
{item.count}
{item.qty || 1}
₹{(item.price * (item.qty || 1)).toLocaleString('en-IN')}
))} {/* Add-ons */}
ADD A LITTLE EXTRA
{addonList.map(a => { const on = !!addons[a.id]; return ( ); })}
)} )} {/* ── CHECKOUT ── */} {step === 'checkout' && (

Fill in delivery details to send your gift.

{/* Occasion */}
OCCASION
{OCCASIONS.map(o => ( ))}
{/* Note */} GIFT NOTE (optional)