GrdfWaitConsent.tsx

import { Button, Dialog, IconButton } from '@material-ui/core'
import CloseIcon from 'assets/icons/ico/close.svg'
import GRDFMail from 'assets/icons/visu/onboarding/grdf-mail.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import useUserInstanceSettings from 'components/Hooks/useUserInstanceSettings'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { FluidType } from 'enums'
import { FluidConnection } from 'models'
import React, { useEffect, useState } from 'react'
import { updateFluidConnection } from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import './GrdfWaitConsent.scss'

export const GrdfWaitConsent = () => {
  const { t } = useI18n()
  const dispatch = useAppDispatch()
  const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
  const { data: instanceSettings } = useUserInstanceSettings()
  const [emailSentOn, setEmailSentOn] = useState('')
  const currentFluidStatus = fluidStatus[FluidType.GAS]

  useEffect(() => {
    setEmailSentOn(instanceSettings.email || '')
  }, [instanceSettings])

  const updateKonnector = async () => {
    const updatedConnection: FluidConnection = {
      ...currentFluidStatus.connection,
      // TODO : investigate is this is duplicate ?
      shouldLaunchKonnector: true,
      isUpdating: true,
    }
    dispatch(
      updateFluidConnection({
        fluidType: currentFluidStatus.fluidType,
        fluidConnection: updatedConnection,
      })
    )
  }

  return (
    <div className="grdfWait">
      <div className="text-18-normal">
        {t('auth.grdfgrandlyon.waiting.mailSent')}
      </div>
      <span className="emailContainer">{emailSentOn}</span>
      <StyledIcon size={80} icon={GRDFMail} />
      <div className="text-18-normal">
        <span className="text-18-bold green">
          {t('auth.grdfgrandlyon.waiting.validate')}
        </span>
        <br />
        <span>{t('auth.grdfgrandlyon.waiting.comeback')}</span>
      </div>
      <Button className="btnPrimary" onClick={updateKonnector}>
        {t('auth.grdfgrandlyon.waiting.button_done')}
      </Button>
    </div>
  )
}

export const GrdfWaitConsentModal = ({
  open,
  setOpen,
}: {
  open: boolean
  setOpen: React.Dispatch<React.SetStateAction<boolean>>
}) => {
  const { t } = useI18n()

  return (
    <Dialog
      open={open}
      onClose={() => setOpen(false)}
      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={() => setOpen(false)}
      >
        <Icon icon={CloseIcon} size={16} />
      </IconButton>
      <GrdfWaitConsent />
    </Dialog>
  )
}