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