275 lines
9.8 KiB
TypeScript
275 lines
9.8 KiB
TypeScript
'use client'
|
|
import { useCallback, useEffect, useRef, useState, useTransition } from 'react'
|
|
import type { FormAnswers, Question, Survey } from '@/lib/types'
|
|
import { clearDraft, loadDraft, saveDraft } from '@/lib/storage'
|
|
import { getHiddenCodes, isQuestionVisible } from '@/lib/conditional'
|
|
import { submitSurvey } from '@/app/actions/submit-survey'
|
|
import { ConsentScreen } from './consent-screen'
|
|
import { ProgressBar } from './progress-bar'
|
|
import { QuestionRenderer } from './question-renderer'
|
|
|
|
// Section metadata (code prefix → display title)
|
|
const SECTIONS: { prefix: string; title: string }[] = [
|
|
{ prefix: 'A', title: 'Datos Generales' },
|
|
{ prefix: '1', title: 'Prevalencia: cuidado y discapacidad' },
|
|
{ prefix: '2', title: 'Intensidad y rol del cuidado' },
|
|
{ prefix: '3', title: 'Impacto económico del cuidado' },
|
|
{ prefix: '4', title: 'Tiempo y descanso' },
|
|
{ prefix: '5', title: 'Impacto en el trabajo' },
|
|
{ prefix: '6', title: 'Conciencia organizacional' },
|
|
{ prefix: '7', title: 'Para cerrar' },
|
|
]
|
|
|
|
function getSectionPrefix(code: string): string {
|
|
const m = code.match(/^([A-Za-z]+|\d+)/)
|
|
return m ? m[1] : code
|
|
}
|
|
|
|
type FormStage = 'consent' | 'form' | 'success' | 'error'
|
|
|
|
interface SurveyFormProps {
|
|
survey: Survey
|
|
questions: Question[]
|
|
}
|
|
|
|
export function SurveyForm({ survey, questions }: SurveyFormProps) {
|
|
const [stage, setStage] = useState<FormStage>('consent')
|
|
const [consentOperativo, setConsentOperativo] = useState(false)
|
|
const [consentMacroN1, setConsentMacroN1] = useState(false)
|
|
const [answers, setAnswers] = useState<FormAnswers>({})
|
|
const [errors, setErrors] = useState<Record<string, string>>({})
|
|
const [submitError, setSubmitError] = useState<string | null>(null)
|
|
const [isPending, startTransition] = useTransition()
|
|
const [a11yAnnounce, setA11yAnnounce] = useState('')
|
|
const [hydrated, setHydrated] = useState(false)
|
|
const prevAnswers = useRef<FormAnswers>({})
|
|
|
|
// Hydrate from localStorage on mount
|
|
useEffect(() => {
|
|
const draft = loadDraft(survey.id)
|
|
if (Object.keys(draft).length > 0) setAnswers(draft)
|
|
setHydrated(true)
|
|
}, [survey.id])
|
|
|
|
// Persist to localStorage after hydration
|
|
useEffect(() => {
|
|
if (!hydrated) return
|
|
saveDraft(survey.id, answers)
|
|
prevAnswers.current = answers
|
|
}, [answers, hydrated, survey.id])
|
|
|
|
const handleChange = useCallback(
|
|
(code: string, value: FormAnswers[string]) => {
|
|
setAnswers((prev) => {
|
|
const updated = { ...prev, [code]: value }
|
|
const toHide = getHiddenCodes(code, value, questions, prev)
|
|
for (const hiddenCode of toHide) {
|
|
updated[hiddenCode] = undefined as unknown as FormAnswers[string]
|
|
}
|
|
if (toHide.length > 0) {
|
|
setA11yAnnounce('Se ocultaron preguntas relacionadas y se limpiaron sus respuestas.')
|
|
} else {
|
|
const appeared = questions.some(
|
|
(q) =>
|
|
q.conditional_rules?.some((r) => r.if_question === code) &&
|
|
isQuestionVisible(q, updated) &&
|
|
!isQuestionVisible(q, prev)
|
|
)
|
|
if (appeared) setA11yAnnounce('Aparecieron nuevas preguntas según tu respuesta.')
|
|
}
|
|
return updated
|
|
})
|
|
setErrors((prev) => {
|
|
if (!prev[code]) return prev
|
|
const { [code]: _, ...rest } = prev
|
|
return rest
|
|
})
|
|
},
|
|
[questions]
|
|
)
|
|
|
|
function validate(): boolean {
|
|
const newErrors: Record<string, string> = {}
|
|
for (const q of questions) {
|
|
if (!q.required) continue
|
|
if (!isQuestionVisible(q, answers)) continue
|
|
const val = answers[q.code]
|
|
if (val === null || val === undefined || val === '' || (Array.isArray(val) && val.length === 0)) {
|
|
newErrors[q.code] = 'Este campo es obligatorio.'
|
|
}
|
|
}
|
|
setErrors(newErrors)
|
|
return Object.keys(newErrors).length === 0
|
|
}
|
|
|
|
function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
if (isPending) return
|
|
if (!validate()) {
|
|
const firstErrorCode = Object.keys(errors)[0]
|
|
if (firstErrorCode) document.getElementById(firstErrorCode)?.focus()
|
|
return
|
|
}
|
|
|
|
const questionMap = Object.fromEntries(questions.map((q) => [q.code, q.id]))
|
|
|
|
startTransition(async () => {
|
|
const result = await submitSurvey({
|
|
surveyId: survey.id,
|
|
answers: answers as Record<string, unknown>,
|
|
questionMap,
|
|
consentOperativo,
|
|
consentMacroN1,
|
|
})
|
|
if (result.success) {
|
|
clearDraft(survey.id)
|
|
setStage('success')
|
|
} else {
|
|
setSubmitError(result.error)
|
|
setStage('error')
|
|
}
|
|
})
|
|
}
|
|
|
|
// ── Stage: consent ──────────────────────────────────────────
|
|
if (stage === 'consent') {
|
|
return (
|
|
<ConsentScreen
|
|
brandConfig={survey.brand_config}
|
|
onAccept={(op, macro) => {
|
|
setConsentOperativo(op)
|
|
setConsentMacroN1(macro)
|
|
setStage('form')
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
// ── Stage: success ──────────────────────────────────────────
|
|
if (stage === 'success') {
|
|
return (
|
|
<div className="survey-wrapper">
|
|
<div className="thank-you-container" role="main">
|
|
<h1 className="thank-you-title">¡Gracias por participar!</h1>
|
|
<p className="thank-you-body">
|
|
Tu respuesta fue registrada correctamente. Recordá que la encuesta es anónima: no hay
|
|
forma de vincular tus respuestas con tu identidad.
|
|
</p>
|
|
<p className="thank-you-body">
|
|
Los resultados agregados ayudarán a {survey.brand_config?.org_name ?? 'tu empresa'} a
|
|
diseñar mejores apoyos para las personas cuidadoras.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ── Stage: error ────────────────────────────────────────────
|
|
if (stage === 'error') {
|
|
return (
|
|
<div className="survey-wrapper">
|
|
<div className="error-container" role="main">
|
|
<h1 className="error-title">No se pudo enviar la encuesta</h1>
|
|
<p>Hubo un error al guardar tus respuestas ({submitError}). Podés intentarlo de nuevo.</p>
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary"
|
|
onClick={() => { setSubmitError(null); setStage('form') }}
|
|
>
|
|
Volver e intentar de nuevo
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ── Stage: form ─────────────────────────────────────────────
|
|
const visibleQuestions = questions.filter((q) => isQuestionVisible(q, answers))
|
|
const answeredCount = visibleQuestions.filter((q) => {
|
|
const v = answers[q.code]
|
|
return v !== null && v !== undefined && v !== '' && !(Array.isArray(v) && v.length === 0)
|
|
}).length
|
|
|
|
type Section = { prefix: string; title: string; questions: Question[] }
|
|
const sectionMap = new Map<string, Section>()
|
|
for (const q of visibleQuestions) {
|
|
const prefix = getSectionPrefix(q.code)
|
|
if (!sectionMap.has(prefix)) {
|
|
const meta = SECTIONS.find((s) => s.prefix === prefix)
|
|
sectionMap.set(prefix, { prefix, title: meta?.title ?? prefix, questions: [] })
|
|
}
|
|
sectionMap.get(prefix)!.questions.push(q)
|
|
}
|
|
|
|
const bc = survey.brand_config
|
|
|
|
return (
|
|
<div className="survey-wrapper">
|
|
<a href="#survey-form" className="skip-link">Ir al formulario</a>
|
|
|
|
<div aria-live="polite" aria-atomic="true" className="sr-only" role="status">
|
|
{a11yAnnounce}
|
|
</div>
|
|
|
|
{/* Header contextual con org/branch si está configurado */}
|
|
{bc?.org_name && (
|
|
<div className="brand-header" role="note" aria-label="Información de la empresa">
|
|
<p className="brand-text">
|
|
Estás respondiendo esto porque pertenecés a <strong>{bc.org_name}</strong>
|
|
{bc.branch_name && (
|
|
<> y participás en las oficinas de <strong>{bc.branch_name}</strong>
|
|
{bc.branch_city && <> en <strong>{bc.branch_city}</strong></>}.</>
|
|
)}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
<header className="survey-header">
|
|
<h1 className="survey-title">{survey.title}</h1>
|
|
<p className="survey-anon-note">Esta encuesta es anónima. Tus respuestas no te identifican.</p>
|
|
</header>
|
|
|
|
<div className="survey-progress-sticky" aria-label="Barra de progreso">
|
|
<ProgressBar answered={answeredCount} total={visibleQuestions.length} />
|
|
</div>
|
|
|
|
<main id="survey-form">
|
|
<form onSubmit={handleSubmit} noValidate aria-label={`Encuesta: ${survey.title}`}>
|
|
{Array.from(sectionMap.values()).map((section) => (
|
|
<section
|
|
key={section.prefix}
|
|
className="survey-section"
|
|
aria-labelledby={`section-${section.prefix}`}
|
|
>
|
|
<div className="section-header">
|
|
<h2 id={`section-${section.prefix}`} className="section-title">Sección {section.prefix} · {section.title}</h2>
|
|
</div>
|
|
{section.questions.map((q) => (
|
|
<div key={q.id} className="question-wrapper" data-code={q.code}>
|
|
<QuestionRenderer
|
|
question={q}
|
|
answers={answers}
|
|
onChange={handleChange}
|
|
errors={errors}
|
|
/>
|
|
</div>
|
|
))}
|
|
</section>
|
|
))}
|
|
|
|
<div className="form-footer">
|
|
<button
|
|
type="submit"
|
|
className="btn btn-primary"
|
|
disabled={isPending}
|
|
aria-disabled={isPending}
|
|
>
|
|
{isPending ? 'Enviando…' : 'Enviar encuesta'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|