Validaciones mandatorias — Sección 8 — IDs concretos

components/question-renderer.tsx

@@ -5,6 +5,7 @@ import { CheckboxGroup } from './widgets/checkbox-group'
 import { RatingScale } from './widgets/rating-scale'
 import { TextAreaField } from './widgets/text-area-field'
 import { TextShortField } from './widgets/text-short-field'
+import { GeoSelectWidget } from './widgets/geo-select-widget'
 
 interface QuestionRendererProps {
   question: Question
@@ -30,6 +31,22 @@ export function QuestionRenderer({
   const { code, type, prompt, required, max_select, options } = question
   const error = errors[code]
 
+  // A1 (Departamento) renders a combined geo widget that also handles A2 (Ciudad)
+  if (code === 'A1') {
+    return (
+      <GeoSelectWidget
+        departmentValue={(answers['A1'] as string) ?? ''}
+        cityValue={(answers['A2'] as string) ?? ''}
+        onDepartmentChange={(v) => onChange('A1', v)}
+        onCityChange={(v) => onChange('A2', v)}
+        departmentError={errors['A1']}
+        cityError={errors['A2']}
+      />
+    )
+  }
+  // A2 is rendered inside the GeoSelectWidget above — skip here to avoid duplication
+  if (code === 'A2') return null
+
   if (type === 'single_choice' && isArrayOptions(options)) {
     return (
       <RadioGroup