1import {FormEvent, useState} from 'react';
 2import Dialog from '@material-ui/core/Dialog';
 3import DialogContent from '@material-ui/core/DialogContent';
 4import DialogTitle from '@material-ui/core/DialogTitle';
 5import Icon from '@material-ui/core/Icon';
 6import {useTranslation} from 'react-i18next';
 7import useAddToEvents from '../../hooks/useAddToEvents';
 8import useEventStore from '../../stores/useEventStore';
 9import {Travel as TravelType} from '../../generated/graphql';
10import SubmitButton from './SubmitButton';
11import Transition from './Transition';
12import AddPassengerCommonFields from './AddPassengerCommonFields';
13import useStyles from './useStyles';
14import useToastStore from '../../stores/useToastStore';
15import usePassengersActions from '../../hooks/usePassengersActions';
16
17interface Props {
18  travel: TravelType;
19  toggle: () => void;
20  open: boolean;
21}
22
23const NewPassengerDialog = ({open, toggle, travel}: Props) => {
24  const {t} = useTranslation();
25  const classes = useStyles();
26  const event = useEventStore(s => s.event);
27  const {addToEvent} = useAddToEvents();
28  const addToast = useToastStore(s => s.addToast);
29
30  // States
31  const [name, setName] = useState('');
32  const [email, setEmail] = useState('');
33  const canAddPassenger = !!name && !!email;
34  const {addPassengerToTravel} = usePassengersActions();
35
36  const onSubmit = async (e: FormEvent) => {
37    e.preventDefault();
38    const passenger = {
39      email,
40      name,
41    };
42
43    try {
44      await addPassengerToTravel({passenger, travel});
45      addToEvent(event.id);
46      addToast(t('passenger.success.added_to_car', {name}));
47      toggle();
48    } catch (error) {
49      console.error(error);
50      if (error.message === 'no_enough_seats')
51        addToast(t`passenger.errors.car_full`);
52    }
53  };
54
55  return (
56    <Dialog
57      fullWidth
58      maxWidth="xs"
59      open={open}
60      onClose={toggle}
61      TransitionComponent={Transition}
62    >
63      <form onSubmit={onSubmit}>
64        <DialogTitle className={classes.title}>
65          {travel.vehicle.name}
66          <Icon
67            className={classes.closeIcon}
68            onClick={toggle}
69            aria-label="close"
70          >
71            close
72          </Icon>
73        </DialogTitle>
74        <DialogContent className={classes.dialogContent}>
75          <AddPassengerCommonFields
76            email={email}
77            setEmail={setEmail}
78            name={name}
79            setName={setName}
80          />
81          <SubmitButton disabled={!canAddPassenger}>
82            {t('travel.passengers.add_to_car')}
83          </SubmitButton>
84        </DialogContent>
85      </form>
86    </Dialog>
87  );
88};
89
90export default NewPassengerDialog;