frontend/containers/AddPassengerButtons/index.tsx (view raw)
1import {Stack} from '@mui/material';
2import Button from '@mui/material/Button';
3import {useTranslation} from 'next-i18next';
4import useEventStore from '../../stores/useEventStore';
5import {useSession} from 'next-auth/react';
6import {useEffect, useReducer} from 'react';
7import LoginDialog from '../LoginDialog';
8import {useRouter} from 'next/router';
9
10interface Props {
11 onAddSelf: () => void;
12 onAddOther: () => void;
13 registered: boolean;
14 variant: 'waitingList' | 'travel';
15 disabled?: boolean;
16}
17
18const ADD_TO_LOCALE = {
19 waitingList: 'travel.passengers.add_to_waitingList',
20 travel: 'travel.passengers.add_to_travel',
21};
22
23const AddPassengerButtons = (props: Props) => {
24 const {onAddSelf, onAddOther, registered, variant, disabled} = props;
25 const {t} = useTranslation();
26 const router = useRouter();
27 const event = useEventStore(s => s.event);
28 const isCarosterPlus = event?.enabled_modules?.includes('caroster-plus');
29 const session = useSession();
30 const isAuthenticated = session.status === 'authenticated';
31 const [showLoginDialog, toggleLoginDialog] = useReducer(i => !i, false);
32
33 const onClickAddSelf = () => {
34 if (isCarosterPlus && !isAuthenticated) toggleLoginDialog();
35 else onAddSelf();
36 };
37
38 useEffect(() => {
39 if (router.query.action === 'addSelf') {
40 onAddSelf();
41 router.replace(
42 {pathname: `/${router.locale}/e/${router.query.uuid}`, query: null},
43 undefined,
44 {shallow: true}
45 );
46 }
47 }, [router, onAddSelf]);
48
49 return (
50 <>
51 <Stack spacing={2} p={1} pt={2}>
52 <Button
53 variant="contained"
54 color="primary"
55 fullWidth
56 onClick={onClickAddSelf}
57 disabled={disabled || registered}
58 >
59 {t(
60 registered
61 ? 'travel.passengers.registered'
62 : 'travel.passengers.add_me'
63 )}
64 </Button>
65 {isCarosterPlus && isAuthenticated && (
66 <Button
67 variant="outlined"
68 color="primary"
69 fullWidth
70 onClick={onAddOther}
71 disabled={disabled}
72 >
73 {t(ADD_TO_LOCALE[variant])}
74 </Button>
75 )}
76 </Stack>
77 <LoginDialog
78 title={t`travel.passengers.add_me`}
79 content={t`travel.passengers.add_me.loginNotice`}
80 open={showLoginDialog}
81 toggle={toggleLoginDialog}
82 redirectPath={`/e/${event?.uuid}/?action=addSelf`}
83 />
84 </>
85 );
86};
87
88export default AddPassengerButtons;