viam-projectv-scan/src/containers/ScanApp.js

ViaCheck deposit application

/* eslint-disable jsx-a11y/anchor-is-valid */
import { Dialog, Pane } from 'evergreen-ui';
import React, { Component, Fragment } from 'react';
import { withRouter } from 'react-router-dom';
import CheckDetail from '../components/scanList/checkDetail';
import CheckTable from '../components/scanList/checkTable';
import CheckTableTotal from '../components/scanList/checkTableTotal';
import ErrorDetail from '../components/scanList/errorDetail';
import RangerError from '../components/scanList/rangerError';
import Receipt from '../components/scanList/receipt';
import ScanFooter from '../components/scanList/scanFooter';
import ScanHeader from '../components/scanList/scanHeader';
import ScanInit from '../components/scanList/scanInit';
import Loading from '../components/share/loading';
import AgencySetting from '../graphql/mutations/agencySettings';
import UserSync from '../graphql/mutations/userSynchronization';
import Verify from '../graphql/mutations/gVerify';
import ValidateCheck from '../graphql/mutations/index';
import OnHoldValidations from '../graphql/mutations/onHoldChecks';
import { QUERY_VERSION } from '../graphql/queries';
import DepositChecks from '../services/depositchecks';
import Ocr from '../services/ocrInformation';

const Utilities = require('../js/checks/utilities');
const CheckRules = require('../js/checks/checkRules');
const OnHoldRules = require('../js/checks/onHoldRules');
const CheckStatusRules = require('../js/checks/checkStatusRules');
const CheckDepositRules = require('../js/checks/checkDepositRules');
const CheckCommonRules = require('../js/checks/checkCommonRules');
const connectingImage = require('../assets/images/descargaanimated.gif');
const scanImage = require('../assets/images/descarga.png');

const SCANNER_NO_CONNECTED =
	'El escáner se encuentra desconectado. Por favor conecte el escáner antes de inciar. ¿No sabes cómo?, Click aquí';
const BATCH_PENDING = 'Viacheck está abierto en otra ventana. Por favor cierre una de las ventanas para continuar';
const SCANNER_EXCEPTION =
	'El escáner presenta inconvenientes. Posible razones: \n 1. Cartucho de tinta \n 2. Cheque atascado';
const NETWORK_ERROR =
	'Error 410: No podemos comunicarnos con el servidor, asegúrese de estar conectado a Internet y vuelva a intentarlo en 10 segundos. Si el problema persiste, llame a (866) 547 3246';
const DEPOSIT_ERROR = 'Ocurrió un error al realizar el depósito. Por favor intente nuevamente';
const AGENCY_SETTINGS = 'Ocurrio un error al consultar la configuración de la agencia. Por favor intente nuevamente';
const USER_SYNC = 'Ocurrio un error al actualizar las agencias. Por favor intente nuevamente';
const ERROR_TYPES = {
	COMUNICATION: 'comunication',
	NETWORK: 'network',
	AGENCYCONFIGURATION: 'AgencyConfiguration',
	DEPOSIT: 'deposit',
	SCANNER: 'scanner',
	INKSCANNER: 'inkScanner',
	BUSYSCANNER: 'BusyScanner'
};

const columnNumber = 6;

let Ranger = '';
let stateLocalStorage = '';

class ScanApp extends Component {
	checkTableRef = {};
	state = {};

	constructor(props) {
		super(props);
		this.setupParams(props);
	}

	componentDidMount() {
		this.timer = setInterval(() => this.validateConnection(), 1000);
	}

	setupParams = (props) => {
		stateLocalStorage =
			localStorage.getItem('state') === null || localStorage.getItem('state') === 'undefined'
				? null
				: JSON.parse(localStorage.getItem('state'));
		if (window.ranger === undefined && stateLocalStorage !== null && stateLocalStorage !== undefined) {
			stateLocalStorage.newRangerState = 0;
			stateLocalStorage.previousRangerState = 0;
		}

		const userParams = props.userParams;
		this.state = this.initLocalStorage(stateLocalStorage, userParams.agencyByDefault, userParams.user);

		if (userParams.token) {
			localStorage.setItem('token', userParams.token);
			if (this.state.agency) {
				this.setState({ tokenApp: userParams.token });
			}
		}

		if (userParams.user) {
			localStorage.setItem('user', userParams.user);
			this.state.user = userParams.user;
		}

		if (userParams.agencyByDefault) {
			localStorage.setItem('branch', userParams.agencyByDefault);
			this.state.agency = userParams.agencyByDefault;
		}

		if (userParams.language) {
			localStorage.setItem('i18nextLng', userParams.language);
			this.state.language = userParams.language;
		}

		this.getAgencySetting(props);
		this.updateUserBranches();
	};

	startProperties = (newLocalStorage, isSaveScannerStatus) => {
		return {
			checksArray: [],
			imagesArray: [],
			isShown: false,
			user: '',
			agency: '',
			isDeposit: false,
			receipt: [],
			tokenApp: '',
			isReadyScanning: false,
			isReviewFilter: false,
			isRemoveFilter: false,
			quantityRemove: 0,
			quantityReview: 0,
			errorMessage: { isError: false, message: '', type: '' },
			isProcess: false,
			isFrontActive: true,
			batchId: 0,
			stopValidatingNetwork: false,
			checksOnHoldArray: [],
			rowSelected: 0,
			zoomEfect: false,
			tryAgainOCR: false,
			newRangerState: isSaveScannerStatus ? newLocalStorage.newRangerState : 0,
			previousRangerState: isSaveScannerStatus ? newLocalStorage.previousRangerState : 0,
			agencySettingsData: {
				endorsementText: '',
				enableVerify: false,
				agencyName: '',
				maxAmountPerCheck: 0
			}
		};
	};

