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