// ─── NexWall Corp AI — App Screens & Flows ─── // ══════════════════════════════════════════ // HELPER: country typo suggestion (Levenshtein-based) // ══════════════════════════════════════════ const KNOWN_COUNTRIES = [ 'Chile', 'Argentina', 'México', 'Colombia', 'Perú', 'España', 'Brasil', 'Uruguay', 'Paraguay', 'Bolivia', 'Venezuela', 'Ecuador', 'Panamá', 'Costa Rica', 'Guatemala', 'Honduras', 'Nicaragua', 'El Salvador', 'República Dominicana', 'Puerto Rico', 'Cuba', 'Estados Unidos', 'Canadá', 'Reino Unido', 'Francia', 'Portugal', 'Italia', 'Alemania', ]; function levenshtein(a, b) { const m = a.length, n = b.length; if (!m) return n; if (!n) return m; const dp = Array.from({ length: m + 1 }, (_, i) => [i, ...Array(n).fill(0)]); for (let j = 0; j <= n; j++) dp[0][j] = j; for (let i = 1; i <= m; i++) for (let j = 1; j <= n; j++) { const cost = a[i - 1] === b[j - 1] ? 0 : 1; dp[i][j] = Math.min(dp[i - 1][j] + 1, dp[i][j - 1] + 1, dp[i - 1][j - 1] + cost); } return dp[m][n]; } // Normalize a country/city string to lowercase, strip accents, trim. function normalizeCountryName(s) { return String(s || '').trim().toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, ''); } // Returns true if the input matches a known country exactly (case/accent-insensitive). function isCountryExactMatch(input) { const n = normalizeCountryName(input); if (!n) return false; return KNOWN_COUNTRIES.some(c => normalizeCountryName(c) === n); } // Core fuzzy matcher — catches typos (swap/insert/delete), truncations (prefix), and // over-typing (extra letters at the end). Tolerant of common mistakes like: // "argentine" → Argentina (1 edit) // "argentiaana" → Argentina (2 inserts) // "argen" → Argentina (prefix match) // "argentinne" → Argentina (1 insert + 1 edit) // "arg" → Argentina (prefix match, but below min-chars → no match) function suggestCountryCorrection(input) { if (!input) return null; const clean = String(input).trim(); if (clean.length < 3) return null; const n = normalizeCountryName(clean); // Early exit: already a valid country. if (KNOWN_COUNTRIES.some(c => normalizeCountryName(c) === n)) return null; let best = null, bestScore = Infinity; for (const c of KNOWN_COUNTRIES) { const cNorm = normalizeCountryName(c); // Score = Levenshtein distance, but we also boost (reduce) when the typed input is a // meaningful prefix of the country name — typical when the user started typing and we // want to help them finish. Prefix of >= 3 chars counts as almost-match. const lev = levenshtein(n, cNorm); let score = lev; // Prefix bonus: if n is a prefix of cNorm OR cNorm starts with n substring of length >= 3, // consider it a near-match even if lev is larger (e.g. "argen" → "argentina" lev=4, prefix=yes). if (n.length >= 3 && cNorm.startsWith(n)) score = Math.min(score, 1); // Substring bonus: "argentne" contains "argent" overlap with "argentina" → use partial score. // Simple heuristic: longest common prefix length. let lcp = 0; while (lcp < n.length && lcp < cNorm.length && n[lcp] === cNorm[lcp]) lcp++; if (lcp >= 4) score = Math.min(score, lev - Math.floor(lcp / 2)); // Looser threshold for longer names. Max acceptable: 4 edits (covers "argentiaana" etc.). const threshold = Math.max(3, Math.ceil(cNorm.length * 0.45)); if (score <= threshold && score < bestScore) { best = c; bestScore = score; } } return best; } // ══════════════════════════════════════════ // SCREEN: LANDING PAGE // ══════════════════════════════════════════ const LandingPage = ({ onGoLogin, lang='es' }) => { const t = (I18N && I18N[lang]) ? I18N[lang].landingApp : I18N.es.landingApp; const features = t.features; return (
{/* NAV */} {/* HERO */}
{/* Animated nebula icon */}
NexWall Corp AI
{t.badge}

{t.h1}
{t.h1g}

{t.subtitle}

onGoLogin('register')} style={{ fontSize: '15px', padding: '14px 32px' }}> {t.ctaRegister}

{t.noCreditCard}

{/* FEATURES */}
{features.map(f => (
{f.icon}
{f.title}
{f.desc}
))}
{/* FOOTER CTA */}

{t.footer.title}

{t.footer.subtitle}

onGoLogin('register')} style={{ fontSize: '15px', padding: '14px 32px' }}>{t.footer.btn}
); }; // ══════════════════════════════════════════ // SCREEN: LOGIN / REGISTRO // ══════════════════════════════════════════ const LoginScreen = ({ onLogin, initialMode = 'login', onBack, lang='es' }) => { const t = (I18N && I18N[lang]) ? I18N[lang].login : I18N.es.login; // Detect ?reset_token=xxx in the URL on mount — if present, jump directly to the reset form. const urlResetToken = typeof window !== 'undefined' ? new URLSearchParams(window.location.search).get('reset_token') : null; const [mode, setMode] = React.useState(urlResetToken ? 'reset' : initialMode); // 'login' | 'register' | 'forgot' | 'reset' const [name, setName] = React.useState(''); const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const [password2, setPassword2] = React.useState(''); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); const [info, setInfo] = React.useState(null); // success banner text const [tokenChecking, setTokenChecking] = React.useState(!!urlResetToken); // Validate the reset token against the backend before rendering the form — catches expired or // already-used links so the user doesn't have to type a password first to find out. React.useEffect(() => { if (!urlResetToken) return; setTokenChecking(true); fetch(`${API}/auth/reset-password/${urlResetToken}`) .then(r => r.json()) .then(data => { if (!data.valid) { setError(data.error || (lang === 'en' ? 'Invalid or expired link' : 'Enlace inválido o caducado')); } }) .catch(() => setError(lang === 'en' ? 'Could not validate link' : 'No se pudo validar el enlace')) .finally(() => setTokenChecking(false)); }, [urlResetToken]); const submit = async (e) => { e.preventDefault(); setLoading(true); setError(null); setInfo(null); try { if (mode === 'forgot') { const res = await fetch(`${API}/auth/forgot-password`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email }), }); const data = await res.json().catch(() => ({})); if (!res.ok) throw new Error(data.error || 'Error'); setInfo(lang === 'en' ? 'If an account exists with that email, we just sent you a reset link. Check your inbox and spam.' : 'Si existe una cuenta con ese email, te enviamos un enlace para restablecer. Revisa tu inbox y spam.'); } else if (mode === 'reset') { if (password !== password2) { setError(lang === 'en' ? 'Passwords do not match' : 'Las contraseñas no coinciden'); setLoading(false); return; } if (String(password).length < 6) { setError(lang === 'en' ? 'Minimum 6 characters' : 'Mínimo 6 caracteres'); setLoading(false); return; } const res = await fetch(`${API}/auth/reset-password`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ token: urlResetToken, password }), }); const data = await res.json().catch(() => ({})); if (!res.ok) throw new Error(data.error || 'Error'); setInfo(lang === 'en' ? '✓ Password updated. You can now log in with your new password.' : '✓ Contraseña actualizada. Ya puedes iniciar sesión con tu nueva contraseña.'); // Clean the URL and switch to login after 2s window.history.replaceState({}, '', window.location.pathname); setTimeout(() => { setMode('login'); setPassword(''); setPassword2(''); setInfo(null); }, 2500); } else { const endpoint = mode === 'login' ? '/auth/login' : '/auth/register'; const body = mode === 'login' ? { email, password } : { email, password, name }; const res = await fetch(`${API}${endpoint}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body), }); const data = await res.json(); if (!res.ok) throw new Error(data.error || 'Error desconocido'); onLogin(data.token, data.user); } } catch (err) { setError(err.message); } finally { setLoading(false); } }; const inputStyle = { width: '100%', padding: '12px 14px', background: NX.bg3, border: `1px solid ${NX.border}`, borderRadius: '10px', color: NX.text, fontSize: '14px', fontFamily: "'DM Sans', sans-serif", outline: 'none', boxSizing: 'border-box', }; const labelStyle = { fontSize: '12px', color: NX.muted, marginBottom: '6px', display: 'block' }; return (
{/* Background glow */}
{onBack && } {/* Logo */}
NexWall NexWall Corp AI

