StepConsent.tsx

import { Checkbox } from '@material-ui/core'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import React from 'react'

const StepConsent = ({
  formConsent,
  setFormConsent,
}: {
  formConsent: {
    dataConsent: boolean
    pceConfirm: boolean
  }
  setFormConsent: React.Dispatch<
    React.SetStateAction<{
      dataConsent: boolean
      pceConfirm: boolean
    }>
  >
}) => {
  const { t } = useI18n()

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

export default StepConsent