// PreparaEntregaDemo β€” animated tour of the Wapido orders panel. // Lives in the Capacidades / "Prepara comanda y entrega" tab. // // Timeline (looping, tight): // 0.00 - 0.35 Card pops into "Recibidas" (snap-in with overshoot) // 0.40 - 2.50 Toast "Nuevo pedido recibido" bottom-right // 1.50 - 2.00 Modal opens // 3.50 - 3.85 Modal scrolls to totals + buttons (snappy) // 3.85 - 4.20 "Copiar pedido" press β†’ toast "Copiado al portapapeles" // 4.20 - 5.90 Toast visible while modal still shows (read time) // 5.80 - 6.30 Modal closes (we go straight to panel) // 6.40 - 6.85 Phone POPS in (scale + opacity), message already pasted // 7.60 - 7.95 Message sends (input clears β†’ green bubble) // 8.10 - 8.70 Repartidor typing indicator // 8.70 - 9.10 Repartidor response: "Voy en 5 πŸ›΅" // 9.60 - 10.40 Phone fades out (smooth) // 10.40 - 11.70 Card flies "Recibidas" β†’ "En PreparaciΓ³n" // 12.00 - 13.30 Card flies "En PreparaciΓ³n" β†’ "Enviadas" // 13.30 - 14.80 Hold final state, restart const { useState: peState, useEffect: peEffect, useRef: peRef, useMemo: peMemo } = React; const PE_TOTAL = 14.8; const PE_MINT = '#43C98A'; const PE_MINT_DEEP = '#2EA36D'; const PE_MINT_SOFT = '#E8F6EE'; const peClamp = (x, a = 0, b = 1) => Math.max(a, Math.min(b, x)); const peEaseOut = (x) => 1 - Math.pow(1 - x, 3); const peEaseInOut = (x) => x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2; const pePhase = (t, a, b) => peClamp((t - a) / (b - a)); // type a string proportionally to progress (0..1) function peTyped(str, p) { const n = Math.floor(peEaseOut(p) * str.length); return str.slice(0, n); } function usePeTime() { const [t, setT] = peState(0); peEffect(() => { let raf, start; const frame = (now) => { if (!start) start = now; const elapsed = (now - start) / 1000 % PE_TOTAL; setT(elapsed); raf = requestAnimationFrame(frame); }; raf = requestAnimationFrame(frame); return () => cancelAnimationFrame(raf); }, []); return t; } // ── icons ────────────────────────────────────────────── const PeIco = { bell: (c = 'currentColor') => , copy: (c) => , arrow: (c) => , pin: (c) => , bike: (c) => , cash: (c) => , note: (c) => , close: (c) => , check: (c) => }; // ── the order card (the thing that travels across columns) ─ function PeOrderCard({ compact = false }) { return (
Guillermo Carranza #1
09:08 a.m. Domicilio
QUESADILLAS
1Tinga de pollo
2Queso
{!compact &&
πŸ’¬ Sin grasa todo por favor. Accede por la entrada (pluma)…
}
Efectivo
); } // ── the 3-column board ───────────────────────────────── function PeBoard({ colPos, cardOpacity, cardScale, cardLift, dimmed }) { // colPos: fractional column index 0..2 (Recibidas β†’ PreparaciΓ³n β†’ Enviadas) // The card lives absolutely-positioned inside the board, centered in // its current column. const Col = ({ label, color, count, isCardCol }) =>
{label} {count}
{!isCardCol &&
No hay Γ³rdenes
}
; const colIdx = Math.round(colPos); // Card centered horizontally in its column. Each column = 33.333% of board. const cardLeftPct = colPos * (100 / 3); const cardWidthCss = 'calc(33.333% - 24px)'; const cardLeftCss = `calc(${cardLeftPct}% + 12px)`; return (
{/* Header */}
Panel de Γ“rdenes
Gestiona las Γ³rdenes de hoy
{PeIco.bell('#8A7E6E')} Recibiendo
{/* Columns */}
{/* the traveling card β€” absolutely positioned over the board */} {cardOpacity > 0.01 &&
}
); } // ── the modal ────────────────────────────────────────── function PeModal({ t, modalIn, scrollP, copyP, copiedP, movePrepP }) { // modalIn: 0..1 (open/close) // scrollP: 0..1 (scroll position in modal body) // copyP: 0..1 (copy button press) // copiedP: 0..1 (copied toast) // movePrepP: 0..1 (move to preparaciΓ³n button press) const showCopied = copiedP > 0.02; return (
{/* close button */}
{PeIco.close('#8A7E6E')}
{/* Scrollable body */}
{/* Order # + status */}
#1 Recibida
ea775ed1-8d9d-4f70-b2fe-19e603017d90
{/* Customer */}
G
Guillermo Carranza
πŸ“ž 5219982915016
{/* Address row */}
{PeIco.pin('#8A7E6E')} Plaza Azuna en Av. Sayil, local llamado Nantai {PeIco.copy('#8A7E6E')}
{/* Pills */}
{PeIco.bike('#5C5247')} Domicilio {PeIco.cash(PE_MINT_DEEP)} Efectivo
{/* Notes block */}
πŸ’¬ Notas del cliente
Sin grasa todo por favor. Accede por la entrada (pluma) donde estΓ‘ el oxxo.
{/* Products */}
Productos
QUESADILLAS
1x Tinga De Pollo $39
2x Queso $78
{/* Totals */}
Subtotal $117
EnvΓ­o $50
Total $167
{/* Action buttons */}
{/* Scroll hint (right edge bar) */}
{/* Copied toast (top-center) */} {showCopied &&
{PeIco.check('#FFF')} Copiado al portapapeles
}
); } // ── phone with WhatsApp chat to repartidor ───────────── const PE_DELIVERY_MESSAGE = `*Pedido #1 β€” Sabor Casero* πŸ‘€ Guillermo Carranza πŸ“ž 5219982915016 πŸ“ Plaza Azuna en Av. Sayil, local llamado Nantai πŸ“ Notas: Sin grasa todo por favor. Accede por la entrada (pluma) donde estΓ‘ el oxxo. 🍽️ Productos: β€’ 1x Tinga De Pollo β€’ 2x Queso πŸ’΅ Total: $167 (Efectivo)`; function PePhone({ phoneIn, pastedP, sentP, repartidorTypingActive, repartidorReplyP }) { // phoneIn: 0..1 (popup in) // pastedP: 0..1 (whether the message is pasted into the input) // sentP: 0..1 (sent bubble entry β€” when > 0.5 the input clears) // repartidorTypingActive: bool (show typing indicator) // repartidorReplyP: 0..1 (response bubble entry) const showPastedInInput = pastedP > 0.5 && sentP < 0.5; return (
{/* Header */}
β€Ή
πŸ›΅
Carlos Β· Repartidor
en lΓ­nea
{/* Chat */}
HOY
{/* Sent message bubble (appears when sentP > 0) */} {sentP > 0 &&
{PE_DELIVERY_MESSAGE} 09:09
} {/* Repartidor typing indicator */} {repartidorTypingActive &&
{[0, 1, 2].map((i) => )}
} {/* Repartidor reply bubble */} {repartidorReplyP > 0 &&
Voy en 5 πŸ›΅ 09:10
}
{/* Input bar */}
{showPastedInInput ? PE_DELIVERY_MESSAGE : 😊 Mensaje }
); } // ── captions ─────────────────────────────────────────── function PeCaption({ t }) { let caption = 'Pedido recibido…'; if (t > 1.5) caption = 'Revisando detalles…'; if (t > 3.85) caption = 'Copiando datos del pedido…'; if (t > 6.40) caption = 'Pasando al repartidor…'; if (t > 9.05) caption = 'Listo, repartidor avisado βœ“'; if (t > 10.4) caption = 'Moviendo a preparaciΓ³n…'; if (t > 12.0) caption = 'Pedido en camino…'; return (
{caption}
); } // ── main demo ────────────────────────────────────────── function PreparaEntregaDemo() { const t = usePeTime(); // ── derived animation state ──────────────────────────── // Card pop-in: 0.0 β†’ 0.35s with overshoot const popP = pePhase(t, 0.0, 0.35); // Scale overshoots to 1.12 at p=0.6, then settles to 1.0 let cardScale; if (popP < 0.6) cardScale = peEaseOut(popP / 0.6) * 1.12;else cardScale = 1.12 - (popP - 0.6) / 0.4 * 0.12; if (popP >= 1) cardScale = 1; const cardOpacity = popP; // Modal: opens at 1.5, closes 5.8–6.3 (after "Copiado" has been seen). // After it closes we never reopen it. const modalIn = pePhase(t, 1.5, 2.0) * (1 - pePhase(t, 5.8, 6.3)); // Scroll the modal body: 3.5 β†’ 3.85 (snappier) const scrollP = pePhase(t, 3.5, 3.85); // Copy button press 3.85 β†’ 4.25 const copyP = pePhase(t, 3.85, 4.05) * (1 - pePhase(t, 4.15, 4.35)); // Copied toast: appears 4.05 β†’ fades 5.7 (a beat longer for read time) const copiedP = pePhase(t, 4.05, 4.35) * (1 - pePhase(t, 5.5, 6.0)); // "Nuevo pedido recibido" toast: 0.4 β†’ 2.5 (auto-dismiss before modal opens) const newOrderToastP = pePhase(t, 0.4, 0.7) * (1 - pePhase(t, 2.0, 2.5)); // Phone pops in 6.40 β†’ 6.85 (fast scale + opacity), fades out 9.60 β†’ 10.40 const phoneInP = peEaseOut(pePhase(t, 6.40, 6.85)); const phoneOutP = peEaseInOut(pePhase(t, 9.60, 10.40)); const phoneIn = phoneInP * (1 - phoneOutP); // Pasted message visible as soon as phone is mostly in const pastedP = pePhase(t, 6.60, 6.85); // Sent bubble appears: 7.60 β†’ 7.95 (input clears, bubble shows) const sentP = pePhase(t, 7.60, 7.95); // Repartidor typing indicator: 8.10 β†’ 8.70 const repartidorTypingActive = t >= 8.10 && t < 8.70; // Repartidor response bubble appears: 8.70 β†’ 9.05 const repartidorReplyP = pePhase(t, 8.70, 9.05); // No "Mover a PreparaciΓ³n" press anymore (modal closed already) const movePrepP = 0; // Card travel between columns (kick off right after phone fades out) // 10.40 β†’ 11.70 Recibidas (col 0) β†’ En PreparaciΓ³n (col 1) // 12.00 β†’ 13.30 En PreparaciΓ³n (col 1) β†’ Enviadas (col 2) const moveA = peEaseInOut(pePhase(t, 10.40, 11.70)); const moveB = peEaseInOut(pePhase(t, 12.00, 13.30)); let colPos = 0; if (t >= 12.00) colPos = 1 + moveB;else if (t >= 10.40) colPos = moveA; // Subtle lift during moves (parabolic) let cardLift = 0; if (t >= 10.40 && t < 11.80) cardLift = -8 * Math.sin(Math.PI * pePhase(t, 10.40, 11.70));else if (t >= 12.00 && t < 13.40) cardLift = -8 * Math.sin(Math.PI * pePhase(t, 12.00, 13.30)); // Slight scale bump on travel if (t >= 10.40 && t < 11.80) cardScale = 1 + 0.06 * Math.sin(Math.PI * pePhase(t, 10.40, 11.70));else if (t >= 12.00 && t < 13.40) cardScale = 1 + 0.06 * Math.sin(Math.PI * pePhase(t, 12.00, 13.30)); // Modal opacity dimming when phone is visible (mostly irrelevant β€” modal is gone) const modalVisOpacity = 1 - 0.92 * phoneIn; // dim the board when phone is up const boardDimmed = phoneIn > 0.4; // url segment const urlSeg = t < 6.85 ? 'orders' : t < 10.4 ? 'chat' : 'orders'; return (
{/* Top bar matches AprendeNegocioDemo style */}
app.wapido.ai /{urlSeg}
{/* Body: dashboard with overlayed modal + phone */}
{modalIn > 0.01 &&
} {phoneIn > 0.01 && } {/* New-order toast (bottom-right of board) */} {newOrderToastP > 0.01 &&
Nuevo pedido recibido
Guillermo Carranza Β· #1
}
); } window.PreparaEntregaDemo = PreparaEntregaDemo;