import {useState, forwardRef, useMemo} from 'react'; import Dialog from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; import Button from '@mui/material/Button'; import Slide from '@mui/material/Slide'; import TextField from '@mui/material/TextField'; import Slider from '@mui/material/Slider'; import Typography from '@mui/material/Typography'; import moment from 'moment'; import {Box, Divider, Stack} from '@mui/material'; import {DatePicker} from '@mui/x-date-pickers/DatePicker'; import {TimePicker} from '@mui/x-date-pickers/TimePicker'; import {useTranslation} from 'next-i18next'; import PhoneInput from '../../components/PhoneInput'; import PlaceInput from '../PlaceInput'; import useEventStore from '../../stores/useEventStore'; import useActions from './useActions'; import FAQLink from './FAQLink'; import {useSession} from 'next-auth/react'; interface Props { opened: boolean; toggle: (opts: {opened: boolean}) => void; } const NewTravelDialog = ({opened, toggle}: Props) => { const {t} = useTranslation(); const event = useEventStore(s => s.event); const {createTravel} = useActions({event}); const session = useSession(); const profile = session?.data?.profile; const dateMoment = useMemo( () => (event?.date ? moment(event.date) : null), [event?.date] ); // States const [firstname, setFirstname] = useState(profile?.firstName || ''); const [lastname, setLastname] = useState(profile?.lastName || ''); const [seats, setSeats] = useState(4); const [meeting, setMeeting] = useState(''); const [meeting_latitude, setMeetingLatitude] = useState(null); const [meeting_longitude, setMeetingLongitude] = useState(null); const [date, setDate] = useState(dateMoment); const [time, setTime] = useState(dateMoment); const [phone, setPhone] = useState(''); const [phoneCountry, setPhoneCountry] = useState(''); const [phoneError, setPhoneError] = useState(false); const [details, setDetails] = useState(''); const canCreate = !!firstname?.trim() && !!lastname?.trim() && !!seats && !phoneError && phone; const clearState = () => { setSeats(4); setMeeting(''); setMeetingLatitude(null); setMeetingLongitude(null); setDate(moment()); setDetails(''); }; const onCreate = async e => { if (e.preventDefault) e.preventDefault(); const travel = { firstname, lastname, meeting, meeting_latitude, meeting_longitude, details, seats, phone_number: phone, phoneCountry: phoneCountry, departureDate: date ? moment(date).format('YYYY-MM-DD') : '', departureTime: time ? moment(time).format('HH:mm') : '', event: event.id, }; await createTravel(travel); toggle({opened: false}); clearState(); }; return ( { toggle({opened: false}); clearState(); }} TransitionComponent={Transition} >
{t('travel.creation.title')} {t('travel.creation.car.title')} setFirstname(e.target.value)} name="firstname" id="NewTravelFirstname" error={!firstname?.trim()} /> setLastname(e.target.value)} name="lastname" id="NewTravelLastname" error={!lastname?.trim()} /> { setPhone(phone); setPhoneCountry(country); setPhoneError(error); }} label={t('travel.creation.phone')} name="phone" variant="outlined" size="small" helperText={ } id="NewTravelPhone" /> {t('travel.creation.seats')} setSeats(value as number)} step={1} marks={MARKS} min={1} max={MARKS.length} valueLabelDisplay="auto" id="NewTravelSeats" /> {t('travel.creation.travel.title')} { setMeeting(place); setMeetingLatitude(latitude); setMeetingLongitude(longitude); }} /> setDetails(e.target.value)} name="details" id="NewTravelDetails" />
); }; const Transition = forwardRef(function Transition(props, ref) { return ; }); const MARKS = [1, 2, 3, 4, 5, 6, 7, 8].map(value => ({ value, label: value, })); export default NewTravelDialog;