# UniClienteUniPunto - Estructura Refactorizada

## 📁 Estructura del Proyecto

```
UniClienteUniPunto/
├── hooks/
│   ├── useContratoUniClienteUniPunto.ts  # Hook principal para lógica de negocio del contrato
│   ├── useCupsElectrico.ts               # Hook para lógica de CUPS Eléctrico
│   └── useCupsGas.ts                     # Hook para lógica de CUPS Gas
├── components/
│   ├── ClienteSection.tsx                # Componente para datos del cliente
│   ├── DatosComerciales.tsx              # Componente reutilizable para datos comerciales
│   ├── CupsToggleButton.tsx              # Botón para mostrar/ocultar CUPS
│   └── CompletionMessage.tsx             # Mensaje de completitud del formulario
├── utils/
│   └── typeaheadHelpers.ts               # Funciones helper para Typeahead
├── Contrato.tsx                          # Componente principal (refactorizado)
├── CupsElectricSectionUnipunto.tsx       # Sección CUPS Eléctrico (refactorizado)
├── CupsGasSectionUnipunto.tsx            # Sección CUPS Gas (refactorizado)
└── README.md                             # Este archivo
```

## 🎯 Principios SOLID Aplicados

### 1. **Single Responsibility Principle (SRP)**
Cada componente y hook tiene una única responsabilidad:
- `useContratoUniClienteUniPunto`: Gestiona el estado y lógica del contrato principal
- `useCupsElectrico`: Gestiona la lógica específica de CUPS Eléctrico
- `useCupsGas`: Gestiona la lógica específica de CUPS Gas
- `ClienteSection`: Renderiza únicamente la sección de datos del cliente
- `DatosComerciales`: Renderiza únicamente los datos comerciales

### 2. **Open/Closed Principle (OCP)**
Los componentes están abiertos para extensión pero cerrados para modificación:
- Los hooks pueden ser extendidos sin modificar su código base
- Los componentes aceptan props para personalizar su comportamiento

### 3. **Liskov Substitution Principle (LSP)**
Los componentes pueden ser sustituidos por sus variantes sin romper la funcionalidad:
- `CupsElectricSectionUnipunto` y `CupsGasSectionUnipunto` siguen la misma estructura
- Ambos exponen métodos similares (`saveElectricoForm`, `saveGasForm`)

### 4. **Interface Segregation Principle (ISP)**
Las interfaces están segregadas en el archivo `Interfaces.ts`:
- `CupsElectricSectionProps`: Props específicas para CUPS Eléctrico
- `CupsGasSectionProps`: Props específicas para CUPS Gas
- `FormDataElectrico` y `FormDataGas`: Datos específicos de cada tipo

### 5. **Dependency Inversion Principle (DIP)**
Los componentes dependen de abstracciones (interfaces) no de implementaciones concretas:
- Todos los componentes reciben sus dependencias por props
- Los hooks encapsulan la lógica y exponen interfaces claras

## 🔧 Hooks Personalizados

### `useContratoUniClienteUniPunto`
**Responsabilidad**: Gestionar el estado global del contrato y coordinar las secciones.

**Retorna**:
- `data`: Datos del formulario principal
- `errors`: Errores de validación
- `processing`: Estado de procesamiento
- `formHijoElectrico`, `formHijoGas`: Referencias a formularios hijos
- `selectedCliente`: Cliente seleccionado
- `handleClienteChange`: Handler para cambio de cliente
- `handleChangeElectrico`, `handleChangeGas`: Handlers para cambios en CUPS
- `saveContrato`: Función para guardar el contrato
- `isFormValid`: Validación del formulario
- `toggleCupsElectric`, `toggleCupsGas`: Toggle de visibilidad de CUPS

### `useCupsElectrico`
**Responsabilidad**: Gestionar el estado y lógica específica de CUPS Eléctrico.

**Retorna**:
- `formDataElectrico`: Datos del formulario eléctrico
- `setFormDataElectrico`: Setter para actualizar datos
- `localidadesOptions`, `cupsOptions`: Opciones para selects
- `productosFiltrados`, `anexosFiltrados`: Listas filtradas
- `tarifaOptions`: Opciones de tarifas
- `formErrors`, `showErrors`: Estado de errores
- `handleBuscarSipsCups`: Buscar datos en SIPS
- `handleCupsDataChange`: Handler para cambio de CUPS
- `saveElectricoForm`: Validar y guardar formulario

