StepConsent.tsx

import { useI18n } from 'cozy-ui/transpiled/react/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 className="inline">
        <input
          id="dataConsent"
          type="checkbox"
          name="Data-consent-validation"
          className="inputCheckbox"
          onChange={e => onChange('dataConsent', e.target.checked)}
          checked={sgeState.dataConsent}
        />
        <span
          dangerouslySetInnerHTML={{
            __html: t('auth.enedissgegrandlyon.consentCheck1'),
          }}
        />
      </label>
      <label className="inline">
        <input
          id="pdlConfirm"
          type="checkbox"
          name="Data-consent-validation"
          className="inputCheckbox"
          onChange={e => onChange('pdlConfirm', e.target.checked)}
          checked={sgeState.pdlConfirm}
        />
        <span
          dangerouslySetInnerHTML={{
            __html: t('auth.enedissgegrandlyon.consentCheck2'),
          }}
        />
      </label>
    </div>
  )
}

export default StepConsent