// Main form application
const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React;
const FORM_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "dark",
"layout": "split",
"calendarLayout": "side-by-side",
"ctaLabel": "Agendar diagnóstico"
}/*EDITMODE-END*/;
function NexoIsotype() {
return (
);
}
function CheckIcon() {
return (
);
}
function ArrowIcon() {
return (
);
}
function validateEmail(v) {
return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v.trim());
}
function validatePhone(v) {
const digits = v.replace(/\D/g, '');
return digits.length >= 7 && digits.length <= 14;
}
function FieldMsg({ touched, error, ok }) {
if (touched && error) return
{error}
;
if (ok) return
{ok}
;
return ;
}
function App() {
const [t, setTweak] = useTweaks(FORM_TWEAK_DEFAULTS);
// Apply theme class
useEffectA(() => {
document.body.classList.toggle('theme-light', t.theme === 'light');
}, [t.theme]);
// Form state
const [razonSocial, setRazonSocial] = useStateA('');
const [nitRuc, setNitRuc] = useStateA('');
const [industria, setIndustria] = useStateA('');
const [email, setEmail] = useStateA('');
const [emailConfirm, setEmailConfirm] = useStateA('');
const [countryCode, setCountryCode] = useStateA('CO');
const [phone, setPhone] = useStateA('');
const [country, setCountry] = useStateA('CO');
const [city, setCity] = useStateA('');
const [direccion, setDireccion] = useStateA('');
const [direccionAdicional, setDireccionAdicional] = useStateA('');
const [acceptTerms, setAcceptTerms] = useStateA(false);
const [selectedDate, setSelectedDate] = useStateA(null);
const [selectedAvailable, setSelectedAvailable] = useStateA(true);
const [touched, setTouched] = useStateA({});
const [submitted, setSubmitted] = useStateA(false);
const [success, setSuccess] = useStateA(false);
const countryObj = COUNTRY_BY_CODE[country];
const cityList = countryObj ? countryObj.cities : [];
// When country changes, reset city + sync phone country code
useEffectA(() => {
setCity('');
setCountryCode(country);
}, [country]);
const touch = (k) => setTouched(prev => prev[k] ? prev : { ...prev, [k]: true });
// Validation
const errors = useMemoA(() => {
const e = {};
if (!razonSocial.trim() || razonSocial.trim().length < 2)
e.razonSocial = 'Ingresa la razón social de tu empresa';
if (!nitRuc.trim() || nitRuc.trim().length < 3)
e.nitRuc = 'Ingresa el NIT, RUC o número de identificación fiscal';
if (!industria.trim() || industria.trim().length < 2)
e.industria = 'Ingresa el sector o industria de tu empresa';
if (!email.trim()) e.email = 'Ingresa tu correo electrónico';
else if (!validateEmail(email)) e.email = 'Correo no válido';
if (!emailConfirm.trim()) e.emailConfirm = 'Confirma tu correo';
else if (emailConfirm.trim().toLowerCase() !== email.trim().toLowerCase())
e.emailConfirm = 'Los correos no coinciden';
if (!phone.trim()) e.phone = 'Ingresa tu teléfono';
else if (!validatePhone(phone)) e.phone = 'Teléfono no válido';
if (!country) e.country = 'Selecciona un país';
if (!city) e.city = 'Selecciona una ciudad';
if (!direccion.trim() || direccion.trim().length < 5)
e.direccion = 'Ingresa la dirección de tu empresa (mín. 5 caracteres)';
if (!selectedDate) e.date = 'Selecciona una fecha';
else if (!selectedAvailable) e.date = 'La fecha elegida no está disponible. Selecciona otra.';
if (!acceptTerms) e.terms = 'Debes aceptar los términos';
return e;
}, [razonSocial, nitRuc, industria, email, emailConfirm, phone, country, city, direccion, selectedDate, selectedAvailable, acceptTerms]);
const isValid = Object.keys(errors).length === 0;
// Stepper progress
const stepStatus = useMemoA(() => {
const s1 = razonSocial.trim() && nitRuc.trim() && industria.trim() && email.trim() && emailConfirm.trim();
const s2 = phone.trim() && country && city && direccion.trim();
const s3 = !!selectedDate && selectedAvailable;
return [s1, s2, s3];
}, [razonSocial, nitRuc, industria, email, emailConfirm, phone, country, city, direccion, selectedDate, selectedAvailable]);
const currentStep = stepStatus.findIndex(s => !s);
const handleSubmit = async (e) => {
e.preventDefault();
setSubmitted(true);
setTouched({
razonSocial: true, nitRuc: true, industria: true,
email: true, emailConfirm: true,
phone: true, country: true, city: true, direccion: true, terms: true,
date: true,
});
if (!isValid) {
// scroll to first error
const firstErrEl = document.querySelector('.field.has-error, .terms-row.has-error');
if (firstErrEl) firstErrEl.scrollIntoView({ block: 'center', behavior: 'smooth' });
return;
}
if (selectedDate) {
const base =
typeof window !== 'undefined' && window.NEXO_AVAILABLE_DATES_API_BASE != null
? String(window.NEXO_AVAILABLE_DATES_API_BASE).replace(/\/$/, '')
: '';
const verifyUrl = `${base || ''}/api/available-dates?month=${selectedDate.getMonth() + 1}&year=${selectedDate.getFullYear()}`;
try {
const r = await fetch(verifyUrl, { credentials: 'same-origin' });
if (r.ok) {
const data = await r.json();
const key = dateKey(selectedDate);
if (Array.isArray(data.available) && !data.available.includes(key)) {
setSelectedAvailable(false);
const firstErrEl = document.querySelector('.calendar-shell');
if (firstErrEl) firstErrEl.scrollIntoView({ block: 'center', behavior: 'smooth' });
return;
}
}
} catch (_) {
/* verificación best-effort si la API no responde */
}
}
// Enviar datos a n8n para generar contrato y guardarlo en BD
try {
await fetch('https://n8n.nexolatam.net/webhook/formulario-diagnostico', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
company_name: razonSocial.trim(),
nit_ruc_tax_id: nitRuc.trim(),
industry: industria.trim(),
contact_email: email.trim().toLowerCase(),
contact_phone: (COUNTRY_BY_CODE[countryCode]?.dial || '') + ' ' + phone.trim(),
country: COUNTRY_BY_CODE[country]?.name || country,
city: city,
address: direccion.trim() + (direccionAdicional.trim() ? ', ' + direccionAdicional.trim() : ''),
scheduled_date: dateKey(selectedDate),
})
});
} catch (err) {
// Si falla la llamada a n8n, igual mostramos éxito al cliente.
// El equipo puede recuperar el dato manualmente desde los logs del formulario.
console.error('[NEXO] Error enviando a n8n:', err);
}
setSuccess(true);
window.scrollTo({ top: 0, behavior: 'smooth' });
};
// ── Tweaks panel ────────────────────────────────────────
const tweaksUI = (
setTweak('theme', v)}
options={[
{ value: 'dark', label: 'Oscuro' },
{ value: 'light', label: 'Claro' },
]}
/>
setTweak('layout', v)}
options={[
{ value: 'split', label: 'Con panel' },
{ value: 'single', label: 'Centrado' },
]}
/>
setTweak('calendarLayout', v)}
options={[
{ value: 'side-by-side', label: 'Lado a lado' },
{ value: 'stacked', label: 'Apilado' },
]}
/>
setTweak('ctaLabel', v)}
/>
);
// ── Success view ────────────────────────────────────────
if (success) {
return (
¡Diagnóstico agendado!
Hemos recibido tu solicitud para {razonSocial}.
Te enviamos los detalles a {email}. Un miembro de nuestro equipo te contactará en menos de 24 horas para confirmar.