frontend/containers/AddPassengerButtons/index.tsx (view raw)
1import Box from '@mui/material/Box';
2import Button from '@mui/material/Button';
3import {useTranslation} from 'react-i18next';
4import usePermissions from '../../hooks/usePermissions';
5
6interface Props {
7 onAddSelf: () => void;
8 onAddOther: () => void;
9 registered: boolean;
10 variant: 'waitingList' | 'travel';
11 disabled?: boolean;
12}
13
14const ADD_TO_LOCALE = {
15 waitingList: 'travel.passengers.add_to_waitingList',
16 travel: 'travel.passengers.add_to_travel',
17};
18
19const AddPassengerButtons = ({
20 onAddSelf,
21 onAddOther,
22 registered,
23 variant,
24 disabled,
25}: Props) => {
26 const {t} = useTranslation();
27 const {
28 userPermissions: {canJoinTravels, canAddToTravel},
29 } = usePermissions();
30
31 return (
32 <Box textAlign="center">
33 {canJoinTravels() && (
34 <Box p={1} pt={2}>
35 <Button
36 sx={buttonStyle}
37 variant="contained"
38 color="primary"
39 fullWidth
40 onClick={onAddSelf}
41 disabled={disabled || registered}
42 >
43 {t(
44 registered
45 ? 'travel.passengers.registered'
46 : 'travel.passengers.add_me'
47 )}
48 </Button>
49 </Box>
50 )}
51 {canAddToTravel() && (
52 <Box p={1} pt={2}>
53 <Button
54 sx={buttonStyle}
55 variant="outlined"
56 color="primary"
57 fullWidth
58 onClick={onAddOther}
59 disabled={disabled}
60 >
61 {t(ADD_TO_LOCALE[variant])}
62 </Button>
63 </Box>
64 )}
65 </Box>
66 );
67};
68
69const buttonStyle = {
70 py: 1,
71 px: 8,
72 md: {
73 px: 4,
74 },
75};
76
77export default AddPassengerButtons;