{mode === 'login' ? t.tagline : mode === 'register' ? t.taglineRegister : mode === 'forgot' ? (lang === 'en' ? 'Enter your email to receive a reset link' : 'Ingresa tu email para recibir un enlace de restablecimiento') : (lang === 'en' ? 'Enter your new password' : 'Elige tu nueva contraseña')}

{/* Card */}
{error && (
{error}
)} {info && (
{info}
)} {/* Google OAuth — only on login/register modes */} {(mode === 'login' || mode === 'register') && <>
o
}
{mode === 'register' && (
setName(e.target.value)} required/>
)} {(mode === 'login' || mode === 'register' || mode === 'forgot') && (
setEmail(e.target.value)} required/>
)} {(mode === 'login' || mode === 'register') && (
setPassword(e.target.value)} required minLength={6}/>
)} {mode === 'reset' && ( <> {tokenChecking && (
{lang === 'en' ? 'Validating link…' : 'Validando enlace…'}
)} {!tokenChecking && !error && ( <>
setPassword(e.target.value)} required minLength={6} autoFocus/>
setPassword2(e.target.value)} required minLength={6}/>
)} )} {/* Hide submit when the reset token is invalid — only leave the "request new link" option */} {!(mode === 'reset' && (tokenChecking || error)) && ( {loading ? t.loading : mode === 'login' ? t.submit : mode === 'register' ? t.submitRegister : mode === 'forgot' ? (lang === 'en' ? 'Send reset link' : 'Enviar enlace') : (lang === 'en' ? 'Update password' : 'Actualizar contraseña')} )} {mode === 'reset' && error && !tokenChecking && ( { window.history.replaceState({}, '', window.location.pathname); setMode('forgot'); setError(null); setInfo(null); }}> {lang === 'en' ? 'Request a new link' : 'Solicitar nuevo enlace'} )} {mode === 'login' && (
{ setMode('forgot'); setError(null); setInfo(null); }} style={{ color: NX.muted, cursor: 'pointer', fontSize: '12px' }}> {lang === 'en' ? '¿Forgot your password?' : '¿Olvidaste tu contraseña?'}
)}
{/* Toggle */}

