// ───────────────────────────────────────────────────────────── // GATITAS — Flujo de registro (versión Web navegable) // React + Babel · funciona en cualquier navegador (PC o móvil) // ───────────────────────────────────────────────────────────── const { useState, useEffect } = React; const TOTAL_STEPS = 3; // cuenta (crear/iniciar sesión), verificar email, perfil // Versión vigente del paquete de políticas publicado en /politicas.html // (Términos, Privacidad, Contenido, +18 y Seguridad se versionan juntos, // como un único paquete — ver esa página). El backend graba esta versión // como Consent junto con la cuenta al registrarse. const POLICIES_VERSION = '1.0'; // ───────────────────────────────────────────────────────────── // Logo + wordmark // ───────────────────────────────────────────────────────────── // Isotipo "Gatitas": mismo SVG (wordmark con tipografía custom + gatito // arriba de la "i") que usa el resto del sitio (ver gatitasLogo en // shared.js) — se reescribe acá como JSX porque esta pantalla es la // única que no corre sobre shared.js sino sobre React. El tamaño se // controla por CSS (.logo-mark en styles.css), igual que en el resto. function Logo() { return ( ); } // ───────────────────────────────────────────────────────────── // Dark mode toggle // ───────────────────────────────────────────────────────────── function useDarkMode() { const [dark, setDark] = useState(() => { try { return localStorage.getItem('gatitas-theme') === 'dark'; } catch (e) { return false; } }); useEffect(() => { document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light'); try { localStorage.setItem('gatitas-theme', dark ? 'dark' : 'light'); } catch (e) {} }, [dark]); return [dark, () => setDark(d => !d)]; } function ThemeToggle({ dark, onToggle }) { return ( ); } function Wordmark() { return Gatitas; } // ───────────────────────────────────────────────────────────── // Cabecera // ───────────────────────────────────────────────────────────── // loggedIn: esta pantalla ya sabe que el usuario está autenticado (venimos // de un login/registro exitoso) — antes el botón decía "Iniciar sesión" acá // también, dando a entender que la sesión no había prendido aunque sí lo // había hecho (el resto de la pantalla ya usa la sesión real, ver // AlreadyHasProfileScreen/DoneScreen). onLogin sigue siendo el mismo // handler que cada pantalla ya pasaba — acá solo se corrige la etiqueta. function Header({ onLogin, dark, onToggleTheme, loggedIn }) { return (
{onToggleTheme && }
); } // ───────────────────────────────────────────────────────────── // StepDots // ───────────────────────────────────────────────────────────── function StepDots({ index, total = TOTAL_STEPS }) { return (
{Array.from({ length: total }).map((_, i) => (
))}
); } // ───────────────────────────────────────────────────────────── // Brand panel (lado izquierdo) // ───────────────────────────────────────────────────────────── function BrandPanel({ bg, accent, quote, author, role, hideAuthor = false, centered = false, brandHref, smallQuote = false }) { const brand = (
); return (
{brandHref ? ( {brand} ) : brand}
“{quote}”
{!hideAuthor && author && (
{author.slice(0, 1)}
{author}
{role}
)}
); } // ───────────────────────────────────────────────────────────── // Modal de legales (Términos / Privacidad) // ───────────────────────────────────────────────────────────── function LegalModal({ open, kind, onClose }) { if (!open) return null; const isTerms = kind === 'terms'; const title = isTerms ? 'Términos y condiciones' : 'Política de privacidad'; return (
e.stopPropagation()} role="dialog" aria-modal="true" aria-label={title}>
GATITAS · v 1.0 · {new Date().toLocaleDateString('es-AR')}
{title}
{isTerms ? : }
); } function TermsContent() { return ( <>

Bienvenido a GATITAS. Al crear una cuenta o utilizar nuestra plataforma, aceptás los presentes Términos y Condiciones. Te pedimos que los leas con atención.

1 · Aceptación

El uso de GATITAS implica la aceptación plena y sin reservas de estos términos. Si no estás de acuerdo, te pedimos no utilizar la plataforma.

2 · Cuenta de usuario

Debés ser mayor de edad en tu jurisdicción y proporcionar información veraz al registrarte. Sos responsable de la confidencialidad de tu contraseña y de toda actividad que ocurra en tu cuenta.

3 · Contenido publicado

Como colaborador, sos el único responsable del contenido que publicás. Garantizás ser titular de los derechos o contar con las autorizaciones necesarias. GATITAS no reclama propiedad sobre tu contenido; vos conservás todos los derechos.

4 · Conducta prohibida

Está prohibido publicar contenido ilegal, ofensivo, que infrinja derechos de terceros, contenga malware o promueva actividades ilícitas. GATITAS se reserva el derecho de remover contenido y suspender cuentas que incumplan estas reglas.

5 · Pagos y comisiones

Las comisiones aplicables a cada plan se detallan en la sección "Publicá con nosotros". GATITAS puede modificarlas con un aviso previo de 30 días.

6 · Limitación de responsabilidad

La plataforma se ofrece "tal cual". GATITAS no garantiza disponibilidad ininterrumpida ni resultados comerciales. En ningún caso seremos responsables por daños indirectos, lucro cesante o pérdida de datos.

7 · Cancelación

Podés cancelar tu cuenta en cualquier momento desde tu perfil. GATITAS puede suspender o terminar cuentas que violen estos términos o la ley aplicable.

8 · Modificaciones

Podemos actualizar estos términos. Te notificaremos por correo de cambios sustanciales con al menos 15 días de anticipación.

9 · Ley aplicable

Estos términos se rigen por las leyes de la República Argentina. Cualquier controversia se someterá a los tribunales ordinarios con asiento en la Ciudad Autónoma de Buenos Aires.

10 · Contacto

Para consultas escribinos a legales@gatitas.com.

); } function PrivacyContent() { return ( <>

En GATITAS tu privacidad es prioridad. Esta política explica qué datos recolectamos, para qué los usamos y cómo los protegemos.

1 · Datos que recolectamos

Recolectamos: (a) datos de cuenta (correo, contraseña cifrada); (b) datos de tu perfil público (nombre, zona, bio, contacto) si publicás uno; y (c) datos de uso (navegación, búsquedas). Te pedimos documento de identidad y una selfie de verificación para corroborar que la persona sea 100% independiente. Estos documentos se usan exclusivamente para ese control interno y no implican reconocimiento facial automático ni verificación biométrica de ningún proveedor externo: cada perfil pasa por una revisión manual de un administrador antes de publicarse.

2 · Cómo usamos tus datos

Usamos tus datos exclusivamente para operar tu cuenta, publicar tu perfil si corresponde, prevenir fraudes y mejorar la plataforma. Nunca los vendemos ni cedemos a terceros con fines publicitarios.

3 · Almacenamiento y seguridad

Tu contraseña se guarda cifrada (nunca en texto plano). Aplicamos TLS en todo el sitio y controles de acceso sobre los datos que sí almacenamos.

4 · Compartición

No compartimos tus datos con terceros, salvo: (a) el procesador de pagos, solo para cobrar la publicación de tu perfil; (b) requerimiento legal de autoridad competente. Tu documento y selfie de verificación no se comparten con ningún proveedor externo — se usan únicamente para la revisión manual interna descripta en la sección 1.

5 · Cookies

Usamos cookies para mantener tu sesión iniciada, recordar tu tema (claro / oscuro) y tu moneda preferida. No utilizamos cookies de seguimiento publicitario.

6 · Tus derechos

Podés solicitar acceso, rectificación, portabilidad o eliminación de tus datos escribiendo a privacidad@gatitas.com. Responderemos en un plazo máximo de 30 días.

7 · Retención

Conservamos tus datos mientras tu cuenta esté activa y hasta 24 meses después del cierre, según obligaciones legales aplicables.

8 · Menores

GATITAS no está dirigida a menores de 18 años. Si detectamos cuentas de menores sin autorización parental, las cerraremos y eliminaremos sus datos.

9 · Actualizaciones

Podemos actualizar esta política con aviso previo. La versión vigente está siempre disponible desde tu perfil.

10 · Contacto

Para cualquier consulta sobre privacidad: privacidad@gatitas.com.

); } // ───────────────────────────────────────────────────────────── // FormPanel — contenedor del paso // ───────────────────────────────────────────────────────────── function FormPanel({ stepIndex, title, subtitle, children, footerLeft, footerRight, onBack }) { return (
{onBack ? ( ) : } Paso {stepIndex + 1} de {TOTAL_STEPS}

