/* MACU RACE 2026 — Step components */
const { useState, useEffect, useRef, useMemo } = React;
// ---- tiny icon helpers (inline SVG) ----
const Icon = {
Check: (p) => ,
Arrow: (p) => ,
Back: (p) => ,
Alert: (p) => ,
Upload: (p) => ,
File: (p) => ,
Trophy: (p) => ,
};
// Mensaje de error inline con role=alert para que sea anunciado por lectores de pantalla.
function ErrorMsg({ id, children }) {
if (!children) return null;
return (
{children}
);
}
// ====== Step 1: Documento + Declaración ======
function Step1Documento({ data, set, errors, openModal }) {
return (
Paso 1 / 6
Identificación
Empecemos con tu documento. Toda la información viaja encriptada.
{errors.acepto}
);
}
// ====== Step 2: Datos personales ======
function Step2Datos({ data, set, errors, ageWipedSelections }) {
return (
Paso 2 / 6
Datos del participante
Estos datos aparecerán en el dorsal y el certificado de llegada.
set({ nombre: e.target.value })}/>
{errors.nombre}
Género *
{['Masculino','Femenino','Otro'].map(g => (
))}
{errors.genero}
set({ email: e.target.value })}/>
{errors.email}
set({ edad: e.target.value.replace(/\D/g, '').slice(0,2) })}/>
{errors.edad}
{ageWipedSelections && (
Atención: tu modalidad y talla anteriores ya no aplican para esta edad. Tendrás que elegirlas de nuevo en el paso 4.
)}
{data.edad && Number(data.edad) >= 6 && Number(data.edad) <= 13 && (
🧒 Macu Race Kids: participarás en la versión infantil del evento.
)}
);
}
// ====== Step 3: Salud ======
function Step3Salud({ data, set, errors }) {
return (
Paso 3 / 6
Salud y emergencia
Información que solo se usa en caso de necesitar atención el día del evento.
{errors.eps}
{errors.sangre}
{data.eps === 'Otra' && (
set({ epsOtra: e.target.value })}/>
{errors.epsOtra}
)}
);
}
// ====== Step 4: Categoría y distancia ======
function Step4Carrera({ data, set, errors, ageWipedSelections }) {
const age = Number(data.edad);
const opciones = window.getDistancesForAge(age) || [];
const isKids = age >= 6 && age <= 13;
const tallas = isKids ? ['6','8','10','12','14'] : ['XS','S','M','L','XL'];
return (
Paso 4 / 6
Tu carrera
Mostramos solo las distancias permitidas para {age} años según el reglamento.
{ageWipedSelections && (
Cambiaste la edad: vuelve a elegir modalidad y talla para esta categoría.
)}
{opciones.map(d => (
))}
{errors.distId}
Talla de camiseta *
{tallas.map(t => (
))}
{errors.talla}
);
}
// ====== Step 5: Vínculo ======
function Step5Vinculo({ data, set, errors }) {
const [fileError, setFileError] = useState(null);
const onFile = (e) => {
const f = e.target.files && e.target.files[0];
if (!f) return;
if (f.size > 5 * 1024 * 1024) {
setFileError('El archivo supera 5 MB. Comprime o usa otro formato.');
e.target.value = '';
return;
}
const okTypes = ['image/', 'application/pdf'];
if (!okTypes.some(t => f.type.startsWith(t))) {
setFileError('Formato no permitido. Sube una imagen (JPG/PNG) o un PDF.');
e.target.value = '';
return;
}
setFileError(null);
// soporte = metadata serializable (lo que se envía como JSON al API)
// soporteFile = File real, se sube aparte vía presigned URL a S3.
set({
soporte: { name: f.name, size: f.size, type: f.type },
soporteFile: f,
});
};
return (
Paso 5 / 6
Vínculo con el GBCMC
Si haces parte de la comunidad Marie Curie, accedes a tarifas con beneficio.
¿Tienes vínculo con el colegio? *
{errors.hasVinculo}
{data.hasVinculo === true && (
<>
{errors.tipoVinculo}
{(data.tipoVinculo === 'estudiante' || data.tipoVinculo === 'padre') && (
)}
{data.tipoVinculo === 'egresado' && (
set({ anoGraduacion: e.target.value.replace(/\D/g, '').slice(0, 4) })}/>
{errors.anoGraduacion}
)}
{(data.tipoVinculo === 'docente' || data.tipoVinculo === 'hijo_colaborador') && (
set({ cargoInstitucion: e.target.value.slice(0, 80) })}/>
{errors.cargoInstitucion}
)}
{fileError || errors.soporte}
)}
{data.hasVinculo === false && (
Inscripción pública — Aplica la tarifa general. ¡Te esperamos en la línea de salida! 🏁
)}
);
}
// ====== Step 6: Resumen ======
function Step6Resumen({ data, precio, distObj, onPay, onJump, isPaying, apiError }) {
const tipoVinculoLabel = (window.TIPOS_VINCULO.find(t => t.id === data.tipoVinculo) || {}).label;
return (
Paso 6 / 6
Confirma y paga
Revisa tu inscripción antes de pagar. Puedes editar cualquier sección.
{apiError && (
No se pudo registrar: {apiError}
)}
Total a pagar
{window.fmtCOP(precio.price)}
COP
{precio.label}
);
}
function ResumenBlock({ title, rows, editStep, onJump }) {
return (
{title}
{onJump && editStep && (
)}
{rows.filter(r => r[1]).map(([k,v]) => (
{k}
{v}
))}
);
}
Object.assign(window, {
Step1Documento, Step2Datos, Step3Salud, Step4Carrera, Step5Vinculo, Step6Resumen, Icon
});