1import {Fragment} from 'react';
 2import TextField from '@material-ui/core/TextField';
 3import {useTranslation} from 'react-i18next';
 4import Icon from '@material-ui/core/Icon';
 5import Box from '@material-ui/core/Box';
 6import Typography from '@material-ui/core/Typography';
 7import useStyles from './useStyles';
 8
 9interface Props {
10  name: string;
11  setName: (name: string) => void;
12  email: string;
13  emailError: boolean;
14  setEmail: (email: string) => void;
15}
16
17const AddPassengerCommonFields = ({name, setName, email, emailError, setEmail}: Props) => {
18  const {t} = useTranslation();
19  const classes = useStyles();
20
21  return (
22    <Fragment>
23      <Box className={classes.inputBox}>
24        <label htmlFor="name">
25          <Typography className={classes.label}>
26            <Icon className={classes.labelIcon}>person</Icon>{' '}
27            {t('travel.passengers.name')}
28          </Typography>
29        </label>
30        <TextField
31          id="PassengerName"
32          name="name"
33          value={name}
34          onChange={e => setName(e.target.value)}
35          variant="outlined"
36          size="small"
37          fullWidth
38          label=""
39          placeholder={t('travel.passengers.name_placeholder')}
40        />
41      </Box>
42      <Box className={classes.inputBox}>
43        <label htmlFor="email">
44          <Typography className={classes.label}>
45            <Icon className={classes.labelIcon}>mail_outlined</Icon>{' '}
46            {t('travel.passengers.email')}
47          </Typography>
48        </label>
49        <TextField
50          id="PassengerEmail"
51          name="email"
52          value={email}
53          onChange={e => setEmail(e.target.value)}
54          variant="outlined"
55          size="small"
56          fullWidth
57          label=""
58          error={email && emailError}
59          helperText={email && t('travel.passengers.email_helpertext')}
60          placeholder={t('travel.passengers.email_placeholder')}
61        />
62      </Box>
63    </Fragment>
64  );
65};
66
67export default AddPassengerCommonFields;