ActivateHalfHourLoad.tsx

import React from 'react'
import { IuseI18n, useI18n } from 'cozy-ui/transpiled/react/I18n'

import ConfigService from 'services/fluidConfig.service'
import Button from '@material-ui/core/Button'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import iconEnedisLogo from 'assets/icons/visu/enedis-logo.svg'
import './activateHalfHourLoad.scss'
import useExploration from 'components/Hooks/useExploration'
import { UserExplorationID } from 'enum/userExploration.enum'
import { FluidConfig } from 'models'

const ActivateHalfHourLoad = () => {
  const { t }: IuseI18n = useI18n()
  const fluidConfig: Array<FluidConfig> = new ConfigService().getFluidConfig()
  const [, setValidExploration] = useExploration()

  return (
    <div className="activatehalfhour-box">
      <div className="activatehalfhour-box-header header-text text-16-normal">
        {t('timestep.activate.enedis.info')}
      </div>
      <Button
        aria-label={t('timestep.activate.enedis.accessibility.button_activate')}
        onClick={() => {
          setValidExploration(UserExplorationID.EXPLORATION004)
          window.open(fluidConfig[0].konnectorConfig.activation, '_blank')
        }}
        classes={{
          root: 'btn-highlight',
          label: 'text-16-bold',
        }}
      >
        <div className="oauthform-button-content">
          <div className="oauthform-button-content-icon">
            <StyledIcon icon={iconEnedisLogo} size={48} />
          </div>
          <div className="oauthform-button-text text-18-bold">
            <div> {t('timestep.activate.enedis.label1')}</div>
          </div>
        </div>
      </Button>
    </div>
  )
}

export default ActivateHalfHourLoad