GrdfWaitConsent.tsx

import { Button } from '@material-ui/core'
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 { 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>
      <div className="text-16-normal">
        {t('auth.grdfgrandlyon.waiting.mailDelay')}
      </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>
  )
}