1import {useTranslation} from 'react-i18next';
 2import {TextField, Typography, Box} from '@mui/material';
 3import {useEffect, useState} from 'react';
 4import FormDialog from '../FormDialog';
 5import PhoneInput from '../../components/PhoneInput';
 6import useProfile from '../../hooks/useProfile';
 7import useAddToEvents from '../../hooks/useAddToEvents';
 8import useToastStore from '../../stores/useToastStore';
 9import useEventStore from '../../stores/useEventStore';
10import {validateEmail} from '../../lib/validation';
11import {
12  TravelEntity,
13  useCreatePassengerMutation,
14} from '../../generated/graphql';
15
16interface Props {
17  open: boolean;
18  toggle: () => void;
19  travel: TravelEntity;
20}
21
22const RequestTripModal = ({open, toggle, travel}: Props) => {
23  const {t} = useTranslation();
24  const {profile, userId} = useProfile();
25  const [createPassenger] = useCreatePassengerMutation();
26  const [email, setEmail] = useState('');
27  useEffect(
28    () => {
29      setEmail(profile?.email);
30    },
31    [profile?.email]
32  );
33  const [phone, setPhone] = useState('');
34  const {event} = useEventStore();
35  const {addToEvent} = useAddToEvents();
36  const addToast = useToastStore(s => s.addToast);
37  const isEmailValid = validateEmail(email);
38  const emailError = email !== '' && !isEmailValid;
39
40  const onSubmit = async () => {
41    const hasName = profile.firstName && profile.lastName;
42    const userName = profile.firstName + ' ' + profile.lastName;
43    try {
44      createPassenger({
45        variables: {
46          passenger: {
47            user: userId,
48            email,
49            phone,
50            name: hasName ? userName : profile.username,
51            travel: travel.id,
52            event: event.id,
53          },
54        },
55        refetchQueries: ['eventByUUID'],
56      });
57      addToEvent(event.id);
58      addToast(t('passenger.success.added_self_to_car'));
59      toggle();
60    } catch (error) {
61      console.error(error);
62    }
63  };
64
65  return (
66    <FormDialog
67      open={open}
68      cancel={toggle}
69      onSubmit={onSubmit}
70      title={t('travel.requestTrip.title')}
71      action={t('travel.requestTrip.send')}
72    >
73      <Typography>{t('travel.requestTrip.description')}</Typography>
74      <Box py={2}>
75        <PhoneInput
76          value={phone}
77          onChange={v => setPhone(v)}
78          label={t('travel.requestTrip.phone')}
79        />
80      </Box>
81      <TextField
82        fullWidth
83        error={emailError}
84        label={t('travel.requestTrip.email')}
85        value={email}
86        onChange={e => setEmail(e.target.value)}
87        helperText={emailError && t('travel.requestTrip.emailHelper')}
88        variant="standard"
89      />
90    </FormDialog>
91  );
92};
93
94export default RequestTripModal;