### `useCupsGas`
**Responsabilidad**: Gestionar el estado y lógica específica de CUPS Gas.

**Retorna**: Similar a `useCupsElectrico` pero para Gas.

## 🧩 Componentes Reutilizables

### `ClienteSection`
Renderiza la sección de datos del cliente.

**Props**:
- `documentoFiscal`, `razonSocial`, `fechaPropuesta`, etc.
- `clientesOptions`: Lista de clientes
- `onClienteChange`: Callback para cambio de cliente

### `DatosComerciales`
Componente reutilizable para datos comerciales (usado en Electric y Gas).

**Props**:
- `comercializadora`, `producto`, `anexo`, `tipoprecio`
- Listas de opciones filtradas
- Handlers para cambios

### `CupsToggleButton`
Botón para mostrar/ocultar secciones de CUPS.

**Props**:
- `show`: Estado de visibilidad
- `onToggle`: Callback para toggle
- `type`: 'electric' | 'gas'

### `CompletionMessage`
Mensaje de completitud del formulario (componente presentacional puro).

## 📦 Utilidades

### `typeaheadHelpers.ts`
Funciones helper para trabajar con componentes Typeahead:
- `getSelectedTypeaheadValue`: Obtiene el valor seleccionado para Typeahead

## 🔄 Flujo de Datos

```
Contrato.tsx (Principal)
    ↓
useContratoUniClienteUniPunto (Hook)
    ↓
├── ClienteSection (Componente)
├── CupsElectricSectionUnipunto
│   ├── useCupsElectrico (Hook)
│   └── DatosComerciales (Componente)
└── CupsGasSectionUnipunto
    ├── useCupsGas (Hook)
    └── DatosComerciales (Componente)
```

## 🎨 Beneficios del Refactoring

1. **Mantenibilidad**: Código más fácil de mantener y entender
2. **Reutilización**: Componentes y hooks reutilizables
3. **Testabilidad**: Lógica separada facilita testing
4. **Escalabilidad**: Fácil agregar nuevas funcionalidades
5. **Legibilidad**: Código más limpio y organizado
6. **Separación de Responsabilidades**: Cada pieza tiene un propósito claro

## ✨ Campos Adicionales Agregados

Se han agregado los siguientes campos que estaban en `MultiClienteMultiPunto`:

### Opciones Adicionales (Checkboxes)
1. **GDO** - Garantía de Origen Verde
2. **Permanencia** - Indica si hay permanencia en el contrato
3. **Cambio Titular** - Indica si es un cambio de titular
4. **Cambio Potencia** - Indica si es un cambio de potencia

Estos campos están disponibles tanto en la sección de CUPS Eléctrico como en la de CUPS Gas.

### Botón de Búsqueda de Ventana (Corporate)
Cuando el producto es de tipo **Corporate** (`codigoServicioProducto === 'CO'`), se muestra un botón "Buscar Ventana" en la sección de Fechas que abre el `ModalPrecios` para seleccionar una ventana de precios automática.

**Características**:
- 🔍 Botón con icono de búsqueda
- 📅 Ubicado junto al título "Fechas"
- 🎯 Solo visible para productos Corporate
- ⚡ Disponible en CUPS Eléctrico y Gas

## 📝 Notas de Migración

### Archivos de Backup
Los archivos originales fueron respaldados con extensión `.backup`:
- `Contrato.tsx.backup`
- `CupsElectricSectionUnipunto.tsx.backup`
- `CupsGasSectionUnipunto.tsx.backup`

### Interfaces
Todas las interfaces están centralizadas en:
`resources/js/Pages/Eneon/Contratos/Interfaces/Interfaces.ts`

### Constantes
Las constantes iniciales están en:
`resources/js/Pages/Eneon/Contratos/Interfaces/constants.ts`

## 🚀 Próximos Pasos

1. Implementar tests unitarios para hooks
2. Agregar tests de integración para componentes
3. Documentar props con JSDoc
4. Implementar Storybook para componentes reutilizables
5. Optimizar rendimiento con React.memo donde sea necesario

## 📚 Referencias

- [React Hooks](https://react.dev/reference/react)
- [SOLID Principles](https://en.wikipedia.org/wiki/SOLID)
- [Clean Code](https://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882)