|
|
@ -1,12 +1,17 @@ |
|
|
|
import * as React from 'react' |
|
|
|
import * as React from 'react' |
|
|
|
import { useState } from 'react' |
|
|
|
import { useEffect, useState } from 'react' |
|
|
|
import { |
|
|
|
import { |
|
|
|
Alert, |
|
|
|
Alert, |
|
|
|
Button, |
|
|
|
Button, |
|
|
|
Col, |
|
|
|
Col, |
|
|
|
|
|
|
|
Form, |
|
|
|
FormCheck, |
|
|
|
FormCheck, |
|
|
|
Modal, |
|
|
|
Modal, |
|
|
|
Row |
|
|
|
Overlay, |
|
|
|
|
|
|
|
OverlayTrigger, |
|
|
|
|
|
|
|
Popover, |
|
|
|
|
|
|
|
Row, |
|
|
|
|
|
|
|
Tooltip |
|
|
|
} from 'react-bootstrap' |
|
|
|
} from 'react-bootstrap' |
|
|
|
import { IconContext } from 'react-icons' |
|
|
|
import { IconContext } from 'react-icons' |
|
|
|
import { FaCheckCircle, FaQuestionCircle } from 'react-icons/fa' |
|
|
|
import { FaCheckCircle, FaQuestionCircle } from 'react-icons/fa' |
|
|
@ -28,8 +33,9 @@ import { |
|
|
|
updateInvoice, |
|
|
|
updateInvoice, |
|
|
|
deleteInvoice |
|
|
|
deleteInvoice |
|
|
|
} from '../../../../store/features/Clientes/2096/AmazonInvoices' |
|
|
|
} from '../../../../store/features/Clientes/2096/AmazonInvoices' |
|
|
|
|
|
|
|
import * as CurrencyFormat from 'react-currency-format' |
|
|
|
|
|
|
|
import { AiOutlineFileSearch } from 'react-icons/ai' |
|
|
|
|
|
|
|
import { BsFillChatLeftDotsFill, BsFillChatRightTextFill } from 'react-icons/bs' |
|
|
|
|
|
|
|
|
|
|
|
export interface IRtpAmazonPendingInvoivesDetailProps { |
|
|
|
export interface IRtpAmazonPendingInvoivesDetailProps { |
|
|
|
IDMaster: number |
|
|
|
IDMaster: number |
|
|
@ -45,105 +51,111 @@ export default function RtpAmazonPendingInvoivesDetail( |
|
|
|
(state: RootState) => state.AmazonInvoices.Invoice |
|
|
|
(state: RootState) => state.AmazonInvoices.Invoice |
|
|
|
) |
|
|
|
) |
|
|
|
const [ShowModal, setShowModal] = useState(false) |
|
|
|
const [ShowModal, setShowModal] = useState(false) |
|
|
|
|
|
|
|
const [EstatusSwith, setEstatusSwitch] = useState(props.detail.autorizado) |
|
|
|
const [header, setHeader] = useState('') |
|
|
|
const [header, setHeader] = useState('') |
|
|
|
const [show, setShowMsg] = useState(false) |
|
|
|
const [show, setShowMsg] = useState(false) |
|
|
|
|
|
|
|
const [Show, setShow] = useState(false) |
|
|
|
const [msg, setMsg] = useState('') |
|
|
|
const [msg, setMsg] = useState('') |
|
|
|
|
|
|
|
const [RequerimientoNormativo, setRequerimientoNormativo] = useState('') |
|
|
|
|
|
|
|
const [Comentarios, setComentarios] = useState('') |
|
|
|
const msgColor = 'primary' |
|
|
|
const msgColor = 'primary' |
|
|
|
const openLink = (item: string) => { |
|
|
|
const openLink = (item: string) => { |
|
|
|
window.open('https://www.amazon.com/dp/' + item) |
|
|
|
window.open('https://www.amazon.com/dp/' + item) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const target = React.useRef(null); |
|
|
|
|
|
|
|
|
|
|
|
const parentFunction = (fraccion: string) => { |
|
|
|
const parentFunction = (fraccion: string) => { |
|
|
|
alert('update') |
|
|
|
alert('update') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const editArray = (id: number, val: boolean) => { |
|
|
|
const UpdateInfo = (Invoice: I2096Headers, Detail: I2096Detail[]) => { |
|
|
|
/* const newData = mInvoices; |
|
|
|
const updatedInvoice: I2096Headers = { |
|
|
|
for (const invoice of newData) { |
|
|
|
id: props.IDMaster, |
|
|
|
for (const det of invoice.detail) { |
|
|
|
commercialInvoiceDate: Invoice.commercialInvoiceDate, |
|
|
|
det.autorizado=true |
|
|
|
invoiceNumber: Invoice.invoiceNumber, |
|
|
|
} |
|
|
|
trailerNumber: Invoice.trailerNumber, |
|
|
|
} */ |
|
|
|
trailerId: Invoice.trailerId, |
|
|
|
|
|
|
|
porOfLoading: Invoice.porOfLoading, |
|
|
|
const newData = mInvoices.map((invoice) => { |
|
|
|
portOfEntry: Invoice.portOfEntry, |
|
|
|
if (invoice.id === props.IDMaster) { |
|
|
|
paymentsTerms: Invoice.paymentsTerms, |
|
|
|
return { |
|
|
|
incoterms: Invoice.incoterms, |
|
|
|
...invoice, |
|
|
|
hawb: Invoice.hawb, |
|
|
|
detail: [...invoice.detail] |
|
|
|
totalInvoiceQuantityUnitOfMeasure: |
|
|
|
|
|
|
|
Invoice.totalInvoiceQuantityUnitOfMeasure, |
|
|
|
|
|
|
|
totalInvoiceQuantity: Invoice.totalInvoiceQuantity, |
|
|
|
|
|
|
|
totalInvoiceWeightUnitOfMeasure: Invoice.totalInvoiceWeightUnitOfMeasure, |
|
|
|
|
|
|
|
totalInvoiceWeight: Invoice.totalInvoiceWeight, |
|
|
|
|
|
|
|
totalInvoiceValueChargeOrAllowance: |
|
|
|
|
|
|
|
Invoice.totalInvoiceValueChargeOrAllowance, |
|
|
|
|
|
|
|
totalInvoiceValueCurrencyISOCode: |
|
|
|
|
|
|
|
Invoice.totalInvoiceValueCurrencyISOCode, |
|
|
|
|
|
|
|
totalInvoiceValueMonetaryAmount: Invoice.totalInvoiceValueMonetaryAmount, |
|
|
|
|
|
|
|
footNote: Invoice.footNote, |
|
|
|
|
|
|
|
archivo: Invoice.archivo, |
|
|
|
|
|
|
|
fCreacion: Invoice.fCreacion, |
|
|
|
|
|
|
|
estatus: Invoice.estatus, |
|
|
|
|
|
|
|
max: true, |
|
|
|
|
|
|
|
detail: Detail |
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
dispatch(updateInvoice(updatedInvoice)) |
|
|
|
return invoice |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
dispatch(initializeInvoice([])) |
|
|
|
const editArray = (id: number, valor: boolean) => { |
|
|
|
dispatch(populateInvoices(newData))
|
|
|
|
const Invoice = mInvoices |
|
|
|
/* const Invoice = mInvoices |
|
|
|
|
|
|
|
.filter((el) => el.id === props.IDMaster) |
|
|
|
.filter((el) => el.id === props.IDMaster) |
|
|
|
.map((el) => { |
|
|
|
.map((el) => { |
|
|
|
return el |
|
|
|
return el |
|
|
|
}) |
|
|
|
}) |
|
|
|
const newData = Invoice[0].detail.map((el) => { |
|
|
|
const newDetail = Invoice[0].detail.map((el) => { |
|
|
|
if (el.id === id) { |
|
|
|
if (el.id === id) { |
|
|
|
return { |
|
|
|
return { |
|
|
|
...el, |
|
|
|
...el, |
|
|
|
autorizado: true |
|
|
|
autorizado: valor |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
return el |
|
|
|
return el |
|
|
|
}) |
|
|
|
}) |
|
|
|
const updatedInvoice: I2096Headers[] = [{ |
|
|
|
UpdateInfo(Invoice[0], newDetail) |
|
|
|
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 autoriceItem = (id: number) => { |
|
|
|
|
|
|
|
if (RequerimientoNormativo.length === 0 && EstatusSwith) { |
|
|
|
|
|
|
|
setHeader('Error') |
|
|
|
|
|
|
|
setMsg( |
|
|
|
|
|
|
|
'Antes de poder guardar la informacion es necesario que proporcione el reparto normativo' |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
setShowMsg(true) |
|
|
|
|
|
|
|
return |
|
|
|
|
|
|
|
} |
|
|
|
const data: DTO2096ItemAutoriza = { |
|
|
|
const data: DTO2096ItemAutoriza = { |
|
|
|
id: id, |
|
|
|
id: id, |
|
|
|
autoriza: !props.detail.autorizado |
|
|
|
autorizado: !props.detail.autorizado, |
|
|
|
|
|
|
|
requerimientoNormativo: RequerimientoNormativo, |
|
|
|
|
|
|
|
comentarios: Comentarios |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
DSAmazon.Set$Autorizado(data) |
|
|
|
DSAmazon.Set$Autorizado(data) |
|
|
|
.then((response) => { |
|
|
|
.then((response) => { |
|
|
|
console.log(JSON.stringify(response.data)) |
|
|
|
|
|
|
|
editArray(id, !props.detail.autorizado) |
|
|
|
editArray(id, !props.detail.autorizado) |
|
|
|
|
|
|
|
setShowModal(false) |
|
|
|
}) |
|
|
|
}) |
|
|
|
.catch((e: Error) => { |
|
|
|
.catch((e: Error) => {}) |
|
|
|
/* setHeader('Error') |
|
|
|
|
|
|
|
setMsg('Ocurrio un error') |
|
|
|
|
|
|
|
setShowMsg(true) |
|
|
|
|
|
|
|
return */ |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
if (EstatusSwith && !props.detail.fraccionGEMCO) autoriceItem(props.detail.id) |
|
|
|
|
|
|
|
}, [EstatusSwith]) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const popover = ( |
|
|
|
|
|
|
|
<Popover id="popover-basic"> |
|
|
|
|
|
|
|
<Popover.Header as="h3">Popover right</Popover.Header> |
|
|
|
|
|
|
|
<Popover.Body> |
|
|
|
|
|
|
|
And here's some <strong>amazing</strong> content. It's very engaging. |
|
|
|
|
|
|
|
right? |
|
|
|
|
|
|
|
</Popover.Body> |
|
|
|
|
|
|
|
</Popover> |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<> |
|
|
|
<tr> |
|
|
|
<tr> |
|
|
@ -245,10 +257,20 @@ export default function RtpAmazonPendingInvoivesDetail( |
|
|
|
}} |
|
|
|
}} |
|
|
|
className="DetailData" |
|
|
|
className="DetailData" |
|
|
|
> |
|
|
|
> |
|
|
|
<TextBoxFraccion |
|
|
|
<CurrencyFormat |
|
|
|
Fraccion={ |
|
|
|
value={props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : ''} |
|
|
|
props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : '' |
|
|
|
disabled={true} |
|
|
|
} |
|
|
|
format={'######## ##'} |
|
|
|
|
|
|
|
displayType={'input'} |
|
|
|
|
|
|
|
style={{ |
|
|
|
|
|
|
|
fontSize: '18px', |
|
|
|
|
|
|
|
backgroundColor: '#F1EEF9', |
|
|
|
|
|
|
|
border: '2px solid #5923F6', |
|
|
|
|
|
|
|
color: '#5923F6', |
|
|
|
|
|
|
|
width: '115px', |
|
|
|
|
|
|
|
textAlign: 'right', |
|
|
|
|
|
|
|
borderRadius: '10px' |
|
|
|
|
|
|
|
}} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</td> |
|
|
|
</td> |
|
|
|
<td |
|
|
|
<td |
|
|
@ -258,6 +280,7 @@ export default function RtpAmazonPendingInvoivesDetail( |
|
|
|
className="DetailData" |
|
|
|
className="DetailData" |
|
|
|
> |
|
|
|
> |
|
|
|
<ComboDescripcion |
|
|
|
<ComboDescripcion |
|
|
|
|
|
|
|
IDInvoice={props.IDMaster} |
|
|
|
IDDetail={props.detail.id} |
|
|
|
IDDetail={props.detail.id} |
|
|
|
DescripcionOriginal={props.detail.pedimentoDescription} |
|
|
|
DescripcionOriginal={props.detail.pedimentoDescription} |
|
|
|
Habilitado={props.Habilitado} |
|
|
|
Habilitado={props.Habilitado} |
|
|
@ -351,17 +374,65 @@ export default function RtpAmazonPendingInvoivesDetail( |
|
|
|
className="DetailData" |
|
|
|
className="DetailData" |
|
|
|
> |
|
|
|
> |
|
|
|
<FormCheck |
|
|
|
<FormCheck |
|
|
|
|
|
|
|
className="form-check form-switch form-check-lg" |
|
|
|
id="switchEnabled" |
|
|
|
id="switchEnabled" |
|
|
|
type="switch" |
|
|
|
type="switch" |
|
|
|
checked={props.detail.autorizado} |
|
|
|
disabled={ |
|
|
|
|
|
|
|
((!props.detail.autorizado && |
|
|
|
|
|
|
|
!props.detail.fraccionGEMCO) || (props.detail.validaFraccionOriginal===1 && props.detail.autorizado===true)) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
checked={EstatusSwith} |
|
|
|
onChange={() => { |
|
|
|
onChange={() => { |
|
|
|
setShowModal(!props.detail.autorizado) |
|
|
|
setEstatusSwitch(!EstatusSwith) |
|
|
|
|
|
|
|
setShowModal(!EstatusSwith) |
|
|
|
}} |
|
|
|
}} |
|
|
|
className="mb-8" |
|
|
|
|
|
|
|
label="" |
|
|
|
label="" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</td> |
|
|
|
</td> |
|
|
|
|
|
|
|
<td style={{visibility : props.detail.validaFraccionOriginal!==0 ? 'hidden' : 'visible'}}> <OverlayTrigger |
|
|
|
|
|
|
|
placement="bottom" |
|
|
|
|
|
|
|
overlay={<Tooltip id="button-tooltip-2">{RequerimientoNormativo}</Tooltip>} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{({ ref, ...triggerHandler }) => ( |
|
|
|
|
|
|
|
<Button |
|
|
|
|
|
|
|
variant="light" |
|
|
|
|
|
|
|
{...triggerHandler} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<IconContext.Provider |
|
|
|
|
|
|
|
value={{ |
|
|
|
|
|
|
|
color: 'blue', |
|
|
|
|
|
|
|
size: '25px' |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<AiOutlineFileSearch /> |
|
|
|
|
|
|
|
</IconContext.Provider> |
|
|
|
|
|
|
|
<span className="ms-1"></span> |
|
|
|
|
|
|
|
</Button> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</OverlayTrigger></td> |
|
|
|
|
|
|
|
<td style={{visibility : props.detail.validaFraccionOriginal!==0 ? 'hidden' : 'visible'}}> <OverlayTrigger |
|
|
|
|
|
|
|
placement="bottom" |
|
|
|
|
|
|
|
overlay={<Tooltip id="button-tooltip-2">{Comentarios}</Tooltip>} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{({ ref, ...triggerHandler }) => ( |
|
|
|
|
|
|
|
<Button |
|
|
|
|
|
|
|
variant="light" |
|
|
|
|
|
|
|
{...triggerHandler} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<IconContext.Provider |
|
|
|
|
|
|
|
value={{ |
|
|
|
|
|
|
|
color: 'green', |
|
|
|
|
|
|
|
size: '25px' |
|
|
|
|
|
|
|
}} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<BsFillChatRightTextFill /> |
|
|
|
|
|
|
|
</IconContext.Provider> |
|
|
|
|
|
|
|
<span className="ms-1"></span> |
|
|
|
|
|
|
|
</Button> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
</OverlayTrigger></td> |
|
|
|
</tr> |
|
|
|
</tr> |
|
|
|
|
|
|
|
|
|
|
|
<Modal |
|
|
|
<Modal |
|
|
|
show={ShowModal} |
|
|
|
show={ShowModal} |
|
|
|
onHide={() => { |
|
|
|
onHide={() => { |
|
|
@ -371,7 +442,7 @@ export default function RtpAmazonPendingInvoivesDetail( |
|
|
|
dialogClassName={'modal-50w'} |
|
|
|
dialogClassName={'modal-50w'} |
|
|
|
> |
|
|
|
> |
|
|
|
<Modal.Body> |
|
|
|
<Modal.Body> |
|
|
|
<div style={{ height: '150px' }}> |
|
|
|
<div style={{ height: '280px' }}> |
|
|
|
<Row style={{ paddingTop: '15px' }}> |
|
|
|
<Row style={{ paddingTop: '15px' }}> |
|
|
|
<Col xs={1}></Col> |
|
|
|
<Col xs={1}></Col> |
|
|
|
<Col xs={10}> |
|
|
|
<Col xs={10}> |
|
|
@ -381,7 +452,39 @@ export default function RtpAmazonPendingInvoivesDetail( |
|
|
|
</Col> |
|
|
|
</Col> |
|
|
|
<Col xs={1}></Col> |
|
|
|
<Col xs={1}></Col> |
|
|
|
</Row> |
|
|
|
</Row> |
|
|
|
<Row> |
|
|
|
<Row style={{ paddingTop: '15px' }}> |
|
|
|
|
|
|
|
<Col xs={3}>Reparto normativo</Col> |
|
|
|
|
|
|
|
<Col xs={8}> |
|
|
|
|
|
|
|
{' '} |
|
|
|
|
|
|
|
<Form.Control |
|
|
|
|
|
|
|
as="textarea" |
|
|
|
|
|
|
|
id="RequerimientoNormativo" |
|
|
|
|
|
|
|
size="sm" |
|
|
|
|
|
|
|
value={RequerimientoNormativo} |
|
|
|
|
|
|
|
onChange={(e) => setRequerimientoNormativo(e.target.value)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
<Col> </Col> |
|
|
|
|
|
|
|
</Row> |
|
|
|
|
|
|
|
<Row style={{ paddingTop: '15px' }}> |
|
|
|
|
|
|
|
<Col xs={3}>Comentarios</Col> |
|
|
|
|
|
|
|
<Col xs={8}> |
|
|
|
|
|
|
|
{' '} |
|
|
|
|
|
|
|
<Form.Control |
|
|
|
|
|
|
|
as="textarea" |
|
|
|
|
|
|
|
id="Comentarios" |
|
|
|
|
|
|
|
size="sm" |
|
|
|
|
|
|
|
value={ |
|
|
|
|
|
|
|
Comentarios.length |
|
|
|
|
|
|
|
? Comentarios |
|
|
|
|
|
|
|
: 'Clasificacion incorrecta.' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
onChange={(e) => setRequerimientoNormativo(e.target.value)} |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</Col> |
|
|
|
|
|
|
|
<Col> </Col> |
|
|
|
|
|
|
|
</Row> |
|
|
|
|
|
|
|
<Row style={{ paddingTop: '15px' }}> |
|
|
|
<Col xs={6} style={{ textAlign: 'center' }}> |
|
|
|
<Col xs={6} style={{ textAlign: 'center' }}> |
|
|
|
<Button |
|
|
|
<Button |
|
|
|
variant="secondary" |
|
|
|
variant="secondary" |
|
|
|