/* ───────────────────────────────────────────────────────────────── CrossSellSheet — cross-sell superpuesto DENTRO del panel del carrito, ancho completo, con fondo oscuro que deja ver parte del carrito arriba. Se desliza de abajo hacia arriba y se puede ARRASTRAR hacia abajo (drag en el header) para ocultarlo. Cada producto se puede agregar y deseleccionar (toggle). Máx. 4 productos. Props: open, cart, onAdd, onRemove, onNavigate, onClose, onContinue ───────────────────────────────────────────────────────────────── */ function CrossSellSheet({ open, cart, onAdd, onRemove, onNavigate, onClose, onContinue }) { const { PRODUCTS, ARS } = window.RC_DATA; const MAX = 4; const [picks, setPicks] = React.useState([]); const [justAdded, setJustAdded] = React.useState({}); const [drag, setDrag] = React.useState(0); // px arrastrados hacia abajo (para render) const [animate, setAnimate] = React.useState(true); const [topOffset, setTopOffset] = React.useState(120); // se mide al abrir: justo debajo del 1er producto del carrito const dragStart = React.useRef(null); const dragRef = React.useRef(0); // valor actual del drag (lectura en touchend) const sheetRef = React.useRef(null); // Candidatos: se calculan al ABRIR (no en cada add). También resetea el drag. React.useEffect(() => { setDrag(0); setAnimate(true); if (!open) return; const inCart = new Set(cart.map((it) => it.id)); const accessories = PRODUCTS.filter((p) => p.cat === 'rep' && !inCart.has(p.id)); const ranked = [...accessories].sort((a, b) => (b.rating || 0) - (a.rating || 0) || a.price - b.price); let result = ranked.slice(0, MAX); if (result.length < MAX) { result = result.concat( PRODUCTS.filter((p) => !inCart.has(p.id) && !result.find((x) => x.id === p.id)).slice(0, MAX - result.length) ); } setPicks(result); setJustAdded({}); // Posicionar la card justo debajo del primer producto del carrito, // para que ese producto quede visible (atenuado) en el fondo. requestAnimationFrame(() => { const panel = sheetRef.current && sheetRef.current.parentElement; if (!panel) return; const scroll = [...panel.children].find((c) => c.tagName === 'DIV' && getComputedStyle(c).overflowY === 'auto'); const firstItem = scroll && scroll.firstElementChild; if (firstItem) { const panelTop = panel.getBoundingClientRect().top; setTopOffset(Math.round(firstItem.getBoundingClientRect().bottom - panelTop)); } }); }, [open]); const addedIds = new Set(cart.map((it) => it.id)); const anySelected = picks.some((p) => addedIds.has(p.id)); // ¿se agregó algún artículo del cross-sell? const cartCount = cart.reduce((s, i) => s + i.qty, 0); const cartTotal = cart.reduce((s, i) => s + i.price * i.qty, 0); const handleAdd = (p) => { onAdd(p); setJustAdded((s) => ({ ...s, [p.id]: true })); setTimeout(() => setJustAdded((s) => { const { [p.id]: _, ...rest } = s; return rest; }), 1600); }; const handleRemove = (p) => { onRemove(p.id); setJustAdded((s) => { const { [p.id]: _, ...rest } = s; return rest; }); }; // Drag para ocultar hacia abajo (touch). Se lee el valor desde un ref en // touchend (el estado podría estar desactualizado por el timing de render). const onDragStart = (e) => { dragStart.current = e.touches[0].clientY; dragRef.current = 0; setAnimate(false); }; const onDragMove = (e) => { if (dragStart.current == null) return; const dy = Math.max(0, e.touches[0].clientY - dragStart.current); dragRef.current = dy; setDrag(dy); }; const onDragEnd = () => { setAnimate(true); const d = dragRef.current; dragStart.current = null; if (d > 100) onClose(); // pasó el umbral → ocultar else setDrag(0); // volver arriba }; return (
{/* Fondo oscuro: deja ver (atenuado) el primer producto del carrito arriba */}
{/* Card del cross-sell — ancho completo, arranca debajo del 1er producto */}
{/* Header = zona de arrastre (sin padding superior) */}

Agregá a tu compra

{/* Lista scrollable — sin box por producto */}
{picks.map((p, i) => { const added = !!justAdded[p.id] || addedIds.has(p.id); return (
{ARS(p.price)}
); })}
{/* Footer */}
Total · {cartCount} {cartCount === 1 ? 'producto' : 'productos'} {ARS(cartTotal)}
{!anySelected && }
); } window.CrossSellSheet = CrossSellSheet;