	initLocalStorage = (stateLocalStorage, agencyName, userName) => {
		let newLocalStorage = stateLocalStorage;
		if (newLocalStorage !== null && newLocalStorage !== undefined) {
			if (newLocalStorage.checksArray === undefined || newLocalStorage.checksArray === null) {
				newLocalStorage = this.startProperties(newLocalStorage, true);
			} else if (
				newLocalStorage.checksArray.length === 0 ||
				newLocalStorage.checksArray[0].agencyName !== agencyName ||
				newLocalStorage.checksArray[0].userName !== userName
			) {
				newLocalStorage = this.startProperties(newLocalStorage, true);
			} else {
				newLocalStorage.isDeposit = false;
				newLocalStorage.receipt = [];
				newLocalStorage.isFrontActive = true;
				newLocalStorage.zoomEfect = false;
				newLocalStorage.tryAgainOCR = false;
				newLocalStorage.isProcess = false;
				newLocalStorage.checksArray = CheckRules.restartProperties(
					newLocalStorage.checksArray
				  );
				if (newLocalStorage.errorMessage !== undefined) {
					if (
						newLocalStorage.errorMessage.isError === true &&
						newLocalStorage.errorMessage.type !== ERROR_TYPES.SCANNER
					) {
						newLocalStorage.errorMessage = {
							isError: false,
							message: '',
							type: ''
						};
					}
				}

				if (
					newLocalStorage.newRangerState === 4 &&
					newLocalStorage.previousRangerState === 3 &&
					window.ranger !== undefined &&
					window.ranger !== null
				)
					newLocalStorage.isReadyScanning = true;
				else if (window.ranger === undefined || window.ranger === null) {
					newLocalStorage.newRangerState = 0;
					newLocalStorage.previousRangerState = 0;
					newLocalStorage.isReadyScanning = false;
				}
			}
		} else {
			newLocalStorage = this.startProperties(newLocalStorage, false);
		}

		if (window.ranger === 'undefined') {
			this.setState({
				newRangerState: 0,
				previousRangerState: 0,
				isReadyScanning: false
			});
			this.saveChecksArrayLocalStorage('state', {
				newRangerState: 0,
				previousRangerState: 0,
				isReadyScanning: false
			});
		}

		return newLocalStorage;
	};

	onChangePayeeCheckDetails = () => {
		const { client } = this.props;
		const { checksArray, rowSelected } = this.state;
		const newCheck = checksArray[rowSelected];
		this.getCheckValidationsFromService(newCheck, client, false);
	  };

	updateUserBranches = () => {
		const { userBranchs, userGroups } = this.props.userParams;
		const { user } = this.state;
		const { client } = this.props;

		let userProfile = 0;

		// Set the user's profile for the CSR table
		if (userGroups.includes('Admin') || userGroups.includes('SuperUsers'))
			userProfile = 1; // Admin user
		else 
			userProfile = 7; // Agent user

		const argms = {
			agencies: userBranchs,
			profile: userProfile,
			userName: user
		};

		UserSync(argms, client).then((response) => {
			if (response !== null && response !== undefined) {
				if (response.userSync.code !== '000') {
					const state = {
						errorMessage: { isError: true, message: USER_SYNC }
					};
					this.setState(state);
				}
			} else {
				const state = {
					errorMessage: {
						isError: true,
						message: NETWORK_ERROR,
						type: ERROR_TYPES.AGENCYCONFIGURATION
					}
				};
				this.setState(state);

				this.saveChecksArrayLocalStorage('state', state);
			}
		});
	};

	getAgencySetting = () => {
		const { agency } = this.state;
		const { client } = this.props;
		const argms = {
			agencyName: agency
		};

		AgencySetting(argms, client).then((response) => {
			if (response !== null && response !== undefined) {
				if (response.getAgencySettings.status.code !== '000') {
					const state = {
						errorMessage: { isError: true, message: AGENCY_SETTINGS }
					};
					this.setState(state);
					// this.saveChecksArrayLocalStorage('state', state);
				}

				if (response.getAgencySettings.agencySettingsData !== null) {
					const settings = {
						agencySettingsData: {
							endorsementText: response.getAgencySettings.agencySettingsData.endorsementText,
							enableVerify: response.getAgencySettings.agencySettingsData.isGVerify,
							agencyName: response.getAgencySettings.agencySettingsData.branchName,
							maxAmountPerCheck: response.getAgencySettings.agencySettingsData.maxAmountPerCheck
						}
					};

					this.setState(settings);
					this.saveChecksArrayLocalStorage('state', settings);

					this.initRanger(response.getAgencySettings.agencySettingsData.endorsementText);
					
				} else {
					
					this.initRanger('');
				}
			} else {
				const state = {
					errorMessage: {
						isError: true,
						message: NETWORK_ERROR,
						type: ERROR_TYPES.AGENCYCONFIGURATION
					}
				};
				this.setState(state);

				this.saveChecksArrayLocalStorage('state', state);
			}
		});
	};

	onZoomEfect = () => {
		const { zoomEfect } = this.state;
		const state = {
			zoomEfect: !zoomEfect
		};

		this.setState(state);
		this.saveChecksArrayLocalStorage('state', state);
	};

	validateConnection = () => {
		const { tryAgainOCR, checksArray } = this.state;

		if (tryAgainOCR && CheckRules.validateRetry(checksArray)) {
			this.getApiStatus();
		}
	};

	getApiStatus = async () => {
		const { client: { query } } = this.props;

		query({
			query: QUERY_VERSION,
			fetchPolicy: 'no-cache'
		})
			.then((data) => {
				if (data !== undefined) {
					this.tryAgainGetOcrInformation();
				}
			})
			.catch((error) => {
				console.log(error);
				this.reviewShowErrorNetwork();
			});
	};

	reviewShowErrorNetwork = async () => {
		const { stopValidatingNetwork, checksArray } = this.state;

		if (stopValidatingNetwork === false) {
			await this.sleep(5000);
			const state = { stopValidatingNetwork: true };
			this.setState(state);
			this.saveChecksArrayLocalStorage('state', state);
		} else {
			this.updateChecksArray(CheckRules.updateNetworkStatus(checksArray));
			this.showComunicationError(NETWORK_ERROR, ERROR_TYPES.NETWORK);
		}
	};

	updateChecksArray = (newChecksArray) => {
		this.setState({ checksArray: newChecksArray });
		this.saveChecksArrayLocalStorage('state', { checksArray: newChecksArray });
	};

	saveChecksArrayLocalStorage = (key, array) => {
		const state = this.getStateLocalStorage();
		if (state !== null) {
			Object.keys(array).forEach((element) => {
				state[element] = array[element];
			});

			localStorage.setItem(key, JSON.stringify(state));
		} else {
			localStorage.setItem(key, JSON.stringify(this.state));
		}
	};

	getStateLocalStorage = () => {
		let newStateValues = null;
		if (localStorage.getItem('state') !== undefined || localStorage.getItem('state') !== null) {
			newStateValues = JSON.parse(localStorage.getItem('state'));
		}
		return newStateValues;
	};

