);
}
/* ============================================================
helpers de form
============================================================ */
function Field({ label, opt, hint, children, full }) {
return (
{children}
{hint && {hint}}
);
}
function AccountGate({ data, set, onAuthenticated }) {
// RMR-685: cuenta REAL contra el backend (account_register / account_login).
// Antes los botones eran placebo (set auth:true sin crear cuenta) -> con el gate del Paso 1
// eso dejaria pasar gente SIN cuenta y sus datos no irian a BD. Aqui se crea cuenta de verdad.
const emailOk = /.+@.+\..+/.test(data.cEmail);
const phoneOk = (data.cPhone || '').replace(/\D/g, '').length >= 8;
const passOk = data.cPass.length >= 4;
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState('');
const [mode, setMode] = React.useState('register'); // 'register' | 'login'
async function syncCurrentAccount() {
try {
const res = await fetch('/orden/api.php?action=account_me', {
credentials: 'same-origin',
cache: 'no-store',
});
let j = {}; try { j = await res.json(); } catch (e) {}
const u = j.user || j;
if (res.ok && u && (u.id || u.email)) {
set({ auth: true, authMethod: 'email', cEmail: u.email || (data.cEmail || '').trim(), cPhone: u.phone || data.cPhone || '', cName: data.cName || u.name || '' });
setErr('');
return true;
}
} catch (e) {}
return false;
}
async function owAuth(action) {
if (busy) return; // lock anti doble-tap (RMR-669)
setErr(''); setBusy(true);
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 12000);
try {
const res = await fetch('/orden/api.php?action=' + action, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'same-origin',
signal: controller.signal,
body: JSON.stringify({ email: (data.cEmail || '').trim(), password: data.cPass, phone: (data.cPhone || '').trim(), csrf_token: window.OW_CSRF }),
});
let j = {}; try { j = await res.json(); } catch (e) {}
if (res.ok && (j.success || j.user_id)) {
// cuenta creada/sesion iniciada de verdad -> auth real. auth_register/login ya auto-loguean
// y ligan cualquier draft guest a vipinv_brief.user_id en el servidor.
set({ auth: true, authMethod: 'email', cEmail: j.email || (data.cEmail || '').trim(), cPhone: j.phone || data.cPhone || '', cName: data.cName || j.name || '' });
if (typeof onAuthenticated === 'function') onAuthenticated();
setErr('');
} else if (res.status === 409) {
// correo ya registrado -> cambiar a login, SIN dejar el boton muerto
setMode('login');
setErr('Este correo ya tiene cuenta. Escribe tu contraseña e inicia sesión.');
} else if (res.status === 429) {
setErr('Demasiados intentos. Espera un momento e inténtalo de nuevo.');
} else {
setErr(j.error || 'No se pudo completar. Revisa tus datos e inténtalo de nuevo.');
}
} catch (e) {
const recovered = await syncCurrentAccount();
if (!recovered) setErr('Problema de conexión. Revisa tu internet e inténtalo de nuevo.');
} finally {
clearTimeout(timeoutId);
setBusy(false); // SIEMPRE re-habilita -> nunca dead-end
}
}
if (data.auth) {
const initial = (data.cName || data.cEmail || 'U').trim().charAt(0).toUpperCase();
return (
{initial}
{data.cName || 'Tu cuenta Miss XV VIP'}
{data.cEmail}
Tu progreso se guarda en tu cuenta
);
}
return (
Crea tu cuenta para comenzar
Tu invitación y todo tu progreso se guardan en tu cuenta — continúa desde cualquier celular o computadora, y accede a tu RSVP, invitados y álbum QR.
);
}
/* ============================================================
PASO 1 — cuenta + servicios à la carte + promos
============================================================ */
function StepServices({ data, set, totals, toggleSvc, focus, setFocus, onAuthenticated }) {
const toggle = (s) => {if (!s.base) toggleSvc(s.id);};
const toGo400 = Math.max(0, 400 - totals.gross);
const toGo700 = Math.max(0, 700 - totals.gross);
const activePkg = totals.pkg;
return (
Bienvenida, Miss XV VIP✨
Aquí empieza tu historia. Elige y personaliza tu invitación paso a paso, a tu manera, con una vista previa en vivo mientras decides. Al confirmar tu orden, nuestro equipo produce la versión final —fondos, estilos y animación de intro— y te la entrega en 1 a 3 días. Nosotros nos encargamos del resto. ♡
Empieza con un paquete — o personaliza abajo
{PKGS.map((p) => {
const active = activePkg && activePkg.id === p.id;
const t = p.price;
const list = pkgListValue(p);
const save = list - t;
return (
);
})}
{activePkg ?
Paquete {activePkg.name} seleccionado · {activePkg.noSavings ? 'invitación personalizada' : `${activePkg.items.length + 1} ${activePkg.items.length + 1 === 1 ? 'servicio' : 'servicios'}`} por {USD(activePkg.price)} USD. Agrega o quita abajo para personalizarlo.
:
{totals.freeQS ?
<>¡Desbloqueado! QR álbum y Organizador de Mesas GRATIS en tu orden. :
<>Agrega {USD(toGo400)} más y llévate QR álbum + Organizador de Mesas gratis ($400+).}
{!totals.freeQS &&
}
{totals.freeSlide ?
<>¡Desbloqueado! VIP Slideshow GRATIS en tu orden. :
<>Llega a $700 y el VIP Slideshow es gratis — te faltan {USD(toGo700)}.}
{!totals.freeSlide &&
}
}
O personaliza servicio por servicio — toca para ver el demo, + para agregar