frontend/containers/Travel/RequestTripModal.tsx (view raw)
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;