viamobi-component/src/core/main.js

A React component that viamobi

import React, { useState, useEffect } from 'react';
import { Button } from 'react-bootstrap';
import BtnMenu from './components/BtnMenu';
import logo from '../assets/images/Viamericas_Logo.png';
import ComplianceID from './components/ComplianceId';
import PhotoCapture from './components/PhotoCapture';
import Deposits from './components/Deposits';

import unknowPhoto from '../assets/images/unknownPhoto.png';

const Viamovi = ({ idBranch, orderNumber, unknownIcono, t }) => {
  const [btnActive, setBtnActive] = useState(0);

  const [agency, setAgency] = useState(idBranch);
  const [order, setOrder] = useState(orderNumber);
  const [imgFront, setImgFront] = useState(unknowPhoto);
  const [imgBack, setImgBack] = useState(null);
  const [isBtnUpdateActive, setIsBtnUpdateActive] = useState(false);

  const activeProcess = ['ID', 'PD', 'OF'];

  const setAgencyData = data => {
    setAgency(data);
  };

  const setOrderData = data => {
    setOrder(data);
  };

  const setImgFrontData = data => {
    setImgFront(data);
  };

  const setImgBackData = data => {
    setImgBack(data);
  };

  useEffect(() => {
    if (btnActive === 1) {
      if (agency && order > 0 && imgFront !== unknowPhoto) {
        setIsBtnUpdateActive(true);
      } else {
        setIsBtnUpdateActive(false);
      }
    }
  }, [agency, order, imgFront, btnActive]);

  return (
    <div className="container py-6 mt-2 text-center">
      <div>
        <img src={logo} alt="viamericas logo" className="img-fluid mb-3" />
      </div>
      <BtnMenu
        btnActive={btnActive}
        setBtnActive={setBtnActive}
        activeProcess={activeProcess}
        t={t}
      />
      {btnActive === 1 && (
        <ComplianceID
          agency={agency}
          setAgency={setAgencyData}
          order={order}
          setOrder={setOrderData}
          unknownIcono={unknownIcono}
          t={t}
        />
      )}
      {btnActive === 2 && (
        <Deposits
          agency={agency}
          setAgency={setAgencyData}
          unknownIcono={unknownIcono}
          t={t}
        />
      )}
      <PhotoCapture
        process="ID"
        t={t}
        imgFront={imgFront}
        setImgFront={setImgFrontData}
        imgBack={imgBack}
        setImgBack={setImgBackData}
        unknowPhoto={unknowPhoto}
      />
      <Button variant={`success ${!isBtnUpdateActive && 'disabled'}`}>
        {t(`submit.${btnActive === 1 ? 'complice' : 'deposit'}`)}
      </Button>
    </div>
  );
};

export default Viamovi;