{title}

{subtitle &&
{subtitle}
}
{children}
{(footerLeft || footerRight) && (
{footerLeft}
{footerRight}
)}
); } // ───────────────────────────────────────────────────────────── // 0 · Bienvenida (landing) // ───────────────────────────────────────────────────────────── function Welcome({ onStart, onLogin, dark, onToggleTheme }) { return (

Encontrá perfiles
independientes verificados.

Explorá el directorio y contactá directamente por WhatsApp. GATITAS no interviene en el contacto ni en ningún acuerdo posterior.

Ir a explorar
); } // ───────────────────────────────────────────────────────────── // 1 · Cuenta — crear cuenta / iniciar sesión en una sola pantalla con tabs. // Antes, "Iniciar prueba gratuita" mandaba directo a este paso pero SOLO // existía el modo registro: el link "¿Ya tienes una? Inicia sesión" apuntaba // a la ruta "#login", que no estaba en ROUTES — no llevaba a ningún lado. // Cualquier persona con cuenta chocaba con "email en uso" sin salida. Este // componente reemplaza a SignupStep con las dos rutas reales. // ───────────────────────────────────────────────────────────── function AuthStep({ data, setData, onBack, onRegistered, onLoggedIn, initialMode = 'signup' }) { const [mode, setMode] = useState(initialMode); // 'signup' | 'login' const [showPw, setShowPw] = useState(false); const [legalModal, setLegalModal] = useState(null); // 'terms' | 'privacy' | null const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const [emailTaken, setEmailTaken] = useState(false); // dispara el aviso "ya registrado → iniciá sesión" const emailValid = /\S+@\S+\.\S+/.test(data.email); const signupValid = emailValid && data.password.length >= 10 && data.password === data.confirmPassword && data.accept; const loginValid = emailValid && data.password.length > 0; function switchMode(next) { setMode(next); setError(''); setEmailTaken(false); } async function submitSignup() { if (!signupValid || loading) return; setError(''); setEmailTaken(false); setLoading(true); try { await window.GATITAS_API.register({ email: data.email, password: data.password, termsVersion: POLICIES_VERSION, privacyVersion: POLICIES_VERSION, }); onRegistered(); } catch (e) { if (e.status === 409) { // "Este email ya está registrado" — sección 7: nunca se crea una // segunda cuenta, se ofrece pasar a iniciar sesión con el mismo email. setEmailTaken(true); setMode('login'); } else { setError(e.message || 'No pudimos crear tu cuenta. Probá de nuevo.'); } } finally { setLoading(false); } } async function submitLogin() { if (!loginValid || loading) return; setError(''); setLoading(true); try { await window.GATITAS_API.login({ email: data.email, password: data.password }); await onLoggedIn(); } catch (e) { setError(e.message || 'No pudimos iniciar sesión. Probá de nuevo.'); } finally { setLoading(false); } } const isSignup = mode === 'signup'; return (
¿Ya tenés una? { e.preventDefault(); switchMode('login'); }}>Iniciá sesión : <>¿Sos nuevo/a? { e.preventDefault(); switchMode('signup'); }}>Creá una cuenta } footerRight={ isSignup ? ( ) : ( ) } >
{emailTaken && (
Este email ya está registrado. Iniciá sesión para continuar.
)} {/* "Continuar con Google" — oculto a propósito: usaba un client_id de placeholder que nunca correspondió a una app real de Google Cloud, así que Google devolvía "invalid_client" apenas alguien lo tocaba. Reactivar esto requiere un OAuth Client ID real (Google Cloud Console) más un endpoint de backend que intercambie el code por tokens — no existe ninguno de los dos todavía. El resto del flujo (email + contraseña) no depende de esto en absoluto. */}
{ setData({ ...data, email: e.target.value }); setEmailTaken(false); }} />
setData({ ...data, password: e.target.value })} />
{isSignup && (
setData({ ...data, confirmPassword: e.target.value })} />
{data.confirmPassword && data.password !== data.confirmPassword && (
Las contraseñas no coinciden.
)}
)} {!isSignup && ( )} {error && (
{error}
)} {isSignup && ( )}
setLegalModal(null)} />
); } // ───────────────────────────────────────────────────────────── // 1b · Verificar email — pantalla intermedia entre crear cuenta y perfil. // No existía ningún concepto de verificación de email: register() dejaba // autenticado de inmediato. Se agrega la pantalla y el bloqueo de "Continuar" // hasta confirmar, pero el login NO depende de esto (ver auth.service.ts) — // así nadie queda sin poder entrar si el correo no llegó. // ───────────────────────────────────────────────────────────── function VerifyEmailStep({ data, tokenFromLink, onVerified, onBack }) { const [checking, setChecking] = useState(false); const [resent, setResent] = useState(false); const [notYet, setNotYet] = useState(false); const [error, setError] = useState(''); const [linkResult, setLinkResult] = useState(null); // 'ok' | 'error' | null — solo si vinimos de un link de email // Si la pantalla se abrió desde el link del correo (#verificar?token=…), // confirmamos ese token de una — no requiere sesión activa (puede ser un // navegador distinto al que hizo el registro), así que no dependemos de // "Ya verifiqué mi correo" (eso sí necesita sesión, vía /auth/me). useEffect(() => { if (!tokenFromLink) return; (async () => { try { await window.GATITAS_API.verifyEmail(tokenFromLink); setLinkResult('ok'); if (window.GATITAS_API.isLoggedIn()) onVerified(); } catch (e) { setLinkResult('error'); } })(); }, [tokenFromLink]); async function checkNow() { setChecking(true); setNotYet(false); setError(''); try { const me = await window.GATITAS_API.me(); if (me.emailVerified) onVerified(); else setNotYet(true); } catch (e) { setError('No pudimos comprobar tu verificación. Probá de nuevo.'); } finally { setChecking(false); } } async function resend() { setResent(false); try { await window.GATITAS_API.resendVerification(data.email); setResent(true); } catch (e) { setError('No pudimos reenviar el correo. Probá de nuevo en un momento.'); } } return (
Enviamos un correo de verificación a {data.email}. Revisá tu bandeja de entrada (y spam) y confirmá tu dirección para continuar.} onBack={onBack} footerRight={ !(linkResult === 'ok' && !window.GATITAS_API.isLoggedIn()) && ( ) } > {linkResult === 'ok' && !window.GATITAS_API.isLoggedIn() && ( <>
Tu correo quedó verificado. Iniciá sesión para continuar con tu perfil.
Iniciar sesión )} {linkResult === 'error' && (
Ese enlace no es válido o ya venció. Pedí uno nuevo con "Reenviar correo".
)} {notYet && (
Todavía no vemos tu correo confirmado. Si ya hiciste click en el link, esperá unos segundos y volvé a intentar.
)} {error && (
{error}
)} {resent &&
Te reenviamos el correo de verificación.
}
); } // ───────────────────────────────────────────────────────────── // 1c · Recuperar contraseña — no existía ningún flujo, ni siquiera el link // era funcional. Mismo criterio de no-enumeración que el backend: el mensaje // es igual exista o no la cuenta. // ───────────────────────────────────────────────────────────── function ForgotPasswordStep({ onBack }) { const [email, setEmail] = useState(''); const [loading, setLoading] = useState(false); const [sent, setSent] = useState(false); const valid = /\S+@\S+\.\S+/.test(email); async function submit() { if (!valid || loading) return; setLoading(true); try { await window.GATITAS_API.forgotPassword(email); } catch (e) { /* respuesta genérica igual — no delatamos errores acá */ } finally { setLoading(false); setSent(true); } } return (
{loading ? 'Enviando…' : 'Enviar enlace'} } > {sent ? (
Si ese correo tiene una cuenta, te enviamos un enlace para restablecer la contraseña. Revisá tu bandeja de entrada.
) : (
setEmail(e.target.value)} />
)}
); } function ResetPasswordStep({ token, onDone, onBack }) { const [showPw, setShowPw] = useState(false); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const [done, setDone] = useState(false); const valid = password.length >= 10 && password === confirmPassword; async function submit() { if (!valid || loading) return; setLoading(true); setError(''); try { await window.GATITAS_API.resetPassword(token, password); setDone(true); } catch (e) { setError(e.message || 'El enlace no es válido o ya venció. Pedí uno nuevo.'); } finally { setLoading(false); } } return (
{loading ? 'Guardando…' : 'Guardar contraseña'} } > {done ? ( <>
Listo — tu contraseña se actualizó.
) : ( <>
setPassword(e.target.value)} />
setConfirmPassword(e.target.value)} />
{confirmPassword && password !== confirmPassword && (
Las contraseñas no coinciden.
)}
{error && (
{error}
)} )}
); } // ───────────────────────────────────────────────────────────── // 1d · Ya tenés un perfil — sección 12: si "Iniciar prueba gratuita" (u otro // punto de entrada) detecta cuenta + perfil ya creados, no se genera un // perfil nuevo ni se repite el formulario — se ofrece administrar el // existente. // ───────────────────────────────────────────────────────────── function AlreadyHasProfileScreen({ profile, dark, onToggleTheme }) { return (
{ location.href = 'vender.html'; }} loggedIn dark={dark} onToggleTheme={onToggleTheme} />
Ya tenés un perfil registrado

