frontend/containers/AddPassengerButtons/index.tsx (view raw)
1import {useTheme} from '@mui/material/styles';
2import Box from '@mui/material/Box';
3import Button from '@mui/material/Button';
4import {useTranslation} from 'react-i18next';
5import usePermissions from '../../hooks/usePermissions';
6
7interface Props {
8 getOnClickFunction: (addSelf: boolean) => () => 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 getOnClickFunction,
21 registered,
22 variant,
23 disabled,
24}: Props) => {
25 const theme = useTheme();
26 const {t} = useTranslation();
27 const {
28 userPermissions: {canJoinTravels, canAddToTravel},
29 } = usePermissions();
30
31 const containerSx = {padding: theme.spacing(1), textAlign: 'center'};
32 const textSx = {
33 padding: theme.spacing(1, 8),
34 [theme.breakpoints.down(440)]: {
35 padding: theme.spacing(1, 4),
36 },
37 };
38
39 return (
40 <Box sx={containerSx}>
41 {canJoinTravels && (
42 <Box sx={containerSx}>
43 <Button
44 sx={textSx}
45 variant="contained"
46 color="primary"
47 fullWidth
48 onClick={getOnClickFunction(true)}
49 disabled={disabled || registered}
50 >
51 {t(
52 registered
53 ? 'travel.passengers.registered'
54 : 'travel.passengers.add_me'
55 )}
56 </Button>
57 </Box>
58 )}
59 {canAddToTravel && (
60 <Box sx={containerSx}>
61 <Button
62 sx={textSx}
63 variant="outlined"
64 color="primary"
65 fullWidth
66 onClick={getOnClickFunction(false)}
67 disabled={disabled}
68 >
69 {t(ADD_TO_LOCALE[variant])}
70 </Button>
71 </Box>
72 )}
73 </Box>
74 );
75};
76
77export default AddPassengerButtons;