// careers.jsx — Únete a nuestro equipo: list, detail, apply
// Each HTML entry sets window.PAGE = "careers" | "vacante" | "aplicar"
const { useState, useEffect, useRef } = React;
// =====================================================================
// LIST PAGE
// =====================================================================
function CareersListPage() {
const [data, setData] = useState({ items: [], total: 0, facets: { departments: [], locations: [] } });
const [loaded, setLoaded] = useState(false);
const [filters, setFilters] = useState({ dept: "", location: "", modality: "", q: "" });
const refetch = (f) => {
const qs = new URLSearchParams();
if (f.dept) qs.set("dept", f.dept);
if (f.location) qs.set("location", f.location);
if (f.modality) qs.set("modality", f.modality);
if (f.q) qs.set("q", f.q);
fetch(`/api/careers/jobs_list?${qs.toString()}`)
.then(r => r.json())
.then(d => { if (d.ok) { setData(d); setLoaded(true); } });
};
useEffect(() => { refetch(filters); }, []);
const setF = (k, v) => {
const next = { ...filters, [k]: v };
setFilters(next);
refetch(next);
};
const MODALITY = { presencial: "Presencial", remoto: "Remoto", hibrido: "Híbrido" };
const CONTRACT = { tiempo_completo: "Tiempo completo", medio_tiempo: "Medio tiempo", temporal: "Temporal", pasantia: "Pasantía", freelance: "Freelance" };
return (
{/* Hero */}
Únete a nuestro equipo · {data.total} {data.total === 1 ? "vacante abierta" : "vacantes abiertas"}
Construye tu carrera conectando dominicanos.
En Baldera trabajamos en equipo, con propósito y pasión por el cliente. Si te apasiona la tecnología,
las ventas o el servicio, este es tu lugar.
{/* Filters + listing */}
{/* Filter bar */}
setF("q", e.target.value)}
style={{
flex: "1 1 240px", padding: "10px 14px", borderRadius: 12,
border: "1px solid var(--line)", fontSize: 14, fontFamily: "inherit",
}}
/>
{/* Grid */}
{!loaded ? (
{[1, 2, 3].map(i => (
))}
) : data.items.length === 0 ? (
No hay vacantes abiertas con esos filtros.
Prueba quitar algún filtro, o vuelve pronto — publicamos posiciones nuevas cada mes.
) : (
)}
← Todas las vacantes
{job.department || "Vacante"}
{job.title}
{job.short_summary && (
{job.short_summary}
)}
{job.location && 📍 {job.location}}
{MODALITY[job.modality]}
{CONTRACT[job.contract_type]}
{job.salary_visible && job.salary_min && (
RD${Math.round(job.salary_min).toLocaleString()}{job.salary_max ? ` – ${Math.round(job.salary_max).toLocaleString()}` : "+"}
)}
Aplicar a esta vacante
{/* BODY — single centered column (no sidebar = no phantom gaps) */}
{job.description && }
{job.responsibilities && }
{job.requirements && }
{job.benefits && }
{/* In-flow Apply card (after content, at natural reading end) */}
¿TE INTERESA?
Aplica en menos de 5 minutos
Sube tu CV, llena el form y recibe confirmación inmediata por correo. Tu data está segura (Ley 172-13).
Aplicar ahora
);
}
function ChipBadge({ children, dark }) {
if (dark) {
return (
{children}
);
}
return (
{children}
);
}
function Block({ title, html }) {
// Strip any leading/trailing whitespace and empty tags from rich text
const clean = (html || "")
.replace(/^\s+|\s+$/g, "")
.replace(/\s*(\s*)*\s*<\/p>/gi, "")
.replace(/(\s*){2,}/gi, "");
return (
);
}
// =====================================================================
// APPLY PAGE — application form
// =====================================================================
function ApplyPage() {
const [job, setJob] = useState(null);
const [error, setError] = useState(false);
const [submitting, setSubmitting] = useState(false);
const [success, setSuccess] = useState(null);
const [serverError, setServerError] = useState(null);
const slug = new URLSearchParams(location.search).get("slug") || "";
const [form, setForm] = useState({
full_name: "", email: "", phone: "", dni: "", city: "",
cover_letter: "", consent: false,
});
useEffect(() => {
if (!slug) { setError(true); return; }
fetch(`/api/careers/job_get?slug=${encodeURIComponent(slug)}`)
.then(r => r.json())
.then(d => { if (d.ok) setJob(d.job); else setError(true); });
}, [slug]);
const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
const submit = async (ev) => {
ev.preventDefault();
setServerError(null);
if (!form.consent) { setServerError("Debes aceptar el aviso de privacidad."); return; }
if (!form.full_name.trim() || !form.email.trim() || !form.phone.trim()) {
setServerError("Nombre, email y teléfono son obligatorios.");
return;
}
setSubmitting(true);
try {
const r = await fetch("/api/careers/apply", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
job_slug: slug,
full_name: form.full_name.trim(),
email: form.email.trim(),
phone: form.phone.trim(),
dni: form.dni.trim(),
city: form.city.trim(),
cover_letter: form.cover_letter.trim(),
consent: !!form.consent,
}),
});
const d = await r.json();
if (d.ok) setSuccess({ id: d.application_id, message: d.message });
else setServerError(d.message || d.error || "No se pudo enviar.");
} catch (e) {
setServerError("Error de red. Intenta de nuevo.");
} finally {
setSubmitting(false);
}
};
if (error) {
return (
);
}
if (success) {
return (
¡Aplicación enviada!
{success.message} Revisa tu bandeja de entrada (y spam, por si acaso).
);
}
return (