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

ViaCheck deposit application

import React from 'react';

export const scanHeader = ({
  checksArray,
  isScanning,
  agencySettingsData,
  quantityRemove,
  quantityReview,
  // onFilterChecks,
  onCheckVerifyList,
  onStartScan,
  onDeposit,
  onFilterRemoveChecks,
  onFilterReviewChecks
}) => (
  <div className="d-flex justify-content-between">
    <div className="actions general-actions col-7 mt-1 row d-inline-flex">
      <div className="scan-summary col-sm-12 col-lg-8 d-inline-flex">
        <button
          className="col-6 col-lg-4 btn btn-primary btn-block"
          type="button"
          onClick={() => onCheckVerifyList()}
          disabled={checksArray.length === 0}
          hidden={!agencySettingsData.enableVerify}
        >
          VERIFICACIÓN
        </button>
        <button
          className="btn bg-orange text-white col-6 col-lg-4 ml-1"
          type="button"
          onClick={() => onStartScan()}
          disabled={isScanning}
        >
          ESCANEAR MÁS
        </button>
        <button
          className="col-6 col-lg-4 btn ml-2 btn-success"
          type="button"
          onClick={() => onDeposit()}
          disabled={quantityRemove > 0}
        >
          DEPOSITAR
        </button>
      </div>
      <div className="d-flex">
        <p
          className="lato-font m-0"
          data-toggle="tooltip"
          data-placement="top"
          title="El cheque no es aceptado y debe ser removido"
        >
          <label className="container-checkbox-remove" htmlFor="chkRemove">
            <input
              id="chkRemove"
              type="checkbox"
              aria-label="check-check"
              className="select-check"
              onChange={() => onFilterRemoveChecks()}
            />{' '}
            <span className="checkmark remove-filter-background" />
            Remover (<span classsname="counter">{quantityRemove}</span>)
          </label>
        </p>
        <p
          className="lato-font  m-0 ml-2"
          data-toggle="tooltip"
          data-placement="top"
          title="El cheque requiere revisión"
        >
          <label className="container-checkbox-review" htmlFor="chkReview">
            <input
              id="chkReview"
              type="checkbox"
              aria-label="check-check"
              className="select-check"
              onChange={() => onFilterReviewChecks()}
            />
            <span className="checkmark review-filter-background " />
            Revisar (<span classsname="counter">{quantityReview}</span>)
          </label>
        </p>
      </div>
    </div>
  </div>
);
export default scanHeader;