first commit
This commit is contained in:
gestions-UO
305
components/forms/ParticipaForm.tsx
Normal file
305
components/forms/ParticipaForm.tsx
Normal file
@@ -0,0 +1,305 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { ParticipaSchema, ParticipaFormData } from "@/utils/validations";
|
||||
import { Input } from "../ui/Input";
|
||||
import { Button } from "../ui/Button";
|
||||
import { Checkbox } from "../ui/Checkbox";
|
||||
import { Textarea } from "../ui/Textarea";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useLanguage } from "@/context/LanguageContext";
|
||||
import { supabase } from "@/lib/supabase/client";
|
||||
|
||||
export const ParticipaForm = () => {
|
||||
const { t, locale } = useLanguage();
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [success, setSuccess] = useState(false);
|
||||
const [errorMsg, setErrorMsg] = useState<string | null>(null);
|
||||
|
||||
const [campanas, setCampanas] = useState<any[]>([]);
|
||||
|
||||
// Estados para manejar las preguntas dinámicas (El Screener)
|
||||
const [preguntasDinamicas, setPreguntasDinamicas] = useState<any[]>([]);
|
||||
const [respuestasDinamicas, setRespuestasDinamicas] = useState<Record<string, any>>({});
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
watch,
|
||||
formState: { errors },
|
||||
reset
|
||||
} = useForm<ParticipaFormData>({
|
||||
resolver: zodResolver(ParticipaSchema),
|
||||
defaultValues: {
|
||||
interes: "" as any
|
||||
}
|
||||
});
|
||||
|
||||
// Vigila en tiempo real qué campaña ha seleccionado el usuario
|
||||
const campanaSeleccionadaId = watch("interes");
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCampanas = async () => {
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from("campanas")
|
||||
.select(`
|
||||
id,
|
||||
nombre,
|
||||
encuestas ( configuracion )
|
||||
`)
|
||||
.eq('estado', 'activa');
|
||||
|
||||
if (data && !error) {
|
||||
setCampanas(data);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error al cargar las campañas:", err);
|
||||
}
|
||||
};
|
||||
|
||||
fetchCampanas();
|
||||
}, []);
|
||||
|
||||
// Efecto que se dispara cuando el usuario cambia de campaña en el select
|
||||
useEffect(() => {
|
||||
if (campanaSeleccionadaId) {
|
||||
const campana = campanas.find(c => c.id === campanaSeleccionadaId);
|
||||
|
||||
if (campana && campana.encuestas && campana.encuestas.length > 0) {
|
||||
const config = campana.encuestas[0].configuracion;
|
||||
if (config && config.preguntas_filtro) {
|
||||
setPreguntasDinamicas(config.preguntas_filtro);
|
||||
setRespuestasDinamicas({});
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
setPreguntasDinamicas([]);
|
||||
setRespuestasDinamicas({});
|
||||
}, [campanaSeleccionadaId, campanas]);
|
||||
|
||||
// Manejador para los cambios en los inputs dinámicos
|
||||
const handleDynamicChange = (preguntaId: string, valor: any) => {
|
||||
setRespuestasDinamicas(prev => ({
|
||||
...prev,
|
||||
[preguntaId]: valor
|
||||
}));
|
||||
};
|
||||
|
||||
const onSubmit = async (data: ParticipaFormData) => {
|
||||
setIsSubmitting(true);
|
||||
setErrorMsg(null);
|
||||
|
||||
const payload: any = {
|
||||
datos_participante: {
|
||||
nombre: data.nombre,
|
||||
apellidos: data.apellidos,
|
||||
email: data.email,
|
||||
telefono: data.telefono,
|
||||
perfil_demografico: {
|
||||
provincia: data.provincia,
|
||||
edad: Number(data.edad),
|
||||
mensaje: data.mensaje || ""
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (data.interes && data.interes !== "") {
|
||||
payload.campana_id = data.interes;
|
||||
payload.datos_especificos = respuestasDinamicas;
|
||||
}
|
||||
|
||||
try {
|
||||
const { data: responseData, error } = await supabase.functions.invoke('validate-participant-data', {
|
||||
body: payload
|
||||
});
|
||||
|
||||
if (error) {
|
||||
throw new Error(error.message || "Error al procesar la solicitud en el servidor.");
|
||||
}
|
||||
|
||||
setSuccess(true);
|
||||
reset();
|
||||
} catch (err: any) {
|
||||
console.error("Error en Screener:", err);
|
||||
setErrorMsg(err.message || "Hubo un problema de conexión al enviar tus datos.");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<AnimatePresence mode="wait">
|
||||
{success ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="p-12 border border-ocean rounded-[32px] text-center bg-ice/10"
|
||||
>
|
||||
<h3 className="text-2xl font-bold text-navy mb-4">
|
||||
{t.participa.success.title}
|
||||
</h3>
|
||||
<p className="text-navy/70 mb-8">
|
||||
{t.participa.success.desc}
|
||||
</p>
|
||||
<Button onClick={() => window.location.reload()} variant="outline">
|
||||
{t.participa.success.btn}
|
||||
</Button>
|
||||
</motion.div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Input label={t.participa.fields.nombre} {...register("nombre")} error={errors.nombre?.message} />
|
||||
<Input label={t.participa.fields.apellidos} {...register("apellidos")} error={errors.apellidos?.message} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Input label={t.participa.fields.email} type="email" {...register("email")} error={errors.email?.message} />
|
||||
<Input label={t.participa.fields.telefono} type="tel" {...register("telefono")} error={errors.telefono?.message} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Input label={t.participa.fields.provincia} {...register("provincia")} error={errors.provincia?.message} />
|
||||
<Input label={t.participa.fields.edad} type="number" {...register("edad")} error={errors.edad?.message} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-[13px] font-extrabold text-navy uppercase tracking-widest">
|
||||
{locale === 'en' ? "Select a Campaign (Optional)" : locale === 'ca' ? "Selecciona una Campanya (Opcional)" : "Selecciona una Campaña (Opcional)"}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
{...register("interes")}
|
||||
className={`
|
||||
w-full bg-ice/10 border rounded-[12px] px-4 py-3.5 text-[15px]
|
||||
font-medium text-navy outline-none focus:border-ocean focus:bg-white
|
||||
transition-colors appearance-none cursor-pointer
|
||||
${errors.interes ? "border-red-500" : "border-crisp"}
|
||||
`}
|
||||
>
|
||||
<option value="">
|
||||
{locale === 'en' ? "None / General Registration" : locale === 'ca' ? "Cap / Registre General" : "Ninguna / Registro General"}
|
||||
</option>
|
||||
|
||||
{campanas.map((campana) => (
|
||||
<option key={campana.id} value={campana.id}>
|
||||
{campana.nombre}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none opacity-40 text-navy">
|
||||
<svg width="12" height="8" viewBox="0 0 12 8" fill="none" stroke="currentColor">
|
||||
<path d="M1 1L6 6L11 1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{errors.interes && <span className="text-red-500 text-xs font-bold">{errors.interes.message}</span>}
|
||||
</div>
|
||||
|
||||
{/* --- BLOQUE DINÁMICO MULTIDIOMA: EL SCREENER --- */}
|
||||
{preguntasDinamicas.length > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: "auto" }}
|
||||
className="p-6 bg-sky/5 border border-sky/20 rounded-[20px] space-y-6 mt-4"
|
||||
>
|
||||
<h4 className="text-[15px] font-extrabold text-ocean uppercase tracking-widest border-b border-sky/20 pb-2">
|
||||
{locale === 'en' ? "Specific Campaign Questions" : locale === 'ca' ? "Preguntes de la Campanya" : "Preguntas de la Campaña"}
|
||||
</h4>
|
||||
|
||||
{preguntasDinamicas.map((pregunta) => {
|
||||
|
||||
// HELPER MULTIDIOMA: Lee el JSON para el idioma actual o usa el string antiguo
|
||||
const obtenerTexto = (campo: any) => {
|
||||
if (!campo) return "";
|
||||
if (typeof campo === 'string') return campo;
|
||||
return campo[locale] || campo['es'] || "";
|
||||
};
|
||||
|
||||
const obtenerOpciones = (campo: any): string[] => {
|
||||
if (!campo) return [];
|
||||
if (Array.isArray(campo)) return campo;
|
||||
return campo[locale] || campo['es'] || [];
|
||||
};
|
||||
|
||||
const etiquetaTraducida = obtenerTexto(pregunta.etiqueta);
|
||||
const opcionesTraducidas = obtenerOpciones(pregunta.opciones);
|
||||
|
||||
return (
|
||||
<div key={pregunta.id_pregunta} className="flex flex-col gap-2">
|
||||
<label className="text-[14px] font-bold text-navy">
|
||||
{etiquetaTraducida} {pregunta.requerido && <span className="text-ocean">*</span>}
|
||||
</label>
|
||||
|
||||
{pregunta.tipo === "select" && (
|
||||
<select
|
||||
required={pregunta.requerido}
|
||||
onChange={(e) => handleDynamicChange(pregunta.id_pregunta, e.target.value)}
|
||||
className="w-full bg-white border border-crisp rounded-[12px] px-4 py-3 text-[15px] font-medium text-navy focus:border-ocean outline-none"
|
||||
>
|
||||
<option value="">{locale === 'en' ? "Select..." : locale === 'ca' ? "Selecciona..." : "Selecciona..."}</option>
|
||||
{opcionesTraducidas.map((opt: string) => (
|
||||
<option key={opt} value={opt}>{opt}</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
|
||||
{pregunta.tipo === "checkbox" && (
|
||||
<div className="flex flex-wrap gap-4 mt-2">
|
||||
{opcionesTraducidas.map((opt: string) => (
|
||||
<label key={opt} className="flex items-center gap-2 text-[14px] text-navy/80 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
value={opt}
|
||||
onChange={(e) => {
|
||||
const currentAnswers = respuestasDinamicas[pregunta.id_pregunta] || [];
|
||||
let newAnswers;
|
||||
if (e.target.checked) {
|
||||
newAnswers = [...currentAnswers, opt];
|
||||
} else {
|
||||
newAnswers = currentAnswers.filter((a: string) => a !== opt);
|
||||
}
|
||||
handleDynamicChange(pregunta.id_pregunta, newAnswers);
|
||||
}}
|
||||
className="w-4 h-4 rounded border-crisp text-ocean focus:ring-ocean"
|
||||
/>
|
||||
{opt}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
)}
|
||||
{/* --- FIN BLOQUE DINÁMICO --- */}
|
||||
|
||||
<Textarea label={t.participa.fields.mensaje} rows={3} {...register("mensaje")} error={errors.mensaje?.message} />
|
||||
|
||||
<Checkbox label={t.contacto.form.privacy} {...register("privacidad")} error={errors.privacidad?.message} />
|
||||
|
||||
{errorMsg && (
|
||||
<motion.p initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="text-red-600 bg-red-50 p-4 rounded-lg text-sm font-bold">
|
||||
{errorMsg}
|
||||
</motion.p>
|
||||
)}
|
||||
|
||||
<div className="pt-4">
|
||||
<Button type="submit" disabled={isSubmitting} className="w-full md:w-auto" variant="primary">
|
||||
{isSubmitting
|
||||
? (locale === 'en' ? "Sending application..." : locale === 'ca' ? "Enviant sol·licitud..." : "Enviando solicitud...")
|
||||
: (locale === 'en' ? "Send application" : locale === 'ca' ? "Enviar sol·licitud" : "Enviar solicitud")}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user