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