	tryAgainGetOcrInformation = () => {
		const { checksArray } = this.state;

		for (let i = 0; i < checksArray.length; i += 1) {
			const check = checksArray[i];
			if (check.validFields.isNetworkError && check.retry < 3) {
				check.retry += 1;
				check.validFields.isNetworkError = false;
				this.getOcrInformation(check);
			}

			if (check.validFields.isNetworkError && check.retry >= 3) {
				check.isOcr = true;
				check.status = false;
				check.disableCell = false;
			}
			this.changeCheckArrayValues(check);
		}
	};

	tryDeposit = () => {
		const { batchId, checksOnHoldArray } = this.state;
		const state = { isProcess: true };
		this.setState(state);
		this.saveChecksArrayLocalStorage('state', state);

		if (batchId === 0) this.deposit();
		else this.sendChecksToDeposit(batchId, checksOnHoldArray);
	};

	onHandleCleanBatch = () => {
		const state = {
			isShown: false,
			isDeposit: false,
			receipt: [],
			tokenApp: '',
			checksArray: [],
			imagesArray: [],
			isReviewFilter: false,
			isRemoveFilter: false,
			quantityRemove: 0,
			quantityReview: 0,
			checksOnHoldArray: [],
			batchId: 0,
			rowSelected: 0,
			stopValidatingNetwork: false,
			tryAgainOCR: false
		};

		this.setState(state);
		this.saveChecksArrayLocalStorage('state', state);
	};

	changeCheckArrayValues = async (newCheckSelected) => {
		const { checksArray } = this.state;

		const index = CheckCommonRules.getCheckArrayIndex(checksArray, newCheckSelected);

		checksArray[index] = newCheckSelected;

		this.setState(() => ({ ...checksArray }));
		const newChecksArray = checksArray;
		this.saveChecksArrayLocalStorage('state', { checksArray: newChecksArray });
	};

	onChangeValue = async (event, columnPosition) => {
		const { rowSelected, checksArray } = this.state;
		const newCheck = checksArray[rowSelected];	
	
		if (columnPosition === 2) {
		  newCheck.checkNumber = event.target.value;
		  newCheck.isChangeValues.checkNumber = true;
		}
		if (columnPosition === 3) {
		  newCheck.routing = event.target.value;
		  newCheck.isChangeValues.routing = true;
		}
		if (columnPosition === 4) {
		  newCheck.account = event.target.value;
		  newCheck.isChangeValues.account = true;
		}
		if (columnPosition === 5) {
		  newCheck.isChangeValues.amount = true;
		  newCheck.amount = event.target.value.replace('$', '');
		}
		newCheck.modified = true;
		newCheck.isVerify = false;
		newCheck.colorVerify = '';
	
		this.changeCheckArrayValues(newCheck);
	  };

	onSetFocusRow = (index) => {
		const { checksArray } = this.state;
		const newCheck = checksArray[index];
		newCheck.isEditing = true;
		this.changeCheckArrayValues(newCheck);
	};

	onChangeValueDetail = (event, columnPosition) => {
		const { rowSelected, checksArray } = this.state;
		const newCheck = checksArray[rowSelected];
		const input = event;

		if (columnPosition === 7) {
			newCheck.payerAddressName = input.target.value;
			newCheck.isModifiedFields.maker = true;
		}

		if (columnPosition === 8) {
			newCheck.payee = input.target.value;
			newCheck.isModifiedFields.payee = true;
		}

		newCheck.modified = true;
		this.changeCheckArrayValues(newCheck);
	};

	closeReceipt = () => {
		const { errorMessage } = this.state;

		if (!errorMessage.isError && errorMessage.type === '') {
			this.onHandleCleanBatch();
		} else {
			const state = {
				isShown: false,
				isDeposit: false,
				receipt: []
			};
			this.setState(state);
			this.saveChecksArrayLocalStorage('state', state);
		}
	};

	addRangerEvents = (endorsementText) => {
		const init = window.initRanger;
		Ranger = init.initializeRanger(endorsementText, 'ws://127.0.0.1:9002');
		this.addNewStateRanger();
		this.addOnLostConnectionRanger();
		this.addOnBusySocket();
		Ranger.StartUp();
		window.ranger = Ranger;
	};


	startNewRanger = (endorsementText) => {
		this.addRangerEvents(endorsementText);
	};

	initRanger = (endorsementText) => {
	
		if (window.ranger === undefined || window.ranger === null) {
			this.startNewRanger(endorsementText);
	
		} else {
			Ranger = window.ranger;
			this.addOnLostConnectionRanger();
			this.addOnBusySocket();
			this.addNewStateRanger();
			const status = Ranger.GetTransportState();
			if (status !== 0 && status !== 6 && status !== 7) {
				console.log(Ranger.GetTransportStateString());
				this.setState({
					newRangerState: status,
					previousRangerState: status - 1
				});
			} else {
				this.startNewRanger(endorsementText);
			
			}
		}
	};

	addOnLostConnectionRanger = () => {
		Ranger.OnLostConnectionEvent = function onLostConnectionEvent() {
			console.log('OnLostConnectionEvent');
			const state = {
				errorMessage: {
					isError: true,
					message: SCANNER_NO_CONNECTED,
					type: ERROR_TYPES.SCANNER
				}
			};
			this.setState(state);
			this.saveChecksArrayLocalStorage('state', state);
		
		}.bind(this);
	};

	addOnBusySocket = () => {
		Ranger.OnBusyWebSocketEvent = function onBusyWebSocketEvent() {
			console.log('OnBusyWebSocketEvent');
			
			const state = {
				errorMessage: {
					isError: true,
					message: BATCH_PENDING,
					type: ERROR_TYPES.BUSYSCANNER
				},
				SCANNER_NO_CONNECTED: false
			};
			this.setState(state);
		
		}.bind(this);

		Ranger.OnErrorCallback = function OnErrorCallback() {
			console.log('OnErrorCallback');
			Ranger.StartUp();
		};
	};

	addScannerFeedingEvent = (agencySettingsData) => {
		Ranger.SetFixedEndorseText(1, 1, agencySettingsData.endorsementText);
		const { errorMessage, checksArray } = this.state;
		if (checksArray.length > 0) this.setState({ isReadyScanning: true });

		if (
			(errorMessage.isError === true && errorMessage.type === ERROR_TYPES.BUSYSCANNER) ||
			errorMessage.message === ERROR_TYPES.SCANNER_NO_CONNECTED
		) {
			const cleanErrorScanner = {
				errorMessage: {
					isError: false,
					message: '',
					type: ''
				}
			};
			this.setState(cleanErrorScanner);
			this.saveChecksArrayLocalStorage('state', cleanErrorScanner);
		}
	};

