parent
62bfd90979
commit
b89c4af501
@ -1,144 +1,206 @@ |
|||||||
import { useState } from 'react' |
import { useCallback, useState } from 'react' |
||||||
import { Button, Col, Form, Modal, Row } from 'react-bootstrap' |
import { Button, Col, Form, Modal, Row } from 'react-bootstrap' |
||||||
import * as CurrencyFormat from 'react-currency-format'
|
import * as CurrencyFormat from 'react-currency-format'
|
||||||
|
/* import { PatternFormat } from 'react-number-format'; */ |
||||||
import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo' |
import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo' |
||||||
|
import { RootState } from '../../../../../store/store' |
||||||
|
import { |
||||||
|
populateInvoices, |
||||||
|
addInvoice, |
||||||
|
updateInvoice, |
||||||
|
deleteInvoice |
||||||
|
} from '../../../../../store/features/Clientes/2096/AmazonInvoices' |
||||||
|
// Redux
|
||||||
|
import { useDispatch, useSelector } from 'react-redux' |
||||||
import DTO2096Fraccion from '../../DTO/DTO2096Fraccion' |
import DTO2096Fraccion from '../../DTO/DTO2096Fraccion' |
||||||
import DSAmazon from '../../Services/Amazon.Services' |
import DSAmazon from '../../Services/Amazon.Services' |
||||||
|
import I2096Headers from '../../Interfaces/I2096Header' |
||||||
|
import { max } from 'cypress/types/lodash' |
||||||
|
|
||||||
export interface IComboFraccionProps { |
export interface IComboFraccionProps { |
||||||
IDDetail: number |
IDInvoice: number |
||||||
FraccionOriginal: string |
IDDetail: number |
||||||
|
FraccionOriginal: string |
||||||
|
parentFunction: Function |
||||||
} |
} |
||||||
|
|
||||||
export function ComboFraccion (props: IComboFraccionProps) { |
export function ComboFraccion(props: IComboFraccionProps) { |
||||||
const [Validacion, setValidacion] = useState(0) |
const dispatch = useDispatch() |
||||||
const [showModal, setShowModal] = useState(false) |
const mInvoices = useSelector( |
||||||
const [Fraccion, setFraccion] = useState('') |
(state: RootState) => state.AmazonInvoices.Invoice |
||||||
const [header, setHeader] = useState('') |
) |
||||||
const [show, setShowMsg] = useState(false) |
const [Validacion, setValidacion] = useState(0) |
||||||
const [msg, setMsg] = useState('') |
const [showModal, setShowModal] = useState(false) |
||||||
const msgColor = 'primary' |
const [Fraccion, setFraccion] = useState('') |
||||||
|
const [header, setHeader] = useState('') |
||||||
const changeValidacion = (e: number) => { |
const [show, setShowMsg] = useState(false) |
||||||
setValidacion(e) |
const [msg, setMsg] = useState('') |
||||||
if (e === 2) { |
const msgColor = 'primary' |
||||||
setShowModal(true) |
|
||||||
} |
|
||||||
if (e === 1) { |
|
||||||
const data: DTO2096Fraccion = { |
|
||||||
id: props.IDDetail, |
|
||||||
fraccion: props.FraccionOriginal |
|
||||||
} |
|
||||||
DSAmazon.SetFraccion(data) |
|
||||||
.then((response) => { |
|
||||||
setShowModal(false) |
|
||||||
setHeader('Confirmacion') |
|
||||||
setMsg('La descripcion se ha guardado correctamente') |
|
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
|
||||||
.catch((e: Error) => { |
|
||||||
alert('Ocurrio un error' + e.message.toString()) |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const saveFraccion = () => { |
|
||||||
DSAmazon.GetValidaFraccion(Fraccion) |
const forceUpdate: () => void = useState({})[1].bind(null, {}) // see NOTE below
|
||||||
|
|
||||||
|
const changeValidacion = (e: number) => { |
||||||
|
setValidacion(e) |
||||||
|
if (e === 2) { |
||||||
|
setShowModal(true) |
||||||
|
} |
||||||
|
if (e === 1) { |
||||||
|
const data: DTO2096Fraccion = { |
||||||
|
id: props.IDDetail, |
||||||
|
fraccion: props.FraccionOriginal |
||||||
|
} |
||||||
|
DSAmazon.SetFraccion(data) |
||||||
.then((response) => { |
.then((response) => { |
||||||
if (response.data.respuesta === 'Si') { |
|
||||||
const data: DTO2096Fraccion = { |
/* |
||||||
id: props.IDDetail, |
let Invoice: I2096Headers[] = mInvoices.filter((item) => item.id === props.IDInvoice) |
||||||
fraccion: Fraccion |
const Obj = { ...Invoice[0] } |
||||||
} |
|
||||||
DSAmazon.SetFraccion(data) |
const newObject = Invoice.map(Invoice => ({ ...Invoice, |
||||||
.then((response) => { |
detail: Invoice.detail.filter(detail=>detail.id===props.IDDetail).map(detail => ({ ...detail, |
||||||
setShowModal(false) |
fraccionGEMCO: detail.destinationHTSCode.replaceAll('.','') |
||||||
setHeader('Confirmacion') |
})) |
||||||
setMsg('La descripcion se ha guardado correctamente') |
})) |
||||||
setShowMsg(true) |
|
||||||
return |
|
||||||
}) |
const Obj2 = { ...newObject[0] } |
||||||
.catch((e: Error) => { |
Obj2.max = !Obj2.max |
||||||
alert('Ocurrio un error' + e.message.toString()) |
|
||||||
}) |
console.log('.................................new object '+JSON.stringify(Obj2)) |
||||||
} else { |
dispatch(updateInvoice(Obj2)) |
||||||
alert( |
*/ |
||||||
'Esa fraccion no existe, favor de verificarla antes de poder guardar...' |
|
||||||
) |
/* const newObj = mInvoices.forEach(function(o) { |
||||||
return |
o.detail = o.detail.filter(s => (s.idHeader === props.IDInvoice) && (s.id!=props.IDDetail)); |
||||||
} |
}); */ |
||||||
|
|
||||||
|
const newObj = mInvoices.map(function(o) { |
||||||
|
const newDetail = {...o.detail} |
||||||
|
if (newDetail[0].id===props.IDDetail) { |
||||||
|
newDetail[0].fraccionGEMCO=Fraccion |
||||||
|
} |
||||||
|
return newDetail |
||||||
|
}); |
||||||
|
|
||||||
|
console.log(newObj) |
||||||
|
|
||||||
|
//dispatch(updateInvoice(newObj))
|
||||||
|
|
||||||
|
|
||||||
|
setShowModal(false) |
||||||
|
setHeader('Confirmacion') |
||||||
|
setMsg('La descripcion se ha guardado correctamente') |
||||||
|
setShowMsg(true) |
||||||
|
forceUpdate() |
||||||
|
return |
||||||
}) |
}) |
||||||
.catch((e: Error) => { |
.catch((e: Error) => { |
||||||
alert('Ocurrio un error' + e.message.toString()) |
alert('Ocurrio un error' + e.message.toString()) |
||||||
}) |
}) |
||||||
} |
} |
||||||
|
} |
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Form.Control |
const saveFraccion = () => { |
||||||
as="select" |
DSAmazon.GetValidaFraccion(Fraccion) |
||||||
className="form-select form-select-sm" |
.then((response) => { |
||||||
onChange={(e) => changeValidacion(parseInt(e.target.value))} |
if (response.data.respuesta === 'Si') { |
||||||
value={Validacion} |
const data: DTO2096Fraccion = { |
||||||
> |
id: props.IDDetail, |
||||||
<option value="0"> </option> |
fraccion: Fraccion |
||||||
<option value="1"> = </option> |
} |
||||||
<option value="2"> != </option> |
DSAmazon.SetFraccion(data) |
||||||
</Form.Control> |
.then((response) => { |
||||||
<Modal |
setShowModal(false) |
||||||
show={showModal} |
setHeader('Confirmacion') |
||||||
onHide={() => { |
setMsg('La descripcion se ha guardado correctamente') |
||||||
setShowModal(false) |
setShowMsg(true) |
||||||
}} |
return |
||||||
size={'sm'} |
}) |
||||||
dialogClassName={'modal-50w'} |
.catch((e: Error) => { |
||||||
> |
alert('Ocurrio un error' + e.message.toString()) |
||||||
<Modal.Body> |
}) |
||||||
<Row> |
} else { |
||||||
<Col xs={2}></Col> |
alert( |
||||||
<Col xs={4}>Proporcione la facccion GEMCO</Col> |
'Esa fraccion no existe, favor de verificarla antes de poder guardar...' |
||||||
<Col xs={3}> |
) |
||||||
<CurrencyFormat |
return |
||||||
onValueChange={(values: any) => { |
} |
||||||
const { value } = values |
}) |
||||||
setFraccion(value) |
.catch((e: Error) => { |
||||||
}} |
alert('Ocurrio un error' + e.message.toString()) |
||||||
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={3}> |
|
||||||
<Button |
|
||||||
onClick={() => { |
|
||||||
saveFraccion() |
|
||||||
}} |
|
||||||
> |
|
||||||
Guardar |
|
||||||
</Button> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Modal.Body> |
|
||||||
</Modal> |
|
||||||
<MsgInformativo |
|
||||||
show={show} |
|
||||||
msg={msg} |
|
||||||
header={header} |
|
||||||
msgColor={msgColor} |
|
||||||
closeToast={() => { |
|
||||||
setShowMsg(false) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<Form.Control |
||||||
|
as="select" |
||||||
|
className="form-select form-select-sm" |
||||||
|
onChange={(e) => changeValidacion(parseInt(e.target.value))} |
||||||
|
value={Validacion} |
||||||
|
> |
||||||
|
<option value="0"> </option> |
||||||
|
<option value="1"> = </option> |
||||||
|
<option value="2"> != </option> |
||||||
|
</Form.Control> |
||||||
|
<Modal |
||||||
|
show={showModal} |
||||||
|
onHide={() => { |
||||||
|
setShowModal(false) |
||||||
|
}} |
||||||
|
size={'sm'} |
||||||
|
dialogClassName={'modal-50w'} |
||||||
|
> |
||||||
|
<Modal.Body> |
||||||
|
<Row> |
||||||
|
<Col xs={2}></Col> |
||||||
|
<Col xs={4}>Proporcione la facccion GEMCO {props.IDInvoice}</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' |
||||||
|
}} |
||||||
|
/> |
||||||
|
{/* <PatternFormat value={Fraccion} format="####### ###" allowEmptyFormatting mask="_" />; */} |
||||||
|
</Col> |
||||||
|
<Col xs={3}> |
||||||
|
<Button |
||||||
|
onClick={() => { |
||||||
|
saveFraccion() |
||||||
|
}} |
||||||
|
> |
||||||
|
Guardar |
||||||
|
</Button> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Modal.Body> |
||||||
|
</Modal> |
||||||
|
<MsgInformativo |
||||||
|
show={show} |
||||||
|
msg={msg} |
||||||
|
header={header} |
||||||
|
msgColor={msgColor} |
||||||
|
closeToast={() => { |
||||||
|
setShowMsg(false) |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
@ -0,0 +1,227 @@ |
|||||||
|
import * as React from 'react' |
||||||
|
import { IconContext } from 'react-icons' |
||||||
|
import { FaCheckCircle, FaQuestionCircle } from 'react-icons/fa' |
||||||
|
import { ImCross } from 'react-icons/im' |
||||||
|
import { ComboDescripcion } from '../Components/ComboSelect/ComboDescripcion' |
||||||
|
import { ComboFraccion } from '../Components/ComboSelect/ComboFraccion' |
||||||
|
import { TextBoxFraccion } from '../Components/TextBox/TextBoxFraccion' |
||||||
|
import I2096Detail from '../Interfaces/I2096Detail' |
||||||
|
|
||||||
|
export interface IRtpAmazonPendingInvoivesDetailProps { |
||||||
|
IDMaster: number |
||||||
|
detail: I2096Detail |
||||||
|
} |
||||||
|
|
||||||
|
export default function RtpAmazonPendingInvoivesDetail( |
||||||
|
props: IRtpAmazonPendingInvoivesDetailProps |
||||||
|
) { |
||||||
|
const openLink = (item: string) => { |
||||||
|
window.open('https://www.amazon.com/dp/' + item) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
const parentFunction = (fraccion: string) => { |
||||||
|
alert('update') |
||||||
|
} |
||||||
|
|
||||||
|
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' |
||||||
|
}} |
||||||
|
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} |
||||||
|
parentFunction={parentFunction} |
||||||
|
/> |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
<TextBoxFraccion |
||||||
|
Fraccion={ |
||||||
|
props.detail.fraccionGEMCO ? props.detail.fraccionGEMCO : '' |
||||||
|
} |
||||||
|
/> |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
<ComboDescripcion |
||||||
|
IDDetail={props.detail.id} |
||||||
|
DescripcionOriginal={props.detail.pedimentoDescription} |
||||||
|
/> |
||||||
|
</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.netWeightUnitOfMeasure} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.actualUnitCostMonetaryAmount} |
||||||
|
</td> |
||||||
|
<td |
||||||
|
style={{ |
||||||
|
textAlign: 'center' |
||||||
|
}} |
||||||
|
className="DetailData" |
||||||
|
> |
||||||
|
{props.detail.totalUnitValueMonetaryAmount} |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
@ -0,0 +1,42 @@ |
|||||||
|
import { createSlice, PayloadAction } from '@reduxjs/toolkit' |
||||||
|
import I2096Headers from '../../../../Components/Clientes/Amazon/Interfaces/I2096Header'; |
||||||
|
const Invoice: I2096Headers[] = [] |
||||||
|
const initialState = { Invoice } |
||||||
|
|
||||||
|
export const AmazonInvoicesSlice = createSlice({ |
||||||
|
name: 'AmazonInvoices', |
||||||
|
initialState: initialState, |
||||||
|
reducers: { |
||||||
|
populateInvoices : (state, action: PayloadAction<I2096Headers[]>) => { |
||||||
|
action.payload.forEach(newItem => { |
||||||
|
var Existe = state.Invoice.find(function(onMemoryItem) { |
||||||
|
return onMemoryItem.id === newItem.id; |
||||||
|
}); |
||||||
|
if (!Existe) state.Invoice.push(newItem) |
||||||
|
}) |
||||||
|
}, |
||||||
|
addInvoice : (state, action: PayloadAction<I2096Headers>) => { |
||||||
|
var Existe = state.Invoice.find(function(item) { |
||||||
|
return item.id === action.payload.id; |
||||||
|
}); |
||||||
|
if (!Existe) state.Invoice.push(action.payload) |
||||||
|
}, |
||||||
|
updateInvoice : (state, action: PayloadAction<I2096Headers>) => { |
||||||
|
const i = state.Invoice.findIndex(_element => _element.id === action.payload.id); |
||||||
|
if (i > -1) state.Invoice[i] = action.payload; |
||||||
|
else state.Invoice.push(action.payload); |
||||||
|
}, |
||||||
|
updateInvoiceDetail : (state, action: PayloadAction<I2096Headers>) => { |
||||||
|
const i = state.Invoice.findIndex(_element => _element.id === action.payload.id); |
||||||
|
if (i > -1) state.Invoice[i] = action.payload; |
||||||
|
else state.Invoice.push(action.payload); |
||||||
|
}, |
||||||
|
deleteInvoice : (state, action: PayloadAction<number>) => { |
||||||
|
const newArr = state.Invoice.filter(data => data.id != action.payload); |
||||||
|
state.Invoice=newArr |
||||||
|
}, |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
export const { addInvoice, populateInvoices, updateInvoice, deleteInvoice } = AmazonInvoicesSlice.actions; |
||||||
|
export default AmazonInvoicesSlice.reducer; |
Loading…
Reference in new issue