frontend/containers/NewPassengerDialog/AddPassengerCommonFields.tsx (view raw)
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;