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    optionalEmail
30      ? 'travel.passengers.email_placeholder_optionnal'
31      : 'travel.passengers.email_placeholder'
32  );
33
34  return (
35    <Fragment>
36      <Box className={classes.inputBox}>
37        <label htmlFor="name">
38          <Typography className={classes.label}>
39            <Icon className={classes.labelIcon}>person</Icon>{' '}
40            {t('travel.passengers.name')}
41          </Typography>
42        </label>
43        <TextField
44          id="PassengerName"
45          name="name"
46          value={name}
47          onChange={e => setName(e.target.value)}
48          variant="outlined"
49          size="small"
50          fullWidth
51          label=""
52          placeholder={t('travel.passengers.name_placeholder')}
53        />
54      </Box>
55      <Box className={classes.inputBox}>
56        <label htmlFor="email">
57          <Typography className={classes.label}>
58            <Icon className={classes.labelIcon}>mail_outlined</Icon>{' '}
59            {t('travel.passengers.email')}
60          </Typography>
61        </label>
62        <TextField
63          id="PassengerEmail"
64          name="email"
65          value={email}
66          onChange={e => setEmail(e.target.value)}
67          variant="outlined"
68          size="small"
69          fullWidth
70          label=""
71          error={!!email && emailError}
72          helperText={
73            email && emailError && t('travel.passengers.email_helpertext')
74          }
75          placeholder={emailPlaceholder}
76        />
77      </Box>
78    </Fragment>
79  );
80};
81
82export default AddPassengerCommonFields;