1import moment from 'moment';
 2import Card from '@mui/material/Card';
 3import Typography from '@mui/material/Typography';
 4import Link from '@mui/material/Link';
 5import Box from '@mui/material/Box';
 6import {TravelEntity} from '../../../generated/graphql';
 7import {Popup} from 'react-leaflet';
 8import {useTranslation} from 'next-i18next';
 9import getMapsLink from '../../../lib/getMapsLink';
10import {getFormatedPhoneNumber} from '../../../lib/phoneNumbers';
11import usePermissions from '../../../hooks/usePermissions';
12import useEventStore from '../../../stores/useEventStore';
13
14interface Props {
15  travel: TravelEntity;
16}
17
18const TravelPopup = ({travel}: Props) => {
19  const {t} = useTranslation();
20  const {
21    userPermissions: {canSeeTravelDetails},
22  } = usePermissions();
23  const isReturnEvent = useEventStore(s => s.event?.isReturnEvent);
24  return (
25    <Popup>
26      <Card sx={{p: 2, width: '350px', maxWidth: '100%', cursor: 'pointer'}}>
27        {!!travel.attributes.departureDate && (
28          <Typography variant="overline" color="Graytext" id="TravelDeparture">
29            {moment(travel.attributes.departureDate).format('dddd LL')}{' '}
30            {travel.attributes.departureTime || ''}
31          </Typography>
32        )}
33        <Box>
34          <Typography variant="h5">{travel.attributes.vehicleName}</Typography>
35        </Box>
36        {!!travel.attributes.phone_number && canSeeTravelDetails(travel) && (
37          <Box sx={{marginTop: 2}}>
38            <Typography variant="overline" color="GrayText">
39              {t('travel.fields.phone')}
40            </Typography>
41            <Typography variant="body1">
42              {getFormatedPhoneNumber({
43                phone: travel.attributes.phone_number,
44                phoneCountry: travel.attributes.phoneCountry,
45              })}
46            </Typography>
47          </Box>
48        )}
49        {!!travel.attributes.meeting && (
50          <Box sx={{marginTop: 2}}>
51            <Typography variant="overline" color="GrayText">
52              {t(isReturnEvent ? 'travel.destination' : 'travel.meeting')}
53            </Typography>
54            <Typography variant="body1" color="primary">
55              <Link
56                component="a"
57                target="_blank"
58                rel="noopener noreferrer"
59                href={getMapsLink(travel.attributes.meeting)}
60                onClick={e => e.stopPropagation()}
61                sx={{color: 'primary.main'}}
62              >
63                {travel.attributes.meeting}
64              </Link>
65            </Typography>
66          </Box>
67        )}
68      </Card>
69    </Popup>
70  );
71};
72export default TravelPopup;