Se empieza a manejar Redux en el reporte de Amazon

src/Components/Clientes/Amazon/DTO/DTO2096ItemAutoriza.ts

@@ -0,0 +1,4 @@
+export default interface DTO2096ItemAutoriza {
+    id: number,
+    autoriza: boolean
+}

src/Components/Clientes/Amazon/Interfaces/I2096Detail.ts

@@ -33,4 +33,5 @@ export default interface I2096Detail {
   archivo: string
   fCreacion: string
   estatus: number
+  autorizado: boolean
 }

src/Components/Clientes/Amazon/Interfaces/I2096Header.ts

@@ -1,3 +1,5 @@
+import Detail from './I2096Detail'
+
 export default interface I2096Headers {
   id: number
   commercialInvoiceDate: string
@@ -23,40 +25,3 @@ export default interface I2096Headers {
   max: boolean
   detail: Detail[]
 }
-
-interface Detail {
-  id: number
-  idHeader: number
-  invoiceNumber: string
-  amazonShipmentReferenceId: string
-  trailerId: string
-  itemId: string
-  itemIdType: string
-  itemDescription: string
-  pedimentoDescription: string
-  destinationHTSCode: string
-  validaFraccionOriginal: number
-  fraccionGEMCO: string
-  descripcionGEMCO: string
-  sourceHTSCode: string
-  eccn: string
-  licEx: string
-  countryOfOrigin: string
-  productGroup: string
-  upc: string
-  brand: string
-  model: string
-  itemQuantityUnitOfMeasure: string
-  quantity: number
-  netWeightUnitOfMeasure: string
-  weightValue: string
-  actualUnitCostChargeOrAllowance: string
-  actualUnitCostCurrencyISOCode: string
-  actualUnitCostMonetaryAmount: string
-  totalUnitValueChargeOrAllowance: string
-  totalUnitValueCurrencyISOCode: string
-  totalUnitValueMonetaryAmount: string
-  archivo: string
-  fCreacion: string
-  estatus: number
-}

src/Components/Clientes/Amazon/Reportes/RptAmazonFinishedInvoices.tsx

@@ -15,8 +15,8 @@ import DTO2096PrevioExcel from '../DTO/DTO2096PrevioExcel'
 import { MsgInformativo } from '../../../Utils/Toast/msgInformativo'
 import { RootState } from '../../../../store/store'
 import {
+  initializeInvoice,
   populateInvoices,
-  addInvoice,
   updateInvoice,
 } from '../../../../store/features/Clientes/2096/AmazonInvoices'
 import  RtpAmazonPendingInvoicesDetail  from './RptAmazonPendingInvoicesDetail'
@@ -51,7 +51,7 @@ export default function RptAmazonFinishedInvoices (props: IRptAmazonFinishedInvo
     const loadReport = () => {
       DSAmazon.GetFinishedInvoice()
         .then((response) => {
-          console.log(response.data)
+          dispatch(initializeInvoice([]))
           dispatch(populateInvoices(response.data))
         })
         .catch((e: Error) => {

src/Components/Clientes/Amazon/Reportes/RptAmazonPendingInvoices.tsx

@@ -15,8 +15,8 @@ import DTO2096PrevioExcel from '../DTO/DTO2096PrevioExcel'
 import { MsgInformativo } from '../../../Utils/Toast/msgInformativo'
 import { RootState } from '../../../../store/store'
 import {
+  initializeInvoice,
   populateInvoices,
-  addInvoice,
   updateInvoice,
   deleteInvoice
 } from '../../../../store/features/Clientes/2096/AmazonInvoices'
@@ -52,7 +52,7 @@ export default function RtpAmazonPendingInvoices(
   const loadReport = () => {
     DSAmazon.GetPendingInvoice()
       .then((response) => {
-        console.log(response.data)
+        dispatch(initializeInvoice([]))
         dispatch(populateInvoices(response.data))
       })
       .catch((e: Error) => {
@@ -497,6 +497,15 @@ export default function RtpAmazonPendingInvoices(
                                       >
                                         Total value
                                       </th>
+                                      <th
+                                        style={{
+                                          width: '70px',
+                                          backgroundColor: '#D3E0EA',
+                                          color: '#346288'
+                                        }}
+                                      >
+                                        Autorizado
+                                      </th>
                                     </tr>
                                   </thead>
                                   <tbody>

src/Components/Clientes/Amazon/Reportes/RptAmazonPendingInvoicesDetail.tsx

@@ -1,30 +1,149 @@
 import * as React from 'react'
+import { useState } from 'react'
+import {
+  Alert,
+  Button,
+  Col,
+  FormCheck,
+  Modal,
+  Row
+} from 'react-bootstrap'
 import { IconContext } from 'react-icons'
 import { FaCheckCircle, FaQuestionCircle } from 'react-icons/fa'
 import { ImCross } from 'react-icons/im'
+import { MsgInformativo } from '../../../Utils/Toast/msgInformativo'
 import { ComboDescripcion } from '../Components/ComboSelect/ComboDescripcion'
 import { ComboFraccion } from '../Components/ComboSelect/ComboFraccion'
 import { TextBoxFraccion } from '../Components/TextBox/TextBoxFraccion'
+import DTO2096ItemAutoriza from '../DTO/DTO2096ItemAutoriza'
 import I2096Detail from '../Interfaces/I2096Detail'
+import I2096Headers from '../Interfaces/I2096Header'
+import DSAmazon from '../Services/Amazon.Services'
+// Redux
+import { RootState } from '../../../../store/store'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  initializeInvoice,
+  populateInvoices,
+  updateInvoice,
+  deleteInvoice
+} from '../../../../store/features/Clientes/2096/AmazonInvoices'
+
+
 
 export interface IRtpAmazonPendingInvoivesDetailProps {
   IDMaster: number
   detail: I2096Detail
-  Habilitado : boolean
+  Habilitado: boolean
 }
 
 export default function RtpAmazonPendingInvoivesDetail(
   props: IRtpAmazonPendingInvoivesDetailProps
 ) {
+  const dispatch = useDispatch()
+  const mInvoices = useSelector(
+    (state: RootState) => state.AmazonInvoices.Invoice
+  )
+  const [ShowModal, setShowModal] = useState(false)
+  const [header, setHeader] = useState('')
+  const [show, setShowMsg] = useState(false)
+  const [msg, setMsg] = useState('')
+  const msgColor = 'primary'
   const openLink = (item: string) => {
     window.open('https://www.amazon.com/dp/' + item)
   }
 
-  
   const parentFunction = (fraccion: string) => {
     alert('update')
   }
 
+  const editArray = (id: number, val: boolean) => {
+    /* const newData = mInvoices;
+    for (const invoice of newData) {
+      for (const det of invoice.detail) {
+          det.autorizado=true
+      }
+    } */
+
+     const newData = mInvoices.map((invoice) => {
+      if (invoice.id === props.IDMaster) {
+        return {
+          ...invoice,
+          detail: [...invoice.detail]
+        }
+      } else {
+        return invoice
+      }
+    });
+
+      dispatch(initializeInvoice([]))
+    dispatch(populateInvoices(newData))   
+  /*   const Invoice = mInvoices
+      .filter((el) => el.id === props.IDMaster)
+      .map((el) => {
+        return el
+      })
+    const newData = Invoice[0].detail.map((el) => {
+      if (el.id === id) {
+        return {
+          ...el,
+          autorizado: true
+        }
+      }
+      return el
+    })
+    const updatedInvoice: I2096Headers[] = [{
+      id: props.IDMaster,
+      commercialInvoiceDate: Invoice[0].commercialInvoiceDate,
+      invoiceNumber: Invoice[0].invoiceNumber,
+      trailerNumber: Invoice[0].trailerNumber,
+      trailerId: Invoice[0].trailerId,
+      porOfLoading: Invoice[0].porOfLoading,
+      portOfEntry: Invoice[0].portOfEntry,
+      paymentsTerms: Invoice[0].paymentsTerms,
+      incoterms: Invoice[0].incoterms,
+      hawb: Invoice[0].hawb,
+      totalInvoiceQuantityUnitOfMeasure:
+        Invoice[0].totalInvoiceQuantityUnitOfMeasure,
+      totalInvoiceQuantity: Invoice[0].totalInvoiceQuantity,
+      totalInvoiceWeightUnitOfMeasure:
+        Invoice[0].totalInvoiceWeightUnitOfMeasure,
+      totalInvoiceWeight: Invoice[0].totalInvoiceWeight,
+      totalInvoiceValueChargeOrAllowance:
+        Invoice[0].totalInvoiceValueChargeOrAllowance,
+      totalInvoiceValueCurrencyISOCode:
+        Invoice[0].totalInvoiceValueCurrencyISOCode,
+      totalInvoiceValueMonetaryAmount:
+        Invoice[0].totalInvoiceValueMonetaryAmount,
+      footNote: Invoice[0].footNote,
+      archivo: Invoice[0].archivo,
+      fCreacion: Invoice[0].fCreacion,
+      estatus: Invoice[0].estatus,
+      max: true,
+      detail: []
+    }]
+    dispatch(updateInvoice)
+    console.log(JSON.stringify(updateInvoice)) */
+  }
+
+  const autoriceItem = (id: number) => {
+    const data: DTO2096ItemAutoriza = {
+      id: id,
+      autoriza: !props.detail.autorizado
+    }
+    DSAmazon.Set$Autorizado(data)
+      .then((response) => {
+        console.log(JSON.stringify(response.data))
+        editArray(id, !props.detail.autorizado)
+      })
+      .catch((e: Error) => {
+/*         setHeader('Error')
+        setMsg('Ocurrio un error')
+        setShowMsg(true)
+        return */
+      })
+  }
+
   return (
     <>
       <tr>
@@ -73,7 +192,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         </td>
         <td
           style={{
-            textAlign: 'center', 
+            textAlign: 'center'
           }}
           className="DetailData"
         >
@@ -108,7 +227,7 @@ export default function RtpAmazonPendingInvoivesDetail(
         </td>
         <td
           style={{
-            textAlign: 'center',
+            textAlign: 'center'
           }}
           className="DetailData"
         >
@@ -118,7 +237,6 @@ export default function RtpAmazonPendingInvoivesDetail(
             FraccionOriginal={props.detail.destinationHTSCode}
             parentFunction={parentFunction}
             Habilitado={props.Habilitado}
-
           />
         </td>
         <td
@@ -225,7 +343,78 @@ export default function RtpAmazonPendingInvoivesDetail(
         >
           {props.detail.totalUnitValueMonetaryAmount}
         </td>
+        <td
+          style={{
+            textAlign: 'center',
+            paddingLeft: '30px'
+          }}
+          className="DetailData"
+        >
+          <FormCheck
+            id="switchEnabled"
+            type="switch"
+            checked={props.detail.autorizado}
+            onChange={() => {
+              setShowModal(!props.detail.autorizado)
+            }}
+            className="mb-8"
+            label=""
+          />
+        </td>
       </tr>
+      <Modal
+        show={ShowModal}
+        onHide={() => {
+          setShowModal(false)
+        }}
+        size={'sm'}
+        dialogClassName={'modal-50w'}
+      >
+        <Modal.Body>
+          <div style={{ height: '150px' }}>
+            <Row style={{ paddingTop: '15px' }}>
+              <Col xs={1}></Col>
+              <Col xs={10}>
+                <Alert key={'danger'} variant={'danger'}>
+                  ¿Esta seguro que esta fraccion ya la autorizo Amazon?
+                </Alert>
+              </Col>
+              <Col xs={1}></Col>
+            </Row>
+            <Row>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setShowModal(false)
+                  }}
+                >
+                  &nbsp;&nbsp;No&nbsp;&nbsp;
+                </Button>
+              </Col>
+              <Col xs={6} style={{ textAlign: 'center' }}>
+                <Button
+                  variant="danger"
+                  onClick={() => {
+                    autoriceItem(props.detail.id)
+                  }}
+                >
+                  &nbsp;&nbsp;Si&nbsp;&nbsp;
+                </Button>
+              </Col>
+            </Row>
+          </div>
+        </Modal.Body>
+      </Modal>
+      <MsgInformativo
+        show={show}
+        msg={msg}
+        header={header}
+        msgColor={msgColor}
+        closeToast={() => {
+          setShowMsg(false)
+        }}
+      />
     </>
   )
 }

src/Components/Clientes/Amazon/Services/Amazon.Services.ts

@@ -6,6 +6,7 @@ import I2096Detail from '../Interfaces/I2096Detail'
 import DTO2096Descripcion from '../DTO/DTO2096Descripcion'
 import I2096NoParte from '../Interfaces/I2096NoParte'
 import I2096PaisClave from '../Interfaces/I2096PaisClave'
+import DTO2096ItemAutoriza from '../DTO/DTO2096ItemAutoriza'
 
 class AmazonDataService {
   GetPendingInvoice() {
@@ -23,6 +24,9 @@ class AmazonDataService {
   SetDescripcion(data: DTO2096Descripcion) {
     return http.post<I2096Detail>(`/AmazonInvoice/C2096DescripcionSet`, data)
   }
+  Set$Autorizado(data: DTO2096ItemAutoriza) {
+    return http.post<DTO2096ItemAutoriza>(`/AmazonInvoice/C2096ItemAutorizado`, data)
+  }
   TerminaFactura(id: number) {
     return http.get<Boolean>(`/AmazonInvoice/TerminaFactura?id=${id}`)
   }

src/store/features/Clientes/2096/AmazonInvoices.ts

@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import I2096Headers from '../../../../Components/Clientes/Amazon/Interfaces/I2096Header';
+import I2096Headers from '../../../../Components/Clientes/Amazon/Interfaces/I2096Header'
 const Invoice: I2096Headers[] = []
 const initialState = { Invoice }
 
@@ -7,36 +7,44 @@ export const AmazonInvoicesSlice = createSlice({
   name: 'AmazonInvoices',
   initialState: initialState,
   reducers: {
-    populateInvoices : (state, action: PayloadAction<I2096Headers[]>) => {
-    action.payload.forEach(newItem => {
-      var Existe = state.Invoice.find(function(onMemoryItem) {
-          return onMemoryItem.id === newItem.id;
-        });
-       if (!Existe) state.Invoice.push(newItem)
-    })
+    initializeInvoice: (state, action: PayloadAction<I2096Headers[]>) => {
+      state.Invoice = action.payload
     },
-    addInvoice : (state, action: PayloadAction<I2096Headers>) => {
-      var Existe = state.Invoice.find(function(item) {
-        return item.id === action.payload.id;
-      });
-     if (!Existe) state.Invoice.push(action.payload)
+    populateInvoices: (state, action: PayloadAction<I2096Headers[]>) => {
+      action.payload.forEach((newItem) => {
+        var Existe = state.Invoice.find(function (onMemoryItem) {
+          return onMemoryItem.id === newItem.id
+        })
+        if (!Existe) state.Invoice.push(newItem)
+      })
     },
-    updateInvoice : (state, action: PayloadAction<I2096Headers>) => {
-      const i = state.Invoice.findIndex(_element => _element.id === action.payload.id);
-      if (i > -1) state.Invoice[i] = action.payload;
-      else state.Invoice.push(action.payload);
+    addInvoice: (state, action: PayloadAction<I2096Headers>) => {
+      var Existe = state.Invoice.find(function (item) {
+        return item.id === action.payload.id
+      })
+      if (!Existe) state.Invoice.push(action.payload)
     },
-    updateInvoiceDetail : (state, action: PayloadAction<I2096Headers>) => {
-      const i = state.Invoice.findIndex(_element => _element.id === action.payload.id);
-      if (i > -1) state.Invoice[i] = action.payload;
-      else state.Invoice.push(action.payload);
+    updateInvoice: (state, action: PayloadAction<I2096Headers>) => {
+      const i = state.Invoice.findIndex(
+        (_element) => _element.id === action.payload.id
+      )
+      if (i > -1) state.Invoice[i] = action.payload
+      else state.Invoice.push(action.payload)
     },
-    deleteInvoice : (state, action: PayloadAction<number>) => {
-      const newArr = state.Invoice.filter(data => data.id != action.payload);
-      state.Invoice=newArr
+    updateInvoiceDetail: (state, action: PayloadAction<I2096Headers>) => {
+      const i = state.Invoice.findIndex(
+        (_element) => _element.id === action.payload.id
+      )
+      if (i > -1) state.Invoice[i] = action.payload
+      else state.Invoice.push(action.payload)
     },
-  },
+    deleteInvoice: (state, action: PayloadAction<number>) => {
+      const newArr = state.Invoice.filter((data) => data.id != action.payload)
+      state.Invoice = newArr
+    }
+  }
 })
 
-export const { addInvoice, populateInvoices, updateInvoice, deleteInvoice } = AmazonInvoicesSlice.actions;
-export default AmazonInvoicesSlice.reducer;
+export const { initializeInvoice, addInvoice, populateInvoices, updateInvoice, deleteInvoice } =
+  AmazonInvoicesSlice.actions
+export default AmazonInvoicesSlice.reducer