1import {FormEvent, useState} from 'react';
 2import Dialog from '@mui/material/Dialog';
 3import DialogContent from '@mui/material/DialogContent';
 4import DialogTitle from '@mui/material/DialogTitle';
 5import Icon from '@mui/material/Icon';
 6import {useTranslation} from 'react-i18next';
 7import useAddToEvents from '../../hooks/useAddToEvents';
 8import useEventStore from '../../stores/useEventStore';
 9import {TravelEntity} 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 '../../lib/validation';
17
18interface Props {
19  travel: TravelEntity;
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 {addPassenger} = usePassengersActions();
37
38  const onSubmit = async (e: FormEvent) => {
39    e.preventDefault();
40    const passenger = {
41      email: email || null,
42      name,
43    };
44
45    try {
46      await addPassenger({...passenger, travel: travel.id, event: event.id});
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.attributes.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            optionalEmail
82            name={name}
83            setName={setName}
84          />
85          <SubmitButton disabled={!canAddPassenger}>
86            {t('travel.passengers.add_to_car')}
87          </SubmitButton>
88        </DialogContent>
89      </form>
90    </Dialog>
91  );
92};
93
94export default AddPassengerToTravel;