{intro || (isLogin
? "Entra con el correo o teléfono con el que te registraste (debe estar activo)."
: "Vecino, comercio del conjunto, o ambos. Correo o teléfono (uno basta).")}
);
}
/* pedir teléfono a quien ya está registrado pero quiere participar */
function PhoneModal({ open, onClose, onDone, actionLabel }) {
const [phone, setPhone] = useState("");
useEffect(() => { if (open) setPhone(""); }, [open]);
if (!open) return null;
const valid = phone.trim().length >= 8;
const submit = (e) => { e.preventDefault(); if (!valid) return; onDone(phone); };
return (
Un paso más para participar
Para {actionLabel || "participar activamente"} necesitamos un teléfono de contacto. Lo usamos solo para coordinar por WhatsApp.
);
}
function MessageModal({ data, onClose }) {
if (!data) return null;
return (
{data.title}
{data.body}
Listo
);
}
function parseHashRoute(hash) {
const raw = (hash || "#/").replace(/^#/, "") || "/";
const q = raw.indexOf("?");
const path = q >= 0 ? raw.slice(0, q) : raw;
const params = {};
if (q >= 0) new URLSearchParams(raw.slice(q + 1)).forEach((v, k) => { params[k] = v; });
return { path: path.startsWith("/") ? path : "/" + path, params, hash: hash || "#/" };
}
function isActiveUser(u) {
return !!(u && (u.status === "activo" || u.status === "Activo"));
}
/* ====================================================== */
/* APP */
/* ====================================================== */
function App() {
const [route, setRoute] = useState(window.location.hash || "#/");
const [user, setUser] = useLocal("cupa_user", null);
const [projVotes, setProjVotes] = useLocal("cupa_projvotes", {});
const [initVotes, setInitVotes] = useLocal("cupa_initvotes", {});
const [comments, setComments] = useLocal("cupa_comments", {});
const [verifying, setVerifying] = useState(false);
const [reg, setReg] = useState(null); // { mode, intro }
const [phoneAsk, setPhoneAsk] = useState(null);
const [msg, setMsg] = useState(null);
const pending = useRef(null);
useEffect(() => {
const onHash = () => { setRoute(window.location.hash || "#/"); window.scrollTo(0, 0); };
window.addEventListener("hashchange", onHash);
return () => window.removeEventListener("hashchange", onHash);
}, []);
// refrescar estatus desde Notion si hay sesión
useEffect(() => {
const session = window.CupaAPI && window.CupaAPI.getSession();
if (!session) return;
window.CupaAPI.me().then((res) => {
if (res.ok && res.user) setUser(res.user);
else if (res.error) {
window.CupaAPI.setSession(null);
if (user && user.status === "revocado") setUser(null);
}
});
}, []);
// ruta #/verificar?token=
useEffect(() => {
const { path, params } = parseHashRoute(route);
if (path !== "/verificar" || !params.token || verifying) return;
setVerifying(true);
window.CupaAPI.verify(params.token).then((res) => {
setVerifying(false);
if (res.ok) {
window.CupaAPI.setSession(res.sessionToken);
setUser(res.user);
setMsg({ title: "Registro confirmado", body: "Ya eres vecina/o activa/o en CUPA Inspira. Bienvenida." });
window.location.hash = "#/";
} else {
setMsg({ title: "No se pudo verificar", body: res.error || "El enlace no es válido o ya se usó." });
window.location.hash = "#/";
}
});
}, [route]);
const go = (h) => { if (window.location.hash === h) { window.scrollTo({ top: 0, behavior: "smooth" }); } else { window.location.hash = h; } };
const openRegister = (opts = {}) => setReg({ mode: "register", ...opts });
const openLogin = () => setReg({ mode: "login", intro: "Entra con el correo con el que te registraste." });
const ensureAccess = (fn) => {
if (isActiveUser(user)) { fn && fn(); return; }
if (user && user.status === "pendiente") {
setMsg({ title: "Registro en revisión", body: "Tu ficha está pendiente. Si diste correo, confirma el enlace; si solo teléfono, la mesa te activará pronto." });
return;
}
if (user && user.status === "revocado") {
setMsg({ title: "Acceso revocado", body: "Este acceso ya no está vigente. Escribe a la mesa vecinal si crees que es un error." });
return;
}
pending.current = fn;
setReg({ mode: "register", intro: "Regístrate para ver esta sección. Confirmamos edificio, departamento y contacto." });
};
const ensureParticipation = (actionLabel, fn) => {
if (!isActiveUser(user)) { ensureAccess(fn); return; }
if (user.phone) { fn && fn(); return; }
pending.current = fn;
setPhoneAsk({ actionLabel });
};
const finishReg = (data, meta) => {
setReg(null);
if (data) setUser(data);
if (meta && meta.loggedIn) {
const fn = pending.current; pending.current = null;
setTimeout(() => fn && fn(), 50);
return;
}
if (meta && meta.needAdmin) {
setMsg({ title: "Registro recibido", body: meta.message || "La mesa vecinal activará tu acceso al confirmar el teléfono." });
pending.current = null;
return;
}
if (meta && meta.needVerify) {
const body = meta.emailSent
? "Revisa tu correo y abre el enlace de confirmación."
: (meta.verifyUrl
? "Confirma tu registro con este enlace (copia y pégalo mientras el correo no esté configurado): " + meta.verifyUrl
: (meta.message || "Confirma tu correo para activar el acceso."));
setMsg({ title: "Casi listo", body });
pending.current = null;
return;
}
if (meta && meta.existing && data && data.status === "pendiente") {
setMsg({ title: "Ya estás en el padrón", body: "Tu registro sigue pendiente de confirmación o aprobación." });
pending.current = null;
return;
}
const fn = pending.current; pending.current = null;
if (isActiveUser(data)) setTimeout(() => fn && fn(), 50);
};
const finishPhone = (phone) => {
setUser((u) => ({ ...u, phone })); setPhoneAsk(null);
const fn = pending.current; pending.current = null;
setTimeout(() => fn && fn(), 50);
};
const logout = () => {
window.CupaAPI && window.CupaAPI.setSession(null);
setUser(null);
};
const joinOrg = (orgName) => ensureParticipation("unirte a esta organización", () =>
setMsg({ title: "¡Bienvenida al equipo!", body: `Te sumaste a "${orgName}". Te escribiremos por WhatsApp para los próximos pasos.` }));
const contact = (vecino) => ensureParticipation("contactar a este vecino", () =>
setMsg({ title: "Contacto enviado", body: `Le avisamos a ${vecino} que quieres contactarle. Te conectará por WhatsApp.` }));
const subscribe = () => ensureAccess(() =>
setMsg({ title: "¡Quedaste en la lista!", body: "Cuando salga la próxima Gaceta, te llega al correo del padrón. Mientras, léela aquí en la web." }));
const projVote = (id, v) => ensureParticipation("votar este proyecto", () =>
setProjVotes((s) => ({ ...s, [id]: s[id] === v ? undefined : v })));
const initVote = (id, v) => ensureParticipation("votar esta iniciativa", () =>
setInitVotes((s) => ({ ...s, [id]: s[id] === v ? undefined : v })));
const addComment = (id, c) => ensureParticipation("comentar", () =>
setComments((s) => ({ ...s, [id]: [...(s[id] || []), c] })));
const { path } = parseHashRoute(route);
let page;
if (path.startsWith("/verificar")) {
page = (
{verifying ? "Confirmando tu registro…" : "Verificando…"}
);
} else if (path.startsWith("/el-cupa") || path.startsWith("/memoria")) page = ;
else if (path.startsWith("/avisos")) page = openRegister()} />;
else if (path.startsWith("/oficios")) page = openRegister()} />;
else if (path.startsWith("/propuestas")) page = isActiveUser(user)
?
: ensureAccess(() => go("#/propuestas"))} />;
else if (path.startsWith("/comunidad/emprendimiento") || path.startsWith("/comunidad/comercio")) page = openRegister()} />;
else if (path.startsWith("/comunidad")) page = ;
else if (path.startsWith("/proyectos")) page = isActiveUser(user)
?
: ensureAccess(() => go("#/proyectos"))} />;
else if (path.startsWith("/iniciativas")) page = isActiveUser(user)
?
: ensureAccess(() => go("#/iniciativas"))} />;
else if (path.startsWith("/gaceta")) page = ;
else if (path.startsWith("/privacidad")) page = ;
else if (path.startsWith("/terminos")) page = ;
else page = openRegister()} />;
const isHome = path === "/" || path === "";
return (
);
}
function mountCupa() {
// Relee gaceta / memoria desde content/ si el loader ya resolvió
if (typeof resolveGaceta === "function") {
window.GACETA = resolveGaceta();
}
if (typeof resolveMemoria === "function") {
window.MEMORIA = resolveMemoria();
}
ReactDOM.createRoot(document.getElementById("root")).render();
}
if (window.__CUPA_CONTENT__ && typeof window.__CUPA_CONTENT__.then === "function") {
window.__CUPA_CONTENT__.then(mountCupa).catch(mountCupa);
} else {
mountCupa();
}