	addScannerExceptionEvent = () => {
		const exceptionScanner = {
			errorMessage: {
				isError: true,
				message: SCANNER_EXCEPTION,
				type: ERROR_TYPES.INKSCANNER
			}
		};

		this.setState(exceptionScanner);
		this.saveChecksArrayLocalStorage('state', exceptionScanner);
	};

	addScannerConnectionEvent = () => {
		const errorScanner = {
			errorMessage: {
				isError: true,
				message: SCANNER_NO_CONNECTED,
				type: ERROR_TYPES.SCANNER
			}
		};
		this.setState(errorScanner);
		this.saveChecksArrayLocalStorage('state', errorScanner);
	};

	addNewStateRanger = () => {
		Ranger.TransportNewState = function transportNewState(newState, previousState) {
			const { agencySettingsData } = this.state;
			const state = {
				newRangerState: newState,
				previousRangerState: previousState
			};

			this.setState(() => state);
			this.saveChecksArrayLocalStorage('state', state);

			if (newState === 4 && previousState === 3) {
				this.addScannerFeedingEvent(agencySettingsData);
			}

			if (newState === 0 && previousState === 7) {
				this.addScannerConnectionEvent();
			}

			if (newState === 6) {
				this.addScannerExceptionEvent();
			}
		}.bind(this);
	};

	restartRanger = () => {
		Ranger.StartUp();
	};

	startScan = () => {
		const { user, agency } = this.state;

		const state = {
			isDeposit: false,
			receipt: [],
			isReadyScanning: true,
			stopValidatingNetwork: false,
			tryAgainOCR: false
		};
		this.setState(state);
		this.saveChecksArrayLocalStorage('state', state);

		Ranger.StartFeeding(0, 0);

		Ranger.TransportItemInPocket = function transportItemInPocket() {
			const { checksArray, imagesArray } = this.state;

			const mirc = Ranger.GetMicrText(1);
			const back = Ranger.GetImageBase64(1, 0);
			const front = Ranger.GetImageBase64(0, 0);
			const order = CheckRules.getCheckScanOrder(checksArray) + 1;

			const check = CheckRules.createCheck(order, mirc, agency, user);

			const images = CheckRules.createCheckImages(order, front, back);

			if (checksArray.length === 0) {
				const select = { rowSelected: 0 };
				this.setState(select);
				this.saveChecksArrayLocalStorage('state', select);
			}

			checksArray.push(check);
			imagesArray.push(images);

			this.setState({ checksArray, imagesArray });
			const newChecksArray = checksArray;
			const newImagesArray = imagesArray;
			this.saveChecksArrayLocalStorage('state', {
				checksArray: newChecksArray,
				imagesArray: newImagesArray
			});

			this.getOcrInformation(check, images);
		}.bind(this);
	};

	getDepositResponse = (response, checksArray, receipt, argms) => {
		if (response !== undefined && response !== null) {
		  if (
			response.data.checkInformationList !== null &&
			response.data.checkInformationList !== undefined
		  ) {
			this.setDepositSuccess(
			  checksArray,
			  receipt,
			  response.data.checkInformationList
			);
		  } else {
			this.setDepositError(checksArray, argms.checkList);
		  }
		} else {
		  this.setDepositError(checksArray, argms.checkList);
		}
	  };

	  stopDepositProcess = checkDeposit => {
		if (checkDeposit.length === 0) {
		  const state = {
			isProcess: false
		  };
		  this.setState(state);
		  this.saveChecksArrayLocalStorage('state', state);
		}
	  };

	getOcrInformation = (check, images) => {
		const { checksArray, imagesArray, agencySettingsData } = this.state;
		const { client } = this.props;
		let newCheck = check;
		let newImages = images;

		const ocrJson = {
			scanOrder: images.scanOrder,
			frontCheckImage: images.frontImage,
			backCheckImage: images.backImage
		};

		Ocr(ocrJson, this.props.userParams.ocrURL)
			.then((response) => {
				try {
					if (response !== undefined && response !== null) {
						const { data } = response;

						newCheck = CheckRules.createCheckOcr(data, newCheck, checksArray, agencySettingsData);
						newImages = CheckRules.createImagesOcr(data, newImages);
						newCheck = this.getCheckValidationsFromService(newCheck, client, true);

						const newChecksArray = checksArray;
						const newImagesArray = imagesArray;
						const state = {
							checksArray: newChecksArray,
							imagesArray: newImagesArray,
							errorMessage: { isError: false, type: '', message: '' }
						};

						this.setState(() => state);
						this.saveChecksArrayLocalStorage('state', state);
					} else {
						newCheck.disableCell = false;
						newCheck.validFields.isNetworkError = true;
						const state = { tryAgainOCR: true };
						this.setState(state);
						this.saveChecksArrayLocalStorage('state', state);
					}
				} catch (e) {
					console.log(e);
				}
			})
			.catch((e) => {
				console.log(e);
				return true;
			})
			.finally(() => {
				// console.log("finally 2");
				return true;
			});
	};

	showComunicationError = (messageError, typeError) => {
		const state = {
			isProcess: false,
			errorMessage: {
				isError: true,
				type: typeError,
				message: messageError
			}
		};
		this.setState(state);
		this.saveChecksArrayLocalStorage('state', state);
	};

	sleep = (milliseconds) => {
		return new Promise((resolve) => setTimeout(resolve, milliseconds));
	};

	sendChecksToDeposit = (batchId, checksOnHoldArray) => {
		const { tokenApp, isError, checksArray, receipt, imagesArray } = this.state;

		let checkDeposit = CheckDepositRules.getChecksForDeposit(checksArray);

		if (checkDeposit.length === 0) {
			const state = {
				isProcess: false
			};
			this.setState(state);
			this.saveChecksArrayLocalStorage('state', state);
			return;
		}

		while (checkDeposit.length > 0 && !isError) {
			const argms = {
				checkList: CheckDepositRules.createNewChecksArray(batchId, checkDeposit, imagesArray, checksOnHoldArray)
			};

			DepositChecks(argms, tokenApp, this.props.userParams.depositUrl).then((response) => {
				console.log(response);
				try {
					this.getDepositResponse(response, checksArray, receipt, argms);
				  } catch (e) {
					const state = { isProcess: false };
					this.setState(state);
					this.saveChecksArrayLocalStorage('state', state);
				  }
				});
		
			checkDeposit = CheckDepositRules.getChecksForDeposit(checksArray);
		}
	};

