frontend/containers/DrawerPassenger/index.tsx (view raw)
1import {Drawer, Typography, useMediaQuery, Link, Box} from '@mui/material';
2import {useTranslation} from 'react-i18next';
3import {
4 CountryIso2,
5} from 'react-international-phone';
6import DrawerPassengerHeader from './DrawerPassengerHeader';
7import { getFormatedPhoneNumber } from '../../lib/phoneNumbers';
8
9interface Props {
10 isOpen: boolean;
11 onClose: () => void;
12 firstName: string;
13 lastName: string;
14 email: string;
15 phone?: string;
16 phoneCountry?: '' | CountryIso2;
17}
18
19
20
21const DrawerPassenger = ({
22 isOpen,
23 onClose,
24 lastName,
25 firstName,
26 email,
27 phone,
28 phoneCountry,
29}: Props) => {
30 const {t} = useTranslation();
31 const isMobile = useMediaQuery('(max-width:400px)');
32
33 return (
34 <Drawer
35 anchor="right"
36 open={isOpen}
37 onClose={onClose}
38 sx={{
39 height: 'auto',
40 '& .MuiDrawer-paper': {
41 width: isMobile ? '100%' : '375px',
42 maxWidth: '100%',
43 },
44 }}
45 >
46 <Box bgcolor="background.default" sx={{height: '100%', overflow: 'auto'}}>
47 <DrawerPassengerHeader isMobile={isMobile} onClose={onClose} />
48 <Box
49 display="flex"
50 flexDirection="column"
51 gap={2}
52 bgcolor="white"
53 padding={2}
54 >
55 <Box display="flex" flexDirection="column">
56 <Typography variant="h6">
57 {t('passenger.informations.name.label')}
58 </Typography>
59 <Typography variant="body1" gutterBottom>
60 {firstName}
61 </Typography>
62 </Box>
63 <Box display="flex" flexDirection="column">
64 <Typography variant="h6">
65 {t('passenger.informations.surname.label')}
66 </Typography>
67 <Typography variant="body1" gutterBottom>
68 {lastName}
69 </Typography>
70 </Box>
71 <Box display="flex" flexDirection="column">
72 <Typography variant="h6">
73 {t('passenger.informations.email.label')}
74 </Typography>
75 <Link
76 sx={{display: 'flex', flexDirection: 'row', gap: 1}}
77 href={`mailto:${email}`}
78 >
79 {email}
80 </Link>
81 </Box>
82 <Box display="flex" flexDirection="column">
83 <Typography variant="h6">
84 {t('passenger.informations.phone.label')}
85 </Typography>
86 {phone ? (
87 <Link
88 sx={{display: 'flex', flexDirection: 'row', gap: 1}}
89 href={`tel:${phone}`}
90 >
91 {getFormatedPhoneNumber({phone, phoneCountry})}
92 </Link>
93 ) : (
94 <Typography variant="body1">
95 {t('passenger.informations.notSpecify')}
96 </Typography>
97 )}
98 </Box>
99 </Box>
100 </Box>
101 </Drawer>
102 );
103};
104
105export default DrawerPassenger;