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