|
|
|
|
@ -13,23 +13,19 @@ import { |
|
|
|
|
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, AiTwotoneEdit } from 'react-icons/ai' |
|
|
|
|
import { BsFillChatRightTextFill } from 'react-icons/bs' |
|
|
|
|
import { BsFillChatRightTextFill, BsFillPencilFill } from 'react-icons/bs' |
|
|
|
|
import DTO2096SightLine from '../../../DTO/DTO2096SightLine' |
|
|
|
|
import { updateInvoice } from '../../../../../../store/features/Clientes/2096/AmazonInvoices' |
|
|
|
|
import DTO2096TraficoFieldsUpdate from '../../../DTO/DTO2096TraficoFieldsUpdate' |
|
|
|
|
import I2096Headers from '../../../Interfaces/I2096Header' |
|
|
|
|
|
|
|
|
|
export interface IRtpAmazonInvoiceTrafficDetailProps { |
|
|
|
|
IDMaster: number |
|
|
|
|
@ -49,7 +45,7 @@ export default function RtpAmazonInvoice2TrafficDetail( |
|
|
|
|
const [UserChanged, setUserChanged] = useState(false) |
|
|
|
|
const [header, setHeader] = useState('') |
|
|
|
|
const [show, setShowMsg] = useState(false) |
|
|
|
|
const [Show, setShow] = useState(false) |
|
|
|
|
//const [Show, setShow] = useState(false)
|
|
|
|
|
const [msg, setMsg] = useState('') |
|
|
|
|
const [CumplimientoNormativo, setCumplimientoNormativo] = useState( |
|
|
|
|
props.detail.cumplimientoNormativo ? props.detail.cumplimientoNormativo : '' |
|
|
|
|
@ -59,13 +55,23 @@ export default function RtpAmazonInvoice2TrafficDetail( |
|
|
|
|
? props.detail.comentarios |
|
|
|
|
: 'Clasificacion Incorrecta' |
|
|
|
|
) |
|
|
|
|
const [ShowModalEdit, setShowModalEdit] = useState(false) |
|
|
|
|
const [UnitMeasure, setUnitMeasure] = useState('') |
|
|
|
|
const [UnitOfMeasure, setUnitOfMeasure] = useState('') |
|
|
|
|
const [UnitCost, setUnitCost] = useState('') |
|
|
|
|
const [Quantity, setQuantity] = useState(0) |
|
|
|
|
const [ItemId, setItemId] = useState('') |
|
|
|
|
const [ItemDescription, setItemDescription] = useState('') |
|
|
|
|
const [FraccionGEMCO, setFraccionGEMCO] = useState('') |
|
|
|
|
const [DescripcionGEMCO, setDescripcionGEMCO] = useState('') |
|
|
|
|
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 UpdateInvoiceDetail = ( |
|
|
|
|
Invoice: I2096Headers, |
|
|
|
|
Detail: I2096Detail[] |
|
|
|
|
) => { |
|
|
|
|
const updatedInvoice: I2096Headers = { |
|
|
|
|
id: props.IDMaster, |
|
|
|
|
referencia: Invoice.referencia, |
|
|
|
|
@ -93,14 +99,37 @@ export default function RtpAmazonInvoice2TrafficDetail( |
|
|
|
|
archivo: Invoice.archivo, |
|
|
|
|
fCreacion: Invoice.fCreacion, |
|
|
|
|
clasificador: Invoice.clasificador, |
|
|
|
|
noVuelta: Invoice.noVuelta, |
|
|
|
|
estatus: Invoice.estatus, |
|
|
|
|
max: true, |
|
|
|
|
detail: Detail |
|
|
|
|
} |
|
|
|
|
dispatch(updateInvoice(updatedInvoice)) |
|
|
|
|
} */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const editInvoice = (id: number) => { |
|
|
|
|
const Invoice = mInvoices |
|
|
|
|
.filter((el) => el.id === props.IDMaster) |
|
|
|
|
.map((el) => { |
|
|
|
|
return el |
|
|
|
|
}) |
|
|
|
|
const newDetails = Invoice[0].detail.map((el) => { |
|
|
|
|
if (el.id === id) { |
|
|
|
|
return { |
|
|
|
|
...el, |
|
|
|
|
itemQuantityUnitOfMeasure: UnitMeasure, |
|
|
|
|
weightValue: UnitOfMeasure, |
|
|
|
|
actualUnitCostMonetaryAmount: UnitCost, |
|
|
|
|
totalUnitValueMonetaryAmount: (el.quantity * parseFloat(UnitCost)).toString() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
return el |
|
|
|
|
}) |
|
|
|
|
UpdateInvoiceDetail(Invoice[0], newDetails) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* const autoriceItem = (id: number) => { |
|
|
|
|
/* const autoriceItem = (id: number) => { |
|
|
|
|
if (CumplimientoNormativo.length === 0 && EstatusSwith) { |
|
|
|
|
setHeader('Error') |
|
|
|
|
setMsg( |
|
|
|
|
@ -137,11 +166,42 @@ export default function RtpAmazonInvoice2TrafficDetail( |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* useEffect(() => { |
|
|
|
|
/* useEffect(() => { |
|
|
|
|
if (UserChanged && EstatusSwith && !props.detail.fraccionGEMCO) |
|
|
|
|
autoriceItem(props.detail.id) |
|
|
|
|
}, [EstatusSwith, UserChanged]) */ |
|
|
|
|
|
|
|
|
|
const saveFields = () =>{ |
|
|
|
|
const data: DTO2096TraficoFieldsUpdate = { |
|
|
|
|
id: props.detail.id, |
|
|
|
|
UnitMeasure: UnitMeasure, |
|
|
|
|
UnitOfMeasure: parseFloat(UnitOfMeasure), |
|
|
|
|
UnitCost: parseFloat(UnitCost) |
|
|
|
|
} |
|
|
|
|
DSAmazon.TrafficFieldsUpdate(data) |
|
|
|
|
.then((response) => { |
|
|
|
|
/* |
|
|
|
|
itemQuantityUnitOfMeasure: UnitMeasure, |
|
|
|
|
weightValue: UnitOfMeasure, |
|
|
|
|
actualUnitCostMonetaryAmount: UnitCost |
|
|
|
|
*/ |
|
|
|
|
setUnitMeasure(response.data.itemQuantityUnitOfMeasure) |
|
|
|
|
setUnitOfMeasure(response.data.weightValue) |
|
|
|
|
setUnitCost(response.data.actualUnitCostMonetaryAmount) |
|
|
|
|
editInvoice(props.detail.id) |
|
|
|
|
setHeader('Informativo') |
|
|
|
|
setMsg('La informacion se guardo exitosamente') |
|
|
|
|
setShowMsg(true) |
|
|
|
|
return |
|
|
|
|
}) |
|
|
|
|
.catch((e: Error) => { |
|
|
|
|
setHeader('Error') |
|
|
|
|
setMsg('Ocurrio un error') |
|
|
|
|
setShowMsg(true) |
|
|
|
|
return |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (UserChanged) setShowModal(true) |
|
|
|
|
}, [EstatusSwith, UserChanged]) |
|
|
|
|
@ -323,7 +383,6 @@ export default function RtpAmazonInvoice2TrafficDetail( |
|
|
|
|
CumplimientoNormativo.length === 0 ? 'hidden' : 'visible' |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{' '} |
|
|
|
|
<OverlayTrigger |
|
|
|
|
placement="bottom" |
|
|
|
|
overlay={ |
|
|
|
|
@ -351,7 +410,6 @@ export default function RtpAmazonInvoice2TrafficDetail( |
|
|
|
|
CumplimientoNormativo.length === 0 ? 'hidden' : 'visible' |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{' '} |
|
|
|
|
<OverlayTrigger |
|
|
|
|
placement="bottom" |
|
|
|
|
overlay={<Tooltip id="button-tooltip-2">{Comentarios}</Tooltip>} |
|
|
|
|
@ -372,93 +430,120 @@ export default function RtpAmazonInvoice2TrafficDetail( |
|
|
|
|
</OverlayTrigger> |
|
|
|
|
</td> |
|
|
|
|
<td> |
|
|
|
|
<IconContext.Provider |
|
|
|
|
value={{ |
|
|
|
|
color: 'green', |
|
|
|
|
size: '25px' |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<AiTwotoneEdit /> |
|
|
|
|
</IconContext.Provider> |
|
|
|
|
<div |
|
|
|
|
style={{ cursor: 'pointer' }} |
|
|
|
|
onClick={() => { |
|
|
|
|
setItemId(props.detail.itemId) |
|
|
|
|
setItemDescription(props.detail.itemDescription) |
|
|
|
|
setDescripcionGEMCO(props.detail.descripcionGEMCO) |
|
|
|
|
setUnitMeasure(props.detail.itemQuantityUnitOfMeasure) |
|
|
|
|
setUnitOfMeasure(props.detail.weightValue) |
|
|
|
|
setUnitCost(props.detail.actualUnitCostMonetaryAmount) |
|
|
|
|
setFraccionGEMCO(props.detail.fraccionGEMCO) |
|
|
|
|
setShowModalEdit(true) |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<IconContext.Provider |
|
|
|
|
value={{ |
|
|
|
|
color: 'blue', |
|
|
|
|
size: '25px' |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<BsFillPencilFill /> |
|
|
|
|
</IconContext.Provider> |
|
|
|
|
</div> |
|
|
|
|
</td> |
|
|
|
|
</tr> |
|
|
|
|
|
|
|
|
|
{/* <Modal |
|
|
|
|
show={ShowModal} |
|
|
|
|
<Modal |
|
|
|
|
show={ShowModalEdit} |
|
|
|
|
onHide={() => { |
|
|
|
|
setShowModal(false) |
|
|
|
|
setShowModalEdit(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? |
|
|
|
|
<div style={{ height: '230px' }}> |
|
|
|
|
<Row> |
|
|
|
|
<Col xs={12}> |
|
|
|
|
<Alert key="warning" variant="warning"> |
|
|
|
|
<span style={{fontWeight:'bold'}}>No Parte:</span> {ItemId} <br/> |
|
|
|
|
<span style={{fontWeight:'bold'}}>Fraccion GEMCO:</span> {FraccionGEMCO} <br/> |
|
|
|
|
<span style={{fontWeight:'bold'}}>Descripcion GEMCO:</span> {DescripcionGEMCO} |
|
|
|
|
</Alert> |
|
|
|
|
</Col> |
|
|
|
|
<Col xs={1}></Col> |
|
|
|
|
</Row> |
|
|
|
|
<Row style={{ paddingTop: '15px' }}> |
|
|
|
|
<Col xs={3}>Cumplimiento normativo</Col> |
|
|
|
|
<Col xs={8}> |
|
|
|
|
{' '} |
|
|
|
|
<Row> |
|
|
|
|
<Col xs={3}>Unit Measure:</Col> |
|
|
|
|
<Col xs={3}> |
|
|
|
|
<Form.Control |
|
|
|
|
as="textarea" |
|
|
|
|
id="RequerimientoNormativo" |
|
|
|
|
type="text" |
|
|
|
|
id="Search" |
|
|
|
|
size="sm" |
|
|
|
|
value={CumplimientoNormativo} |
|
|
|
|
onChange={(e) => setCumplimientoNormativo(e.target.value)} |
|
|
|
|
value={UnitMeasure} |
|
|
|
|
onChange={(e) => setUnitMeasure(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)} |
|
|
|
|
<Row style={{paddingTop:'5px'}}> |
|
|
|
|
<Col xs={3}>Unit of Measure:</Col> |
|
|
|
|
<Col xs={3}> |
|
|
|
|
<CurrencyFormat |
|
|
|
|
onValueChange={(values: any) => { |
|
|
|
|
const { value } = values |
|
|
|
|
setUnitOfMeasure(value) |
|
|
|
|
}} |
|
|
|
|
/* format={'########.##'} */ |
|
|
|
|
value={UnitOfMeasure} |
|
|
|
|
displayType={'input'} |
|
|
|
|
style={{ |
|
|
|
|
fontSize: '18px', |
|
|
|
|
backgroundColor: '#F1EEF9', |
|
|
|
|
border: '2px solid #5923F6', |
|
|
|
|
color: '#5923F6', |
|
|
|
|
width: '120px', |
|
|
|
|
textAlign: 'right', |
|
|
|
|
borderRadius: '10px' |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
</Col> |
|
|
|
|
<Col> </Col> |
|
|
|
|
|
|
|
|
|
</Row> |
|
|
|
|
<Row style={{ paddingTop: '15px' }}> |
|
|
|
|
<Col xs={6} style={{ textAlign: 'center' }}> |
|
|
|
|
<Button |
|
|
|
|
variant="secondary" |
|
|
|
|
onClick={() => { |
|
|
|
|
setShowModal(false) |
|
|
|
|
<Row style={{paddingTop:'5px'}}> |
|
|
|
|
<Col xs={3}>Unit Cost:</Col> |
|
|
|
|
<Col xs={3}> |
|
|
|
|
<CurrencyFormat |
|
|
|
|
onValueChange={(values: any) => { |
|
|
|
|
const { value } = values |
|
|
|
|
setUnitCost(value) |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
No |
|
|
|
|
</Button> |
|
|
|
|
/* format={'########.##'} */ |
|
|
|
|
value={UnitCost} |
|
|
|
|
displayType={'input'} |
|
|
|
|
style={{ |
|
|
|
|
fontSize: '18px', |
|
|
|
|
backgroundColor: '#F1EEF9', |
|
|
|
|
border: '2px solid #5923F6', |
|
|
|
|
color: '#5923F6', |
|
|
|
|
width: '120px', |
|
|
|
|
textAlign: 'right', |
|
|
|
|
borderRadius: '10px' |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
</Col> |
|
|
|
|
<Col xs={6} style={{ textAlign: 'center' }}> |
|
|
|
|
<Button |
|
|
|
|
variant="danger" |
|
|
|
|
<Col xs={4}></Col> |
|
|
|
|
<Col xs={2}><Button |
|
|
|
|
variant="primary" |
|
|
|
|
onClick={() => { |
|
|
|
|
autoriceItem(props.detail.id) |
|
|
|
|
saveFields()
|
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
Si |
|
|
|
|
</Button> |
|
|
|
|
</Col> |
|
|
|
|
Guardar |
|
|
|
|
</Button></Col> |
|
|
|
|
</Row> |
|
|
|
|
</div> |
|
|
|
|
</Modal.Body> |
|
|
|
|
</Modal> */} |
|
|
|
|
</Modal> |
|
|
|
|
<Modal |
|
|
|
|
show={ShowModal} |
|
|
|
|
onHide={() => { |
|
|
|
|
@ -466,9 +551,7 @@ export default function RtpAmazonInvoice2TrafficDetail( |
|
|
|
|
}} |
|
|
|
|
size={'sm'} |
|
|
|
|
dialogClassName={'modal-50w'} |
|
|
|
|
backdrop="static" |
|
|
|
|
disableEscapeKeyDown={true} |
|
|
|
|
> |
|
|
|
|
> |
|
|
|
|
<Modal.Body> |
|
|
|
|
<div style={{ height: '150px' }}> |
|
|
|
|
<Row style={{ paddingTop: '15px' }}> |
|
|
|
|
|