{mode === 'login' && <>{t.noAccount}{' '} { setMode('register'); setError(null); setInfo(null); }} style={{ color: NX.accent, cursor: 'pointer' }}>{t.register} } {mode === 'register' && <>{t.hasAccount}{' '} { setMode('login'); setError(null); setInfo(null); }} style={{ color: NX.accent, cursor: 'pointer' }}>{t.signIn} } {(mode === 'forgot' || mode === 'reset') && ( { setMode('login'); setError(null); setInfo(null); }} style={{ color: NX.accent, cursor: 'pointer' }}> {lang === 'en' ? '← Back to login' : '← Volver a iniciar sesión'} )}

); }; // ══════════════════════════════════════════ // SCREEN: PRIMEROS PASOS (Onboarding Hub) // ══════════════════════════════════════════ const STEP_ICONS_LG = [ // Connect channels , // Assets , // Brand , // Strategy , ]; const STEP_TOOLTIPS_ES = ['Canales de anuncios', 'Activos del negocio', 'Identidad de marca', 'Primera estrategia']; const STEP_TOOLTIPS_EN = ['Ad channels', 'Business assets', 'Brand identity', 'First strategy']; // Tiny shared hook: viewport is below the responsive breakpoint (≤820 = phones + small tablets). // Used to flip between desktop two-col home and the stacked-mobile home where the chat card // sits on top with the mascot inlined inside it. const useIsMobile = (breakpoint = 820) => { const [m, setM] = React.useState(() => typeof window !== 'undefined' && window.innerWidth <= breakpoint); React.useEffect(() => { const onResize = () => setM(window.innerWidth <= breakpoint); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, [breakpoint]); return m; }; const PrimerosPasos = ({ stepsCompleted, setActiveFlow, onStartStrategy, lang='es', campaigns = [], setView, onAutoComplete, onAssistantComplete, onOpenAdvanced, defaultImageModel='gemini-3.1-flash-image-preview' }) => { const isMobile = useIsMobile(820); const t = (I18N && I18N[lang]) ? I18N[lang].onboarding : I18N.es.onboarding; const tooltips = lang === 'en' ? STEP_TOOLTIPS_EN : STEP_TOOLTIPS_ES; const [tooltip, setTooltip] = React.useState(-1); const [hoveredCard, setHoveredCard] = React.useState(-1); // Fallback al asistente — el modo advanced quedó deprecated como entry point. const startStrategy = onStartStrategy || (() => setActiveFlow('assistant')); // Verify assets (step 1) against the backend — stepsCompleted comes from localStorage and can be stale. // Re-fetches on mount, when stepsCompleted changes, and when a 'nw-assets-refresh' window event fires // (dispatched by the parent after AssetsFlow completes). const [metaAssets, setMetaAssets] = React.useState(null); const [assetsChecked, setAssetsChecked] = React.useState(false); const refreshAssets = React.useCallback(() => { const bizId = localStorage.getItem('nw_active_biz_id') || '1'; authFetch(`/api/meta/assets?biz_id=${encodeURIComponent(bizId)}`) .then(r => r.ok ? r.json() : null) .then(data => { setMetaAssets(data || null); setAssetsChecked(true); }) .catch(() => setAssetsChecked(true)); }, []); React.useEffect(() => { refreshAssets(); const handler = () => refreshAssets(); window.addEventListener('nw-assets-refresh', handler); window.addEventListener('focus', handler); return () => { window.removeEventListener('nw-assets-refresh', handler); window.removeEventListener('focus', handler); }; }, [refreshAssets]); // Re-fetch when stepsCompleted changes (after any step is marked done) React.useEffect(() => { refreshAssets(); }, [stepsCompleted.length, refreshAssets]); const assetsComplete = !!(metaAssets?.ad_account_id && metaAssets?.page_id); const step1Broken = assetsChecked && stepsCompleted.includes(1) && !assetsComplete; // Same pattern for step 2 (brand DNA) — verify against the backend so a user who has step 2 marked // done in localStorage but no DNA row in DB (e.g. DB was reset, bad network during save, wiped // account, data loss) sees a broken state instead of a false "all done" island. const [brandDna, setBrandDna] = React.useState(null); const [brandChecked, setBrandChecked] = React.useState(false); const refreshBrand = React.useCallback(() => { const bizId = localStorage.getItem('nw_active_biz_id') || '1'; authFetch(`/api/brand-dna/${encodeURIComponent(bizId)}`) .then(r => r.ok ? r.json() : null) .then(data => { setBrandDna(data && typeof data === 'object' ? data : null); setBrandChecked(true); }) .catch(() => setBrandChecked(true)); }, []); React.useEffect(() => { refreshBrand(); const handler = () => refreshBrand(); window.addEventListener('nw-brand-refresh', handler); window.addEventListener('focus', handler); return () => { window.removeEventListener('nw-brand-refresh', handler); window.removeEventListener('focus', handler); }; }, [refreshBrand]); React.useEffect(() => { refreshBrand(); }, [stepsCompleted.length, refreshBrand]); // A valid brand DNA has at least one meaningful field. An empty object counts as "not configured". const brandComplete = !!(brandDna && typeof brandDna === 'object' && Object.keys(brandDna).some(k => { const v = brandDna[k]; return (typeof v === 'string' && v.trim()) || (Array.isArray(v) && v.length > 0); })); const step2Broken = brandChecked && stepsCompleted.includes(2) && !brandComplete; // Backend-driven reconciliation: if the server already has brand DNA / connected Meta assets // for this business, mark the corresponding onboarding step as complete — even if local // storage says it is pending (happens when the user signs in on a new device). Never REMOVE // a step from stepsCompleted here; removal is handled by the "broken" banners above. React.useEffect(() => { if (!onAutoComplete) return; // Step 0 (Meta connected) + Step 1 (ad account + page chosen). Both require metaAssets. if (assetsChecked && metaAssets && !stepsCompleted.includes(0)) onAutoComplete(0); if (assetsChecked && assetsComplete && !stepsCompleted.includes(1)) onAutoComplete(1); }, [assetsChecked, assetsComplete, metaAssets, stepsCompleted, onAutoComplete]); React.useEffect(() => { if (!onAutoComplete) return; if (brandChecked && brandComplete && !stepsCompleted.includes(2)) onAutoComplete(2); }, [brandChecked, brandComplete, stepsCompleted, onAutoComplete]); const steps = [ { id: 0, flow: 'connect', time: t.steps[0].time, title: t.steps[0].title, desc: t.steps[0].desc }, { id: 1, flow: 'assets', time: t.steps[1].time, title: t.steps[1].title, desc: t.steps[1].desc }, { id: 2, flow: 'brand', time: t.steps[2].time, title: t.steps[2].title, desc: t.steps[2].desc }, { id: 3, flow: 'strategy', time: t.steps[3].time, title: t.steps[3].title, desc: t.steps[3].desc }, ]; // Step 3 (first strategy) is "effectively done" if the user has ANY campaign in the DB — even // if stepsCompleted never got [3] persisted (happens if the user closed the tab before clicking // "Ver mis estrategias" on the success screen, or navigated away via the nav bar). const hasLaunchedCampaign = Array.isArray(campaigns) && campaigns.some(c => c && c.status !== 'draft'); const step3Effective = stepsCompleted.includes(3) || hasLaunchedCampaign; // A step is "effectively done" only if the user marked it done AND the backend confirms it. // We subtract broken steps from the completion count so the welcome island tells the truth. const baseDone = stepsCompleted.filter(i => !(i === 1 && step1Broken) && !(i === 2 && step2Broken)); const effectiveDone = step3Effective && !baseDone.includes(3) ? [...baseDone, 3] : baseDone; const completedCount = effectiveDone.length; const showIsland = completedCount > 0 || stepsCompleted.length > 0; const setupDone = effectiveDone.includes(0) && effectiveDone.includes(1) && effectiveDone.includes(2); const allDone = completedCount === 4; const totalCampaigns = Array.isArray(campaigns) ? campaigns.length : 0; const activeCampaigns = Array.isArray(campaigns) ? campaigns.filter(c => c && c.status !== 'draft').length : 0; // Pending steps to show as big cards (exclude done steps). A step whose backend state is broken // (step 1 assets missing, step 2 brand DNA missing) is treated as pending so the user can fix it. const pendingSteps = steps.filter((_, i) => !effectiveDone.includes(i)); const cols = pendingSteps.length === 1 ? 1 : pendingSteps.length === 2 ? 2 : pendingSteps.length === 3 ? 3 : 4; return (
{/* Cap a 900px en estado de onboarding (steps + banners). Cuando allDone, relajamos a 1440px para que el AssistantFlow embedded (panel + mascota) pueda quedar ópticamente centrado en pantalla con un spacer izquierdo que mirroreee la mascota. */}
{/* Header — only show when no island yet */} {!showIsland && (

{t.welcome}

{t.subtitle}

)} {/* Step 1 assets broken banner — shown when localStorage says step 1 done but backend says otherwise */} {step1Broken && (
{lang === 'en' ? 'Your Meta assets are not connected' : 'Tus activos de Meta no están conectados'}
{lang === 'en' ? 'You marked "Configure assets" as done, but we cannot find a connected ad account or page. Redo this step, or reset all connections from Integrations if you want to start fresh.' : 'Marcaste "Configurar activos" como hecho, pero no encontramos una cuenta publicitaria o página conectadas. Vuelve a hacer este paso, o ve a Integraciones para resetear todas las conexiones y empezar de cero.'}
setActiveFlow('assets')}> {lang === 'en' ? 'Fix now' : 'Arreglar ahora'}
)} {/* Step 2 brand DNA broken banner — marked done locally but DB has no DNA row for this biz */} {step2Broken && (
{lang === 'en' ? 'Your brand identity is empty' : 'Tu identidad de marca está vacía'}
{lang === 'en' ? 'You marked "Brand DNA" as done, but we cannot find any saved brand identity for this business. Re-run the brand step so AI generations use your real tone and audience again.' : 'Marcaste "Marca" como hecho, pero no encontramos una identidad de marca guardada para este negocio. Vuelve a hacer el paso para que la IA use tu tono y audiencia reales de nuevo.'}
setActiveFlow('brand')}> {lang === 'en' ? 'Reconfigure' : 'Reconfigurar'}
)} {/* Progress Island — when allDone WITH no broken backend state, the island disappears entirely (the user has nothing to fix; the island just adds visual noise). It only surfaces in the corner if a step is broken (red) so the user can click to re-do it. */} {showIsland && allDone && (step1Broken || step2Broken) && (
{steps.map((step, i) => { const broken = (i === 1 && step1Broken) || (i === 2 && step2Broken); const done = stepsCompleted.includes(i) && !broken; return (
setTooltip(i)} onMouseLeave={() => setTooltip(-1)} onClick={() => { if (broken) setActiveFlow(i === 1 ? 'assets' : 'brand'); }}>
{done ? : (i + 1)}
{tooltip === i && (
{tooltips[i]}{done && ✓}
)}
); })}
)} {showIsland && !allDone && (

{t.welcome}

{completedCount}{t.completed} — {pendingSteps.length > 0 ? `${pendingSteps.length} paso${pendingSteps.length>1?'s':''} restante${pendingSteps.length>1?'s':''}` : t.allDone}

{/* Island pill (full inline version for in-progress users) */}
{steps.map((step, i) => { const broken = (i === 1 && step1Broken) || (i === 2 && step2Broken); const done = stepsCompleted.includes(i) && !broken; return (
setTooltip(i)} onMouseLeave={() => setTooltip(-1)} onClick={() => { if (broken) setActiveFlow(i === 1 ? 'assets' : 'brand'); }}> {/* Number label above circle */} {i + 1}
i === 3 ? startStrategy() : setActiveFlow(step.flow)}> {done ? : —}
{/* Tooltip */} {tooltip === i && (
{tooltips[i]} {done && ✓}
)} {/* Connector line */} {i < 3 &&
}
); })}
)} {/* Big step cards — only pending steps */} {pendingSteps.length > 0 && (
{pendingSteps.map((step) => { const i = step.id; const locked = i > 0 && !stepsCompleted.includes(i - 1); const isStrategy = i === 3; const hovered = hoveredCard === i; return (
!locked && setHoveredCard(i)} onMouseLeave={() => setHoveredCard(-1)} style={{ position: 'relative', borderRadius: '20px', overflow: 'hidden', background: hovered && !locked ? 'rgba(22,22,30,0.95)' : NX.bg3, border: `1.5px solid ${hovered && !locked ? (isStrategy ? NX.accent2 : NX.accent) : NX.border}`, transition: 'all 0.25s', cursor: locked ? 'default' : 'pointer', opacity: locked ? 0.4 : 1, boxShadow: hovered && !locked ? `0 0 40px rgba(139,92,246,0.15), 0 8px 32px rgba(0,0,0,0.4)` : '0 2px 12px rgba(0,0,0,0.2)', display: 'flex', flexDirection: 'column', minHeight: setupDone && isStrategy ? '340px' : '280px', gridColumn: setupDone && isStrategy ? '1 / -1' : 'auto', }} onClick={() => !locked && (i === 3 ? startStrategy() : setActiveFlow(step.flow))}> {/* Gradient glow bg on hover */} {hovered && !locked && (
)}
{/* Top row: PASO number + time */}
PASO 0{i + 1} ⏱ {step.time}
{/* Icon */}
{STEP_ICONS_LG[i]}
{/* Title */}

{step.title}

{step.desc}

{/* CTA */}
{ e.stopPropagation(); if (!locked) { i === 3 ? startStrategy() : setActiveFlow(step.flow); } }}> {locked ? t.locked : t.connect}
); })}
)} {/* All done state — Apple-minimal home. Layout differs on mobile vs desktop: - Desktop: greeting + Modo avanzado on top in a 2-col header, mascot + chat hero, then campaigns. - Mobile: chat card first (mascot inlined inside), Modo avanzado below it, then campaigns. The greeting still sits on top but compact. */} {allDone && (
{/* Greeting — solo en mobile. En desktop el saludo se muestra arriba de la mascota (dentro del AssistantFlow embedded, columna derecha) para que toda la composición quede alineada y prolija en una sola fila. */} {isMobile && (

{lang === 'en' ? 'Hi, welcome to ' : 'Hola, bienvenido a '} NexWall Corp AI 👋

{lang === 'en' ? 'Your marketing copilot powered by AI' : 'Tu copiloto de marketing con IA'}

)} {/* Modo avanzado desactivado — flujo unificado vía asistente. */} {/* Assistant hero — on mobile we tell the assistant to inline the mascot inside the chat card instead of rendering it as a separate column. */} {}} /> {/* (Active campaigns panel removed — already accessible via the left island "Mis estrategias" icon. No need to duplicate on the home dashboard.) */}
)}
); }; // ══════════════════════════════════════════ // QUALITY PICKER MODAL // ══════════════════════════════════════════ const QualityPicker = ({ onSelect, onClose }) => { const [hovered, setHovered] = React.useState(null); const opts = [ { key: 'premium', model: 'gemini-3.1-flash-image-preview', label: 'Premium', badge: 'NexWall AI · Premium', desc: 'Alta calidad fotorealista con tipografía nítida. Ideal para la mayoría de campañas.', icon: '\u26a1', color: NX.accent }, { key: 'ultra', model: 'gpt-image-2', label: 'Premium Ultra MAX', badge: 'NexWall AI · Ultra MAX', desc: 'Máxima calidad y detalle. Para campañas de alto impacto.', icon: '\u2605', color: NX.accent2 }, ]; return (
e.stopPropagation()}>
{/* Animated icon */}
{/* glow rings */} {/* nebula blob */}
{/* the NexWall mascot — eyes track the mouse */}

