110 lines
4.4 KiB
TypeScript
110 lines
4.4 KiB
TypeScript
'use client'
|
|
import { useState } from 'react'
|
|
import type { BrandConfig } from '@/lib/types'
|
|
|
|
interface ConsentScreenProps {
|
|
brandConfig: BrandConfig | null
|
|
onAccept: (consentOperativo: boolean, consentMacroN1: boolean) => void
|
|
}
|
|
|
|
export function ConsentScreen({ brandConfig, onAccept }: ConsentScreenProps) {
|
|
const [operativo, setOperativo] = useState(false)
|
|
const [macroN1, setMacroN1] = useState(false)
|
|
|
|
const orgName = brandConfig?.org_name ?? 'tu empresa'
|
|
|
|
return (
|
|
<div className="consent-container" role="main">
|
|
<h1 className="consent-title">Antes de comenzar</h1>
|
|
|
|
<section className="consent-section" aria-labelledby="consent-intro-heading">
|
|
<h2 id="consent-intro-heading" className="consent-section-title">
|
|
¿Qué vamos a hacer con tus respuestas?
|
|
</h2>
|
|
<p>
|
|
Esta encuesta tiene dos propósitos que podés autorizar por separado:
|
|
</p>
|
|
<ol className="consent-list">
|
|
<li>
|
|
<strong>Diagnóstico interno de {orgName}:</strong> tus respuestas ayudan a la empresa
|
|
a entender la realidad de las personas que cuidan a familiares con discapacidad o adultos
|
|
mayores, para diseñar apoyos más adecuados. Solo se trabaja con{' '}
|
|
<strong>datos agregados</strong> — nunca accede a respuestas individuales.
|
|
</li>
|
|
<li>
|
|
<strong>Estudio país (opcional):</strong> tus respuestas anonimizadas contribuyen a un
|
|
mapeo nacional sobre la economía del cuidado en Paraguay. Los datos se procesan de
|
|
forma irreversiblemente desvinculada de cualquier empresa o persona.
|
|
</li>
|
|
</ol>
|
|
</section>
|
|
|
|
{/* Párrafo OBLIGATORIO: anonimato y no-revocación (ADR-003) */}
|
|
<section className="consent-anon-box" role="note" aria-label="Sobre el anonimato">
|
|
<p>
|
|
<strong>Esta encuesta es completamente anónima.</strong> No guardamos ningún dato que
|
|
te identifique (nombre, número de documento, correo ni ningún otro identificador personal).
|
|
Por ser anónima, <strong>no es posible revocar ni eliminar tu respuesta una vez enviada</strong>,
|
|
ya que no habría forma de encontrarla entre las demás.
|
|
</p>
|
|
</section>
|
|
|
|
<section className="consent-checkboxes" aria-labelledby="consent-choices-heading">
|
|
<h2 id="consent-choices-heading" className="consent-section-title">
|
|
Tus decisiones
|
|
</h2>
|
|
|
|
{/* Checkbox 1: operativo — REQUERIDO */}
|
|
<label className="consent-checkbox-label" htmlFor="consent-operativo">
|
|
<input
|
|
type="checkbox"
|
|
id="consent-operativo"
|
|
checked={operativo}
|
|
onChange={(e) => setOperativo(e.target.checked)}
|
|
aria-required="true"
|
|
className="consent-checkbox-input"
|
|
/>
|
|
<span className="consent-checkbox-text">
|
|
<strong>Acepto</strong> que mis respuestas se usen para el diagnóstico interno de{' '}
|
|
{orgName} sobre cuidado y discapacidad.{' '}
|
|
<span className="consent-required-badge">Requerido para continuar</span>
|
|
</span>
|
|
</label>
|
|
|
|
{/* Checkbox 2: macro_n1 — OPCIONAL */}
|
|
<label className="consent-checkbox-label" htmlFor="consent-macro">
|
|
<input
|
|
type="checkbox"
|
|
id="consent-macro"
|
|
checked={macroN1}
|
|
onChange={(e) => setMacroN1(e.target.checked)}
|
|
className="consent-checkbox-input"
|
|
/>
|
|
<span className="consent-checkbox-text">
|
|
<strong>También acepto</strong> que mis respuestas anonimizadas contribuyan al estudio
|
|
país sobre economía del cuidado (sin identificarme en ningún caso).{' '}
|
|
<span className="consent-optional-badge">Opcional</span>
|
|
</span>
|
|
</label>
|
|
</section>
|
|
|
|
<div className="consent-footer">
|
|
<button
|
|
type="button"
|
|
disabled={!operativo}
|
|
onClick={() => onAccept(operativo, macroN1)}
|
|
className={`btn ${operativo ? 'btn-primary' : 'btn-primary btn-disabled'}`}
|
|
aria-disabled={!operativo}
|
|
>
|
|
Comenzar la encuesta
|
|
</button>
|
|
{!operativo && (
|
|
<p className="consent-required-hint" role="status" aria-live="polite">
|
|
Necesitás marcar el primer checkbox para continuar.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|