	setDepositSuccess = (checksArray, receipt, response) => {
		let newReceipt = [];
		newReceipt = CheckDepositRules.getChecksForReceipt(receipt, response);
		const newChecksArray = CheckDepositRules.markChecksDeposited(checksArray, response, true, true);
		const state = {
			checksArray: newChecksArray,
			errorMessage: { isError: false, type: '', message: '' }
		};
		this.setState(state);
		this.saveChecksArrayLocalStorage('state', state);

		this.verifyShowReceipt(checksArray, newReceipt, receipt);
	};

	setDepositError = (checksArray, checkList) => {
		const newChecksArray = CheckDepositRules.markChecksDeposited(checksArray, checkList, false, false);
		this.updateChecksArray(newChecksArray);
		this.showReceipt(ERROR_TYPES.DEPOSIT);
	};

	verifyShowReceipt = (checksArray, newReceipt, receipt) => {
		const state = { receipt: newReceipt };
		this.setState(state);
		this.saveChecksArrayLocalStorage('state', state);

		if (checksArray.length === receipt.length) {
			this.showReceipt('');
		}
	};

	showReceipt = (errorType) => {
		const { checksArray, receipt } = this.state;

		if (receipt.length === 0) {
			this.showComunicationError(DEPOSIT_ERROR, ERROR_TYPES.DEPOSIT);
		} else if (errorType === '' || checksArray.length === receipt.length) {
			const state = {
				checksArray: [],
				imagesArray: [],
				isReadyScanning: true,
				isDeposit: true,
				isProcess: false,
				batchId: 0,
				checksOnHoldArray: []
			};
			this.setState(state);
			this.saveChecksArrayLocalStorage('state', state);
		} else {
			const newChecksArray = CheckRules.updateNewChecksArray(checksArray, receipt);

			const state = {
				checksArray: newChecksArray,
				isDeposit: true,
				isProcess: false,
				errorMessage: { isError: false, type: errorType }
			};
			this.setState(state);

			this.saveChecksArrayLocalStorage('state', state);
		}
	};

	getHoldValidation = async (argms, client) => {
		let checksOnHold = [];
	
		await OnHoldValidations(argms, client).then(response => {
		  try {
			if (response === undefined || response === null) {
			  this.showComunicationError(NETWORK_ERROR, ERROR_TYPES.DEPOSIT);
			  return;
			}
	
			if (response.getValidationsBeforeDeposit.status.code !== '000') {
			  this.showComunicationError(DEPOSIT_ERROR, ERROR_TYPES.DEPOSIT);
			  return;
			}
	
			checksOnHold = response.getValidationsBeforeDeposit;
		  } catch (e) {
			// eslint-disable-next-line no-console
			console.log(e);
			this.showComunicationError(DEPOSIT_ERROR, ERROR_TYPES.DEPOSIT);
		  }
		});
		return checksOnHold;
	  };

	getHoldValidationsByBatch = async (client, checksArray) => {
		let checksOnHoldArray = [];
		let newChecksArray = checksArray;
		let newHoldArray = OnHoldRules.isAllArrayHoldProcess(newChecksArray);
		const holdResults = [];
		const { isError } = this.state;
	
		while (newHoldArray.length > 0 && !isError) {
		  const arrays = OnHoldRules.createNewArrayOnHoldRestrictions(
			newChecksArray,
			newHoldArray
		  );
		  newHoldArray = OnHoldRules.isAllArrayHoldProcess(newChecksArray);
	
		  const argms = {
			checkList: {
			  checkInfoList: arrays.newHoldArray,
			  isCreateBatch: (newHoldArray.length === 0).toString()
			}
		  };
	
		  newChecksArray = arrays.checksArray;
		  holdResults.push(this.getHoldValidation(argms, client));
		}
		const result = await Promise.all(holdResults);
		checksOnHoldArray = OnHoldRules.getHoldValidationFromResponse(result);
		console.log(checksOnHoldArray);
	
		this.setState({ checksArray: newChecksArray });
	
		return checksOnHoldArray;
	  };

	  updateHoldState = holdRestrictionArray => {
		const holdState = {
		  errorMessage: { isError: false, type: '', message: '' },
		  batchId: holdRestrictionArray.batch,
		  checksOnHoldArray: holdRestrictionArray.newHoldArray
		};
	
		this.setState(holdState);
		this.saveChecksArrayLocalStorage('state', holdState);
	  };
	

	deposit = async () =>  {
		const { client } = this.props;
		let { checksArray } = this.state;
		if (checksArray.length === 0) return;
	
		const state = { isProcess: true };
		this.setState(state);
		this.saveChecksArrayLocalStorage('state', state);
		console.log('start deposit');
		if (CheckRules.validateChecks(checksArray)) {
		  checksArray = OnHoldRules.restartSentHold(checksArray);
		  console.log('before validation');
		  const holdRestrictionArray = await this.getHoldValidationsByBatch(
			client,
			checksArray
		  );
		  console.log('after validation');
	
		  if (
			holdRestrictionArray.newHoldArray.length > 0 &&
			holdRestrictionArray.batch > 0
		  ) {
			console.log('send deposit');
			this.updateHoldState(holdRestrictionArray);
	
			this.sendChecksToDeposit(
			  holdRestrictionArray.batch,
			  holdRestrictionArray.newHoldArray
			);
		  } else {
			this.showComunicationError(DEPOSIT_ERROR, ERROR_TYPES.DEPOSIT);
		  }		
	} else {
		const noError = {
		  errorMessage: { isError: false, type: '', message: '' }
		};
		this.setState(noError);
		this.saveChecksArrayLocalStorage('state', noError);
	  }
	};

	closeErrorMesage = () => {
		const { errorMessage, agencySettingsData } = this.state;

		if (errorMessage.type === ERROR_TYPES.SCANNER) {
			window.ranger = null;
			// this.initRanger(agencySettingsData.endorsementText, false);
			this.initRanger(agencySettingsData.endorsementText);
		}

		if (errorMessage.type === ERROR_TYPES.INKSCANNER) Ranger.StartUp();

		if (errorMessage.type === ERROR_TYPES.DEPOSIT) this.tryDeposit();

		if (errorMessage.type === ERROR_TYPES.AGENCYCONFIGURATION) this.getAgencySetting();

		const state = {
			errorMessage: { isError: false, message: '' }
		};
		this.setState(state);
		this.saveChecksArrayLocalStorage('state', state);
	};

