ExpiredConsentModal.tsx

import { Button } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import CloseIcon from 'assets/icons/ico/close.svg'
import EnedisIcon from 'assets/icons/ico/consent-outdated-enedis.svg'
import GrdfIcon from 'assets/icons/ico/consent-outdated-grdf.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import { FluidType } from 'enums'
import React, { useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import { setShouldRefreshConsent } from 'store/global/global.slice'
import { useAppDispatch } from 'store/hooks'
import { getFluidName } from 'utils/utils'
import './expiredConsentModal.scss'

interface ExpiredConsentModalProps {
  open: boolean
  handleCloseClick: () => void
  fluidType: FluidType
  toggleModal: () => void
}

const ExpiredConsentModal = ({
  open,
  handleCloseClick,
  fluidType,
  toggleModal,
}: ExpiredConsentModalProps) => {
  const { t } = useI18n()
  const navigate = useNavigate()
  const dispatch = useAppDispatch()
  const launchUpdateConsent = useCallback(() => {
    if (fluidType === FluidType.ELECTRICITY) {
      dispatch(setShouldRefreshConsent(true))
      toggleModal()
      navigate(`/consumption/${FluidType[fluidType].toLocaleLowerCase()}`)
    }
    if (fluidType === FluidType.GAS) {
      toggleModal()
      navigate(`/connect/${FluidType[fluidType].toLocaleLowerCase()}`)
    }
  }, [dispatch, fluidType, navigate, toggleModal])

  return (
    <Dialog
      open={open}
      onClose={toggleModal}
      aria-labelledby="accessibility-title"
      classes={{
        root: 'modal-root',
        paper: 'modal-paper',
      }}
    >
      <div id="accessibility-title">
        {t('consent_outdated.accessibility.window_title')}
      </div>
      <StyledIconButton
        icon={CloseIcon}
        onClick={toggleModal}
        aria-label={t('consent_outdated.accessibility.button_close')}
        className="modal-paper-close-button"
      />
      <div className="expired-consent-modal">
        <div className="icon-main">
          <StyledIcon
            icon={fluidType === FluidType.ELECTRICITY ? EnedisIcon : GrdfIcon}
            size={135}
          />
        </div>

        <div className={`text-20-bold title ${getFluidName(fluidType)}`}>
          {t(`consent_outdated.title.${fluidType}`)}
        </div>
        <div>{t(`consent_outdated.text1.${fluidType}`)}</div>
        <div className="text-16-bold">
          {t(`consent_outdated.text2.${fluidType}`)}
        </div>
        <div className="buttons">
          <Button
            aria-label={t('consent_outdated.go')}
            onClick={launchUpdateConsent}
            className="btnPrimary"
          >
            {fluidType === FluidType.ELECTRICITY
              ? t('consent_outdated.yes')
              : t('consent_outdated.go')}
          </Button>
          <Button
            aria-label={t('consent_outdated.later')}
            onClick={handleCloseClick}
            className="btnSecondary"
          >
            {fluidType === FluidType.ELECTRICITY
              ? t('consent_outdated.no')
              : t('consent_outdated.later')}
          </Button>
        </div>
      </div>
    </Dialog>
  )
}

export default ExpiredConsentModal