Calidad de Imágenes

Elige el nivel de IA para generar tus creativos

{opts.map(opt => (
setHovered(opt.key)} onMouseLeave={() => setHovered(null)} onClick={() => onSelect(opt.model)} style={{ background: hovered === opt.key ? NX.bg4 : NX.bg3, border: `1.5px solid ${hovered === opt.key ? opt.color : NX.border}`, borderRadius: '14px', padding: '20px', cursor: 'pointer', transition: 'all 0.2s', boxShadow: hovered === opt.key ? `0 0 24px ${opt.color}44` : 'none' }}>
{opt.icon}
{opt.badge}
{opt.label}
{opt.desc}
))}

Puedes cambiar la calidad en cada nueva campaña

); }; // ══════════════════════════════════════════ // STRATEGY MODE PICKER — Asistente IA (default) vs Modo avanzado // ══════════════════════════════════════════ // Replaces QualityPicker as the entry point when the user clicks "+ Nueva estrategia". // Default path: AI Assistant (conversational, AI auto-decides). Escape hatch: "Modo avanzado" // link → opens the existing QualityPicker → StrategyFlow path that power users already know. const StrategyModePicker = ({ onPickAssistant, onPickAdvanced, onClose, lang='es' }) => { return (
e.stopPropagation()} style={{ background: NX.bg2, border:`1px solid ${NX.border2}`, borderRadius:'24px', padding:'40px 32px', width:'100%', maxWidth:'520px', textAlign:'center', animation:'modalIn 0.22s ease', boxShadow:'0 30px 80px rgba(10,6,16,0.8)' }}> {/* Living nebula avatar */}

{lang === 'en' ? 'How do you want to launch?' : '¿Cómo quieres lanzar?'}

