Creacion del modal para capturar el motivo de la solicitud

src/Components/Corresponsales/SolicitudReapertura/SolicitudReapertura.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from "react"
+import { Button, Col, Form, FormLabel, Row } from "react-bootstrap"
+import CTrafDataService from "../../../Services/Corresponsalias/Corresponsales.Trafico.Services"
+import { MsgInformativo } from "../../Utils/Toast/msgInformativo"
+import { ICorresponsalTraficoSolicitudReapertura } from "../../../Interfaces/Corresponsales/ICorresponsalTraficoSolicitudReapertura"
+
+interface IProps{
+    idTrafico: number,
+    idUsuario: number
+}
+export const SolicitudReapertura:React.FC<IProps> = (props) => {
+    const [Motivo, setMotivo] = useState('')
+    const [showMsg, setShowMsg] = useState(false)
+    const [msg, setMsg] = useState('')
+    const [header, setHeader] = useState('')
+
+    const SolicitarReapertura = (motivo: string) => {
+        if(!motivo){
+            setHeader('Error');
+            setMsg('Favor de capturar una razon válida.')
+            setShowMsg(true)
+            return;
+        }
+        if(motivo.length < 30){
+            setHeader('Error');
+            setMsg('La razón de su solicitud debe contener al menos 30 caracteres')
+            setShowMsg(true)
+            return;
+        }
+        var solicitud: ICorresponsalTraficoSolicitudReapertura = {
+            id: 0,
+            idTrafico: props.idTrafico,
+            idUsuarioSolicita: props.idUsuario,
+            fechaSolicita: "",
+            motivoSolicita: Motivo,
+            idUsuarioAutoriza: 0,
+            fechaAutoriza: "",
+            motivoRechazo: "",
+            estado: 1
+        }
+        CTrafDataService.AppendSolicitudReapertura(solicitud)
+        .then((resp) => {})
+        .catch(() => {
+            setHeader('Error');
+            setMsg('Ocurrió un error. Favor de intentar nuevamente')
+            setShowMsg(true)
+            return;
+        })
+    }
+    return(
+        <>
+            <h3>Solicitud de Reapertura de Cuenta</h3>
+            <hr/>
+            <Row>
+            <Col xs={12}>
+            <FormLabel style={{width:'100%'}}>
+                <Form.Control
+                    as="textarea"
+                    rows={5} 
+                    onChange={(e) => setMotivo(e.target?.value)}
+                    placeholder='ingrese el motivo de la solicitud'
+                />
+            </FormLabel>
+            </Col>
+            </Row>
+            <Row className='justify-content-end'>
+            <Col xs={2} style={{textAlign:'end'}}>
+                <Button variant='primary' onClick={() => SolicitarReapertura(Motivo)}>
+                Guardar
+                </Button>
+            </Col>
+            </Row>
+            <MsgInformativo
+                show={showMsg}
+                msg={msg}
+                header={header}
+                msgColor={'primary'}
+                closeToast={() => {
+                    setShowMsg(false)
+                }}
+            />
+        </>
+    )
+}

src/Components/Corresponsales/TraficoCorresponsales.tsx

@@ -129,6 +129,7 @@ import { populatePedimentos } from '../../store/features/Corresponsales/Correspo
 import { populateRectificaciones } from '../../store/features/Corresponsales/CorresponsalesPedimentosRectificacionesSlice'
 import { NuevaRectificacion } from './Rectificaciones/NuevaRectificacion'
 import DTORectificacionHistorico from '../../DTO/Corresponsales/DTORectificacionHistorico'
+import { SolicitudReapertura } from './SolicitudReapertura/SolicitudReapertura'
 
 interface IProps {
   IDTrafico: number
@@ -1430,6 +1431,11 @@ export default function TraficoCorresponsales (props:IProps) {
     })
   }
 
+  const solicitarReapertura = () => {
+    setLoadComponent(15)
+    setShowModal(true)
+  }
+
   const GetClientesZip = () => {
     FileManagerServices.GetClientesZip(IDTrafico)
     .then(response => {
@@ -4167,10 +4173,11 @@ export default function TraficoCorresponsales (props:IProps) {
                       </Button>
                       <Button 
                         variant='primary'
-                        onClick={cerrarTrafico}
+                        onClick={
-                        disabled={Proceso === 4}
+                          Proceso === 4 ? solicitarReapertura : cerrarTrafico
+                        }
                       >
-                        Cerrar Cuenta
+                        {Proceso === 4 ? 'Habilitar Cuenta' : 'Cerrar Cuenta'}
                       </Button>                      
                     </Col>
                   </Row>
@@ -4297,6 +4304,11 @@ export default function TraficoCorresponsales (props:IProps) {
               />
             </div>
           ) : null}
+          {LoadComponent===15 ? (
+            <div style={{ height: '280px', overflowX: 'hidden' }}>
+              <SolicitudReapertura idTrafico={IDTrafico} idUsuario={UserId}></SolicitudReapertura>
+            </div>
+          ) : null}
         </Modal.Body>
       </Modal>
       <MsgInformativo

src/Interfaces/Corresponsales/ICorresponsalTraficoSolicitudReapertura.ts

@@ -0,0 +1,11 @@
+export interface ICorresponsalTraficoSolicitudReapertura{
+    id:number,
+    idTrafico: number,
+    idUsuarioSolicita: number,
+    fechaSolicita: string,
+    motivoSolicita: string,
+    idUsuarioAutoriza: number,
+    fechaAutoriza: string, 
+    motivoRechazo: string,
+    estado: number
+}

src/Services/Corresponsalias/Corresponsales.Trafico.Services.ts

@@ -7,6 +7,7 @@ import IRespuesta from "../../Interfaces/IRespuesta";
 import ICorresponsalRectificacionHistorico from "../../Interfaces/Corresponsales/ICorresponsalRectificacionHistorico";
 import DTORectificacionHistorico from "../../DTO/Corresponsales/DTORectificacionHistorico";
 import IReporteOperacionesNewell from "../../Interfaces/ReportesClientes/IReporteOperacionesNewell";
+import { ICorresponsalTraficoSolicitudReapertura } from "../../Interfaces/Corresponsales/ICorresponsalTraficoSolicitudReapertura";
 
 class Corresponsales_Trafico_DataService {
   GetAll(id: number) {
@@ -45,5 +46,8 @@ class Corresponsales_Trafico_DataService {
   AppendFacturasContenedoresAlen(idTrafico:number, fileId:number){
     return http.post(`/Corresponsalias/Traficos/Append/LayoutAlen?idTrafico=${idTrafico}&fileId=${fileId}`);
   }
+  AppendSolicitudReapertura(solicitud: ICorresponsalTraficoSolicitudReapertura){
+    return http.post<ICorresponsalTraficoSolicitudReapertura>(`/Corresponsalias/Traficos/Solicitud/Append`, solicitud)
+  }
 }
 export default new Corresponsales_Trafico_DataService();