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 TextField from '@material-ui/core/TextField';
  6import Box from '@material-ui/core/Box';
  7import Typography from '@material-ui/core/Typography';
  8import Icon from '@material-ui/core/Icon';
  9import {useTranslation} from 'react-i18next';
 10import useToastStore from '../../stores/useToastStore';
 11import useEventStore from '../../stores/useEventStore';
 12import useAddToEvents from '../../hooks/useAddToEvents';
 13import usePassengersActions from '../../hooks/usePassengersActions';
 14import useProfile from '../../hooks/useProfile';
 15import SubmitButton from './SubmitButton';
 16import Transition from './Transition';
 17import AddPassengerCommonFields from './AddPassengerCommonFields';
 18import useStyles from './useStyles';
 19import {validateEmail} from './validation';
 20import {PassengerInput} from '../../generated/graphql';
 21
 22interface Props {
 23  toggle: () => void;
 24  open: boolean;
 25  addSelf: boolean;
 26}
 27
 28const AddPassengerToWaitingList = ({open, toggle, addSelf}: Props) => {
 29  const {t} = useTranslation();
 30  const classes = useStyles();
 31  const event = useEventStore(s => s.event);
 32  const addToast = useToastStore(s => s.addToast);
 33  const {addToEvent} = useAddToEvents();
 34
 35  // States
 36  const [name, setName] = useState('');
 37  const [email, setEmail] = useState('');
 38  const emailValidated = validateEmail(email);
 39  const [location, setlocation] = useState('');
 40  const canAddPassenger = !!name && !!email;
 41  const {user} = useProfile();
 42  const {addPassenger} = usePassengersActions();
 43
 44  const onAddPassenger = async (e: FormEvent) => {
 45    e.preventDefault();
 46    let passenger: PassengerInput = {
 47      email,
 48      name,
 49      location,
 50    };
 51    if (addSelf && user)
 52      passenger = {
 53        user: user.id,
 54        email: user.email,
 55        name: user.username,
 56        location,
 57      };
 58
 59    try {
 60      await addPassenger({...passenger, event: event.id});
 61      addToEvent(event.id);
 62      addToast(
 63        t(
 64          addSelf
 65            ? 'passenger.success.added_self_to_waitlist'
 66            : 'passenger.success.added_to_waitlist',
 67          {name}
 68        )
 69      );
 70      toggle();
 71    } catch (error) {
 72      console.error(error);
 73      addToast(t('passenger.errors.cant_add_passenger'));
 74    }
 75  };
 76
 77  return (
 78    <Dialog
 79      fullWidth
 80      maxWidth="xs"
 81      open={open}
 82      onClose={toggle}
 83      TransitionComponent={Transition}
 84    >
 85      <form onSubmit={onAddPassenger}>
 86        <DialogTitle className={classes.title}>
 87          {t('travel.passengers.register_to_waiting_list')}
 88          <Icon
 89            className={classes.closeIcon}
 90            onClick={toggle}
 91            aria-label="close"
 92          >
 93            close
 94          </Icon>
 95        </DialogTitle>
 96        <DialogContent className={classes.dialogContent}>
 97          {!addSelf && (
 98            <AddPassengerCommonFields
 99              email={email}
100              emailError={!emailValidated}
101              setEmail={setEmail}
102              name={name}
103              setName={setName}
104            />
105          )}
106          <Box className={classes.inputBox}>
107            <label htmlFor="location">
108              <Typography className={classes.label}>
109                <Icon className={classes.labelIcon}>place</Icon>{' '}
110                {t('travel.passengers.location')}
111              </Typography>
112            </label>
113            <TextField
114              id="Passengerlocation"
115              name="location"
116              value={location}
117              onChange={e => setlocation(e.target.value)}
118              variant="outlined"
119              size="small"
120              fullWidth
121              label=""
122              placeholder={t('travel.passengers.location_placeholder')}
123            />
124            <Typography variant="caption">
125              {t('travel.passengers.location_helper')}
126            </Typography>
127          </Box>
128          <SubmitButton
129            disabled={!addSelf && !canAddPassenger}
130            important={addSelf}
131          >
132            {!addSelf && t('travel.passengers.add_someone')}
133            {addSelf && t('travel.passengers.add_me')}
134          </SubmitButton>
135        </DialogContent>
136      </form>
137    </Dialog>
138  );
139};
140
141export default AddPassengerToWaitingList;