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  onAddSelf: () => void;
 9  onAddOther: () => void;
10  registered: boolean;
11  variant: 'waitingList' | 'travel';
12  disabled?: boolean;
13}
14
15const ADD_TO_LOCALE = {
16  waitingList: 'travel.passengers.add_to_waitingList',
17  travel: 'travel.passengers.add_to_travel',
18};
19
20const AddPassengerButtons = ({
21  onAddSelf,
22  onAddOther,
23  registered,
24  variant,
25  disabled,
26}: Props) => {
27  const theme = useTheme();
28  const {t} = useTranslation();
29  const {
30    userPermissions: {canJoinTravels, canAddToTravel},
31  } = usePermissions();
32
33  const containerSx = {padding: theme.spacing(1), textAlign: 'center'};
34  const textSx = {
35    padding: theme.spacing(1, 8),
36    [theme.breakpoints.down(440)]: {
37      padding: theme.spacing(1, 4),
38    },
39  };
40
41  return (
42    <Box sx={containerSx}>
43      {canJoinTravels && (
44        <Box sx={containerSx}>
45          <Button
46            sx={textSx}
47            variant="contained"
48            color="primary"
49            fullWidth
50            onClick={onAddSelf}
51            disabled={disabled || registered}
52          >
53            {t(
54              registered
55                ? 'travel.passengers.registered'
56                : 'travel.passengers.add_me'
57            )}
58          </Button>
59        </Box>
60      )}
61      {canAddToTravel && (
62        <Box sx={containerSx}>
63          <Button
64            sx={textSx}
65            variant="outlined"
66            color="primary"
67            fullWidth
68            onClick={onAddOther}
69            disabled={disabled}
70          >
71            {t(ADD_TO_LOCALE[variant])}
72          </Button>
73        </Box>
74      )}
75    </Box>
76  );
77};
78
79export default AddPassengerButtons;