SgeInit.tsx

import { Button } from '@material-ui/core'
import ElectricityBillIcon from 'assets/icons/visu/onboarding/electricity_bill.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import useKonnectorAuth from 'components/Hooks/useKonnectorAuth'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidType } from 'enums'
import { Account } from 'models'
import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { setShowOfflineData } from 'store/chart/chart.slice'
import {
  setShouldRefreshConsent,
  updateSgeStore,
} from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'

const SgeInit = () => {
  const { t } = useI18n()
  const navigate = useNavigate()
  const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
  const currentFluidStatus = fluidStatus[FluidType.ELECTRICITY]
  const konnectorSlug: string =
    currentFluidStatus.connection.konnectorConfig.slug
  const account: Account | null = currentFluidStatus.connection.account
  const { sgeConnect } = useAppSelector(state => state.ecolyo.global)
  const dispatch = useAppDispatch()
  const [connect, update] = useKonnectorAuth(currentFluidStatus.fluidType)

  useEffect(() => {
    async function launchConnect() {
      if (sgeConnect.shouldLaunchAccount) {
        dispatch(updateSgeStore({ ...sgeConnect, shouldLaunchAccount: false }))
        dispatch(setShouldRefreshConsent(false))
        if (!account) {
          await connect()
        } else {
          await update()
        }
      }
    }
    launchConnect()
  }, [account, connect, dispatch, sgeConnect, update])

  return (
    <div className="connection-form">
      <p className={`connection-form-title ${konnectorSlug} text-20-bold`}>
        {t(`auth.${konnectorSlug}.title`)}
      </p>
      <StyledIcon icon={ElectricityBillIcon} size={180} />
      <p
        className={`connection-form-subtitle ${konnectorSlug} text-16-regular`}
        dangerouslySetInnerHTML={{ __html: t(`auth.${konnectorSlug}.bill`) }}
      />

      <div className="connection-form-button">
        <Button
          aria-label={t(`auth.${konnectorSlug}.accessibility.connect`)}
          onClick={() => {
            navigate('/sge-connect')
          }}
          classes={{
            root: 'btn-highlight',
            label: 'text-16-bold',
          }}
        >
          {t(`auth.${konnectorSlug}.connect`)}
        </Button>
        {currentFluidStatus.firstDataDate && (
          <Button
            classes={{
              root: 'btn-secondary',
              label: 'text-16-bold',
            }}
            onClick={() => dispatch(setShowOfflineData(true))}
          >
            {t('auth.button_showOfflineData')}
          </Button>
        )}
      </div>
    </div>
  )
}

export default SgeInit