parent
5752dfb4b5
commit
2c62810042
@ -0,0 +1,12 @@ |
||||
import * as React from 'react'; |
||||
|
||||
export interface IRptAmazonFinishedClasificationInvoicesDetailProps { |
||||
} |
||||
|
||||
export default function RptAmazonFinishedClasificationInvoicesDetail (props: IRptAmazonFinishedClasificationInvoicesDetailProps) { |
||||
return ( |
||||
<div> |
||||
|
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,676 @@ |
||||
import * as React from 'react' |
||||
import { useEffect, useState } from 'react' |
||||
import { |
||||
Alert, |
||||
Button, |
||||
Card, |
||||
Col, |
||||
FormCheck, |
||||
Modal, |
||||
Row, |
||||
Table |
||||
} from 'react-bootstrap' |
||||
import { IconContext } from 'react-icons' |
||||
import { BsChevronDown, BsChevronRight } from 'react-icons/bs' |
||||
import { FaAmazon, FaFileExcel } from 'react-icons/fa' |
||||
import I2096Headers from '../../Interfaces/I2096Header' |
||||
import DSAmazon from '../../Services/Amazon.Services' |
||||
import { MsgInformativo } from '../../../../Utils/Toast/msgInformativo' |
||||
import { RootState } from '../../../../../store/store' |
||||
import { |
||||
initializeInvoice, |
||||
populateInvoices, |
||||
updateInvoice |
||||
} from '../../../../../store/features/Clientes/2096/AmazonInvoices' |
||||
// Redux
|
||||
import { useDispatch, useSelector } from 'react-redux' |
||||
import RtpAmazonPendingInvoicesDetail from './RptAmazonPendingClasificationInvoicesDetail' |
||||
import { AiTwotoneFileExcel } from 'react-icons/ai' |
||||
export interface IRptPendingAnswerFromAmazonProps {} |
||||
|
||||
export default function RptPendingAnswerFromAmazon( |
||||
props: IRptPendingAnswerFromAmazonProps |
||||
) { |
||||
const dispatch = useDispatch() |
||||
const mInvoices = useSelector( |
||||
(state: RootState) => state.AmazonInvoices.Invoice |
||||
) |
||||
const [header, setHeader] = useState('') |
||||
const [IDFactura, setIDFactura] = useState(0) |
||||
const [show, setShowMsg] = useState(false) |
||||
const [ShowModal, setShowModal] = useState(false) |
||||
const [msg, setMsg] = useState('') |
||||
const msgColor = 'primary' |
||||
|
||||
function currentDate(days: number): string { |
||||
var today = new Date() |
||||
today.setDate(today.getDate() + days) |
||||
var dd = String(today.getDate()).padStart(2, '0') |
||||
var mm = String(today.getMonth() + 1).padStart(2, '0') |
||||
var yyyy = today.getFullYear() |
||||
return yyyy + '-' + mm + '-' + dd |
||||
} |
||||
|
||||
const loadReport = () => { |
||||
DSAmazon.InvoicePendingFromAmazonGET() |
||||
.then((response) => { |
||||
dispatch(initializeInvoice([])) |
||||
dispatch(populateInvoices(response.data)) |
||||
}) |
||||
.catch((e: Error) => { |
||||
alert('Ocurrio un error' + e.message.toString()) |
||||
}) |
||||
} |
||||
|
||||
const downloadExcel = (id: number) => { |
||||
DSAmazon.TerminaClasificarFactura(id) |
||||
.then((response) => { |
||||
DSAmazon.NoPartesAmazon2SIRGET(id) |
||||
.then((response: any) => { |
||||
if (response.status === 200) { |
||||
const url = window.URL.createObjectURL(new Blob([response.data])) |
||||
const link = document.createElement('a') |
||||
link.href = url |
||||
link.setAttribute('download', 'Plantilla de partes.xlsx') |
||||
document.body.appendChild(link) |
||||
link.click() |
||||
} |
||||
}) |
||||
.catch((e: Error) => { |
||||
setHeader('Error') |
||||
setMsg('Ocurrio un error') |
||||
setShowMsg(true) |
||||
return |
||||
}) |
||||
}) |
||||
.catch((e: Error) => {}) |
||||
} |
||||
|
||||
const downloadExceptionsFile = (id: number) => { |
||||
DSAmazon.SePuedeTerminardeClasificarFactura(id) |
||||
.then((response) => {}) |
||||
.catch((e: Error) => {}) |
||||
DSAmazon.ExceptionsFileAmazonGET(id) |
||||
.then((response: any) => { |
||||
if (response.status === 200) { |
||||
const url = window.URL.createObjectURL(new Blob([response.data])) |
||||
const link = document.createElement('a') |
||||
link.href = url |
||||
link.setAttribute( |
||||
'download', |
||||
'Formato de consultas (Exceptions Handling 2021).xlsx' |
||||
) |
||||
document.body.appendChild(link) |
||||
link.click() |
||||
} |
||||
}) |
||||
.catch((e: Error) => { |
||||
setHeader('Error') |
||||
setMsg('Ocurrio un error') |
||||
setShowMsg(true) |
||||
return |
||||
}) |
||||
} |
||||
|
||||
useEffect(() => { |
||||
loadReport() |
||||
}, []) |
||||
|
||||
const changeToggle = (row: I2096Headers) => { |
||||
let Invoice: I2096Headers[] = mInvoices.filter((item) => item.id === row.id) |
||||
const Obj = { ...Invoice[0] } |
||||
Obj.max = !Obj.max |
||||
dispatch(updateInvoice(Obj)) |
||||
} |
||||
|
||||
const openLink = (item: string) => { |
||||
window.open('https://www.amazon.com/dp/' + item) |
||||
} |
||||
|
||||
const existsExeptions = (IDMaster: number) => { |
||||
const Exceptions = mInvoices |
||||
.filter((element) => |
||||
element.detail.some((sub) => sub.idHeader === IDMaster) |
||||
) |
||||
.map((element) => { |
||||
let newElt = Object.assign({}, element) // copies element
|
||||
return newElt.detail.filter( |
||||
(child) => child.idHeader === IDMaster && !child.autorizado |
||||
) |
||||
}) |
||||
console.log(JSON.stringify(Exceptions[0])) |
||||
return Exceptions[0].length ? Exceptions[0].length : 0 |
||||
} |
||||
|
||||
const facturaTerminada = (row: I2096Headers) => { |
||||
DSAmazon.SePuedeTerminardeClasificarFactura(row.id) |
||||
.then((response) => { |
||||
if (response.data.respuesta.includes('lista')) { |
||||
setIDFactura(row.id) |
||||
setShowModal(true) |
||||
return |
||||
} else { |
||||
setIDFactura(0) |
||||
setHeader('Informativo') |
||||
setMsg(response.data.respuesta) |
||||
setShowMsg(true) |
||||
return |
||||
} |
||||
}) |
||||
.catch((e: Error) => { |
||||
setIDFactura(0) |
||||
setHeader('Error') |
||||
setMsg('Ocurrio un error') |
||||
setShowMsg(true) |
||||
return |
||||
}) |
||||
} |
||||
|
||||
return ( |
||||
<div> |
||||
<Card> |
||||
<Card.Body> |
||||
<Row> |
||||
<Col xs={5}> |
||||
<Card.Title> |
||||
<IconContext.Provider value={{ color: '#F6C34F', size: '8%' }}> |
||||
<FaAmazon /> |
||||
</IconContext.Provider>{' '} |
||||
CLASIFICACION : facturas{' '} |
||||
<span |
||||
style={{ |
||||
fontStyle: 'italic', |
||||
textDecoration: 'underline', |
||||
textDecorationColor: 'red' |
||||
}} |
||||
> |
||||
pendientes |
||||
</span>{' '} |
||||
de respuesta |
||||
</Card.Title> |
||||
</Col> |
||||
<Col xs={4}></Col> |
||||
</Row> |
||||
</Card.Body> |
||||
</Card> |
||||
<Row> |
||||
<Col xs={2}></Col> |
||||
<Col xs={8}></Col> |
||||
<Col xs={2} className="totalLabel"></Col> |
||||
</Row> |
||||
<Card> |
||||
<Card.Body> |
||||
<div className="MDcontainer"> |
||||
<Table className="MDTable" hover> |
||||
<thead style={{ position: 'sticky', top: '0' }}> |
||||
<tr> |
||||
<th style={{ width: '50px' }}></th> |
||||
<th style={{ width: '50px' }}>id</th> |
||||
<th style={{ width: '50px' }}></th> |
||||
<th style={{ width: '50px' }}></th> |
||||
<th style={{ width: '50px' }}></th> |
||||
<th style={{ width: '80px' }}>Commercial Invoice Date</th> |
||||
<th style={{ width: '300px' }}>Invoice Number</th> |
||||
<th style={{ width: '50px' }}>Name</th> |
||||
<th style={{ width: '100px' }}>Incoterms</th> |
||||
<th style={{ width: '100px' }}>Qty Unit of measure</th> |
||||
<th style={{ width: '100px' }}>Tot Qty</th> |
||||
<th style={{ width: '100px' }}>Weight unit of measure</th> |
||||
<th style={{ width: '100px' }}>Tot weight</th> |
||||
<th style={{ width: '100px' }}>Tot Charge or allowance</th> |
||||
<th style={{ width: '100px' }}>Tot currency ISO code</th> |
||||
<th style={{ width: '100px' }}>Tot Monetary amount</th> |
||||
<th style={{ width: '500px' }}>Total de partidas</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{mInvoices |
||||
? mInvoices.map((MasterData) => { |
||||
return ( |
||||
<> |
||||
<tr |
||||
style={{ cursor: 'pointer' }} |
||||
className={ |
||||
MasterData.max === true |
||||
? 'masterSelected' |
||||
: 'normalSelected' |
||||
} |
||||
> |
||||
<td |
||||
style={{ textAlign: 'left' }} |
||||
className={ |
||||
MasterData.max === true |
||||
? 'masterSelected' |
||||
: 'normalSelected' |
||||
} |
||||
key={MasterData.id} |
||||
onClick={() => { |
||||
changeToggle(MasterData) |
||||
}} |
||||
> |
||||
{MasterData.max === true ? ( |
||||
<IconContext.Provider |
||||
value={{ color: 'blue', size: '15px' }} |
||||
> |
||||
<BsChevronDown /> |
||||
</IconContext.Provider> |
||||
) : ( |
||||
<IconContext.Provider |
||||
value={{ color: 'blue', size: '15px' }} |
||||
> |
||||
<BsChevronRight /> |
||||
</IconContext.Provider> |
||||
)} |
||||
</td> |
||||
<td>{MasterData.id}</td> |
||||
<td> |
||||
{existsExeptions(MasterData.id) > 0 ? ( |
||||
<div |
||||
onClick={() => |
||||
downloadExceptionsFile(MasterData.id) |
||||
} |
||||
title="Archivo de excepciones" |
||||
> |
||||
<IconContext.Provider |
||||
value={{ color: 'orange', size: '20px' }} |
||||
> |
||||
<FaFileExcel /> |
||||
</IconContext.Provider> |
||||
</div> |
||||
) : null} |
||||
</td> |
||||
<td> |
||||
{MasterData.estatus === 1 ? ( |
||||
<div |
||||
onClick={() => downloadExcel(MasterData.id)} |
||||
> |
||||
<IconContext.Provider |
||||
value={{ color: 'green', size: '20px' }} |
||||
> |
||||
<AiTwotoneFileExcel /> |
||||
</IconContext.Provider> |
||||
</div> |
||||
) : null} |
||||
</td> |
||||
<td> |
||||
<FormCheck |
||||
className="form-check form-switch form-control-sm" |
||||
id="switchEnabled" |
||||
type="switch" |
||||
checked={false} |
||||
onChange={() => { |
||||
facturaTerminada(MasterData) |
||||
}} |
||||
label="" |
||||
/> |
||||
</td> |
||||
<td style={{ width: '80px', textAlign: 'center' }}> |
||||
{MasterData.commercialInvoiceDate} |
||||
</td> |
||||
<td style={{ width: '150px' }}> |
||||
{MasterData.invoiceNumber} |
||||
</td> |
||||
<td style={{ width: '50px', textAlign: 'center' }}> |
||||
{MasterData.name} |
||||
</td> |
||||
<td style={{ width: '100px', textAlign: 'center' }}> |
||||
{MasterData.incoterms} |
||||
</td> |
||||
<td style={{ textAlign: 'center' }}> |
||||
{MasterData.totalInvoiceQuantityUnitOfMeasure} |
||||
</td> |
||||
<td style={{ textAlign: 'center' }}> |
||||
{MasterData.totalInvoiceQuantity} |
||||
</td> |
||||
<td style={{ textAlign: 'center' }}> |
||||
{MasterData.totalInvoiceWeightUnitOfMeasure} |
||||
</td> |
||||
<td style={{ textAlign: 'center' }}> |
||||
{MasterData.totalInvoiceWeight} |
||||
</td> |
||||
<td style={{ textAlign: 'center' }}> |
||||
{MasterData.totalInvoiceValueChargeOrAllowance} |
||||
</td> |
||||
<td style={{ textAlign: 'center' }}> |
||||
{MasterData.totalInvoiceValueCurrencyISOCode} |
||||
</td> |
||||
<td style={{ textAlign: 'center' }}> |
||||
{MasterData.totalInvoiceValueMonetaryAmount} |
||||
</td> |
||||
<td |
||||
style={{ |
||||
fontWeight: 'bold', |
||||
textAlign: 'center' |
||||
}} |
||||
> |
||||
{mInvoices |
||||
.filter((value) => value.id === MasterData.id) |
||||
.map((row) => { |
||||
return row.detail.length |
||||
})} |
||||
</td> |
||||
</tr> |
||||
{MasterData.max ? ( |
||||
<tr |
||||
className={ |
||||
MasterData.max === true |
||||
? 'masterSelected2' |
||||
: 'normalSelected2' |
||||
} |
||||
> |
||||
<th colSpan={10}> |
||||
<table |
||||
className="childTable" |
||||
style={{ width: '1450px' }} |
||||
> |
||||
<thead> |
||||
<tr> |
||||
<th |
||||
style={{ |
||||
width: '50px', |
||||
backgroundColor: '#FFFFFF', |
||||
color: '#346288' |
||||
}} |
||||
></th> |
||||
<th |
||||
style={{ |
||||
width: '100px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Item Id |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '400px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Item Description |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '120px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Pedimento Description |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '200px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288', |
||||
textAlign: 'center' |
||||
}} |
||||
> |
||||
Destination HTS Code |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '120px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288', |
||||
textAlign: 'center' |
||||
}} |
||||
> |
||||
Valida |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '120px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288', |
||||
textAlign: 'center' |
||||
}} |
||||
> |
||||
Confirme fraccion |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '120px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288', |
||||
textAlign: 'center' |
||||
}} |
||||
> |
||||
Fraccion GEMCO |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '120px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288', |
||||
textAlign: 'center' |
||||
}} |
||||
> |
||||
Confirme descripcion |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288', |
||||
textAlign: 'center' |
||||
}} |
||||
> |
||||
Descripcion GEMCO |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288', |
||||
textAlign: 'center' |
||||
}} |
||||
> |
||||
Country of Origin |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
ProductGroup |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Brand |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Model |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Unit Measure |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Qty Shipped |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Unit Of measure |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Unit Net Weight |
||||
</th> |
||||
|
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Unit Cost |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Total value |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Autorizado |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
RN |
||||
</th> |
||||
<th |
||||
style={{ |
||||
width: '70px', |
||||
backgroundColor: '#D3E0EA', |
||||
color: '#346288' |
||||
}} |
||||
> |
||||
Comm |
||||
</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{mInvoices.map((MD) => { |
||||
return ( |
||||
<> |
||||
{MD.detail |
||||
.filter( |
||||
(detail) => |
||||
MasterData.id === |
||||
detail.idHeader |
||||
) |
||||
.map((detail) => { |
||||
return ( |
||||
<RtpAmazonPendingInvoicesDetail |
||||
IDMaster={MasterData.id} |
||||
detail={detail} |
||||
Habilitado={ |
||||
MasterData.estatus <= 1 |
||||
} |
||||
/> |
||||
) |
||||
})} |
||||
</> |
||||
) |
||||
})} |
||||
</tbody> |
||||
</table> |
||||
</th> |
||||
</tr> |
||||
) : null} |
||||
</> |
||||
) |
||||
}) |
||||
: null} |
||||
</tbody> |
||||
</Table> |
||||
</div> |
||||
</Card.Body> |
||||
</Card> |
||||
<Modal |
||||
show={ShowModal} |
||||
onHide={() => { |
||||
setShowModal(false) |
||||
}} |
||||
size={'sm'} |
||||
dialogClassName={'modal-50w'} |
||||
> |
||||
<Modal.Body> |
||||
<div style={{ height: '180px' }}> |
||||
<Row style={{ paddingTop: '15px' }}> |
||||
<Col xs={1}></Col> |
||||
<Col xs={10}> |
||||
<Alert key={'danger'} variant={'danger'}> |
||||
La factura esta lista para terminarse, desea terminarla? |
||||
</Alert> |
||||
</Col> |
||||
<Col xs={1}></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={() => { |
||||
downloadExcel(IDFactura) |
||||
}} |
||||
> |
||||
Si |
||||
</Button> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</Modal.Body> |
||||
</Modal> |
||||
<MsgInformativo |
||||
show={show} |
||||
msg={msg} |
||||
header={header} |
||||
msgColor={msgColor} |
||||
closeToast={() => { |
||||
setShowMsg(false) |
||||
}} |
||||
/> |
||||
</div> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue