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 { |
||||
id: number, |
||||
autorizado: boolean, |
||||
requerimientoNormativo: string, |
||||
cumplimientoNormativo: 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