React snippet1

import React from 'react';
import './handoff.scss';
import PropsTypes from 'prop-types';
import classNames from 'classnames';
import LoaderOrComponent from '../../LoaderOrComponent';

const HandoffComponent = (props) => {
  const {buttons, t, isIdCard, startMakePhoto, images, isValidForm, sendPhoto, errors, isLoading, isManualCapture, manualCapture, isManualLoading} = props;

  return (
    <div className="handoff">
      <h1 className="handoff__title">{isIdCard ? t('bgv.scanYourIDcard') : t('bgv.scanYourPassport')}</h1>
      <ul>
        <li>{t('bgv.rulesForScanning1')}</li>
        <li>{isIdCard ? t('bgv.makeSureTheBarcode') : t('bgv.rulesForScanning2')}</li>
        <li>{t('bgv.rulesForScanning3')}</li>
        <li>{isIdCard ? t('bgv.theCardShouldHaveAllCornersVisible') : t('bgv.rulesForScanning4')}</li>
      </ul>
      <div className="handoff__button-container">
        {
          buttons.map((it, ind) =>
            images[ind]
              ? (
                <div
                  className={
                    classNames({
                      'handoff__button-container__image': true,
                      'with-error': errors[ind],
                    })
                  }
                >
                  <img src={images[ind]}/>
                  <p onClick={() => isManualCapture ? manualCapture(ind) : startMakePhoto(ind)}>
                    {`${t('bgv.button-Rescan')} ${it.label}`}
                  </p>
                  <i className={classNames({
                    fa: true,
                    'fa-check': !errors[ind],
                    'fa-times': errors[ind],
                  })} aria-hidden="true"/>
                </div>
              )
              : (
                <button
                  onClick={() => isManualCapture ? manualCapture(ind) : startMakePhoto(ind)}
                  className="handoff__open-camera"
                >
                  <LoaderOrComponent isLoading={isManualLoading[ind]}>
                    <i className="fa fa-camera" aria-hidden="true"/>
                    <span>{isManualCapture ? it.manualLabel : it.label}</span>
                  </LoaderOrComponent>
                </button>
              )
          )
        }
      </div>
      <div className="handoff__bottom">
        <LoaderOrComponent
          isLoading={isLoading.sendingPhoto}>
          <button
            onClick={sendPhoto}
            disabled={!isValidForm}
            className="terms-of-use__button-agree">
            {t('bgv.submit')}
          </button>
        </LoaderOrComponent>
      </div>
    </div>
  );
};

HandoffComponent.propTypes = {
  buttons: PropsTypes.array,
  errors: PropsTypes.array,
  images: PropsTypes.array,
  t: PropsTypes.func,
  startMakePhoto: PropsTypes.func,
  sendPhoto: PropsTypes.func,
  urlParams: PropsTypes.object,
  isIdCard: PropsTypes.bool,
  isValidForm: PropsTypes.bool,
  isLoading: PropsTypes.bool,
};

export default HandoffComponent;