StepConsent.tsx

import { Checkbox } from '@material-ui/core'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import { SgeStore } from 'models'
import React from 'react'
import { SGEKeysForm } from './SgeConnectView'

interface StepConsentProps {
  sgeState: SgeStore
  onChange: (key: SGEKeysForm, value: boolean) => void
}
const StepConsent = ({ sgeState, onChange }: StepConsentProps) => {
  const { t } = useI18n()

  return (
    <div className="stepDetails stepConsent">
      <div className="text-16-normal">
        {t('auth.enedissgegrandlyon.headConsent')}
      </div>
      <h2 className="text-22-bold">
        {t('auth.enedissgegrandlyon.textConsent')}
      </h2>
      <ul className="text-16-normal">
        <li>{t('auth.enedissgegrandlyon.consentLi1')}</li>
        <li>{t('auth.enedissgegrandlyon.consentLi2')}</li>
        <li>{t('auth.enedissgegrandlyon.consentLi3')}</li>
        <li>{t('auth.enedissgegrandlyon.consentLi4')}</li>
      </ul>
      <label htmlFor="dataConsentSge" className="inline">
        <Checkbox
          id="dataConsentSge"
          onChange={e => onChange('dataConsent', e.target.checked)}
          checked={sgeState.dataConsent}
          required
        />
        <span
          dangerouslySetInnerHTML={{
            __html: t('auth.enedissgegrandlyon.consentCheck1'),
          }}
        />
      </label>
      <label htmlFor="pdlConfirm" className="inline">
        <Checkbox
          id="pdlConfirm"
          onChange={e => onChange('pdlConfirm', e.target.checked)}
          checked={sgeState.pdlConfirm}
          required
        />
        <span
          dangerouslySetInnerHTML={{
            __html: t('auth.enedissgegrandlyon.consentCheck2'),
          }}
        />
      </label>
    </div>
  )
}

export default StepConsent