ExpiredConsentModal.tsx

import { Button, IconButton } 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 { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidType } from 'enums'
import { AccountSgeData } from 'models'
import React, { useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import {
  setShouldRefreshConsent,
  updateSgeStore,
} from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } 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 { fluidStatus } = useAppSelector(state => state.ecolyo.global)
  const launchUpdateConsent = useCallback(() => {
    if (fluidType === FluidType.ELECTRICITY) {
      const accountData = fluidStatus[FluidType.ELECTRICITY].connection.account
        ?.auth as AccountSgeData
      // store the previous account data since the onDelete will remove account from DB
      dispatch(
        updateSgeStore({
          currentStep: 0,
          firstName: accountData.firstname,
          lastName: accountData.lastname,
          pdl: parseInt(accountData.pointId),
          address: accountData.address,
          zipCode: parseInt(accountData.postalCode),
          city: accountData.city,
          dataConsent: true,
          pdlConfirm: true,
          shouldLaunchAccount: true,
        })
      )
      dispatch(setShouldRefreshConsent(true))
      toggleModal()
      navigate(`/consumption/${FluidType[fluidType].toLocaleLowerCase()}`)
    }
    if (fluidType === FluidType.GAS) {
      toggleModal()
      navigate(`/connect/${FluidType[fluidType].toLocaleLowerCase()}`)
    }
  }, [dispatch, fluidStatus, 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('consumption_visualizer.modal.window_title')}
      </div>
      <IconButton
        aria-label={t('consumption_visualizer.modal.close')}
        className="modal-paper-close-button"
        onClick={toggleModal}
      >
        <Icon icon={CloseIcon} size={16} />
      </IconButton>
      <div className="expired-consent-modal">
        <div className="icon-main">
          <Icon
            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