	validateRouting = (event) => {
		const { client } = this.props;
		const { checksArray, rowSelected } = this.state;
		const newCheck = checksArray[rowSelected];

		if (newCheck.isChangeValues.routing) {
			newCheck.routing = event.target.value;
			newCheck.disableCell = true;
			newCheck.isChangeValues.routing = false;
			newCheck.isModifiedFields.routing = true;

			const isValidRouting =
				Utilities.validateRequieredField(event.target.value) && event.target.value.length === 9;

			newCheck.validFields.routing = isValidRouting;
			const resultDuplicated = CheckRules.isItemDuplicated(checksArray, newCheck);

			if (resultDuplicated) {
				newCheck.validFields.duplicated = true;
				newCheck.disableCell = false;
			} else {
				this.getCheckValidationsFromService(newCheck, client, false);
			}
			this.changeCheckArrayValues(newCheck);
		}
	};

	validateAccount = (event) => {
		const { client } = this.props;
		const { checksArray, rowSelected } = this.state;
		const newCheck = checksArray[rowSelected];

		if (newCheck.isChangeValues.account) {
			newCheck.account = event.target.value;
			newCheck.disableCell = true;
			newCheck.isChangeValues.account = false;
			newCheck.isModifiedFields.account = false;

			const isValidAccount = Utilities.validateRequieredField(event.target.value);
			newCheck.validFields.account = isValidAccount;
			const resultDuplicated = CheckRules.isItemDuplicated(checksArray, newCheck);
			if (resultDuplicated) {
				newCheck.validFields.duplicated = true;
				newCheck.disableCell = false;
			} else {
				this.getCheckValidationsFromService(newCheck, client, false);
			}
			this.changeCheckArrayValues(newCheck);
		}
	};

	validateCheckNumber = (event) => {
		const { client } = this.props;
		const { checksArray, rowSelected } = this.state;
		const newCheck = checksArray[rowSelected];

		if (newCheck.isChangeValues.checkNumber) {
			newCheck.checkNumber = event.target.value;
			newCheck.disableCell = true;
			newCheck.isModifiedFields.checkNumber = true;
			newCheck.isChangeValues.checkNumber = false;

			const isValidCheckNumber = Utilities.validateRequieredField(event.target.value);

			newCheck.validFields.checkNumber = isValidCheckNumber;

			const resultDuplicated = CheckRules.isItemDuplicated(checksArray, newCheck);
			if (resultDuplicated) {
				newCheck.validFields.duplicated = true;
				newCheck.disableCell = false;
			} else {
				this.getCheckValidationsFromService(newCheck, client, false);
			}
			this.changeCheckArrayValues(newCheck);
		}
	};

	validateAmount = (event) => {
		const { client } = this.props;
		const { checksArray, rowSelected } = this.state;
		const newCheck = checksArray[rowSelected];

		newCheck.isEditing = false;
		if (newCheck.isChangeValues.amount) {
			newCheck.amount = event.target.value === '' ? '0' : event.target.value;
			newCheck.disableCell = true;

			newCheck.isChangeValues.amount = false;
			newCheck.isModifiedFields.amount = true;

			let isValidAmount = CheckRules.validateAmount(event.target.value);
			if (isValidAmount) {
				isValidAmount =
					newCheck.amount <= newCheck.maximumAmountPerCheck && newCheck.maximumAmountPerCheck !== 0;
			}

			newCheck.validFields.amount = isValidAmount;

			const resultDuplicated = CheckRules.isItemDuplicated(checksArray, newCheck);

			if (resultDuplicated) {
				newCheck.validFields.duplicated = true;
				newCheck.disableCell = false;
			} else {
				this.getCheckValidationsFromService(newCheck, client, false);
			}
		}

		this.changeCheckArrayValues(newCheck);
	};

	onCheckVerifyList = () => {
		const { client } = this.props;
		const { checksArray } = this.state;
		const checksVerify = CheckStatusRules.getCheckVerifyItems(checksArray);

		const argms = {
			checkList: checksVerify
		};

		const process = { isProcess: true };
		this.setState(process);
		this.saveChecksArrayLocalStorage('state', process);

		Verify(argms, client).then((response) => {
			try {
				const noProcess = { isProcess: false };
				this.setState(noProcess);
				this.saveChecksArrayLocalStorage('state', noProcess);

				if (response !== undefined && response !== null) {
					if (response.getGVerify.status !== undefined && response.getGVerify.status !== null) {
						if (response.getGVerify.status.code === '000') {
							const newChecksArray = CheckStatusRules.setCheckVerifyItems(
								response.getGVerify.verifyInformationList,
								checksArray
							);
							this.state.checksArray = newChecksArray;
							this.filterChecks();
							this.saveChecksArrayLocalStorage('state', {
								checksArray: newChecksArray
							});
							// this.updateBatchPending(newChecksArray);
						}
					}
				}
			} catch (e) {
				console.log(e);
			}
		});
	};

	onCheckVerify = () => {
		const { client } = this.props;
		const { rowSelected, checksArray } = this.state;
		const newCheck = checksArray[rowSelected];

		const argms = {
			checkList: CheckStatusRules.getCheckVerifyCheck(newCheck)
		};
		Verify(argms, client).then((response) => {
			try {
				if (response !== undefined && response !== null) {
					if (response.getGVerify.status !== undefined && response.getGVerify.status !== null) {
						if (response.getGVerify.status.code === '000') {
							newCheck.isVerify = true;
							if (
								response.getGVerify.verifyInformationList !== undefined &&
								response.getGVerify.verifyInformationList !== null
							) {
								if (response.getGVerify.verifyInformationList.length > 0)
									newCheck.colorVerify =
										response.getGVerify.verifyInformationList[0].colorVerificationResponse;
							}

							this.changeCheckArrayValues(newCheck);

							this.filterChecks();
						}
					}
				}
			} catch (e) {
				console.log(e);
			}
		});
	};

	getCheckValidationsFromService = (check, client, isCallingOCR) => {
		let newCheck = check;
		const argms = CheckRules.getParametersCheckValidations(newCheck);
		const { agencySettingsData } = this.state;

		if (!CheckRules.isRuleRequiered(check)) {
			newCheck = CheckStatusRules.setStatusEnableValidations(newCheck);
			this.filterChecks();

			return newCheck;
		}

		ValidateCheck(argms, client).then((response) => {
			try {
				newCheck = CheckStatusRules.setStatusEnableValidations(newCheck);

				if (response !== null && response !== undefined) {
					if (response.validateScannedCheck.status.code !== '000') {
						return newCheck;
					}

					newCheck = CheckRules.getResponseFromServiceCheckValidations(
						response,
						newCheck,
						isCallingOCR,
						agencySettingsData
					);
				}
				this.changeCheckArrayValues(newCheck);
				this.filterChecks();

				return newCheck;
			} catch (e) {
				return newCheck;
			}
		});

		return newCheck;
	};

