AmazonRelease1.1
parent
2c62810042
commit
dc634e616a
@ -0,0 +1,7 @@ |
|||||||
|
export default interface DTO2096FraccionDescripcion { |
||||||
|
id: number |
||||||
|
fraccion: string |
||||||
|
cumplimientoNormativo: string |
||||||
|
comentarios: string |
||||||
|
descripcionGEMCO: string |
||||||
|
} |
@ -1,6 +1,6 @@ |
|||||||
export default interface DTO2096ItemAutoriza { |
export default interface DTO2096ItemAutoriza { |
||||||
id: number, |
id: number, |
||||||
autorizado: boolean, |
autorizado: boolean, |
||||||
requerimientoNormativo: string, |
cumplimientoNormativo: string, |
||||||
comentarios: string |
comentarios: string |
||||||
} |
} |
@ -0,0 +1,561 @@ |
|||||||
|
import * as React from 'react' |
||||||
|
import { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
Alert, |
||||||
|
Button, |
||||||
|
Col, |
||||||
|
Form, |
||||||
|
Modal, |
||||||
|
OverlayTrigger, |
||||||
|
Popover, |
||||||
|
Row, |
||||||
|
Tooltip |
||||||
|
} 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 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 { updateInvoice } from '../../../../../../store/features/Clientes/2096/AmazonInvoices' |
||||||
|
import * as CurrencyFormat from 'react-currency-format' |
||||||
|
import { AiOutlineFileSearch } from 'react-icons/ai' |
||||||
|
import { BsFillChatRightTextFill } from 'react-icons/bs' |
||||||
|
|
||||||
|
export interface IRptAmazonFinishedClasificationInvoicesDetailProps { |
||||||
|
IDMaster: number |
||||||
|
detail: I2096Detail |
||||||
|
Deshabilitado: boolean |
||||||
|
} |
||||||
|
|
||||||
|
export default function RptAmazonFinishedClasificationInvoicesDetail( |
||||||
|
props: IRptAmazonFinishedClasificationInvoicesDetailProps |
||||||
|
) { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const mInvoices = useSelector( |
||||||
|
(state: RootState) => state.AmazonInvoices.Invoice |
||||||
|
) |
||||||
|
const [ShowModal, setShowModal] = useState(false) |
||||||
|
const [EstatusSwith, setEstatusSwitch] = useState(props.detail.autorizado) |
||||||
|
const [UserChanged, setUserChanged] = useState(false) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [Show, setShow] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [CumplimientoNormativo, setCumplimientoNormativo] = useState( |
||||||
|
props.detail.cumplimientoNormativo ? props.detail.cumplimientoNormativo : '' |
||||||
|
) |
||||||
|
const [Comentarios, setComentarios] = useState( |
||||||
|
props.detail.comentarios |
||||||
|
? props.detail.comentarios |
||||||
|
: 'Clasificacion Incorrecta' |
||||||
|
) |
||||||
|
const msgColor = 'primary' |
||||||
|
const openLink = (item: string) => { |
||||||
|
window.open('https://www.amazon.com/dp/' + item) |
||||||
|
} |
||||||
|
const target = React.useRef(null) |
||||||
|
|
||||||
|
const UpdateInfo = (Invoice: I2096Headers, Detail: I2096Detail[]) => { |
||||||
|
const updatedInvoice: I2096Headers = { |
||||||
|
id: props.IDMaster, |
||||||
|
commercialInvoiceDate: Invoice.commercialInvoiceDate, |
||||||
|
invoiceNumber: Invoice.invoiceNumber, |
||||||
|
name: Invoice.name, |
||||||
|
trailerNumber: Invoice.trailerNumber, |
||||||
|
trailerId: Invoice.trailerId, |
||||||
|
porOfLoading: Invoice.porOfLoading, |
||||||
|
portOfEntry: Invoice.portOfEntry, |
||||||
|
paymentsTerms: Invoice.paymentsTerms, |
||||||
|
incoterms: Invoice.incoterms, |
||||||
|
hawb: Invoice.hawb, |
||||||
|
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 |
||||||
|
} |
||||||
|
dispatch(updateInvoice(updatedInvoice)) |
||||||
|
} |
||||||
|
|
||||||
|
const editArray = (id: number, valor: boolean) => { |
||||||
|
const Invoice = mInvoices |
||||||
|
.filter((el) => el.id === props.IDMaster) |
||||||
|
.map((el) => { |
||||||
|
return el |
||||||
|
}) |
||||||
|
const newDetail = Invoice[0].detail.map((el) => { |
||||||
|
if (el.id === id) { |
||||||
|
return { |
||||||
|
...el, |
||||||
|
autorizado: valor |
||||||
|
} |
||||||
|
} |
||||||
|
return el |
||||||
|
}) |
||||||
|
UpdateInfo(Invoice[0], newDetail) |
||||||
|
} |
||||||
|
|
||||||
|
const autoriceItem = (id: number) => { |
||||||
|
/* if (CumplimientoNormativo.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 = { |
||||||
|
id: id, |
||||||
|
autorizado: EstatusSwith, |
||||||
|
cumplimientoNormativo: CumplimientoNormativo, |
||||||
|
comentarios: Comentarios |
||||||
|
} |
||||||
|
console.log(data) |
||||||
|
DSAmazon.AutorizadoSET(data) |
||||||
|
.then((response) => { |
||||||
|
editArray(id, !props.detail.autorizado) |
||||||
|
setShowModal(false) |
||||||
|
}) |
||||||
|
.catch((e: Error) => {}) */ |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (UserChanged && EstatusSwith && !props.detail.fraccionGEMCO) |
||||||
|
autoriceItem(props.detail.id) |
||||||
|
}, [EstatusSwith, UserChanged]) |
||||||
|
|
||||||
|
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 ( |
||||||
|
<> |
||||||
|
<tr> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '50px', |
||||||
|
backgroundColor: '#FFFFFF' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
|
||||||
|
</th> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center', |
||||||
|
cursor: 'pointer' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
onClick={() => openLink(props.detail.itemId)} |
||||||
|
> |
||||||
|
{props.detail.itemId} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.itemDescription} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.pedimentoDescription} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center', |
||||||
|
fontSize: '18px' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.destinationHTSCode} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.validaFraccionOriginal === 0 ? ( |
||||||
|
<IconContext.Provider |
||||||
|
value={{ |
||||||
|
color: 'orange', |
||||||
|
size: '20px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<FaQuestionCircle /> |
||||||
|
</IconContext.Provider> |
||||||
|
) : props.detail.validaFraccionOriginal === 1 ? ( |
||||||
|
<IconContext.Provider |
||||||
|
value={{ |
||||||
|
color: 'green', |
||||||
|
size: '20px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<FaCheckCircle /> |
||||||
|
</IconContext.Provider> |
||||||
|
) : ( |
||||||
|
<IconContext.Provider |
||||||
|
value={{ |
||||||
|
color: 'red', |
||||||
|
size: '20px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<ImCross /> |
||||||
|
</IconContext.Provider> |
||||||
|
)} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
<ComboFraccion |
||||||
|
IDInvoice={props.IDMaster} |
||||||
|
IDDetail={props.detail.id} |
||||||
|
FraccionOriginal={props.detail.destinationHTSCode} |
||||||
|
ConfirmaFraccion={props.detail.confirmaFraccion} |
||||||
|
Deshabilitado={props.Deshabilitado} |
||||||
|
Detail={props.detail} |
||||||
|
/> |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
<CurrencyFormat |
||||||
|
value={props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : ''} |
||||||
|
disabled={true} |
||||||
|
format={'######## ##'} |
||||||
|
displayType={'input'} |
||||||
|
style={{ |
||||||
|
fontSize: '18px', |
||||||
|
backgroundColor: |
||||||
|
props.detail.validaFraccionOriginal === 0 |
||||||
|
? '#FFFAF2 ' |
||||||
|
: '#E5F7B6', |
||||||
|
border: |
||||||
|
props.detail.validaFraccionOriginal === 0 |
||||||
|
? '2px solid #F9A721' |
||||||
|
: '2px solid green', |
||||||
|
color: |
||||||
|
props.detail.validaFraccionOriginal === 0 |
||||||
|
? '#5923F6' |
||||||
|
: '#000000', |
||||||
|
width: '115px', |
||||||
|
textAlign: 'right', |
||||||
|
borderRadius: '10px' |
||||||
|
}} |
||||||
|
/> |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
<ComboDescripcion |
||||||
|
IDInvoice={props.IDMaster} |
||||||
|
IDDetail={props.detail.id} |
||||||
|
DescripcionOriginal={props.detail.pedimentoDescription} |
||||||
|
ConfirmaDescripcion={props.detail.confirmaDescripcion} |
||||||
|
Deshabilitado={props.Deshabilitado} |
||||||
|
/> |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.descripcionGEMCO} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.countryOfOrigin} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.productGroup} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.brand} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.model} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.itemQuantityUnitOfMeasure} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.quantity} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.weightValue} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.netWeightUnitOfMeasure} |
||||||
|
</td> |
||||||
|
|
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.actualUnitCostMonetaryAmount} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.totalUnitValueMonetaryAmount} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center', |
||||||
|
paddingLeft: '30px', |
||||||
|
visibility: |
||||||
|
props.detail.destinationHTSCode.replaceAll('.', '').trim() !== |
||||||
|
(props.detail.fraccionGEMCO |
||||||
|
? props.detail.fraccionGEMCO.trim() |
||||||
|
: '') |
||||||
|
? 'visible' |
||||||
|
: 'hidden' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{/* <FormCheck |
||||||
|
className="form-check form-switch form-control-lg" |
||||||
|
id="switchEnabled" |
||||||
|
type="switch" |
||||||
|
disabled={ |
||||||
|
props.detail.fraccionGEMCO === |
||||||
|
props.detail.destinationHTSCode.replaceAll('.', '') |
||||||
|
} |
||||||
|
checked={EstatusSwith && props.detail.autorizado} |
||||||
|
onChange={() => { |
||||||
|
setEstatusSwitch(!EstatusSwith) |
||||||
|
setUserChanged(true) |
||||||
|
setShowModal(!EstatusSwith) |
||||||
|
}} |
||||||
|
label="" |
||||||
|
/> */} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
visibility: |
||||||
|
CumplimientoNormativo.length === 0 ? 'hidden' : 'visible' |
||||||
|
}} |
||||||
|
> |
||||||
|
{' '} |
||||||
|
<OverlayTrigger |
||||||
|
placement="bottom" |
||||||
|
overlay={ |
||||||
|
<Tooltip id="button-tooltip-2">{CumplimientoNormativo}</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: |
||||||
|
CumplimientoNormativo.length === 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> |
||||||
|
|
||||||
|
<Modal |
||||||
|
show={ShowModal} |
||||||
|
onHide={() => { |
||||||
|
setShowModal(false) |
||||||
|
}} |
||||||
|
size={'sm'} |
||||||
|
dialogClassName={'modal-50w'} |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<div style={{ height: '280px' }}> |
||||||
|
<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 style={{ paddingTop: '15px' }}> |
||||||
|
<Col xs={3}>Cumplimiento normativo</Col> |
||||||
|
<Col xs={8}> |
||||||
|
{' '} |
||||||
|
<Form.Control |
||||||
|
as="textarea" |
||||||
|
id="RequerimientoNormativo" |
||||||
|
size="sm" |
||||||
|
value={CumplimientoNormativo} |
||||||
|
onChange={(e) => setCumplimientoNormativo(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) => setComentarios(e.target.value)} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col> </Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingTop: '15px' }}> |
||||||
|
<Col xs={6} style={{ textAlign: 'center' }}> |
||||||
|
<Button |
||||||
|
variant="secondary" |
||||||
|
onClick={() => { |
||||||
|
setShowModal(false) |
||||||
|
}} |
||||||
|
> |
||||||
|
No |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ textAlign: 'center' }}> |
||||||
|
<Button |
||||||
|
variant="danger" |
||||||
|
onClick={() => { |
||||||
|
autoriceItem(props.detail.id) |
||||||
|
}} |
||||||
|
> |
||||||
|
Si |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
@ -1,12 +0,0 @@ |
|||||||
import * as React from 'react'; |
|
||||||
|
|
||||||
export interface IRptAmazonFinishedClasificationInvoicesDetailProps { |
|
||||||
} |
|
||||||
|
|
||||||
export default function RptAmazonFinishedClasificationInvoicesDetail (props: IRptAmazonFinishedClasificationInvoicesDetailProps) { |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
|
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
@ -0,0 +1,619 @@ |
|||||||
|
import * as React from 'react' |
||||||
|
import { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
Alert, |
||||||
|
Button, |
||||||
|
Col, |
||||||
|
Form, |
||||||
|
FormCheck, |
||||||
|
Modal, |
||||||
|
OverlayTrigger, |
||||||
|
Popover, |
||||||
|
Row, |
||||||
|
Tooltip |
||||||
|
} 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 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 { updateInvoice } from '../../../../../../store/features/Clientes/2096/AmazonInvoices' |
||||||
|
import * as CurrencyFormat from 'react-currency-format' |
||||||
|
import { AiOutlineFileSearch } from 'react-icons/ai' |
||||||
|
import { BsFillChatRightTextFill } from 'react-icons/bs' |
||||||
|
import DTO2096FraccionDescripcion from '../../../DTO/DTO2096FraccionDescripcion' |
||||||
|
|
||||||
|
export interface IRptPendingAnswerFromAmazonDetailProps { |
||||||
|
IDMaster: number |
||||||
|
detail: I2096Detail |
||||||
|
Habilitado: boolean |
||||||
|
} |
||||||
|
|
||||||
|
export default function RptPendingAnswerFromAmazonDetail( |
||||||
|
props: IRptPendingAnswerFromAmazonDetailProps |
||||||
|
) { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const mInvoices = useSelector( |
||||||
|
(state: RootState) => state.AmazonInvoices.Invoice |
||||||
|
) |
||||||
|
const [ShowModal, setShowModal] = useState(false) |
||||||
|
const [EstatusSwith, setEstatusSwitch] = useState(props.detail.autorizado) |
||||||
|
const [Fraccion, setFraccion] = useState(props.detail.fraccionGEMCO) |
||||||
|
const [UserChanged, setUserChanged] = useState(false) |
||||||
|
const [DescripcionGEMCO, setDescripcionGEMCO] = useState( |
||||||
|
props.detail.descripcionGEMCO |
||||||
|
) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [Show, setShow] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [CumplimientoNormativo, setCumplimientoNormativo] = useState( |
||||||
|
props.detail.cumplimientoNormativo ? props.detail.cumplimientoNormativo : '' |
||||||
|
) |
||||||
|
const [Comentarios, setComentarios] = useState( |
||||||
|
props.detail.comentarios |
||||||
|
? props.detail.comentarios |
||||||
|
: 'Clasificacion Incorrecta' |
||||||
|
) |
||||||
|
const msgColor = 'primary' |
||||||
|
const openLink = (item: string) => { |
||||||
|
window.open('https://www.amazon.com/dp/' + item) |
||||||
|
} |
||||||
|
const target = React.useRef(null) |
||||||
|
|
||||||
|
const UpdateInfo = (Invoice: I2096Headers, Detail: I2096Detail[]) => { |
||||||
|
const updatedInvoice: I2096Headers = { |
||||||
|
id: props.IDMaster, |
||||||
|
commercialInvoiceDate: Invoice.commercialInvoiceDate, |
||||||
|
invoiceNumber: Invoice.invoiceNumber, |
||||||
|
name: Invoice.name, |
||||||
|
trailerNumber: Invoice.trailerNumber, |
||||||
|
trailerId: Invoice.trailerId, |
||||||
|
porOfLoading: Invoice.porOfLoading, |
||||||
|
portOfEntry: Invoice.portOfEntry, |
||||||
|
paymentsTerms: Invoice.paymentsTerms, |
||||||
|
incoterms: Invoice.incoterms, |
||||||
|
hawb: Invoice.hawb, |
||||||
|
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 |
||||||
|
} |
||||||
|
dispatch(updateInvoice(updatedInvoice)) |
||||||
|
} |
||||||
|
|
||||||
|
const editArray = (id: number, valor: boolean) => { |
||||||
|
const Invoice = mInvoices |
||||||
|
.filter((el) => el.id === props.IDMaster) |
||||||
|
.map((el) => { |
||||||
|
return el |
||||||
|
}) |
||||||
|
const newDetail = Invoice[0].detail.map((el) => { |
||||||
|
if (el.id === id) { |
||||||
|
return { |
||||||
|
...el, |
||||||
|
autorizado: valor |
||||||
|
} |
||||||
|
} |
||||||
|
return el |
||||||
|
}) |
||||||
|
UpdateInfo(Invoice[0], newDetail) |
||||||
|
} |
||||||
|
|
||||||
|
const autoriceItem = (id: number) => { |
||||||
|
if (EstatusSwith) { |
||||||
|
if (CumplimientoNormativo.length === 0) { |
||||||
|
setHeader('Error') |
||||||
|
setMsg( |
||||||
|
'Antes de poder guardar la informacion es necesario que proporcione el cumplimiento normativo' |
||||||
|
) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
if (Comentarios.length === 0) { |
||||||
|
setHeader('Error') |
||||||
|
setMsg( |
||||||
|
'Antes de poder guardar la informacion es necesario que proporcione los comentarios' |
||||||
|
) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
if (DescripcionGEMCO.length === 0) { |
||||||
|
setHeader('Error') |
||||||
|
setMsg( |
||||||
|
'Antes de poder guardar la informacion es necesario que proporcione la descripcion GEMCO' |
||||||
|
) |
||||||
|
setShowMsg(true) |
||||||
|
return |
||||||
|
} |
||||||
|
} |
||||||
|
const data: DTO2096FraccionDescripcion = { |
||||||
|
id: id, |
||||||
|
fraccion: Fraccion, |
||||||
|
cumplimientoNormativo: CumplimientoNormativo, |
||||||
|
comentarios: Comentarios, |
||||||
|
descripcionGEMCO: DescripcionGEMCO |
||||||
|
} |
||||||
|
console.log(data) |
||||||
|
DSAmazon.AutorizaItemFacturaAmazon(data) |
||||||
|
.then((response) => { |
||||||
|
editArray(id, !props.detail.autorizado) |
||||||
|
setShowModal(false) |
||||||
|
}) |
||||||
|
.catch((e: Error) => {}) |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (UserChanged && EstatusSwith && !props.detail.fraccionGEMCO) |
||||||
|
autoriceItem(props.detail.id) |
||||||
|
}, [EstatusSwith, UserChanged]) |
||||||
|
|
||||||
|
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 ( |
||||||
|
<> |
||||||
|
<tr> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '50px', |
||||||
|
backgroundColor: '#FFFFFF' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
|
||||||
|
</th> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center', |
||||||
|
cursor: 'pointer' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
onClick={() => openLink(props.detail.itemId)} |
||||||
|
> |
||||||
|
{props.detail.itemId} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.itemDescription} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.pedimentoDescription} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center', |
||||||
|
fontSize: '18px' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.destinationHTSCode} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.validaFraccionOriginal === 0 ? ( |
||||||
|
<IconContext.Provider |
||||||
|
value={{ |
||||||
|
color: 'orange', |
||||||
|
size: '20px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<FaQuestionCircle /> |
||||||
|
</IconContext.Provider> |
||||||
|
) : props.detail.validaFraccionOriginal === 1 ? ( |
||||||
|
<IconContext.Provider |
||||||
|
value={{ |
||||||
|
color: 'green', |
||||||
|
size: '20px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<FaCheckCircle /> |
||||||
|
</IconContext.Provider> |
||||||
|
) : ( |
||||||
|
<IconContext.Provider |
||||||
|
value={{ |
||||||
|
color: 'red', |
||||||
|
size: '20px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<ImCross /> |
||||||
|
</IconContext.Provider> |
||||||
|
)} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
<ComboFraccion |
||||||
|
IDInvoice={props.IDMaster} |
||||||
|
IDDetail={props.detail.id} |
||||||
|
FraccionOriginal={props.detail.destinationHTSCode} |
||||||
|
ConfirmaFraccion={props.detail.confirmaFraccion} |
||||||
|
Deshabilitado={true} |
||||||
|
Detail={props.detail} |
||||||
|
/> |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
<CurrencyFormat |
||||||
|
value={props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : ''} |
||||||
|
disabled={true} |
||||||
|
format={'######## ##'} |
||||||
|
displayType={'input'} |
||||||
|
style={{ |
||||||
|
fontSize: '18px', |
||||||
|
backgroundColor: |
||||||
|
props.detail.validaFraccionOriginal === 0 |
||||||
|
? '#FFFAF2 ' |
||||||
|
: '#E5F7B6', |
||||||
|
border: |
||||||
|
props.detail.validaFraccionOriginal === 0 |
||||||
|
? '2px solid #F9A721' |
||||||
|
: '2px solid green', |
||||||
|
color: |
||||||
|
props.detail.validaFraccionOriginal === 0 |
||||||
|
? '#5923F6' |
||||||
|
: '#000000', |
||||||
|
width: '115px', |
||||||
|
textAlign: 'right', |
||||||
|
borderRadius: '10px' |
||||||
|
}} |
||||||
|
/> |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
<ComboDescripcion |
||||||
|
IDInvoice={props.IDMaster} |
||||||
|
IDDetail={props.detail.id} |
||||||
|
DescripcionOriginal={props.detail.pedimentoDescription} |
||||||
|
ConfirmaDescripcion={props.detail.confirmaDescripcion} |
||||||
|
Deshabilitado={true} |
||||||
|
/> |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.descripcionGEMCO} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.countryOfOrigin} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.productGroup} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.brand} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.model} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.itemQuantityUnitOfMeasure} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.quantity} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.weightValue} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.netWeightUnitOfMeasure} |
||||||
|
</td> |
||||||
|
|
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.actualUnitCostMonetaryAmount} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.totalUnitValueMonetaryAmount} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center', |
||||||
|
paddingLeft: '30px', |
||||||
|
visibility: |
||||||
|
props.detail.destinationHTSCode.replaceAll('.', '').trim() !== |
||||||
|
(props.detail.fraccionGEMCO |
||||||
|
? props.detail.fraccionGEMCO.trim() |
||||||
|
: '') |
||||||
|
? 'visible' |
||||||
|
: 'hidden' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
<FormCheck |
||||||
|
className="form-check form-switch form-control-lg" |
||||||
|
id="switchEnabled" |
||||||
|
type="switch" |
||||||
|
disabled={ |
||||||
|
props.detail.fraccionGEMCO === |
||||||
|
props.detail.destinationHTSCode.replaceAll('.', '') |
||||||
|
} |
||||||
|
checked={EstatusSwith && props.detail.autorizado} |
||||||
|
onChange={() => { |
||||||
|
setEstatusSwitch(!EstatusSwith) |
||||||
|
setUserChanged(true) |
||||||
|
setShowModal(!EstatusSwith) |
||||||
|
}} |
||||||
|
label="" |
||||||
|
/> |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
visibility: |
||||||
|
CumplimientoNormativo.length === 0 ? 'hidden' : 'visible' |
||||||
|
}} |
||||||
|
> |
||||||
|
{' '} |
||||||
|
<OverlayTrigger |
||||||
|
placement="bottom" |
||||||
|
overlay={ |
||||||
|
<Tooltip id="button-tooltip-2">{CumplimientoNormativo}</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: |
||||||
|
CumplimientoNormativo.length === 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> |
||||||
|
|
||||||
|
<Modal |
||||||
|
show={ShowModal} |
||||||
|
onHide={() => { |
||||||
|
setShowModal(false) |
||||||
|
}} |
||||||
|
size={'sm'} |
||||||
|
dialogClassName={'modal-50w'} |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<div style={{ height: '380px' }}> |
||||||
|
<Row style={{ paddingTop: '15px' }}> |
||||||
|
<Col xs={12}> |
||||||
|
<Alert key={'danger'} variant={'danger'}> |
||||||
|
¿Esta seguro que esta fraccion ya la autorizo Amazon? |
||||||
|
</Alert> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col xs={3}>Fraccion GEMCO</Col> |
||||||
|
<Col xs={3}> |
||||||
|
<CurrencyFormat |
||||||
|
onValueChange={(values: any) => { |
||||||
|
const { value } = values |
||||||
|
setFraccion(value) |
||||||
|
}} |
||||||
|
format={'######## ##'} |
||||||
|
value={Fraccion} |
||||||
|
displayType={'input'} |
||||||
|
style={{ |
||||||
|
fontSize: '18px', |
||||||
|
backgroundColor: '#F1EEF9', |
||||||
|
border: '2px solid #5923F6', |
||||||
|
color: '#5923F6', |
||||||
|
width: '120px', |
||||||
|
textAlign: 'right', |
||||||
|
borderRadius: '10px' |
||||||
|
}} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col xs={6}></Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingTop: '15px' }}> |
||||||
|
<Col xs={3}>Cumplimiento normativo</Col> |
||||||
|
<Col xs={8}> |
||||||
|
{' '} |
||||||
|
<Form.Control |
||||||
|
as="textarea" |
||||||
|
id="RequerimientoNormativo" |
||||||
|
size="sm" |
||||||
|
value={CumplimientoNormativo} |
||||||
|
onChange={(e) => setCumplimientoNormativo(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) => setComentarios(e.target.value)} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col> </Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingTop: '15px' }}> |
||||||
|
<Col xs={3}>Descripcion GEMCO</Col> |
||||||
|
<Col xs={8}> |
||||||
|
<Form.Control |
||||||
|
as="textarea" |
||||||
|
id="PedimentoDescripcion" |
||||||
|
size="sm" |
||||||
|
value={DescripcionGEMCO} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingTop: '15px' }}> |
||||||
|
<Col xs={6} style={{ textAlign: 'center' }}> |
||||||
|
<Button |
||||||
|
variant="secondary" |
||||||
|
onClick={() => { |
||||||
|
setShowModal(false) |
||||||
|
}} |
||||||
|
> |
||||||
|
No |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ textAlign: 'center' }}> |
||||||
|
<Button |
||||||
|
variant="danger" |
||||||
|
onClick={() => { |
||||||
|
autoriceItem(props.detail.id) |
||||||
|
}} |
||||||
|
> |
||||||
|
Si |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
@ -0,0 +1,562 @@ |
|||||||
|
import * as React from 'react' |
||||||
|
import { useEffect, useState } from 'react' |
||||||
|
import { |
||||||
|
Alert, |
||||||
|
Button, |
||||||
|
Col, |
||||||
|
Form, |
||||||
|
FormCheck, |
||||||
|
Modal, |
||||||
|
OverlayTrigger, |
||||||
|
Popover, |
||||||
|
Row, |
||||||
|
Tooltip |
||||||
|
} 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 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 { updateInvoice } from '../../../../../../store/features/Clientes/2096/AmazonInvoices' |
||||||
|
import * as CurrencyFormat from 'react-currency-format' |
||||||
|
import { AiOutlineFileSearch } from 'react-icons/ai' |
||||||
|
import { BsFillChatRightTextFill } from 'react-icons/bs' |
||||||
|
|
||||||
|
export interface IRtpAmazonInvoiceTrafficDetailProps { |
||||||
|
IDMaster: number |
||||||
|
detail: I2096Detail |
||||||
|
Habilitado: boolean |
||||||
|
} |
||||||
|
|
||||||
|
export default function RtpAmazonInvoiceTrafficDetail( |
||||||
|
props: IRtpAmazonInvoiceTrafficDetailProps |
||||||
|
) { |
||||||
|
const dispatch = useDispatch() |
||||||
|
const mInvoices = useSelector( |
||||||
|
(state: RootState) => state.AmazonInvoices.Invoice |
||||||
|
) |
||||||
|
const [ShowModal, setShowModal] = useState(false) |
||||||
|
const [EstatusSwith, setEstatusSwitch] = useState(props.detail.autorizado) |
||||||
|
const [UserChanged, setUserChanged] = useState(false) |
||||||
|
const [header, setHeader] = useState('') |
||||||
|
const [show, setShowMsg] = useState(false) |
||||||
|
const [Show, setShow] = useState(false) |
||||||
|
const [msg, setMsg] = useState('') |
||||||
|
const [CumplimientoNormativo, setCumplimientoNormativo] = useState( |
||||||
|
props.detail.cumplimientoNormativo ? props.detail.cumplimientoNormativo : '' |
||||||
|
) |
||||||
|
const [Comentarios, setComentarios] = useState( |
||||||
|
props.detail.comentarios |
||||||
|
? props.detail.comentarios |
||||||
|
: 'Clasificacion Incorrecta' |
||||||
|
) |
||||||
|
const msgColor = 'primary' |
||||||
|
const openLink = (item: string) => { |
||||||
|
window.open('https://www.amazon.com/dp/' + item) |
||||||
|
} |
||||||
|
const target = React.useRef(null) |
||||||
|
|
||||||
|
const UpdateInfo = (Invoice: I2096Headers, Detail: I2096Detail[]) => { |
||||||
|
const updatedInvoice: I2096Headers = { |
||||||
|
id: props.IDMaster, |
||||||
|
commercialInvoiceDate: Invoice.commercialInvoiceDate, |
||||||
|
invoiceNumber: Invoice.invoiceNumber, |
||||||
|
name: Invoice.name, |
||||||
|
trailerNumber: Invoice.trailerNumber, |
||||||
|
trailerId: Invoice.trailerId, |
||||||
|
porOfLoading: Invoice.porOfLoading, |
||||||
|
portOfEntry: Invoice.portOfEntry, |
||||||
|
paymentsTerms: Invoice.paymentsTerms, |
||||||
|
incoterms: Invoice.incoterms, |
||||||
|
hawb: Invoice.hawb, |
||||||
|
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 |
||||||
|
} |
||||||
|
dispatch(updateInvoice(updatedInvoice)) |
||||||
|
} |
||||||
|
|
||||||
|
const editArray = (id: number, valor: boolean) => { |
||||||
|
const Invoice = mInvoices |
||||||
|
.filter((el) => el.id === props.IDMaster) |
||||||
|
.map((el) => { |
||||||
|
return el |
||||||
|
}) |
||||||
|
const newDetail = Invoice[0].detail.map((el) => { |
||||||
|
if (el.id === id) { |
||||||
|
return { |
||||||
|
...el, |
||||||
|
autorizado: valor |
||||||
|
} |
||||||
|
} |
||||||
|
return el |
||||||
|
}) |
||||||
|
UpdateInfo(Invoice[0], newDetail) |
||||||
|
} |
||||||
|
|
||||||
|
const autoriceItem = (id: number) => { |
||||||
|
if (CumplimientoNormativo.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 = { |
||||||
|
id: id, |
||||||
|
autorizado: EstatusSwith, |
||||||
|
cumplimientoNormativo: CumplimientoNormativo, |
||||||
|
comentarios: Comentarios |
||||||
|
} |
||||||
|
console.log(data) |
||||||
|
/* DSAmazon.AutorizadoSET(data) |
||||||
|
.then((response) => { |
||||||
|
editArray(id, !props.detail.autorizado) |
||||||
|
setShowModal(false) |
||||||
|
}) |
||||||
|
.catch((e: Error) => {}) */ |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (UserChanged && EstatusSwith && !props.detail.fraccionGEMCO) |
||||||
|
autoriceItem(props.detail.id) |
||||||
|
}, [EstatusSwith, UserChanged]) |
||||||
|
|
||||||
|
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 ( |
||||||
|
<> |
||||||
|
<tr> |
||||||
|
<th |
||||||
|
style={{ |
||||||
|
width: '50px', |
||||||
|
backgroundColor: '#FFFFFF' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
|
||||||
|
</th> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center', |
||||||
|
cursor: 'pointer' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
onClick={() => openLink(props.detail.itemId)} |
||||||
|
> |
||||||
|
{props.detail.itemId} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.itemDescription} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.pedimentoDescription} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center', |
||||||
|
fontSize: '18px' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.destinationHTSCode} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.validaFraccionOriginal === 0 ? ( |
||||||
|
<IconContext.Provider |
||||||
|
value={{ |
||||||
|
color: 'orange', |
||||||
|
size: '20px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<FaQuestionCircle /> |
||||||
|
</IconContext.Provider> |
||||||
|
) : props.detail.validaFraccionOriginal === 1 ? ( |
||||||
|
<IconContext.Provider |
||||||
|
value={{ |
||||||
|
color: 'green', |
||||||
|
size: '20px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<FaCheckCircle /> |
||||||
|
</IconContext.Provider> |
||||||
|
) : ( |
||||||
|
<IconContext.Provider |
||||||
|
value={{ |
||||||
|
color: 'red', |
||||||
|
size: '20px' |
||||||
|
}} |
||||||
|
> |
||||||
|
<ImCross /> |
||||||
|
</IconContext.Provider> |
||||||
|
)} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
<ComboFraccion |
||||||
|
IDInvoice={props.IDMaster} |
||||||
|
IDDetail={props.detail.id} |
||||||
|
FraccionOriginal={props.detail.destinationHTSCode} |
||||||
|
ConfirmaFraccion={props.detail.confirmaFraccion} |
||||||
|
Deshabilitado={props.Habilitado} |
||||||
|
Detail={props.detail} |
||||||
|
/> |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
<CurrencyFormat |
||||||
|
value={props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : ''} |
||||||
|
disabled={true} |
||||||
|
format={'######## ##'} |
||||||
|
displayType={'input'} |
||||||
|
style={{ |
||||||
|
fontSize: '18px', |
||||||
|
backgroundColor: |
||||||
|
props.detail.validaFraccionOriginal === 0 |
||||||
|
? '#FFFAF2 ' |
||||||
|
: '#E5F7B6', |
||||||
|
border: |
||||||
|
props.detail.validaFraccionOriginal === 0 |
||||||
|
? '2px solid #F9A721' |
||||||
|
: '2px solid green', |
||||||
|
color: |
||||||
|
props.detail.validaFraccionOriginal === 0 |
||||||
|
? '#5923F6' |
||||||
|
: '#000000', |
||||||
|
width: '115px', |
||||||
|
textAlign: 'right', |
||||||
|
borderRadius: '10px' |
||||||
|
}} |
||||||
|
/> |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
<ComboDescripcion |
||||||
|
IDInvoice={props.IDMaster} |
||||||
|
IDDetail={props.detail.id} |
||||||
|
DescripcionOriginal={props.detail.pedimentoDescription} |
||||||
|
ConfirmaDescripcion={props.detail.confirmaDescripcion} |
||||||
|
Deshabilitado={props.Habilitado} |
||||||
|
/> |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.descripcionGEMCO} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.countryOfOrigin} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.productGroup} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.brand} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'right' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.model} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.itemQuantityUnitOfMeasure} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.quantity} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.weightValue} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.netWeightUnitOfMeasure} |
||||||
|
</td> |
||||||
|
|
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.actualUnitCostMonetaryAmount} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.totalUnitValueMonetaryAmount} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center', |
||||||
|
paddingLeft: '30px', |
||||||
|
visibility: |
||||||
|
props.detail.destinationHTSCode.replaceAll('.', '').trim() !== |
||||||
|
(props.detail.fraccionGEMCO |
||||||
|
? props.detail.fraccionGEMCO.trim() |
||||||
|
: '') |
||||||
|
? 'visible' |
||||||
|
: 'hidden' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
<FormCheck |
||||||
|
className="form-check form-switch form-control-lg" |
||||||
|
id="switchEnabled" |
||||||
|
type="switch" |
||||||
|
disabled={ |
||||||
|
props.detail.fraccionGEMCO === |
||||||
|
props.detail.destinationHTSCode.replaceAll('.', '') |
||||||
|
} |
||||||
|
checked={EstatusSwith && props.detail.autorizado} |
||||||
|
onChange={() => { |
||||||
|
setEstatusSwitch(!EstatusSwith) |
||||||
|
setUserChanged(true) |
||||||
|
setShowModal(!EstatusSwith) |
||||||
|
}} |
||||||
|
label="" |
||||||
|
/> |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
visibility: |
||||||
|
CumplimientoNormativo.length === 0 ? 'hidden' : 'visible' |
||||||
|
}} |
||||||
|
> |
||||||
|
{' '} |
||||||
|
<OverlayTrigger |
||||||
|
placement="bottom" |
||||||
|
overlay={ |
||||||
|
<Tooltip id="button-tooltip-2">{CumplimientoNormativo}</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: |
||||||
|
CumplimientoNormativo.length === 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> |
||||||
|
|
||||||
|
<Modal |
||||||
|
show={ShowModal} |
||||||
|
onHide={() => { |
||||||
|
setShowModal(false) |
||||||
|
}} |
||||||
|
size={'sm'} |
||||||
|
dialogClassName={'modal-50w'} |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<div style={{ height: '280px' }}> |
||||||
|
<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 style={{ paddingTop: '15px' }}> |
||||||
|
<Col xs={3}>Cumplimiento normativo</Col> |
||||||
|
<Col xs={8}> |
||||||
|
{' '} |
||||||
|
<Form.Control |
||||||
|
as="textarea" |
||||||
|
id="RequerimientoNormativo" |
||||||
|
size="sm" |
||||||
|
value={CumplimientoNormativo} |
||||||
|
onChange={(e) => setCumplimientoNormativo(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) => setComentarios(e.target.value)} |
||||||
|
/> |
||||||
|
</Col> |
||||||
|
<Col> </Col> |
||||||
|
</Row> |
||||||
|
<Row style={{ paddingTop: '15px' }}> |
||||||
|
<Col xs={6} style={{ textAlign: 'center' }}> |
||||||
|
<Button |
||||||
|
variant="secondary" |
||||||
|
onClick={() => { |
||||||
|
setShowModal(false) |
||||||
|
}} |
||||||
|
> |
||||||
|
No |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
<Col xs={6} style={{ textAlign: 'center' }}> |
||||||
|
<Button |
||||||
|
variant="danger" |
||||||
|
onClick={() => { |
||||||
|
autoriceItem(props.detail.id) |
||||||
|
}} |
||||||
|
> |
||||||
|
Si |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
@ -1,563 +0,0 @@ |
|||||||
import * as React from 'react' |
|
||||||
import { useEffect, useState } from 'react' |
|
||||||
import { |
|
||||||
Alert, |
|
||||||
Button, |
|
||||||
Col, |
|
||||||
Form, |
|
||||||
FormCheck, |
|
||||||
Modal, |
|
||||||
OverlayTrigger, |
|
||||||
Popover, |
|
||||||
Row, |
|
||||||
Tooltip |
|
||||||
} 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 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 { updateInvoice } from '../../../../../store/features/Clientes/2096/AmazonInvoices' |
|
||||||
import * as CurrencyFormat from 'react-currency-format' |
|
||||||
import { AiOutlineFileSearch } from 'react-icons/ai' |
|
||||||
import { BsFillChatRightTextFill } from 'react-icons/bs' |
|
||||||
|
|
||||||
export interface IRtpAmazonInvoiceTrafficDetailProps { |
|
||||||
IDMaster: number |
|
||||||
detail: I2096Detail |
|
||||||
Habilitado: boolean |
|
||||||
} |
|
||||||
|
|
||||||
export default function RtpAmazonInvoiceTrafficDetail (props: IRtpAmazonInvoiceTrafficDetailProps) { |
|
||||||
const dispatch = useDispatch() |
|
||||||
const mInvoices = useSelector( |
|
||||||
(state: RootState) => state.AmazonInvoices.Invoice |
|
||||||
) |
|
||||||
const [ShowModal, setShowModal] = useState(false) |
|
||||||
const [EstatusSwith, setEstatusSwitch] = useState(props.detail.autorizado) |
|
||||||
const [UserChanged, setUserChanged] = useState(false) |
|
||||||
const [header, setHeader] = useState('') |
|
||||||
const [show, setShowMsg] = useState(false) |
|
||||||
const [Show, setShow] = useState(false) |
|
||||||
const [msg, setMsg] = useState('') |
|
||||||
const [RequerimientoNormativo, setRequerimientoNormativo] = useState( |
|
||||||
props.detail.requerimientoNormativo |
|
||||||
? props.detail.requerimientoNormativo |
|
||||||
: '' |
|
||||||
) |
|
||||||
const [Comentarios, setComentarios] = useState( |
|
||||||
props.detail.comentarios |
|
||||||
? props.detail.comentarios |
|
||||||
: 'Clasificacion Incorrecta' |
|
||||||
) |
|
||||||
const msgColor = 'primary' |
|
||||||
const openLink = (item: string) => { |
|
||||||
window.open('https://www.amazon.com/dp/' + item) |
|
||||||
} |
|
||||||
const target = React.useRef(null) |
|
||||||
|
|
||||||
const UpdateInfo = (Invoice: I2096Headers, Detail: I2096Detail[]) => { |
|
||||||
const updatedInvoice: I2096Headers = { |
|
||||||
id: props.IDMaster, |
|
||||||
commercialInvoiceDate: Invoice.commercialInvoiceDate, |
|
||||||
invoiceNumber: Invoice.invoiceNumber, |
|
||||||
name: Invoice.name, |
|
||||||
trailerNumber: Invoice.trailerNumber, |
|
||||||
trailerId: Invoice.trailerId, |
|
||||||
porOfLoading: Invoice.porOfLoading, |
|
||||||
portOfEntry: Invoice.portOfEntry, |
|
||||||
paymentsTerms: Invoice.paymentsTerms, |
|
||||||
incoterms: Invoice.incoterms, |
|
||||||
hawb: Invoice.hawb, |
|
||||||
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 |
|
||||||
} |
|
||||||
dispatch(updateInvoice(updatedInvoice)) |
|
||||||
} |
|
||||||
|
|
||||||
const editArray = (id: number, valor: boolean) => { |
|
||||||
const Invoice = mInvoices |
|
||||||
.filter((el) => el.id === props.IDMaster) |
|
||||||
.map((el) => { |
|
||||||
return el |
|
||||||
}) |
|
||||||
const newDetail = Invoice[0].detail.map((el) => { |
|
||||||
if (el.id === id) { |
|
||||||
return { |
|
||||||
...el, |
|
||||||
autorizado: valor |
|
||||||
} |
|
||||||
} |
|
||||||
return el |
|
||||||
}) |
|
||||||
UpdateInfo(Invoice[0], newDetail) |
|
||||||
} |
|
||||||
|
|
||||||
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 = { |
|
||||||
id: id, |
|
||||||
autorizado: EstatusSwith, |
|
||||||
requerimientoNormativo: RequerimientoNormativo, |
|
||||||
comentarios: Comentarios |
|
||||||
} |
|
||||||
console.log(data) |
|
||||||
DSAmazon.AutorizadoSET(data) |
|
||||||
.then((response) => { |
|
||||||
editArray(id, !props.detail.autorizado) |
|
||||||
setShowModal(false) |
|
||||||
}) |
|
||||||
.catch((e: Error) => {}) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (UserChanged && EstatusSwith && !props.detail.fraccionGEMCO) |
|
||||||
autoriceItem(props.detail.id) |
|
||||||
}, [EstatusSwith, UserChanged]) |
|
||||||
|
|
||||||
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 ( |
|
||||||
<> |
|
||||||
<tr> |
|
||||||
<th |
|
||||||
style={{ |
|
||||||
width: '50px', |
|
||||||
backgroundColor: '#FFFFFF' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
|
|
||||||
</th> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center', |
|
||||||
cursor: 'pointer' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
onClick={() => openLink(props.detail.itemId)} |
|
||||||
> |
|
||||||
{props.detail.itemId} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'right' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.itemDescription} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'right' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.pedimentoDescription} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center', |
|
||||||
fontSize: '18px' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.destinationHTSCode} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.validaFraccionOriginal === 0 ? ( |
|
||||||
<IconContext.Provider |
|
||||||
value={{ |
|
||||||
color: 'orange', |
|
||||||
size: '20px' |
|
||||||
}} |
|
||||||
> |
|
||||||
<FaQuestionCircle /> |
|
||||||
</IconContext.Provider> |
|
||||||
) : props.detail.validaFraccionOriginal === 1 ? ( |
|
||||||
<IconContext.Provider |
|
||||||
value={{ |
|
||||||
color: 'green', |
|
||||||
size: '20px' |
|
||||||
}} |
|
||||||
> |
|
||||||
<FaCheckCircle /> |
|
||||||
</IconContext.Provider> |
|
||||||
) : ( |
|
||||||
<IconContext.Provider |
|
||||||
value={{ |
|
||||||
color: 'red', |
|
||||||
size: '20px' |
|
||||||
}} |
|
||||||
> |
|
||||||
<ImCross /> |
|
||||||
</IconContext.Provider> |
|
||||||
)} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
<ComboFraccion |
|
||||||
IDInvoice={props.IDMaster} |
|
||||||
IDDetail={props.detail.id} |
|
||||||
FraccionOriginal={props.detail.destinationHTSCode} |
|
||||||
ConfirmaFraccion={props.detail.confirmaFraccion} |
|
||||||
Habilitado={props.Habilitado} |
|
||||||
Detail={props.detail} |
|
||||||
/> |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
<CurrencyFormat |
|
||||||
value={props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : ''} |
|
||||||
disabled={true} |
|
||||||
format={'######## ##'} |
|
||||||
displayType={'input'} |
|
||||||
style={{ |
|
||||||
fontSize: '18px', |
|
||||||
backgroundColor: |
|
||||||
props.detail.validaFraccionOriginal === 0 |
|
||||||
? '#FFFAF2 ' |
|
||||||
: '#E5F7B6', |
|
||||||
border: |
|
||||||
props.detail.validaFraccionOriginal === 0 |
|
||||||
? '2px solid #F9A721' |
|
||||||
: '2px solid green', |
|
||||||
color: |
|
||||||
props.detail.validaFraccionOriginal === 0 |
|
||||||
? '#5923F6' |
|
||||||
: '#000000', |
|
||||||
width: '115px', |
|
||||||
textAlign: 'right', |
|
||||||
borderRadius: '10px' |
|
||||||
}} |
|
||||||
/> |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
<ComboDescripcion |
|
||||||
IDInvoice={props.IDMaster} |
|
||||||
IDDetail={props.detail.id} |
|
||||||
DescripcionOriginal={props.detail.pedimentoDescription} |
|
||||||
ConfirmaDescripcion={props.detail.confirmaDescripcion} |
|
||||||
Habilitado={props.Habilitado} |
|
||||||
/> |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.descripcionGEMCO} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.countryOfOrigin} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'right' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.productGroup} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'right' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.brand} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'right' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.model} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.itemQuantityUnitOfMeasure} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.quantity} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.weightValue} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.netWeightUnitOfMeasure} |
|
||||||
</td> |
|
||||||
|
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.actualUnitCostMonetaryAmount} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
{props.detail.totalUnitValueMonetaryAmount} |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
textAlign: 'center', |
|
||||||
paddingLeft: '30px', |
|
||||||
visibility: |
|
||||||
props.detail.destinationHTSCode.replaceAll('.', '').trim() !== |
|
||||||
(props.detail.fraccionGEMCO |
|
||||||
? props.detail.fraccionGEMCO.trim() |
|
||||||
: '') |
|
||||||
? 'visible' |
|
||||||
: 'hidden' |
|
||||||
}} |
|
||||||
className="DetailData" |
|
||||||
> |
|
||||||
<FormCheck |
|
||||||
className="form-check form-switch form-control-lg" |
|
||||||
id="switchEnabled" |
|
||||||
type="switch" |
|
||||||
disabled={ |
|
||||||
props.detail.fraccionGEMCO === |
|
||||||
props.detail.destinationHTSCode.replaceAll('.', '') |
|
||||||
} |
|
||||||
checked={EstatusSwith && props.detail.autorizado} |
|
||||||
onChange={() => { |
|
||||||
setEstatusSwitch(!EstatusSwith) |
|
||||||
setUserChanged(true) |
|
||||||
setShowModal(!EstatusSwith) |
|
||||||
}} |
|
||||||
label="" |
|
||||||
/> |
|
||||||
</td> |
|
||||||
<td |
|
||||||
style={{ |
|
||||||
visibility: |
|
||||||
RequerimientoNormativo.length === 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: |
|
||||||
RequerimientoNormativo.length === 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> |
|
||||||
|
|
||||||
<Modal |
|
||||||
show={ShowModal} |
|
||||||
onHide={() => { |
|
||||||
setShowModal(false) |
|
||||||
}} |
|
||||||
size={'sm'} |
|
||||||
dialogClassName={'modal-50w'} |
|
||||||
> |
|
||||||
<Modal.Body> |
|
||||||
<div style={{ height: '280px' }}> |
|
||||||
<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 style={{ paddingTop: '15px' }}> |
|
||||||
<Col xs={3}>Cumplimiento 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) => setComentarios(e.target.value)} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col> </Col> |
|
||||||
</Row> |
|
||||||
<Row style={{ paddingTop: '15px' }}> |
|
||||||
<Col xs={6} style={{ textAlign: 'center' }}> |
|
||||||
<Button |
|
||||||
variant="secondary" |
|
||||||
onClick={() => { |
|
||||||
setShowModal(false) |
|
||||||
}} |
|
||||||
> |
|
||||||
No |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
<Col xs={6} style={{ textAlign: 'center' }}> |
|
||||||
<Button |
|
||||||
variant="danger" |
|
||||||
onClick={() => { |
|
||||||
autoriceItem(props.detail.id) |
|
||||||
}} |
|
||||||
> |
|
||||||
Si |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</div> |
|
||||||
</Modal.Body> |
|
||||||
</Modal> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue