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