{lang === 'en' ? 'Let the AI guide you step by step, or jump into the full advanced editor.' : 'Deja que la IA te guíe paso a paso, o entra al editor avanzado.'}

); }; // ══════════════════════════════════════════ // ASSISTANT FLOW — conversational AI campaign builder // ══════════════════════════════════════════ // A chat-style guided flow that collects the minimum info from the user, auto-decides // objective / aspect ratio / language, and hands the prefilled answers off to StrategyFlow // which runs the existing image+copy generation, review, and Meta publish pipeline. // // Why hand off to StrategyFlow instead of duplicating its review UI? // The image-grid review, copy editor, Facebook mockup, draft saving, Meta publish (with // SSE progress), pause/resume, etc. are ~3000 lines battle-tested code. Duplicating that // for the assistant would double maintenance and create UI drift. So the assistant is a // thin pre-collection layer + summary card; StrategyFlow takes over from image generation. // Naive timezone → country mapping for "default to user's location" UX. We don't ask for // geolocation permission (annoying); timezone is enough for ~95% of LATAM users. const detectCountryFromTimezone = () => { try { const tz = (Intl.DateTimeFormat().resolvedOptions().timeZone || '').toString(); const map = { 'America/Santiago':'Chile','Pacific/Easter':'Chile', 'America/Argentina/Buenos_Aires':'Argentina','America/Buenos_Aires':'Argentina','America/Argentina/Cordoba':'Argentina','America/Argentina/Mendoza':'Argentina', 'America/Mexico_City':'México','America/Cancun':'México','America/Tijuana':'México','America/Monterrey':'México','America/Hermosillo':'México', 'America/Lima':'Perú', 'America/Bogota':'Colombia', 'America/Caracas':'Venezuela', 'America/La_Paz':'Bolivia', 'America/Asuncion':'Paraguay', 'America/Montevideo':'Uruguay', 'America/Guayaquil':'Ecuador', 'America/Panama':'Panamá', 'America/Costa_Rica':'Costa Rica', 'America/Guatemala':'Guatemala', 'America/El_Salvador':'El Salvador', 'America/Tegucigalpa':'Honduras', 'America/Managua':'Nicaragua', 'America/Santo_Domingo':'República Dominicana', 'America/Havana':'Cuba', 'America/Puerto_Rico':'Puerto Rico', 'America/Sao_Paulo':'Brasil','America/Bahia':'Brasil','America/Recife':'Brasil','America/Fortaleza':'Brasil', 'Europe/Madrid':'España','Atlantic/Canary':'España', 'Europe/Lisbon':'Portugal', 'Europe/London':'Reino Unido', 'Europe/Paris':'Francia', 'Europe/Berlin':'Alemania', 'Europe/Rome':'Italia', 'America/New_York':'Estados Unidos','America/Chicago':'Estados Unidos','America/Denver':'Estados Unidos','America/Los_Angeles':'Estados Unidos','America/Phoenix':'Estados Unidos','America/Anchorage':'Estados Unidos','America/Miami':'Estados Unidos', 'America/Toronto':'Canadá','America/Vancouver':'Canadá', }; return map[tz] || null; } catch { return null; } }; // Heuristic objective inference. Backend is the source of truth, but a quick local guess // gives instant feedback in the summary screen and avoids a wasted Claude call. const inferObjectiveFromDesc = (desc, hasUrl) => { const s = (desc || '').toLowerCase(); if (/\b(lead|cotiza|cotización|reserva|registro|registrar|formulario|inscríb|consulta|asesor|appointment|agend)\b/.test(s)) return 'leads'; if (/\b(visit|tráfico|trafico|conoce|descubre|información|info|aprende|landing|website|web)\b/.test(s) && hasUrl) return 'trafico'; if (/\b(mensaje|whatsapp|chatea|chatea|hablanos|escribe|conversa|dm)\b/.test(s)) return 'mensajes'; if (/\b(compra|comprar|venta|vender|pedido|carrito|tienda|ecommerce|envío|envio|stock|talla|precio|\$|usd|clp|mxn|ars)\b/.test(s)) return 'ventas'; if (/\b(marca|conocimiento|brand|reconocimiento|awareness|recordación|recordacion)\b/.test(s)) return 'reconocimiento'; return 'ventas'; }; // Currency-aware budget chips. Meta does NOT allow changing the ad account currency, so the // assistant must always show numbers in whatever currency the user's account is configured // in. Showing $3 USD as a "starter" chip to a CLP account would be invalid (below minimum) // and confusing. Each currency has its own minimum daily spend per Meta rules + a sensible // chip ladder around it. const CURRENCY_MIN_DAILY = { USD: 5, EUR: 5, GBP: 5, CAD: 5, AUD: 5, CLP: 2000, MXN: 100, ARS: 2000, COP: 20000, PEN: 20, BRL: 25, UYU: 200, BOB: 35, PYG: 30000, CRC: 3000, GTQ: 40, HNL: 120, NIO: 180, DOP: 300, VES: 200, CUP: 1200, JPY: 500, KRW: 5000, VND: 100000, }; const BUDGET_CHIPS = { USD: [5, 10, 20, 50, 100], EUR: [5, 10, 20, 50, 100], GBP: [5, 10, 20, 50, 100], CAD: [5, 10, 20, 50, 100], AUD: [5, 10, 20, 50, 100], CLP: [2000, 5000, 10000, 20000, 50000], MXN: [100, 200, 500, 1000, 2000], ARS: [2000, 5000, 10000, 20000, 50000], COP: [20000, 50000, 100000, 200000, 500000], PEN: [20, 50, 100, 200, 500], BRL: [25, 50, 100, 200, 500], UYU: [200, 500, 1000, 2000, 5000], BOB: [35, 70, 150, 300, 700], PYG: [30000, 70000, 150000, 300000, 700000], CRC: [3000, 7000, 15000, 30000, 70000], GTQ: [40, 100, 200, 500, 1000], HNL: [120, 300, 600, 1200, 3000], NIO: [180, 400, 800, 1600, 4000], DOP: [300, 700, 1500, 3000, 7000], VES: [200, 500, 1000, 2000, 5000], CUP: [1200, 2500, 5000, 10000, 25000], JPY: [500, 1000, 2500, 5000, 10000], KRW: [5000, 10000, 25000, 50000, 100000], VND: [100000, 250000, 500000, 1000000, 2500000], }; const formatBudget = (amount, currency) => { // Locale-aware grouping. CLP/JPY/etc don't use decimals; pass minimumFractionDigits=0. try { return new Intl.NumberFormat(undefined, { style:'currency', currency, maximumFractionDigits: 0 }).format(amount); } catch { return `${currency} ${amount}`; } }; const AssistantFlow = ({ onClose, onComplete, lang='es', defaultImageModel='gemini-3.1-flash-image-preview', embedded=false, onAdvancedMode=null, mobileLayout=false, draftCampaign=null }) => { // Conversation state machine. Each step renders ONE question + ONE input widget. The user's // answer advances to the next step. A summary screen at the end auto-decides the objective // and lets the user kick off generation (which transitions to handoff = render StrategyFlow). const [step, setStep] = React.useState(0); const [productDesc, setProductDesc] = React.useState(''); const [productFile, setProductFile] = React.useState(null); const [productPreviewUrl, setProductPreviewUrl] = React.useState(null); // Imagen de referencia opcional secundaria (máx 2 total). Se pasa al StrategyFlow // vía assistantPrefill — el StrategyFlow la hidrata como extraProductFiles[0]. const [extraProductFile, setExtraProductFile] = React.useState(null); const [extraProductPreviewUrl, setExtraProductPreviewUrl] = React.useState(null); const [productUrl, setProductUrl] = React.useState(''); // Destination of the click. Three modes: // 'web' → URL → landing page (default) // 'messaging' → WhatsApp / IG DM / Messenger (click-to-chat) // 'existing_ig' → boost an existing Instagram post (no new creative generated) const [destMode, setDestMode] = React.useState('web'); const [destChannels, setDestChannels] = React.useState({ whatsapp: false, instagram: false, messenger: false }); // IG post picker state (only used when destMode === 'existing_ig'). The grid + selection // mirrors the StrategyFlow advanced editor — same /api/meta/ig-posts endpoint. const [igPosts, setIgPosts] = React.useState([]); const [igPostsLoading, setIgPostsLoading] = React.useState(false); const [igPostsError, setIgPostsError] = React.useState(null); const [selectedIgPost, setSelectedIgPost] = React.useState(null); const fetchIgPosts = React.useCallback(async () => { if (igPostsLoading || igPosts.length > 0) return; setIgPostsLoading(true); setIgPostsError(null); try { const bizId = localStorage.getItem('nw_active_biz_id') || '1'; const res = await authFetch(`/api/meta/ig-posts?biz_id=${encodeURIComponent(bizId)}&limit=18`); if (!res.ok) { const err = await res.json().catch(() => ({})); // Permission #10 for IG media means the instagram_basic scope is not declared in // the Meta App Dashboard yet. The end-user can't fix this — only the NexWall admin can. const isPermissionError = err.code === 10 || /\(#10\)/.test(err.error || ''); if (isPermissionError) { throw new Error(err.error || t( 'La función de promocionar publicaciones de Instagram aún no está habilitada. Estamos esperando la aprobación del permiso instagram_basic en Meta.', 'The "boost an Instagram post" feature is not yet enabled. We are waiting for instagram_basic to be approved on Meta.' )); } throw new Error(err.error || 'No se pudieron cargar las publicaciones'); } const data = await res.json(); setIgPosts(data.posts || []); } catch (e) { setIgPostsError(e.message || 'Error al cargar publicaciones'); } setIgPostsLoading(false); }, [igPostsLoading, igPosts.length]); const [country, setCountry] = React.useState(() => detectCountryFromTimezone() || ''); const [dailyBudget, setDailyBudget] = React.useState(''); const [imageModel, setImageModel] = React.useState(defaultImageModel); const [imageCount, setImageCount] = React.useState(5); // Saldo de créditos del usuario — se usa en el step de calidad de imagen para mostrar // cuántas imágenes puede sacar con cada tier (Premium = 25 cr, Ultra MAX = 100 cr). // Reutiliza cache compartido (window.getCreditsBalance) para evitar duplicar la llamada // con CreditsPill y TopBar — el dashboard pasa de 3 calls paralelas a 1 sola. const [creditsState, setCreditsState] = React.useState(null); React.useEffect(() => { let cancelled = false; (async () => { if (!window.getCreditsBalance) return; const j = await window.getCreditsBalance(typeof API !== 'undefined' ? API : ''); if (!cancelled && j) setCreditsState(j); })(); return () => { cancelled = true; }; }, []); // Generation mode: 'ai' (AI generates with Gemini/gpt-image-2) | 'uploaded' (user already // has their own creatives — saves credits/tokens since no AI call is made for images). const [genMode, setGenMode] = React.useState('ai'); const [ownImages, setOwnImages] = React.useState([]); // [{ file, previewUrl }] const [handoff, setHandoff] = React.useState(false); // ─── Voice note input (step 1 textarea) ───────────────────────────────────── // El user puede dictar la descripción del producto con el micrófono o subir un audio // ya grabado (mp3/m4a/webm). Whisper de OpenAI transcribe → llena el textarea. // Costo: ~$0.006/min — no se cobran créditos al usuario, es un input helper. const [isRecording, setIsRecording] = React.useState(false); const [recordingSecs, setRecordingSecs] = React.useState(0); const [isTranscribing, setIsTranscribing] = React.useState(false); const [audioError, setAudioError] = React.useState(null); const mediaRecorderRef = React.useRef(null); const audioChunksRef = React.useRef([]); const recordingTimerRef = React.useRef(null); const sendAudioForTranscription = React.useCallback(async (blob, filename) => { setIsTranscribing(true); setAudioError(null); try { const fd = new FormData(); fd.append('audio', blob, filename || 'note.webm'); fd.append('language', language || 'es'); const token = localStorage.getItem('nw_token'); const res = await fetch(`${API}/api/transcribe-audio`, { method: 'POST', body: fd, headers: { Authorization: `Bearer ${token}` }, }); const data = await res.json(); if (!res.ok || !data.text) throw new Error(data.error || 'Transcripción falló'); // Append (con espacio si ya hay texto) para que el user pueda dictar varias notas. setProductDesc(prev => prev ? `${prev.trim()} ${data.text}` : data.text); } catch (e) { setAudioError(e.message || 'Error al transcribir'); } setIsTranscribing(false); }, [language]); const startRecording = React.useCallback(async () => { setAudioError(null); if (!navigator.mediaDevices?.getUserMedia) { setAudioError(t('Tu navegador no soporta grabación de audio', 'Your browser does not support audio recording')); return; } try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const mr = new MediaRecorder(stream, { mimeType: MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm' : '' }); audioChunksRef.current = []; mr.ondataavailable = (ev) => { if (ev.data && ev.data.size > 0) audioChunksRef.current.push(ev.data); }; mr.onstop = () => { const blob = new Blob(audioChunksRef.current, { type: mr.mimeType || 'audio/webm' }); // Detener todas las pistas para que el navegador no muestre el indicador de grabación. stream.getTracks().forEach(t => t.stop()); if (blob.size > 1024) sendAudioForTranscription(blob, `note.webm`); else setAudioError(t('La grabación fue muy corta', 'Recording was too short')); }; mr.start(); mediaRecorderRef.current = mr; setIsRecording(true); setRecordingSecs(0); recordingTimerRef.current = setInterval(() => setRecordingSecs(s => s + 1), 1000); } catch (e) { setAudioError(t('No se pudo acceder al micrófono', 'Could not access the microphone') + (e?.message ? `: ${e.message}` : '')); } }, [sendAudioForTranscription]); const stopRecording = React.useCallback(() => { const mr = mediaRecorderRef.current; if (mr && mr.state === 'recording') mr.stop(); if (recordingTimerRef.current) { clearInterval(recordingTimerRef.current); recordingTimerRef.current = null; } setIsRecording(false); }, []); React.useEffect(() => () => { // Cleanup al desmontar — evita que un timer o stream queden vivos. if (recordingTimerRef.current) clearInterval(recordingTimerRef.current); const mr = mediaRecorderRef.current; if (mr && mr.state === 'recording') mr.stop(); }, []); // Session resume detection — escanea localStorage por creativos ya generados (imágenes // o copies) del bizId activo para que cuando el usuario presiona Atrás aquí pueda elegir: // 1) Continuar con la configuración actual (re-hidrata el StrategyFlow desde el cache) // 2) Comenzar nueva publicación (limpia el cache y empieza limpio) const [cachedSession, setCachedSession] = React.useState(null); const scanCachedSession = React.useCallback(() => { try { const bizId = localStorage.getItem('nw_active_biz_id') || '1'; const imgPrefix = `nw_images_cache_v1_${bizId}_`; const imgKeys = Object.keys(localStorage).filter(k => k.startsWith(imgPrefix)); let best = null; for (const key of imgKeys) { try { const data = JSON.parse(localStorage.getItem(key) || 'null'); if (!data || !Array.isArray(data.generatedImages)) continue; const ai = data.generatedImages.filter(i => !i.isOriginal && i.previewUrl); if (ai.length === 0) continue; if (!best || (data.ts || 0) > (best.ts || 0)) best = { key, ...data, imgCount: ai.length }; } catch {} } if (!best) { setCachedSession(null); return; } // Recover copy count from the matching nw_copies_cache key (same hash tail). const tail = best.key.replace(imgPrefix, ''); const copiesKey = `nw_copies_cache_v3_${bizId}_${tail}`; let copyCount = 0; try { const copyData = JSON.parse(localStorage.getItem(copiesKey) || 'null'); if (copyData && Array.isArray(copyData.copies)) copyCount = copyData.copies.length; } catch {} setCachedSession({ ...best, copyCount }); } catch { setCachedSession(null); } }, []); React.useEffect(() => { scanCachedSession(); }, [scanCachedSession]); // Re-escanear cuando StrategyFlow notifica que el cache fue limpiado (publish con éxito o // borrado manual desde otra pantalla) — así el banner "Tienes creativos sin publicar" // desaparece sin necesidad de recargar la página. React.useEffect(() => { const handler = () => scanCachedSession(); window.addEventListener('nx-creatives-cache-cleared', handler); return () => window.removeEventListener('nx-creatives-cache-cleared', handler); }, [scanCachedSession]); const resumeSession = () => { if (!cachedSession) return; if (cachedSession.productDesc) setProductDesc(cachedSession.productDesc); setHandoff(true); }; const startFreshSession = () => { if (!window.confirm(t('¿Borrar la configuración actual y empezar una nueva publicación?', 'Discard current setup and start a new publication?'))) return; try { const bizId = localStorage.getItem('nw_active_biz_id') || '1'; const imgPrefix = `nw_images_cache_v1_${bizId}_`; const copyPrefix = `nw_copies_cache_v3_${bizId}_`; Object.keys(localStorage).filter(k => k.startsWith(imgPrefix) || k.startsWith(copyPrefix)).forEach(k => localStorage.removeItem(k)); } catch {} setProductDesc(''); setProductFile(null); setProductPreviewUrl(null); setProductUrl(''); setCountry(detectCountryFromTimezone() || ''); setDailyBudget(''); setImageCount(5); setGenMode('ai'); setOwnImages([]); setHandoff(false); setCachedSession(null); }; const fileRef = React.useRef(null); const ownImagesInputRef = React.useRef(null); // URL → description auto-fill. Reuses /api/scrape-product (same endpoint the advanced // editor uses). Only enabled when productUrl looks like a real URL. const [scraping, setScraping] = React.useState(false); const [scrapeError, setScrapeError] = React.useState(null); const isValidUrl = (() => { const u = productUrl.trim(); if (!u) return false; try { const p = new URL(u.startsWith('http') ? u : `https://${u}`); return !!p.hostname && p.hostname.includes('.'); } catch { return false; } })(); const fillDescFromUrl = async () => { if (!isValidUrl || scraping) return; setScraping(true); setScrapeError(null); try { const url = productUrl.trim(); const finalUrl = url.startsWith('http') ? url : `https://${url}`; const res = await authFetch('/api/scrape-product', { method: 'POST', body: JSON.stringify({ url: finalUrl, language }), }); const data = await res.json(); if (res.ok && data.description) { setProductDesc(data.description); } else { setScrapeError(data.error || (lang === 'en' ? 'Could not read that URL' : 'No se pudo leer esa URL')); } } catch { setScrapeError(lang === 'en' ? 'Connection error — check the URL' : 'Error de conexión — verifica la URL'); } finally { setScraping(false); } }; // Currency comes from the user's Meta ad account — Meta does NOT allow changing it, so // the budget chips MUST be in that currency from the start. Try localStorage first // (instant paint), then refresh from the backend on mount. const [adCurrency, setAdCurrency] = React.useState(() => { try { const bizId = localStorage.getItem('nw_active_biz_id') || '1'; const cached = JSON.parse(localStorage.getItem(`nw_assets_${bizId}`) || 'null'); return cached?.ad_account_currency || 'USD'; } catch { return 'USD'; } }); // The WhatsApp number connected to the user's FB Page (legacy `page.whatsapp_number`). // Surfaced under the WhatsApp destination chip so the user sees which number their ad // will route to BEFORE picking it. Falls back to localStorage cache for instant paint. const [pageWhatsAppNumber, setPageWhatsAppNumber] = React.useState(() => { try { const bizId = localStorage.getItem('nw_active_biz_id') || '1'; const cached = JSON.parse(localStorage.getItem(`nw_assets_${bizId}`) || 'null'); return cached?.page_whatsapp_number || null; } catch { return null; } }); React.useEffect(() => { const bizId = localStorage.getItem('nw_active_biz_id') || '1'; authFetch(`/api/meta/assets?biz_id=${encodeURIComponent(bizId)}`) .then(r => r.ok ? r.json() : null) .then(data => { if (data?.ad_account_currency) { setAdCurrency(data.ad_account_currency); try { localStorage.setItem(`nw_assets_${bizId}`, JSON.stringify(data)); } catch {} } if (data?.page_whatsapp_number) setPageWhatsAppNumber(data.page_whatsapp_number); }) .catch(() => {}); }, []); const minDailyForCurrency = CURRENCY_MIN_DAILY[adCurrency] || 5; const budgetChips = BUDGET_CHIPS[adCurrency] || BUDGET_CHIPS.USD; // Idioma del CONTENIDO de la campaña (textos + imágenes generadas) — INDEPENDIENTE del // idioma de la UI del dashboard (`nw_lang`). El usuario puede tener la app en español // pero crear campañas en inglés sin que cambie su interfaz. // Resolución: // 1) `nw_content_lang` (preferencia guardada por el usuario al elegir antes). // 2) `nw_lang` (idioma actual de la UI — default razonable la primera vez). // 3) navigator.language (autodetect del browser). const [language, setLanguage] = React.useState(() => { try { const stored = localStorage.getItem('nw_content_lang'); if (stored === 'es' || stored === 'en') return stored; } catch {} try { const uiLang = localStorage.getItem('nw_lang'); if (uiLang === 'es' || uiLang === 'en') return uiLang; } catch {} try { const navLang = (navigator.language || navigator.userLanguage || '').toLowerCase(); if (navLang.startsWith('en')) return 'en'; if (navLang.startsWith('es')) return 'es'; if (['pt','it','gl','ca'].some(p => navLang.startsWith(p))) return 'es'; } catch {} return lang === 'en' ? 'en' : 'es'; }); // Persistir SOLO en `nw_content_lang` — nunca tocar `nw_lang` (ese es el idioma de la UI). React.useEffect(() => { try { localStorage.setItem('nw_content_lang', language); } catch {} }, [language]); // `t()` traduce los TEXTOS DE LA UI del asistente (pasos, botones, labels). // Usa `lang` (idioma global de la app, viene del navegador / TopBar) — NO `language` // (que es el idioma del CONTENIDO de la campaña, controlado por el chip ES/EN). // Cambiar el chip solo afecta los textos+imágenes generados; la interfaz sigue en el // idioma con el que el usuario abrió el dashboard. const t = (es, en) => (lang === 'en' ? en : es); // Heurística de detección de idioma del CONTENIDO escrito por el usuario. // Devuelve 'es' o 'en' según predominen marcadores típicos. Conservadora: si no detecta // marcadores claros, retorna null (no traducir, dejar pasar tal cual). const detectLang = (text) => { if (!text || text.trim().length < 8) return null; const t = ` ${text.toLowerCase()} `; // Caracteres exclusivos del español → señal fuerte (ñ, á, é, í, ó, ú, ¿, ¡) if (/[ñáéíóú¿¡]/i.test(text)) return 'es'; const esWords = [' que ', ' el ', ' la ', ' los ', ' las ', ' de ', ' del ', ' con ', ' para ', ' por ', ' en ', ' un ', ' una ', ' es ', ' son ', ' está ', ' lo ', ' le ', ' se ', ' su ', ' sus ', ' y ', ' o ', ' pero ', ' más ', ' también ', ' tu ', ' tus ']; const enWords = [' the ', ' a ', ' an ', ' and ', ' or ', ' but ', ' with ', ' for ', ' to ', ' of ', ' in ', ' on ', ' is ', ' are ', ' was ', ' were ', ' this ', ' that ', ' you ', ' your ', ' our ', ' we ']; const count = (arr) => arr.reduce((acc, w) => acc + (t.split(w).length - 1), 0); const esCount = count(esWords); const enCount = count(enWords); if (esCount === 0 && enCount === 0) return null; return esCount >= enCount ? 'es' : 'en'; }; const [translatingDesc, setTranslatingDesc] = React.useState(false); // Objective inference per destination: // existing_ig → 'interaccion' (the only Meta objective that allows boosting an existing post) // messaging → 'mensajes' (forces OUTCOME_ENGAGEMENT + destination_type per channel) // web → infer from description / URL presence const inferredObjective = destMode === 'existing_ig' ? 'interaccion' : destMode === 'messaging' && Object.values(destChannels).some(Boolean) ? 'mensajes' : inferObjectiveFromDesc(productDesc, !!productUrl); const objectiveLabel = ({ 'ventas': t('Ventas', 'Sales'), 'leads': t('Leads', 'Leads'), 'trafico': t('Tráfico web', 'Website traffic'), 'mensajes': t('Mensajes', 'Messages'), 'reconocimiento': t('Reconocimiento', 'Brand awareness'), })[inferredObjective] || 'Ventas'; // Accepts a File (from input change OR drag-drop). Filters non-image files silently. // Si ya hay primary, el siguiente upload va al slot 2 (extra). Si ya hay 2 imágenes, // el nuevo upload reemplaza la extra (el user puede borrar para volver atrás). const acceptReferenceImage = (f) => { if (!f || !/^image\//.test(f.type)) return; const r = new FileReader(); if (!productFile) { setProductFile(f); r.onload = ev => setProductPreviewUrl(ev.target.result); } else { setExtraProductFile(f); r.onload = ev => setExtraProductPreviewUrl(ev.target.result); } r.readAsDataURL(f); }; const onUpload = (e) => acceptReferenceImage(e.target.files?.[0]); // Multi-file picker for "I have my own creatives" path. Each file gets a local preview URL // (uploaded to Cloudinary later by StrategyFlow's submitUserUploadedImages). const acceptOwnImages = (filesLike) => { const files = Array.from(filesLike || []).filter(f => /^image\//.test(f.type)); if (files.length === 0) return; const next = files.map(file => ({ file, previewUrl: URL.createObjectURL(file) })); setOwnImages(prev => [...prev, ...next]); }; const onOwnUpload = (e) => acceptOwnImages(e.target.files); // Drag/drop visual state — used by both upload zones to highlight while a file is hovering. const [dragOverZone, setDragOverZone] = React.useState(null); // 'reference' | 'own' | null const dragHandlers = (zone, accept) => ({ onDragOver: (e) => { e.preventDefault(); e.stopPropagation(); setDragOverZone(zone); }, onDragEnter: (e) => { e.preventDefault(); e.stopPropagation(); setDragOverZone(zone); }, onDragLeave: (e) => { e.preventDefault(); e.stopPropagation(); if (e.currentTarget.contains(e.relatedTarget)) return; setDragOverZone(null); }, onDrop: (e) => { e.preventDefault(); e.stopPropagation(); setDragOverZone(null); accept(e.dataTransfer?.files); }, }); const removeOwnImage = (idx) => { setOwnImages(prev => { const removed = prev[idx]; if (removed?.previewUrl?.startsWith('blob:')) URL.revokeObjectURL(removed.previewUrl); return prev.filter((_, i) => i !== idx); }); }; // After hand-off, render StrategyFlow with the prefilled data so the existing review/launch // UI takes over (image grid → copies → Facebook mockup → publish). When the user said they // already have creatives we pass them as `userImages` so StrategyFlow skips AI generation // and just uploads them to Cloudinary — zero token/credit cost on images. // In embedded mode, closing StrategyFlow comes back to the assistant config (not parent close). // `onRestart` lets StrategyFlow's "Borrar todo" reset the assistant to its starting screen // (step 0) when entered via the assistant flow — wipes EVERY field. Used only by the // destructive "discard all" action. const restartAssistant = React.useCallback(() => { setStep(0); setProductDesc(''); setProductFile(null); setProductPreviewUrl(null); setProductUrl(''); setCountry(detectCountryFromTimezone() || ''); setDailyBudget(''); setImageModel(defaultImageModel); setImageCount(5); setGenMode('ai'); setOwnImages([]); setHandoff(false); }, [defaultImageModel]); // `onBackToAssistant` is the non-destructive variant: returns to the conversational flow // KEEPING all the data the user already typed (description, country, budget, IG post, etc.) // so they can tweak one field without having to re-enter everything. Lands on step 0 so // they see the description first, but every other state stays intact. const goBackToAssistant = React.useCallback(() => { setHandoff(false); setStep(0); }, []); // Re-launch hydration: when AssistantFlow receives a draftCampaign (clicked "Reutilizar" // on Mis Estrategias), skip the question-by-question flow and go DIRECTLY into the handoff // (StrategyFlow). StrategyFlow has a complete draft hydration (line ~3294) that restores // images, copies, strategy, and lands on step 5 (preview/launch) — much more complete // than what we could reproduce by re-asking questions in the assistant. const [draftHydrated, setDraftHydrated] = React.useState(false); React.useEffect(() => { if (!draftCampaign || draftHydrated) return; setDraftHydrated(true); setHandoff(true); }, [draftCampaign, draftHydrated]); if (handoff) { // Re-launch path: pass draftCampaign so StrategyFlow restores everything (images, copies, // strategy, etc.) and lands on step 5. Normal forward path: pass assistantPrefill so // StrategyFlow runs image generation from the assistant's collected answers. return ( { if (embedded) setHandoff(false); else onClose && onClose(); }} onComplete={onComplete} draftCampaign={draftCampaign || null} assistantPrefill={draftCampaign ? null : { objective: inferredObjective, productDesc, productUrl, country, language, imageCount: genMode === 'uploaded' ? ownImages.length : imageCount, aspectRatio: '4:5', dailyBudget, productFile, productPreviewUrl, extraProductFile, extraProductPreviewUrl, destMode, destChannels, // Boost-an-existing-IG-post mode: hand over the selected post so the StrategyFlow // step 0 picker shows up pre-filled (no extra click). The advanced editor's // promotionMode='existing_ig' branch will then drive the publish payload. promotionMode: destMode === 'existing_ig' ? 'existing_ig' : 'new', selectedIgPost: destMode === 'existing_ig' ? selectedIgPost : null, userImages: genMode === 'uploaded' ? ownImages : null, onRestart: restartAssistant, onBackToAssistant: goBackToAssistant, }} /> ); } // ── Step config ── each step has: question, input renderer, and a "can advance" check. // Steps (gen mode picked early so we know whether to ask for reference photo): // 0 description + optional website URL // 1 generation mode (AI vs own images) // 2 country // 3 budget // 4 product photo (optional, AI ONLY — auto-skipped when genMode='uploaded') // 5 quality (AI only) OR own images upload (uploaded only) // 6 image count + summary (AI only) OR summary alone (uploaded only) const totalSteps = 7; const StepIndicator = (
{Array.from({ length: totalSteps }).map((_, i) => (
))}
); // Apple-style minimal: just a soft radial glow behind the mascot for depth — no orbits, // no dashed rings, no roaming particles. The mascot itself is the focus. const NebulaAvatar = (
); // On mobile (mobileLayout), the mascot sits inline next to the question heading + sub // (saves vertical space, gives more room for the textarea). On desktop the heading is // centered as before; the mascot lives in its own column to the left. const Question = ({ q, sub }) => (
{mobileLayout && (
)}

