/* global React, PrimaryButton */ // Yomee — Profile-specific question screens. // Driven by a static config of profile -> question list. Each call renders // ONE question. The parent (router in App.jsx) advances stepIndex and // re-mounts this screen for the next question, OR jumps straight to upload // when skip is tapped or there are no more questions. // // Profile keys (optimizador, escalador) come from ProfileResultScreen's // classifyProfile. User-visible names match the keys 1:1. const { useMemo: useMemoQ } = React; // Profile color tokens (must match ProfileResultScreen accent colors). // References DS tokens via getComputedStyle is overkill here — we use the // canonical token strings directly so the progress bar resolves them. const PROFILE_COLOR = { totalero: "var(--yo-mint-700)", optimizador: "var(--yo-orange-soft)", escalador: "var(--yo-coral)", reiniciador: "var(--yo-lavender)", }; // Total *steps* per profile (profile screen + N questions + upload). // Used so the progress bar feels accurate across the whole post-result flow. const PROFILE_TOTAL_STEPS = { totalero: 2, // profile + upload (no questions) optimizador: 4, // profile + 2 questions + upload escalador: 5, // profile + 3 questions + upload reiniciador: 5, // profile + 3 questions + upload }; // Skip link copy per profile. const SKIP_LABEL = { optimizador: "Saltar preguntas", escalador: "Ir directo a mi radiografía", reiniciador: "Prefiero ir directo", totalero: "", // no questions, no skip }; // Per-profile question list. Index is 0-based; we render index = stepIndex. // Each entry: { question, options:[3], tip?, tips? } // tip — single static tip shown for any selected option // tips — object mapping option label -> per-option tip (overrides tip) const QUESTIONS = { totalero: [], optimizador: [ { question: "¿Cuántas tarjetas de crédito tienes activas?", options: ["1 tarjeta", "2 tarjetas", "3 o más"], tips: { "1 tarjeta": "Con una sola tarjeta es más fácil tener control. Lo importante es saber si está trabajando a tu favor o en tu contra.", "2 tarjetas": "Tener más de una tarjeta no es malo — el truco está en saber cuál te conviene más.", "3 o más": "Con varias tarjetas es fácil perder el rastro de cuál te cuesta más. Vamos a poner cada una en su lugar.", }, }, { question: "¿Qué te gustaría lograr con tu deuda?", options: [ "Pagarla más rápido", "Pagar menos intereses", "Tenerla en una sola tarjeta", ], tips: { "Pagarla más rápido": "Salir de la deuda antes libera más que dinero — libera tu cabeza. Vamos a calcular tu camino más corto.", "Pagar menos intereses": "Cada peso menos en intereses es un peso más en tu bolsillo. Vamos a encontrar dónde están las fugas.", "Tenerla en una sola tarjeta": "Consolidar bien hecho puede ahorrarte miles. Vamos a ver si es tu mejor jugada.", }, }, ], escalador: [ { question: "¿Cuántas tarjetas de crédito tienes activas?", options: ["1 tarjeta", "2 tarjetas", "3 o más"], tips: { "1 tarjeta": "Con una sola tarjeta el camino es más claro. Vamos a ver exactamente cuánto te está costando hoy.", "2 tarjetas": "Con dos tarjetas el truco está en saber cuál atacar primero. Esa decisión es la que más ahorra en intereses.", "3 o más": "Cuando hay varias tarjetas con saldo, atacarlas todas a la vez no funciona. Vamos a encontrar el orden correcto.", }, }, { question: "¿Sabes cuánto pagas aproximadamente en intereses al año?", options: ["Sí, lo sé", "Tengo una idea", "No lo sé"], tips: { "Sí, lo sé": "Saberlo ya te pone adelante de la mayoría. Ahora vamos a ver cómo bajarlo.", "Tengo una idea": "Casi siempre el número real es mayor al estimado. Vamos a verlo con precisión.", "No lo sé": "La mayoría no lo sabe — y los bancos no lo hacen fácil de ver. Por eso existe la radiografía.", }, }, { question: "¿Cuánto tiempo llevas pagando el mínimo?", options: ["Menos de 6 meses", "6 a 12 meses", "Más de un año"], tip: "Cada mes que pasa pagando el mínimo, el banco gana más que tú. Vamos a revertir eso.", }, ], reiniciador: [ { question: "¿Qué tan seguido piensas en tu deuda?", options: ["Todo el tiempo", "Seguido", "Trato de no pensar en ello"], tips: { "Todo el tiempo": "Esa carga es real y es agotadora. El primer alivio llega cuando tienes un plan claro frente a ti.", "Seguido": "Pensar en ella sin un plan agota. Con un plan, esa misma energía se convierte en acción.", "Trato de no pensar en ello": "No pensarla no la hace desaparecer — pero entenderla bien quita la mayor parte del miedo.", }, }, { question: "¿Has intentado antes organizarte para pagarla?", options: [ "Sí, pero no funcionó", "Estoy empezando a intentarlo", "Todavía no", ], tips: { "Sí, pero no funcionó": "Que no haya funcionado antes no dice nada malo de ti — dice que necesitabas mejores herramientas.", "Estoy empezando a intentarlo": "Empezar es la parte más difícil, y ya la diste. Lo demás lo construimos contigo.", "Todavía no": "Está bien — hoy es el día. No vamos a apurar nada, vamos paso a paso.", }, }, { question: "¿Cuántas tarjetas tienes con pagos pendientes?", options: ["1 tarjeta", "2 tarjetas", "3 o más"], tips: { "1 tarjeta": "Una tarjeta es un punto de partida claro. Vamos a darte un primer paso concreto, sin abrumarte.", "2 tarjetas": "Con dos tarjetas vamos a definir cuál priorizar primero — paso a paso, sin presión.", "3 o más": "Respira. No vamos a atacarlas todas a la vez — empezamos por la que más te alivia.", }, }, ], }; // ──────────────────────────────────────────────── // Top bar with progress fill, back arrow, and "Pregunta X de Y" label. // Matches OnboardingHeader's layout but with a profile-colored fill. // (Help "?" icon intentionally omitted on all profile question screens.) // ──────────────────────────────────────────────── function ProfileTopBar({ accent, current, total, onBack }) { const pct = (current / total) * 100; return ( <> {/* Track */}
{/* Back + label + help */}
{/* "Pregunta X de Y" label */} Pregunta {current} de {total}
); } // ──────────────────────────────────────────────── // Pill option button. Outlined by default; selected state = solid profile color. // ──────────────────────────────────────────────── function OptionPill({ label, selected, accent, onClick }) { return ( ); } // ──────────────────────────────────────────────── // Main screen // profile — internal key (totalero | parcialero | minimero | reiniciador) // stepIndex — 0-based question index // onAnswer — (answer, stepIndex) => void parent decides whether to // advance to the next question or move to upload // onSkip — () => void jump to upload, bypassing remaining qs // onBack — () => void back to previous step (parent decides target) // ──────────────────────────────────────────────── function ProfileQuestionScreen({ profile = "optimizador", stepIndex = 0, onAnswer, onSkip, onBack, }) { const accent = PROFILE_COLOR[profile] || PROFILE_COLOR.optimizador; const list = QUESTIONS[profile] || []; const q = list[stepIndex]; // Progress: profile screen counts as step 1; this question is profile + idx + 1. const totalSteps = PROFILE_TOTAL_STEPS[profile] || 2; const currentStep = 1 /*profile*/ + (stepIndex + 1); // Selection state — fresh per question instance. Re-mounting this screen with // a new stepIndex resets state naturally. const [selected, setSelected] = React.useState(null); // Defensive: if profile has no questions or index out of range, render nothing. if (!q) return null; const submit = () => { if (selected == null) return; onAnswer && onAnswer(q.options[selected], stepIndex); }; // Question count label (1 de 2, 2 de 3, etc.) for the bar above const questionsTotal = list.length; const questionNumber = stepIndex + 1; return (
{/* Scrollable content */}
{/* Mascot — right aligned, same size as profile screen (140px circle) */}
{/* Question */}

{q.question}

{/* Options */}
{q.options.map((opt, i) => ( setSelected(i)} /> ))}
{/* Tip box — only visible AFTER an answer is picked. We render unconditionally so the slide-in animation runs the first time `selected` becomes non-null. Subsequent option changes leave the tip mounted (no re-animation), per spec. */}

{selected != null && q.tips ? q.tips[q.options[selected]] || q.tip : q.tip}

{/* Sticky CTA + skip */}
Continuar
); } Object.assign(window, { ProfileQuestionScreen, PROFILE_COLOR, PROFILE_TOTAL_STEPS, QUESTIONS_BY_PROFILE: QUESTIONS, });