viam-projectv-scan/src/js/components/scanList/scanInit.js

ViaCheck deposit application

import React from 'react';

const scanInit = ({
  isReadyScanning,
  newState,
  previousState,
  connectingImage,
  scanImage,
  startScan
}) => (
  <div
    className={
      !isReadyScanning
        ? 'scan-section d-inline-flex flex-lg-row flex-column col-12'
        : 'scan-section d-inline-flex flex-lg-row flex-column col-12 hide'
    }
  >
    <img
      src={newState !== 4 && previousState !== 3 ? connectingImage : scanImage}
      className="img-fluid"
      alt=""
    />
    <div className="start-scan">
      {newState !== 4 && previousState !== 3 ? (
        <h1 className="text-blue lato-font">
          <br />
          <span className="text-blue"> Preparando escáner</span>
          <br />
          <br />
        </h1>
      ) : (
        <h1 className="text-blue lato-font">
          Escanear Cheques <br />
          <span className="text-black">Cargar escáner </span>
          <br /> Luego presione
        </h1>
      )}

      {
        <button
          className="btn btn-success lato-font btn-lg col-6 scan-btn"
          type="button"
          hidden={newState !== 4 && previousState !== 3}
          //   hidden={newState !== 4 && previousState !== 3}
          onClick={startScan}
        >
          ESCANEAR
        </button>
      }
    </div>
  </div>
);

export default scanInit;