{q}

{sub &&

{sub}

}
); // Render the active question + answer widget let body = null; let canAdvance = false; let primaryLabel = t('Continuar', 'Continue'); // Smart advance that skips steps that don't apply per the current path: // • Boosting an existing IG post → skip gen mode (1), foto referencia (4) y quality/upload (5) // because the post ya tiene su imagen y copy. // • genMode='uploaded' → skip foto referencia (4) — no aplica cuando el usuario sube // sus propias creatividades. const SKIP_BOOST_STEPS = new Set([1, 4, 5]); const shouldSkipStep = (s) => { if (destMode === 'existing_ig' && SKIP_BOOST_STEPS.has(s)) return true; if (genMode === 'uploaded' && s === 4) return true; return false; }; const advanceStep = () => { setStep(s => { let next = s + 1; while (next < totalSteps && shouldSkipStep(next)) next += 1; return next; }); }; const retreatStep = () => { setStep(s => { let prev = s - 1; while (prev > 0 && shouldSkipStep(prev)) prev -= 1; return Math.max(0, prev); }); }; let onPrimary = advanceStep; let secondaryLabel = null; let onSecondary = null; if (step === 0) { const hasMessagingPick = Object.values(destChannels).some(Boolean); // Per-mode validation: // web → URL is optional (we accept campaigns without a website) // messaging → at least 1 channel must be picked // existing_ig → an IG post must be selected const destOk = destMode === 'web' ? true : destMode === 'messaging' ? hasMessagingPick : destMode === 'existing_ig' ? !!selectedIgPost : false; // For boost-post mode the user does not need to write a description (we use the post's // own caption downstream), so we relax the description requirement. const descOk = destMode === 'existing_ig' ? true : productDesc.trim().length >= 6; canAdvance = descOk && destOk && !translatingDesc; // Si la descripción está en otro idioma que el seleccionado, traducirla antes de avanzar. // Solo aplica para modo web/messaging (boost no usa descripción del usuario). onPrimary = async () => { if (translatingDesc) return; const desc = productDesc.trim(); if (destMode !== 'existing_ig' && desc.length >= 8) { const detected = detectLang(desc); if (detected && detected !== language) { setTranslatingDesc(true); try { const res = await authFetch('/api/translate-text', { method: 'POST', body: JSON.stringify({ text: desc, target_lang: language }), }); if (res.ok) { const data = await res.json(); if (data?.text) setProductDesc(data.text); } } catch {} setTranslatingDesc(false); } } advanceStep(); }; if (translatingDesc) { primaryLabel = t('Traduciendo…', 'Translating…'); } body = (<> {/* Resume banner — aparece cuando hay creativos cacheados de una sesión previa. El usuario elige: continuar con esa configuración, o empezar limpio. */} {cachedSession && cachedSession.productDesc && !productDesc && (
{t('Tienes creativos sin publicar', 'You have unpublished creatives')}
{t( `${cachedSession.imgCount} imágen${cachedSession.imgCount === 1 ? '' : 'es'}${cachedSession.copyCount ? ` y ${cachedSession.copyCount} text${cachedSession.copyCount === 1 ? 'o' : 'os'}` : ''} guardados para "${(cachedSession.productDesc || '').slice(0, 70)}${(cachedSession.productDesc || '').length > 70 ? '…' : ''}".`, `${cachedSession.imgCount} image${cachedSession.imgCount === 1 ? '' : 's'}${cachedSession.copyCount ? ` and ${cachedSession.copyCount} text${cachedSession.copyCount === 1 ? '' : 's'}` : ''} saved for "${(cachedSession.productDesc || '').slice(0, 70)}${(cachedSession.productDesc || '').length > 70 ? '…' : ''}".` )}
)} {/* Wrapper relativo: el toggle de idioma vive en el top-right del textarea y el botón del micrófono en el bottom-center. Composición minimalista — toda la interacción orbita la misma caja. El padding top/bottom del textarea reserva el espacio para que el texto del usuario nunca quede oculto detrás de los controles. */}