GrdfBill.tsx

import Button from '@material-ui/core/Button'
import GasBillIcon from 'assets/icons/visu/onboarding/gas_bill.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { FluidType } from 'enums'
import React from 'react'
import { setShowOfflineData } from 'store/chart/chart.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import { openConnectionModal } from 'store/modal/modal.slice'
import '../connection.scss'

const GrdfBill = () => {
  const { t } = useI18n()
  const dispatch = useAppDispatch()
  const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
  const currentFluidStatus = fluidStatus[FluidType.GAS]

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

      <div className="connection-form-button">
        <Button
          aria-label={t('auth.grdfgrandlyon.accessibility.connect')}
          onClick={() => dispatch(openConnectionModal(true))}
          classes={{
            root: 'btn-highlight',
            label: 'text-16-bold',
          }}
        >
          {t('auth.grdfgrandlyon.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 GrdfBill