Skip to main content
The insurance configuration system in Seguros NAG uses a type-safe, flexible structure to define different insurance products and their required form fields.

​
Configuration Structure

The segurosConfig object is located in lib/segurosConfig.ts and defines all available insurance types and their field configurations.

​
TypeScript Types

The configuration system uses several TypeScript types to ensure type safety:
lib/segurosConfig.ts
export type CampoBase = {
  name: string;
  label: string;
  required: boolean;
};

export type CampoTextual = CampoBase & {
  type: "text" | "email" | "tel";
};

export type CampoNumber = CampoBase & {
  type: "number";
  min?: number;
  max?: number;
};

export type CampoSelect = CampoBase & {
  type: "select";
  options: string[];
};

export type Campo =
  | CampoTextual
  | CampoNumber
  | CampoSelect;

export type SeguroConfig = {
  titulo: string;
  campos: Campo[];
};

​
Field Types Explained

All field types inherit from CampoBase which provides:
  • name: Unique identifier for the field
  • label: Display label shown to users
  • required: Whether the field must be completed
For text-based inputs with types:
  • text: General text input
  • email: Email address with validation
  • tel: Telephone number input
For numeric inputs with optional constraints:
  • min: Minimum allowed value
  • max: Maximum allowed value
For selection fields with predefined options:
  • options: Array of selectable values

​
Insurance Types

​
Automotor (Auto Insurance)

lib/segurosConfig.ts
automotor: {
  titulo: "Datos del Vehículo",
  campos: [
    {
      name: "cobertura",
      label: "Tipo de Cobertura automotor",
      type: "select",
      required: true,
      options: ["Responsabilidad Civil", "Terceros Completos", "Todo Riesgo"],
    },
    { name: "marca", label: "Marca", type: "text", required: true },
    { name: "modelo", label: "Modelo", type: "text", required: true },
    { 
      name: "anio", 
      label: "Año", 
      type: "number", 
      required: true, 
      min: 1980, 
      max: new Date().getFullYear() 
    },
    {
      name: "uso",
      label: "Uso del vehículo",
      type: "select",
      required: true,
      options: ["particular", "comercial"],
    },
    {
      name: "gnc",
      label: "¿Posee GNC?",
      type: "select",
      required: false,
      options: ["si", "no"],
    },
    { name: "localidad", label: "Localidad", type: "text", required: true },
  ],
}

​
Vida (Life Insurance)

lib/segurosConfig.ts
vida: {
  titulo: "Datos del Seguro de Vida",
  campos: [
    { 
      name: "edad", 
      label: "Edad", 
      type: "number", 
      required: true, 
      min: 18, 
      max: 90 
    },
  ],
}

​
Hogar (Home Insurance)

lib/segurosConfig.ts
hogar: {
  titulo: "Datos del Seguro de Hogar",
  campos: [
    { 
      name: "metros", 
      label: "Metros cuadrados", 
      type: "number", 
      required: true, 
      min: 1 
    },
    {
      name: "Vivienda",
      label: "Tipo de Vivienda",
      type: "select",
      required: true,
      options: [
        "CASAS Y DEPARTAMENTOS EN PLANTA BAJA", 
        "DEPTOS. EN ALTURA Y CASAS EN COUNTRIES Y BARRIOS PRIVADOS"
      ],
    },
    { name: "localidad", label: "Localidad", type: "text", required: true },
  ],
}

​
Responsabilidad Civil (Liability Insurance)

lib/segurosConfig.ts
"responsabilidad civil": {
  titulo: "Datos del Seguro de Responsabilidad Civil",
  campos: [
    { 
      name: "actividad", 
      label: "Actividad a Realizar", 
      type: "text", 
      required: true 
    },
    {
      name: "sumaAsegurada",
      label: "Suma Asegurada",
      min: 100000,
      type: "number",
      required: true,
    },
  ],
}

​
Accidentes Personales (Personal Accident Insurance)

lib/segurosConfig.ts
"accidentes personales": {
  titulo: "Datos del Seguro de Accidentes Personales",
  campos: [ 
    { 
      name: "edad", 
      label: "Edad", 
      type: "number", 
      required: true,
      min: 18, 
      max: 80
    },
    {
      name: "actividad", 
      label: "Actividad Profesional",
      type: "text",
      required: true,
    },
    { 
      name: "sumaAsegurada", 
      label: "Suma Asegurada", 
      type: "number", 
      required: true, 
      min: 3000000, 
      max: 60000000
    },
    { 
      name: "tipo", 
      label: "Tipo de cobertura", 
      type: "select", 
      required: true, 
      options: ["Colectivo", "Individual"] 
    },
    { name: "localidad", label: "Localidad", type: "text", required: true },
    { 
      name: "periodo", 
      label: "Periodo de cobertura", 
      type: "select", 
      required: true, 
      options: ["Periodo corto", "Periodo largo"] 
    },
  ],
}

​
Incendio (Fire Insurance)

lib/segurosConfig.ts
incendio: {
  titulo: "Datos del Seguro de Incendio",
  campos: [
    { 
      name: "metros", 
      label: "Metros cuadrados", 
      type: "number", 
      required: true 
    },
    {
      name: "Tipo de Vivienda",
      label: "Tipo de Vivienda",
      type: "select",
      required: true,
      options: [
        "CASAS Y DEPARTAMENTOS EN PLANTA BAJA", 
        "DEPTOS EN PISOS ALTOS"
      ],
    },
    { name: "localidad", label: "Localidad", type: "text", required: true },
  ],
}

​
Otros (Other Insurance)

lib/segurosConfig.ts
otros: {
  titulo: "otros",
  campos: [
    { 
      name: "detalle", 
      label: "Detalle del seguro", 
      type: "text", 
      required: true
    },
  ],
}

​
Adding New Insurance Types

To add a new insurance type, follow these steps:
1

Define the configuration

Add a new entry to the segurosConfig object:
lib/segurosConfig.ts
export const segurosConfig: Record<string, SeguroConfig> = {
  // ... existing configs
  
  "nuevo-seguro": {
    titulo: "Título del Nuevo Seguro",
    campos: [
      // Define your fields here
    ],
  },
};
2

Add to the form select

Update the select dropdown in app/components/CotizacionForm.tsx:
app/components/CotizacionForm.tsx
<select value={tipoSeguro} onChange={(e) => setTipoSeguro(e.target.value)}>
  <option value="">Seleccionar tipo de seguro</option>
  {/* ... existing options */}
  <option value="nuevo-seguro">Nuevo Seguro</option>
</select>
3

Test validation

The validation system will automatically handle your new fields based on their types. See Form Validation for details.

​
Usage in Components

The configuration is imported and used in the quotation form:
app/components/CotizacionForm.tsx
import { segurosConfig } from "@/lib/segurosConfig";

// Get config for selected insurance type
const config = segurosConfig[tipoSeguro as keyof typeof segurosConfig];

// Render dynamic fields
{config && (
  <>
    <h2>{config.titulo}</h2>
    {config.campos.map((campo) => (
      // Render field based on campo.type
    ))}
  </>
)}

​
Best Practices

Use Descriptive Labels

Labels should be clear and user-friendly. Use terminology that customers understand.

Set Appropriate Constraints

Use min and max values for numeric fields to prevent invalid data entry.

Mark Required Fields

Only set required: true for fields that are absolutely necessary for processing quotes.

Provide Meaningful Options

For select fields, ensure options cover all common cases or include an “Other” option.

Build docs developers (and LLMs) love

Get started for freeTalk to us