viam-projectv-scan
Version:
ViaCheck deposit application
174 lines (157 loc) • 5.84 kB
JavaScript
// eslint-disable-next-line react/prefer-stateless-function
import React from 'react';
const Utilities = require('../../js/checks/utilities');
const getRecepitChecks = receipt => {
let recepitTable = '';
receipt.forEach(element => {
recepitTable += `<tr style="font-size: 10px!important">
<td style="padding-left:10px;text-align: center;">${
element.checkNumber
}</td>
<td style="padding-left:10px;text-align: center;">
${element.checkStatusDescription}
</td>
<td style="padding-left:10px;text-align: center;">${Utilities.setAmountFormat(
element.amount
)}</td>
</tr>`;
});
return recepitTable;
};
const getReceiptInformation = (agencyName, receipt, agency, total) => {
const contentReceipt = `
<div style="font-size: 12px!important; text-align: center;">
<b> ${agencyName}</b>
</div>
<div style="font-size: 12px!important; text-align: center;">
<b> BATCH ID ${receipt[0].batchId}</b>
</div>
<div style="font-size: 12px!important; text-align: center;">
<b> ${agency} - ${new Date().getMonth() +
1}/${new Date().getDate()}/${new Date().getFullYear()} </b>
</div>
<br />
<div>
<div style="font-size: 12px!important; text-align: center;">
<table style="width:100%">
<tr style="font-size: 10px!important;padding:10px">
<th style="padding-left:10px;text-align: center;">NĂºmero de Cheque</th>
<th style="padding-left:10px;text-align: center;">Estado</th>
<th style="padding-left:10px;text-align: center;">Valor</th>
<th />
</tr>
${getRecepitChecks(receipt)}
</table>
</div>
</br/>
<div style="font-size: 12px!important; text-align: center;">
<b>Total Cheques: ${
receipt.length
} Total Valor: ${Utilities.setAmountFormat(total)}</b>
</div>
`;
return contentReceipt;
};
const print = (agencyName, receipt, agency, total, close) => {
const content = getReceiptInformation(agencyName, receipt, agency, total);
const configuration =
'height=400,width=600,menubar=yes,location=yes,resizable=yes,scrollbars=yes,zoom=5';
const pri = window.open('', 'PRINT', configuration);
pri.document.write(
'<html><head><style type="text/css">@media print {zoom:scale(7)}</style>'
);
pri.document.write('</head><body><br/>');
pri.document.write(content);
pri.document.write('</body></html>');
pri.document.close();
pri.focus();
pri.print();
pri.close();
close();
};
const recepit = ({ agencyName, receipt, total, agency, close, typeError }) => {
return (
<div
className="modal-information"
id="noticeModal"
tabIndex="-1"
role="dialog"
aria-labelledby="noticeModalLabel"
aria-hidden="true"
>
<div className="modal-dialog notice-modal" role="document">
<div className="modal-content">
<div className="modal-header">
<button
type="button"
className="close"
data-dismiss="modal"
aria-label="Close"
onClick={() => close()}
>
<i className="fas fa-times" />
</button>
</div>
<div className="modal-body">
{receipt.length > 0 && typeError === '' ? (
<div className="row mt-5 mb-4 justify-content-center">
<h1 className="text-blue lato-font">{`Batch Id: ${
receipt[0].batchId
} `}</h1>
</div>
) : null}
{typeError === '' ? (
<div className="round-item bg-green">
<i className="fas fa-check text-white" />
</div>
) : (
<div className="round-item bg-red">
<i className="fas fa-times text-white" />
</div>
)}
{typeError === '' ? (
<h1 className="text-green lato-font">Exitoso!</h1>
) : (
<h1 className="text-danger lato-font text-small">
Algunos cheques no fueron depositados por el sistema. Por favor
intente nuevamente!
</h1>
)}
<div className="row mt-5 mb-4 justify-content-center">
<div className="col-5">
<p className="text-black lato-font mb-0">ITEMS ESCANEADOS</p>
<h2 className="text-blue">{receipt.length}</h2>
</div>
<div className="grey-hr" />
<div className="col-5">
<p className="text-black lato-font mb-0">VALOR DEPOSITADO</p>
<h2 className="lato-font text-blue">
{Utilities.setAmountFormat(total)}
</h2>
</div>
</div>
</div>
<div className="modal-footer text-center mx-auto">
<button
type="button"
className="btn btn-primary"
data-dismiss="modal"
onClick={() => close()}
>
CERRAR
</button>
<button
type="button"
className="btn btn-success"
data-dismiss="modal"
onClick={() => print(agencyName, receipt, agency, total, close)}
>
<i className="fas fa-print" /> IMPRIMIR Y CERRAR
</button>
</div>
</div>
</div>
</div>
);
};
export default recepit;