viam-projectv-scan
Version:
ViaCheck deposit application
267 lines (261 loc) • 9.73 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
} = 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">
<a
// className="carousel-control-next"
href="#carouselBatch"
role="button"
>
<span
className={
zoomEfect
? 'fas fa-undo-alt carousel-processing-zoom-icon'
: 'fas fa-undo-alt carousel-processing-icon'
}
// className="carousel-control-next-icon"
// className="carousel-control-next-icon next-icon-margin-top"
aria-hidden="true"
onClick={changeImageDetail}
/>
</a>
</div>
</div>
<div className="row">
<div className="carrousel-icons">
<a
// className="carousel-control-next zoom-icon"
href="#carouselBatch"
role="button"
>
<span
className={
zoomEfect
? 'fas fa-search-minus carousel-processing-zoom-icon'
: 'fas fa-search-plus carousel-processing-icon'
}
aria-hidden="true"
onClick={onZoomEfect}
/>
</a>
</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)}
/>
</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;