OldFluidDataModal.tsx

import React, { useState, useEffect, useCallback } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Modal from 'components/CommonKit/Modal/Modal'
import WarnCross from 'assets/icons/ico/warn-cross.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import MuiButton from '@material-ui/core/Button'
import { useHistory } from 'react-router-dom'

import { FluidState, FluidType } from 'enum/fluid.enum'
import { FluidStatus } from 'models'
import './oldFluidDataModal.scss'
interface OldFluidDataModalProps {
  fluidStatus: FluidStatus[]
  fluidOldData: FluidType[]
  handleCloseClick: () => void
}

const OldFluidDataModal: React.FC<OldFluidDataModalProps> = ({
  fluidStatus,
  fluidOldData,
  handleCloseClick,
}: OldFluidDataModalProps) => {
  const { t } = useI18n()
  const history = useHistory()
  const [konnectorError, setkonnectorError] = useState<boolean>(false)
  const [erroredKonnectors] = useState<FluidType[]>([])

  const checkFluidDataDate = useCallback(() => {
    fluidStatus &&
      fluidStatus.length > 0 &&
      fluidStatus.forEach(fluid => {
        if (fluid.status === FluidState.ERROR) {
          !erroredKonnectors.includes(fluid.fluidType) &&
            erroredKonnectors.push(fluid.fluidType)
        }
      })
    if (erroredKonnectors.length > 0) setkonnectorError(true)
  }, [erroredKonnectors, fluidStatus])

  const redirectToKonnectors = () => {
    handleCloseClick()
    history.push('/options')
  }

  useEffect(() => {
    checkFluidDataDate()
  }, [checkFluidDataDate])

  return (
    <Modal handleCloseClick={handleCloseClick}>
      <div className="od-content">
        <div className="od-warning">
          <StyledIcon icon={WarnCross} size={40} />
          <p className="text-20-bold">{t('modalOldData.errorTxt')}</p>
        </div>
        <p className="od-main text-16-bold"> {t('modalOldData.oldData')}</p>
        {konnectorError ? (
          <div className="verifyState">
            <p className="text-16-normal">{t('modalOldData.verify')}</p>
            <ul className="od-konnectorsList">
              {erroredKonnectors.map((err, index) => {
                return (
                  <li key={index}>
                    {err === FluidType.ELECTRICITY &&
                      t('FLUID.ELECTRICITY.LABEL')}
                    {err === FluidType.WATER && t('FLUID.WATER.LABEL')}
                    {err === FluidType.GAS && t('FLUID.GAS.LABEL')}
                  </li>
                )
              })}
            </ul>
            <div className="buttons">
              <MuiButton
                onClick={handleCloseClick}
                classes={{
                  root: 'btn-secondary-positive',
                  label: 'text-16-normal',
                }}
              >
                {t('modalOldData.later')}
              </MuiButton>
              <MuiButton
                onClick={redirectToKonnectors}
                classes={{
                  root: 'btn-highlight',
                  label: 'text-16-bold',
                }}
              >
                {t('modalOldData.accessButton')}
              </MuiButton>
            </div>
          </div>
        ) : (
          <div className="providerProblem">
            <p className="text-16-normal">{t('modalOldData.problem')}</p>
            <ul className="od-konnectorsList">
              {fluidOldData.map((err, index) => {
                return (
                  <li key={index}>
                    {err === FluidType.ELECTRICITY &&
                      t('FLUID.ELECTRICITY.provider')}
                    {err === FluidType.WATER && t('FLUID.WATER.provider')}
                    {err === FluidType.GAS && t('FLUID.GAS.provider')}
                  </li>
                )
              })}
            </ul>
            <p className="text-16-normal">{t('modalOldData.contact')}</p>
            <MuiButton
              onClick={handleCloseClick}
              classes={{
                root: 'btn-highlight',
                label: 'text-16-bold',
              }}
            >
              {t('modalOldData.ok')}
            </MuiButton>
          </div>
        )}
      </div>
    </Modal>
  )
}

export default OldFluidDataModal