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 'react-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({phone: travel.attributes.phone_number, phoneCountry: travel.attributes.phoneCountry})}
37            </Typography>
38          </Box>
39        )}
40        {!!travel.attributes.meeting && (
41          <Box sx={{marginTop: 2}}>
42            <Typography variant="overline" color="GrayText">
43              {t('travel.fields.meeting_point')}
44            </Typography>
45            <Typography variant="body1" color="primary">
46              <Link
47                component="a"
48                target="_blank"
49                rel="noopener noreferrer"
50                href={getMapsLink(travel.attributes.meeting)}
51                onClick={e => e.stopPropagation()}
52                sx={{color: 'primary.main'}}
53              >
54                {travel.attributes.meeting}
55              </Link>
56            </Typography>
57          </Box>
58        )}
59      </Card>
60    </Popup>
61  );
62};
63export default TravelPopup;