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