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    setEmail(profile?.email);
29  }, [profile?.email]);
30  const [phone, setPhone] = useState('');
31  const [phoneCountry, setPhoneCountry] = useState('');
32  const [phoneError, setPhoneError] = useState(false);
33  const {event} = useEventStore();
34  const {addToEvent} = useAddToEvents();
35  const addToast = useToastStore(s => s.addToast);
36  const isEmailValid = validateEmail(email);
37  const emailError = email !== '' && !isEmailValid;
38
39  const onSubmit = async () => {
40    const hasName = profile.firstName && profile.lastName;
41    const userName = profile.firstName + ' ' + profile.lastName;
42    try {
43      createPassenger({
44        variables: {
45          passenger: {
46            user: userId,
47            email,
48            phone,
49            phoneCountry,
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      disabled={emailError || phoneError}
73    >
74      <Typography>{t('travel.requestTrip.description')}</Typography>
75      <Box py={2}>
76        <PhoneInput
77          value={phone}
78          onChange={({phone, country, error}) => {
79            setPhone(phone);
80            setPhoneCountry(country);
81            setPhoneError(error);
82          }}
83          label={t('travel.requestTrip.phone')}
84        />
85      </Box>
86      <TextField
87        fullWidth
88        error={emailError || phoneError}
89        label={t('travel.requestTrip.email')}
90        value={email}
91        onChange={e => setEmail(e.target.value)}
92        helperText={emailError && t('travel.requestTrip.emailHelper')}
93        variant="standard"
94      />
95    </FormDialog>
96  );
97};
98
99export default RequestTripModal;