StepConsent.tsx

import classNames from 'classnames'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { SgeStore } from 'models'
import React from 'react'
import { decoreText } from 'utils/decoreText'
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="sge-step-container stepConsent">
      <div className="head text-16-normal">
        {t('auth.enedissgegrandlyon.headConsent')}
      </div>
      <div className="title text-22-bold">
        {t('auth.enedissgegrandlyon.textConsent')}
      </div>
      <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={classNames('checkbox', {
          ['answer-checked']: sgeState.dataConsent,
        })}
      >
        <input
          id="dataConsent"
          type="checkbox"
          name="Data-consent-validation"
          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
            onChange('dataConsent', e.target.checked)
          }
          checked={sgeState.dataConsent}
        />
        <span>{decoreText(t('auth.enedissgegrandlyon.consentCheck1'))}</span>
      </label>
      <label
        className={classNames('checkbox', {
          ['answer-checked']: sgeState.pdlConfirm,
        })}
      >
        <input
          id="pdlConfirm"
          type="checkbox"
          name="Data-consent-validation"
          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
            onChange('pdlConfirm', e.target.checked)
          }
          checked={sgeState.pdlConfirm}
        />
        {decoreText(t('auth.enedissgegrandlyon.consentCheck2'))}
      </label>
    </div>
  )
}

export default StepConsent