/* Prototipo navegable: une las pantallas ya diseñadas en una sola app. Cada pantalla vive en su archivo; aquí solo está la navegación y el estado que se arrastra entre pasos (ruta, fecha, servicio, asientos, pasajeros). */ const { useState: ptS } = React; const PtDS = window.TransportesChiclayoDesignSystem_48bc0c; const PT_DIAS = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb']; const PT_MES = ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'set', 'oct', 'nov', 'dic']; const PT_MES_L = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'setiembre', 'octubre', 'noviembre', 'diciembre']; const ptHhmm = (m) => `${String(Math.floor((m % 1440) / 60)).padStart(2, '0')}:${String(m % 60).padStart(2, '0')}`; const ptDur = (m) => `${Math.floor(m / 60)} h${m % 60 ? ` ${m % 60} min` : ''}`; const ptCorta = (d) => `${PT_DIAS[d.getDay()]} ${d.getDate()} ${PT_MES[d.getMonth()]}`; const ptLarga = (d) => `${PT_DIAS[d.getDay()]}, ${d.getDate()} de ${PT_MES_L[d.getMonth()]}`; const ptIso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; const PT_TERM = { Chiclayo: { t: 'T. Bolognesi', dir: 'Av. José Leonardo Ortiz 155, Chiclayo' }, Piura: { t: 'T. Sánchez Cerro', dir: 'Av. Sánchez Cerro 1123, Piura' }, Lima: { t: 'T. Javier Prado', dir: 'Av. Javier Prado Este 1155, Lima' }, Trujillo: { t: 'T. Salaverry', dir: 'Av. Salaverry 820, Trujillo' }, }; const ptTerm = (c) => PT_TERM[c] || { t: 'Terminal Terrestre', dir: `Terminal Terrestre de ${c}` }; const PT_METODO = { yape: 'Yape o Plin', tarjeta: 'Tarjeta de crédito o débito', agencia: 'Efectivo en agencia' }; function Proto() { const [tab, setTab] = ptS('inicio'); const [stack, setStack] = ptS([]); const [vTab, setVTab] = ptS('proximos'); /* Compra en curso */ const [busqueda, setBusqueda] = ptS(null); const [servicio, setServicio] = ptS(null); const [asientos, setAsientos] = ptS(null); const [datos, setDatos] = ptS(null); const [compra, setCompra] = ptS(null); const [comprados, setComprados] = ptS([]); /* Mi cuenta */ const [perfil, setPerfil] = ptS(window.PERFIL); const [pasajeros, setPasajeros] = ptS(window.PAX_INICIALES); const [editando, setEditando] = ptS(null); const [prefs, setPrefs] = ptS({ recordatorios: true, compras: true, promos: false }); const [salir, setSalir] = ptS(false); const [toast, setToast] = ptS(null); const [cargandoPax, setCargandoPax] = ptS(false); /* Sesión y verificación en dos pasos */ const [sesion, setSesion] = ptS(true); const [authV, setAuthV] = ptS('bienvenida'); const [dosfa, setDosfa] = ptS({ activo: false, metodo: 'sms' }); const top = stack[stack.length - 1] || null; const ir = (id, data) => setStack((s) => [...s, { id, data }]); const volver = () => setStack((s) => s.slice(0, -1)); const irTab = (t) => { setTab(t); setStack([]); }; const avisar = (txt) => { setToast({ txt }); clearTimeout(avisar.id); avisar.id = setTimeout(() => setToast(null), 2400); }; const abrirPasajeros = () => { ir('pasajeros'); setCargandoPax(true); setTimeout(() => setCargandoPax(false), 900); }; /* ---------------- Flujo de compra ---------------- */ const enBusqueda = (b) => { setBusqueda(b); setServicio(null); setAsientos(null); ir('res'); }; const elegirServicio = (s) => { setServicio(s); ir('asi'); }; const viajeDeServicio = () => { const o = busqueda.origen, d = busqueda.destino; const llega = servicio.sale + servicio.dur; return { origen: o, destino: d, sale: ptHhmm(servicio.sale), llega: ptHhmm(llega), dur: ptDur(servicio.dur), diaSiguiente: llega >= 1440, embarque: ptTerm(o).dir, desembarque: ptTerm(d).dir, }; }; const elegirAsientos = (orden, total) => { setAsientos({ nums: orden.map((s) => s.n), total }); ir('pax'); }; const guardarDatos = (d) => { setDatos(d); ir('chk'); }; const pagar = ({ metodo }) => { const v = viajeDeServicio(); const p0 = datos.paxes[0]; const c = { origen: v.origen, destino: v.destino, sale: v.sale, llega: v.llega, masDia: v.diaSiguiente, fecha: ptLarga(busqueda.ida), fechaIso: ptIso(busqueda.ida), dur: servicio.dur, term: ptTerm(v.origen).t, termLl: ptTerm(v.destino).t, dir: ptTerm(v.origen).dir, dirLl: ptTerm(v.destino).dir, asientos: asientos.nums, servicio: `${servicio.servicio} · ${servicio.tipo}`, tipoServicio: servicio.servicio, tipo: servicio.tipo, codigo: 'TC-' + String(8500000 + Math.floor(Math.random() * 99999)), metodo: PT_METODO[metodo] || 'Tarjeta', total: asientos.total, correo: datos.contacto.email, pasajero: `${p0.nombres} ${p0.apellidos}`.trim() || 'Pasajero', doc: `${p0.tipo} ${p0.num}`, }; setCompra(c); setComprados((prev) => [{ id: 'nueva-' + c.codigo, estado: 'proximo', origen: c.origen, destino: c.destino, fecha: c.fechaIso, sale: c.sale, llega: c.llega, masDia: c.masDia, dur: c.dur, asiento: String(c.asientos[0]), servicio: c.tipoServicio, tipo: c.tipo, codigo: c.codigo, compra: '2026-08-09', precio: c.total, term: c.term, dir: c.dir, termLl: c.termLl, dirLl: c.dirLl, pasajero: c.pasajero, doc: c.doc, }, ...prev]); setStack([{ id: 'cfm' }]); }; const boletoDeCompra = () => { const v = comprados[0]; setTab('viajes'); setStack([{ id: 'boleto', data: v }]); }; /* ---------------- Resolución de pantalla ---------------- */ const proximos = [...comprados, ...window.PROXIMOS]; const pasados = window.PASADOS; const pantalla = () => { const id = top && top.id; /* Compra */ if (id === 'res') return ['scr-res', ]; if (id === 'asi') return ['scr-asi', ]; if (id === 'pax') { const v = viajeDeServicio(); return ['scr-pax', ]; } if (id === 'chk') { const n = asientos.nums.length; const p0 = datos.paxes[0]; return ['scr-chk', ]; } if (id === 'cfm') return ['scr-cfm', irTab('inicio')} />]; /* Mis viajes */ if (id === 'boleto') return ['scr-via', setStack([{ id: 'viaje', data: top.data }])} />]; if (id === 'viaje') return ['scr-via', ir('boleto', top.data)} />]; /* Promociones */ if (id === 'promo') return ['scr-pro', irTab('inicio')} />]; /* Mi cuenta */ if (id === 'datos') return ['scr-cta', { setPerfil(f); avisar(m); volver(); }} />]; if (id === 'pasajeros') return ['scr-cta', { setEditando(null); ir('pax-nuevo'); }} onEditar={(pid) => { setEditando(pid); ir('pax-editar'); }} />]; if (id === 'pax-nuevo') return ['scr-cta', { setPasajeros((prev) => [...prev, { ...p, id: 'p' + Date.now() }]); avisar(m); volver(); }} />]; if (id === 'pax-editar') return ['scr-cta', p.id === editando) || window.PAX_NUEVO} onGuardar={(p, m) => { setPasajeros((prev) => prev.map((x) => (x.id === p.id ? p : x))); avisar(m); volver(); }} onEliminar={(pid) => { setPasajeros((prev) => prev.filter((x) => x.id !== pid)); avisar('Pasajero eliminado'); volver(); }} />]; if (id === 'notificaciones') return ['scr-cta', avisar(t.txt || t)} />]; if (id === 'privacidad') return ['scr-cta', ]; if (id === 'password') return ['scr-cta', avisar(t.txt || t)} />]; if (id === 'gestion') return ['scr-cta', { setStack([]); avisar('Cuenta eliminada. Cerramos tu sesión.'); }} />]; /* Verificación en dos pasos, dentro de Privacidad y seguridad */ if (id === 'seg2fa') return ['scr-aut', ir('metodo2fa')} onCambiar={() => ir('metodo2fa')} onDesactivar={() => ir('off2fa')} />]; if (id === 'metodo2fa') return ['scr-aut', { setDosfa({ ...dosfa, metodo: m }); ir('otp2fa'); }} />]; if (id === 'otp2fa') return ['scr-aut', { setDosfa({ activo: true, metodo: dosfa.metodo }); setStack((s) => [...s.slice(0, -2), { id: 'ok2fa' }]); }} />]; if (id === 'ok2fa') return ['scr-aut', ]; if (id === 'off2fa') return ['scr-aut', { setDosfa({ ...dosfa, activo: false }); volver(); avisar('Verificación en dos pasos desactivada'); }} />]; if (id === 'ayuda') return ['scr-cta', ]; if (id === 'terminos') return ['scr-cta', ]; if (id === 'privacidad-doc') return ['scr-cta', ]; /* Raíces */ if (tab === 'viajes') return ['scr-via', ir('viaje', v)} onBoleto={(v) => ir('boleto', v)} onBuscar={() => irTab('inicio')} onIr={irTab} />]; if (tab === 'promos') return ['scr-pro', ir('promo', p)} onBuscar={() => irTab('inicio')} onIr={irTab} />]; if (tab === 'cuenta') return ['scr-cta', setSalir(true)} ir={(x) => (x === 'pasajeros' ? abrirPasajeros() : ir(x))} />]; return null; }; const actual = pantalla(); const enInicio = tab === 'inicio' && !stack.length; /* Flujo de acceso: se muestra sobre la app cuando no hay sesión. */ const entrar = () => { setSesion(true); setAuthV('bienvenida'); irTab('cuenta'); avisar('Sesión iniciada'); }; const authPantalla = () => { switch (authV) { case 'login': return setAuthV('bienvenida')} onCrear={() => setAuthV('registro')} onOlvide={() => setAuthV('recuperar')} onOk={() => setAuthV(dosfa.activo ? 'dosfa' : 'entrar')} />; case 'dosfa': return setAuthV('login')} onOk={() => setAuthV('entrar')} />; case 'registro': return setAuthV('bienvenida')} onLogin={() => setAuthV('login')} onContinuar={() => setAuthV('verificar')} />; case 'verificar': return setAuthV('registro')} onOk={() => setAuthV('datos')} />; case 'datos': return setAuthV('verificar')} onOk={() => setAuthV('creada')} onDoc={() => avisar('Abre el documento completo')} />; case 'creada': return ; case 'recuperar': return setAuthV('login')} onEnviado={() => setAuthV('recuperar-otp')} />; case 'recuperar-otp': return setAuthV('recuperar')} onOk={() => setAuthV('nueva-pass')} />; case 'nueva-pass': return setAuthV('recuperar-otp')} onOk={() => setAuthV('pass-lista')} />; case 'pass-lista': return setAuthV('login')} />; case 'entrar': entrar(); return null; default: return setAuthV('login')} onCrear={() => setAuthV('registro')} onInvitado={() => { setSesion(true); irTab('inicio'); }} />; } }; if (!sesion) { return ( <>
{authPantalla()}
); } return ( <>
{ setTab('cuenta'); setStack([{ id: 'ayuda' }]); }} />
{actual &&
{actual[1]}
}
setSalir(false)} onConfirm={() => { setSalir(false); setStack([]); setSesion(false); setAuthV('bienvenida'); }} />
); } ReactDOM.createRoot(document.getElementById('phone-root')).render();