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