Hola de nuevo, {profile.displayName}

No hace falta crear otro perfil — podés seguir administrando el que ya tenés.

Ver mi perfil público
); } // ───────────────────────────────────────────────────────────── // 2 · Perfil // ───────────────────────────────────────────────────────────── // Sin selector de rol "Comprador/Creador": visitantes no necesitan cuenta // (ver dossier de cumplimiento, Sección 6), así que registrarse siempre crea // una cuenta de anunciante. Tampoco hay carga de foto todavía — la API no // tiene un endpoint de subida de media en esta fase; se agrega junto con la // moderación de contenido (fase 3). function ProfileStep({ data, setData, onBack, onNext }) { const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const valid = data.displayName.trim().length >= 2; // País/ciudad/barrio vienen del catálogo real en SQL (GET /locations/*), // no de un objeto JS estático — se cargan acá y en cascada, igual que en // el panel de Filtros (shared.js). Nunca texto libre (evita duplicados // tipo "Palermo"/"palermo"/"Palermo, CABA"). const [countries, setCountries] = useState([]); const [cities, setCities] = useState([]); const [neighborhoods, setNeighborhoods] = useState([]); useEffect(() => { window.GATITAS_LOCATIONS_API?.getCountries({ onlyPublished: false }) .then(setCountries).catch(() => setCountries([])); }, []); useEffect(() => { if (!data.countryId) { setCities([]); return; } window.GATITAS_LOCATIONS_API?.getCities({ countryId: data.countryId, onlyPublished: false }) .then(setCities).catch(() => setCities([])); }, [data.countryId]); useEffect(() => { if (!data.cityId) { setNeighborhoods([]); return; } window.GATITAS_LOCATIONS_API?.getNeighborhoods({ cityId: data.cityId, onlyPublished: false }) .then(setNeighborhoods).catch(() => setNeighborhoods([])); }, [data.cityId]); async function submit() { if (!valid || loading) return; setError(''); setLoading(true); try { await window.GATITAS_API.createProfile({ displayName: data.displayName.trim(), countryId: data.countryId || undefined, cityId: data.cityId || undefined, neighborhoodId: data.neighborhoodId || undefined, nationality: data.nationality || undefined, serviceType: data.serviceType || undefined, bio: data.bio.trim() || undefined, publicContact: data.publicContact.trim() || undefined, }); // Espejo liviano en localStorage, solo para que el header de las // páginas estáticas (shared.js) sepa mostrar la sesión — la sesión // real vive en el access token en memoria + la cookie de refresh. window.GATITAS?.setUser?.({ name: data.displayName.trim(), email: data.email, photo: null, createdAt: Date.now(), }); // "Publicá con nosotros" guarda esta marca antes de mandar a un // usuario sin cuenta a registrarse — si está, retomamos la // contratación de PRO Max en vez de mostrar la pantalla normal de // "listo". No se toca nada más del flujo de registro para esto. let pendingPlan = null; try { pendingPlan = sessionStorage.getItem('gatitas-pending-plan'); } catch (e) {} if (pendingPlan === 'PRO_MAX') { try { sessionStorage.removeItem('gatitas-pending-plan'); } catch (e) {} location.href = 'precios.html?resume=1'; return; } onNext(); } catch (e) { setError(e.message || 'No pudimos crear tu perfil. Probá de nuevo.'); } finally { setLoading(false); } } return (
{loading ? 'Creando perfil…' : 'Continuar'} } >
setData({ ...data, displayName: e.target.value })} />