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 { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import { FluidType } from 'enums'
import { AccountGRDFData, FluidConnection } from 'models'
import React 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 currentFluidStatus = fluidStatus[FluidType.GAS]
  const authData = currentFluidStatus.connection.account
    ?.auth as AccountGRDFData

  const updateKonnector = () => {
    const updatedConnection: FluidConnection = {
      ...currentFluidStatus.connection,
      shouldLaunchKonnector: 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">{authData.email || ''}</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>
  )
}