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