// ZION CartDrawer — right-side cart panel with quantities + Shopify checkout function CartDrawer({ open, items, onClose, onRemove, onQty }) { const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(''); const subtotal = items.reduce((s, i) => s + i.price * (i.qty || 1), 0); // ---- On-site offers (these mirror the Shopify rules so checkout matches) ---- const BOGO_ID = 'freestyle-football'; // Freestyle Ball const BOGO_GROUP = 4; // buy 3, get 1 free → every 4th ball is free const ballItems = items.filter(i => i.id === BOGO_ID); const ballQty = ballItems.reduce((n, i) => n + (i.qty || 1), 0); const ballUnit = ballItems[0] ? ballItems[0].price : 39; const freeBalls = ballQty >= BOGO_GROUP ? 1 : 0; // one free ball total (buy 3 get 1) const bulkDiscount = freeBalls * ballUnit; const afterDiscount = subtotal - bulkDiscount; // Headless Shopify checkout: build a Shopify cart from the bag, then send the // shopper to Shopify's hosted checkout (payments, shipping, tax, order emails). const handleCheckout = async () => { setErr(''); const cfg = window.ZION_SHOPIFY; if (!cfg || !cfg.domain || !cfg.storefrontToken) { setErr('Checkout not connected yet.'); return; } const variantIds = cfg.variantIds || {}; const lines = []; const missing = []; items.forEach(i => { const merchandiseId = variantIds[i.id]; if (!merchandiseId) { missing.push(i.name); return; } lines.push({ merchandiseId, quantity: i.qty || 1 }); }); if (missing.length) { setErr('These items aren’t linked to the store yet: ' + missing.join(', ')); return; } const query = `mutation cartCreate($lines: [CartLineInput!]!) { cartCreate(input: { lines: $lines }) { cart { checkoutUrl } userErrors { field message } } }`; try { setBusy(true); const r = await fetch(`https://${cfg.domain}/api/${cfg.apiVersion || '2026-01'}/graphql.json`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Shopify-Storefront-Access-Token': cfg.storefrontToken, }, body: JSON.stringify({ query, variables: { lines } }), }); const data = await r.json(); const url = data && data.data && data.data.cartCreate && data.data.cartCreate.cart && data.data.cartCreate.cart.checkoutUrl; const userErrors = data && data.data && data.data.cartCreate && data.data.cartCreate.userErrors; if (url) { window.location.href = url; } else { setErr((userErrors && userErrors[0] && userErrors[0].message) || 'Could not start checkout.'); setBusy(false); } } catch (e) { setErr('Could not reach checkout. Check your connection.'); setBusy(false); } }; return ( <> {/* Scrim */}
{/* Panel */} ); } function Stepper({ children, onClick }) { return ( ); } window.CartDrawer = CartDrawer;