/* global React, Icon, Photo, Stepper, PRODUCT */ function CartDrawer({ open, onClose, items, setItems, onCheckout }) { const drawerRef = React.useRef(null); const [barWidth, setBarWidth] = React.useState(0); const lines = items.map(it => { // Kshop sells one product — match by id anyway in case future SKUs are added. const p = (it.productId === PRODUCT.id) ? PRODUCT : PRODUCT; const s = p?.sizes.find(x => x.id === it.sizeId); return { ...it, p, s, total: (s?.price || 0) * it.qty }; }); const subtotal = lines.reduce((a, l) => a + l.total, 0); const { shippingFreeThreshold = 75, shippingRate = 9 } = window.STORE_CONFIG || {}; const shipping = subtotal >= shippingFreeThreshold ? 0 : shippingRate; const total = subtotal + shipping; const realBarWidth = Math.min(100, (subtotal / shippingFreeThreshold) * 100); // Animate progress bar on open, update on qty change React.useEffect(() => { if (!open) { setBarWidth(0); return; } const t = setTimeout(() => setBarWidth(realBarWidth), 16); return () => clearTimeout(t); }, [open, realBarWidth]); // Focus trap while drawer is open React.useEffect(() => { if (!open) return; const drawer = drawerRef.current; if (!drawer) return; const focusables = drawer.querySelectorAll( 'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])' ); const first = focusables[0]; const last = focusables[focusables.length - 1]; first?.focus(); const trap = (e) => { if (e.key !== "Tab") return; if (e.shiftKey) { if (document.activeElement === first) { e.preventDefault(); last?.focus(); } } else { if (document.activeElement === last) { e.preventDefault(); first?.focus(); } } }; document.addEventListener("keydown", trap); return () => document.removeEventListener("keydown", trap); }, [open]); const updateQty = (idx, q) => { setItems(prev => prev.map((it, i) => i === idx ? { ...it, qty: Math.max(1, q) } : it)); }; const remove = (idx) => setItems(prev => prev.filter((_, i) => i !== idx)); return ( <>
); } Object.assign(window, { CartDrawer });