StepAddress.tsx

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

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

const StepAddress = ({ sgeState, onChange }: StepAddressProps) => {
  const { t } = useI18n()
  return (
    <div className="stepDetails stepAddress">
      <h2 className="text-22-bold">
        {t('auth.enedissgegrandlyon.addressTitle')}
      </h2>
      <TextField
        label={t('auth.enedissgegrandlyon.address')}
        variant="outlined"
        type="text"
        id="address"
        name="address"
        value={sgeState.address}
        onChange={e => onChange('address', e.target.value)}
        required
      />
      <TextField
        label={t('auth.enedissgegrandlyon.zipCode')}
        variant="outlined"
        type="number"
        id="zipCode"
        name="zipCode"
        value={sgeState.zipCode ?? undefined}
        onChange={e => onChange('zipCode', e.target.value, 5)}
        required
      />
      <TextField
        label={t('auth.enedissgegrandlyon.city')}
        variant="outlined"
        type="text"
        id="city"
        name="city"
        value={sgeState.city}
        onChange={e => onChange('city', e.target.value)}
        required
      />
    </div>
  )
}

export default StepAddress