all repos — caroster @ 1b873bd29e3743cca69f0237124963dae6cfeab9

[Octree] Group carpool to your event https://caroster.io

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;