StepIdentityAndPdl.tsx

import { Button, TextField } from '@material-ui/core'
import SgeModalHint from 'components/Connection/SGEConnect/SgeModalHint'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { SgeStore } from 'models'
import React, { useState } from 'react'
import { SGEKeysForm } from './SgeConnectView'

interface StepIdentityAndPdlProps {
  sgeState: SgeStore
  onChange: (
    key: SGEKeysForm,
    value: string | number,
    maxLength?: number
  ) => void
}

const StepIdentityAndPdl = ({
  sgeState,
  onChange,
}: StepIdentityAndPdlProps) => {
  const { t } = useI18n()
  const [openHintModal, setOpenHintModal] = useState<boolean>(false)

  return (
    <div className="stepDetails stepIdentity">
      <h2 className="text-22-bold">
        {t('auth.enedissgegrandlyon.identityTitle')}
      </h2>
      <TextField
        label={t('auth.enedissgegrandlyon.firstName')}
        variant="outlined"
        type="text"
        id="firstName"
        value={sgeState.firstName}
        onChange={e => onChange('firstName', e.target.value)}
        required
        autoComplete="given-name"
      />
      <TextField
        label={t('auth.enedissgegrandlyon.lastName')}
        variant="outlined"
        type="text"
        id="lastName"
        value={sgeState.lastName}
        onChange={e => onChange('lastName', e.target.value)}
        required
        autoComplete="family-name"
      />
      <h2 className="text-22-bold">{t('auth.enedissgegrandlyon.pdlTitle')}</h2>
      <TextField
        label={t('auth.enedissgegrandlyon.pdlLabel')}
        variant="outlined"
        id="pdl"
        type="number"
        value={sgeState.pdl || ''}
        onChange={e => onChange('pdl', e.target.value, 14)}
        inputMode="numeric"
        required
      />
      <Button className="btnText" onClick={() => setOpenHintModal(true)}>
        {t('auth.enedissgegrandlyon.pdlModal.title')}
      </Button>
      <SgeModalHint
        open={openHintModal}
        handleCloseClick={() => setOpenHintModal(false)}
      />
    </div>
  )
}

export default StepIdentityAndPdl