viam-projectv-scan
Version:
ViaCheck deposit application
265 lines (259 loc) • 7.66 kB
JavaScript
import React from 'react';
const CheckStatusRules = require('../../js/checks/checkStatusRules');
const MakerRules = require('../../js/checks/makerRules');
const Utilities = require('../../js/checks/utilities');
const checkDetail = (props) => {
const {
checkSelected,
imagesSelected,
enableVerify,
onChangeValueDetail,
onCheckVerify,
isFrontActive,
changeImageDetail,
zoomEfect,
onZoomEfect,
onChangePayeeCheckDetails
} = props;
const zoomEfectClassName = zoomEfect ? 'zoom-active colorModal' : 'zoom';
return (
<div className="details-side col-5">
<div className="expand-detail batch-detail mt-3">
<div className="actions d-inline-flex col-12">
<h4 className="lato-font text-blue">Detalles del Cheque</h4>
<button
className="col-5 btn btn-primary"
type="button"
onClick={() => onCheckVerify()}
disabled={
checkSelected !== null ? CheckStatusRules.getDisableVerifyButton(checkSelected) : true
}
hidden={!enableVerify}
>
VERIFICAR CHEQUE
</button>
</div>
<div className="detail-status">
{' '}
<br />
{
<p className="check-status lato-font">
<span className="text-green">Estado: </span>
{checkSelected !== undefined && checkSelected !== null ? (
CheckStatusRules.getStatusCheckDetail(checkSelected)
) : (
''
)}
</p>
}
</div>
<div className="user-info col-12 mt-3">
<i
className="fas fa-pen text-muted edit-p-data"
data-toggle="tooltip"
data-placement="top"
title="Can edit this fields"
/>
<div className="row">
<div className="user-details lato-font col-12 ">
<div className="row">
<div className="col-6 user-detail">
<span className="lato-font text-blue">Girador</span>{' '}
<input
type="text"
className="lato-font text-black"
value={
checkSelected !== undefined && checkSelected !== null ? (
checkSelected.payerAddressName
) : (
''
)
}
onChange={(event) => onChangeValueDetail(event, 7)}
/>
</div>
<div className="col-6 user-detail">
<span className="lato-font text-blue">Cheques Retornados</span>
<input
type="text"
className="lato-font text-black"
value={
checkSelected !== undefined && checkSelected !== null ? (
checkSelected.returnedChecksMaker
) : (
0
)
}
readOnly
/>
</div>
<div className="col-6 user-detail">
<span className="lato-font text-blue">Cheques Girados</span>
<input
type="text"
className="lato-font text-black"
value={
checkSelected !== undefined && checkSelected !== null ? (
checkSelected.issuedChecksMaker
) : (
0
)
}
readOnly
/>
</div>
<div className="col-6 user-detail">
<span className="lato-font text-blue">Porcentaje de Retorno</span>
<input
type="text"
className="lato-font text-orange"
value={MakerRules.getPorcentageRejection(checkSelected)}
readOnly
/>
</div>
</div>
</div>
</div>
</div>{' '}
{/* USER INFO */}
{checkSelected !== undefined && checkSelected !== null ? (
<div className="check-img mx-auto col-12 mt-4">
{/* <div
id="carouselBatch"
className="carousel"
data-ride="carousel"
data-interval="false"
> */}
{/* <div className="carousel-inner-zoom width-95"> */}
<div className="row carousel">
<div className="col-md-11">
<div
className={
isFrontActive ? (
`carousel-item active ${zoomEfectClassName} d-block w-70 zoom-img `
) : (
`carousel-item ${zoomEfectClassName} `
)
}
>
<img
src={`data:image/jpeg;base64,${imagesSelected !== undefined &&
imagesSelected !== null
? Utilities.getImagePNGFormat(imagesSelected.frontImage)
: ''}`}
className="width-100"
alt="..."
/>
</div>
<div
className={
isFrontActive ? (
` carousel-item ${zoomEfectClassName} `
) : (
` carousel-item active ${zoomEfectClassName} d-block w-70 zoom-img `
)
}
>
<img
src={`data:image/jpeg;base64,${imagesSelected !== undefined &&
imagesSelected !== null
? Utilities.getImagePNGFormat(imagesSelected.backImage)
: ''}`}
className="width-100"
// className="d-block w-85 zoom-img"
alt="..."
/>
</div>
</div>
<div className="col-md-1">
<div className="row">
<div className="carrousel-icons">
<button className="carousel-button">
<span
className={
zoomEfect ? (
'fas fa-undo-alt carousel-processing-zoom-icon'
) : (
'fas fa-undo-alt carousel-processing-icon'
)
}
aria-hidden="true"
onClick={changeImageDetail}
/>
</button>
</div>
</div>
<div className="row">
<div className="carrousel-icons">
<button className="carousel-button">
<span
className={
zoomEfect ? (
'fas fa-search-minus carousel-processing-zoom-icon'
) : (
'fas fa-search-plus carousel-processing-icon'
)
}
aria-hidden="true"
onClick={onZoomEfect}
/>
</button>
</div>
</div>
</div>
</div>
</div>
) : null}
<table className="pay-detail col-12">
<thead>
<tr>
<th>
<i
className="fas fa-pen text-light-gray"
data-toggle="tooltip"
data-placement="top"
title="Can edit this field"
/>{' '}
Beneficiario
</th>
<th>Tipo de Cheque</th>
<th>Firma</th>
<th>Endosado</th>
</tr>
</thead>
<tbody>
<tr className="check-item">
<td>
{' '}
<input
type="text"
value={
checkSelected !== undefined && checkSelected !== null ? checkSelected.payee : ''
}
onChange={(event) => onChangeValueDetail(event, 8)}
onBlur={event => onChangePayeeCheckDetails(event)}
/>
</td>
<td>
{checkSelected !== undefined && checkSelected !== null ? (
checkSelected.checkTypeDescription
) : (
''
)}
</td>
{checkSelected !== undefined && checkSelected !== null ? (
<td>{checkSelected.signature === 'true' ? 'Yes' : 'No'}</td>
) : (
<td>No</td>
)}
<td>
{checkSelected !== undefined && checkSelected !== null ? checkSelected.endorsement : ''}
</td>
</tr>
</tbody>
</table>
</div>
</div>
);
};
export default checkDetail;