	onHandleDeleteCheck = async () => {
		const { checksArray, rowSelected, imagesArray } = this.state;

		const newCheck = checksArray[rowSelected];

		const newChecksArray = CheckRules.removeCheckFromCheckArray(checksArray, newCheck);

		const newImagesArray = CheckRules.removeCheckFromImageArray(imagesArray, newCheck);

		if (rowSelected === newChecksArray.length) {
			this.state.rowSelected -= 1;
			let newRowSelected = rowSelected;
			newRowSelected -= 1;
			this.saveChecksArrayLocalStorage('state', {
				rowSelected: newRowSelected
			});
		}
		this.state.checksArray = newChecksArray;
		this.state.imagesArray = newImagesArray;

		this.setState(() => ({
			isShownDeleteEntry: false
		}));
		this.saveChecksArrayLocalStorage('state', {
			isShownDeleteEntry: false,
			checksArray: newChecksArray,
			imagesArray: newImagesArray
		});

		this.filterChecks();
	};

	deleteCheck = () => {
		const state = {
			isShownDeleteEntry: true
		};
		this.setState(state);
		this.saveChecksArrayLocalStorage('state', state);
	};

	onFilterRemoveChecks = () => {
		const { isRemoveFilter } = this.state;
		const remove = !isRemoveFilter;
		this.state.isRemoveFilter = remove;
		this.saveChecksArrayLocalStorage('state', { isRemoveFilter: remove });
		this.filterChecks();
	};

	onFilterReviewChecks = () => {
		const { isReviewFilter } = this.state;
		const review = !isReviewFilter;
		this.state.isReviewFilter = review;
		this.saveChecksArrayLocalStorage('state', { isReviewFilter: review });
		this.filterChecks();
	};

	filterChecks = async () => {
		const { isReviewFilter, isRemoveFilter, checksArray } = this.state;

		if (isReviewFilter && !isRemoveFilter) {
			const reviewArray = CheckStatusRules.checksToReview(checksArray, true);
			const state = {
				quantityReview: reviewArray.qreview,
				checksArray: reviewArray.checksArray
			};
			this.setState(() => state);
			this.saveChecksArrayLocalStorage('state', state);
		} else if (isReviewFilter && isRemoveFilter) {
			const filterArray = CheckStatusRules.checksToRemoveReview(checksArray);
			const state = {
				quantityReview: filterArray.qreview,
				quantityRemove: filterArray.qremove,
				checksArray: filterArray.checksArray
			};

			this.setState(() => state);
			this.saveChecksArrayLocalStorage('state', state);
		} else if (!isReviewFilter && isRemoveFilter) {
			const removeArray = CheckStatusRules.checksToRemove(checksArray, true);
			const state = {
				quantityRemove: removeArray.qremove,
				checksArray: removeArray.checksArray
			};

			this.setState(() => state);
			this.saveChecksArrayLocalStorage('state', state);
		} else if (!isReviewFilter && !isRemoveFilter) {
			const filterArray = CheckStatusRules.revertChecksStatus(checksArray);
			const state = {
				quantityReview: filterArray.qreview,
				quantityRemove: filterArray.qremove,
				checksArray: filterArray.checksArray
			};
			this.setState(() => state);
			this.saveChecksArrayLocalStorage('state', state);
		}
	};

	onSelectAll = (isSelectedAll) => {
		const { checksArray } = this.state;
		this.updateChecksArray(Utilities.selectAll(checksArray, isSelectedAll));
	};

	onSelectCheck = (index) => {
		const { checksArray } = this.state;
		const newCheckSelected = checksArray[index];

		newCheckSelected.selected = !newCheckSelected.selected;

		this.setState({ ...checksArray });
		const newChecksArray = checksArray;
		this.changeCheckArrayValues(newCheckSelected);
		this.saveChecksArrayLocalStorage('state', { checksArray: newChecksArray });
	};

	showConfirmAlert = () => {
		const { checksArray } = this.state;
		if (checksArray.length > 0) {
			const state = { isShown: true };
			this.setState(state);
			this.saveChecksArrayLocalStorage('state', state);
		}
	};

	changeImageDetail = () => {
		const { isFrontActive } = this.state;
		const isFrontVisible = !isFrontActive;

		const state = { isFrontActive: isFrontVisible };
		this.setState(state);
		this.saveChecksArrayLocalStorage('state', state);
	};

	onSetRef = (inputName) => (ref) => {
		this.checkTableRef[inputName] = ref;
	};

	onHandleKeyBoardTable = async (event, index) => {
		const { checksArray } = this.state;

		if (event.keyCode === 38 || event.keyCode === 40 || event.keyCode === 9 || event.keyCode === 13) {
			const newIndexCheckTable = this.moveCursorCheckTable(event, index, checksArray);
			this.updateCheckSelected(newIndexCheckTable);
		}
	};

	updateCheckSelected = async (index) => {
		const state = {
			rowSelected: index,
			isFrontActive: true
		};
		this.setState(() => state);
		this.saveChecksArrayLocalStorage('state', state);
	};

	moveCursorCheckTable = (event, index, checksArray) => {
		let newDataFocus = 0;
		const checkRow = this.checkTableRef[`tr${index}`].getElementsByClassName('input-move');
		let newIndexCheckTable = index;
		let sw = false;

		checkRow.forEach((checkInputElement) => {
			if (checkInputElement === document.activeElement && !sw) {
				const focusIndex = checkInputElement.attributes.getNamedItem('data-focus').value;
				sw = true;
				if (event.keyCode === 38 && index !== 0) {
					newDataFocus = parseInt(focusIndex, 10) - columnNumber;
					this.setNewFocusElement(newDataFocus);
					newIndexCheckTable -= 1;
				}

				if (event.keyCode === 40 && index + 1 < checksArray.length) {
					newDataFocus = parseInt(focusIndex, 10) + columnNumber;
					this.setNewFocusElement(newDataFocus);
					newIndexCheckTable += 1;
				}

				if (event.keyCode === 13 && focusIndex < checksArray.length * columnNumber - 1) {				
					newDataFocus = parseInt(focusIndex, 10) + this.getNextFieldSelected(focusIndex);
					this.setNewFocusElement(newDataFocus);
					if ((parseInt(focusIndex, 10) + 1) % columnNumber === 0) newIndexCheckTable += 1;
				}
			}
		});
		return newIndexCheckTable;
	};

