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