	getNextFieldSelected = (focusIndex) => {
		let positionSelected = 1;
		if ((parseInt(focusIndex, 10) + 1) % columnNumber === 0) {
			positionSelected = 3;
		}
		return positionSelected;
	};

	setNewFocusElement = (newDataFocus) => {
		const checkInputId = document.getElementById(`txt${newDataFocus}`);
		checkInputId.focus();
	};

	onClickCheckTable = async (index) => {
		this.updateCheckSelected(index);
		const checkRow = this.checkTableRef[`tr${index}`].getElementsByClassName('input-move');
		let sw = false;

		checkRow.forEach((checkInputElement) => {
			if (checkInputElement === document.activeElement) {
				sw = true;
			}
		});

		if (!sw) {
			checkRow[1].focus();
		}
	};

	closeAlertDelete = () => {
		const state = {
			isShown: false
		};
		this.setState(state);
		this.saveChecksArrayLocalStorage('state', state);
	};

	closeAlertDeleteAll = () => {
		const state = {
			isShownDeleteEntry: false
		};
		this.setState(state);
		this.saveChecksArrayLocalStorage('state', state);
	};

	verifyScannerStatus = () => {
		if (window.Ranger !== undefined) {
			const status = Ranger.GetTransportState();
			this.setState({
				newRangerState: status,
				previousState: status !== 0 ? Ranger.GetTransportState() - 1 : 0
			});
		}
	};

	render() {
		const {
			isShownDeleteEntry,
			isShown,
			isDeposit,
			receipt,
			agency,
			isReadyScanning,
			isReviewFilter,
			isRemoveFilter,
			quantityReview,
			quantityRemove,
			errorMessage,
			isProcess,
			isFrontActive,
			checksArray,
			imagesArray,
			rowSelected,
			zoomEfect,
			agencySettingsData,
			newRangerState,
			previousRangerState
		} = this.state;

		return (
			<Fragment>
				{
					//<Header />
				}
				{(errorMessage.isError && errorMessage.type === ERROR_TYPES.COMUNICATION) ||
				(errorMessage.message !== '' && errorMessage.type === ERROR_TYPES.NETWORK) ? (
					<div className="alert alert-danger alert-dismissible fade show" role="alert">
						{errorMessage.message}
						<button type="button" className="close" data-dismiss="alert" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
				) : null}
				{isProcess ? <Loading /> : null}
				<div
					className="tab-pane fade show active"
					id="nav-processing"
					role="tabpanel"
					aria-labelledby="nav-process-tab"
				>
					<ScanInit
						isReadyScanning={isReadyScanning}
						newState={newRangerState}
						previousState={previousRangerState}
						connectingImage={connectingImage}
						scanImage={scanImage}
						startScan={this.startScan}
					/>
					<div className={isReadyScanning === false ? 'report-summary mt-2 hide' : 'report-summary'}>
						<ScanHeader
							checksArray={checksArray}
							isScanning={newRangerState === 5 && previousRangerState === 4}
							agencySettingsData={agencySettingsData}
							quantityRemove={quantityRemove}
							quantityReview={quantityReview}
							isRemoveFilter={isRemoveFilter}
							isReviewFilter={isReviewFilter}
							onFilterRemoveChecks={this.onFilterRemoveChecks}
							onFilterReviewChecks={this.onFilterReviewChecks}
							onCheckVerifyList={this.onCheckVerifyList}
							onStartScan={this.startScan}
							onDeposit={this.deposit}
						/>
						{/* CHECKS TABLE  */}
						<div className="row mt-3">
							<div className="batch-side col-7">
								<div className="batch-view">
									{/* TABLE  */}
									<CheckTable
										checksArray={checksArray}
										// cursor={cursor}
										checkSelected={checksArray[rowSelected]}
										// isUpdateFocused={isUpdateFocused}
										deleteCheck={this.deleteCheck}
										validateRouting={this.validateRouting}
										validateCheckNumber={this.validateCheckNumber}
										validateAmount={this.validateAmount}
										validateAccount={this.validateAccount}
										onChangeValue={this.onChangeValue}
										onSelectAll={this.onSelectAll}
										onSelectCheck={this.onSelectCheck}
										// validateCheckDate={this.validateCheckDate}
										onClickCheckTable={this.onClickCheckTable}
										onHandleKeyBoardTable={this.onHandleKeyBoardTable}
										onSetFocusRow={this.onSetFocusRow}
										// onRestartFocus={this.onRestartFocus}
										onSetRef={this.onSetRef}
									/>
								</div>

								{/* ACTIONS  */}
								<div className="actions mt-2 text-right">
									<button
										className="btn text-muted"
										type="button"
										onClick={() => this.showConfirmAlert()}
									>
										Borrar Todos <i className="far fa-trash-alt text-muted" />
									</button>
								</div>

								<div className="actions col-12 d-inline-flex">
									<ScanFooter />

									{checksArray.length > 0 ? (
										<CheckTableTotal
											checksQuantity={checksArray.length}
											total={CheckRules.getTotalArray(checksArray)}
										/>
									) : null}
								</div>
							</div>{' '}
							{/*  SCAN REPORT  */}
							{
								<CheckDetail
									checkSelected={checksArray.length > 0 ? checksArray[rowSelected] : null}
									imagesSelected={imagesArray.length > 0 ? imagesArray[rowSelected] : null}
									enableVerify={agencySettingsData.enableVerify}
									onChangeValueDetail={this.onChangeValueDetail}
									onCheckVerify={this.onCheckVerify}
									isFrontActive={isFrontActive}
									changeImageDetail={this.changeImageDetail}
									zoomEfect={zoomEfect}
									onZoomEfect={this.onZoomEfect}
									onChangePayeeCheckDetails={this.onChangePayeeCheckDetails}
								/>
							}
						</div>{' '}
						{/*  BATCH REVIEW  */}
					</div>{' '}
					{/*  REPORT SUMMARY  */}
					{/*  DEPOSIT RESULT NOTICE */}
					{errorMessage.isError &&
					errorMessage.type !== ERROR_TYPES.COMUNICATION &&
					errorMessage.type !== ERROR_TYPES.NETWORK &&
					errorMessage.type !== ERROR_TYPES.BUSYSCANNER ? (
						<ErrorDetail message={errorMessage.message} close={this.closeErrorMesage} />
					) : null}
					{errorMessage.isError && errorMessage.type === ERROR_TYPES.BUSYSCANNER ? (
						<RangerError message={errorMessage.message} />
					) : null}
				</div>
				<br />

				<br />
				<Pane>
					<Dialog
						isShown={isShown}
						title="Advertenci