frontend/containers/WaitingList/TravelDialog.tsx (view raw)
1import moment from 'moment';
2import { styled } from '@mui/material/styles';
3import Link from '@mui/material/Link';
4import Typography from '@mui/material/Typography';
5import Button from '@mui/material/Button';
6import Slide from '@mui/material/Slide';
7import Dialog from '@mui/material/Dialog';
8import AppBar from '@mui/material/AppBar';
9import Toolbar from '@mui/material/Toolbar';
10import ListItem from '@mui/material/ListItem';
11import List from '@mui/material/List';
12import IconButton from '@mui/material/IconButton';
13import Icon from '@mui/material/Icon';
14import Box from '@mui/material/Box';
15import {useTranslation} from 'react-i18next';
16import {forwardRef} from 'react';
17import getMapsLink from '../../lib/getMapsLink';
18import ShareEvent from '../ShareEvent';
19import {Passenger, TravelEntity, Travel} from '../../generated/graphql';
20
21const PREFIX = 'TravelDialog';
22
23const classes = {
24 offset: `${PREFIX}-offset`,
25 rtlBox: `${PREFIX}-rtlBox`,
26 info: `${PREFIX}-info`,
27 listItem: `${PREFIX}-listItem`,
28 date: `${PREFIX}-date`,
29 button: `${PREFIX}-button`,
30 noTravel: `${PREFIX}-noTravel`,
31 noTravelImage: `${PREFIX}-noTravelImage`,
32 share: `${PREFIX}-share`
33};
34
35const StyledSlide = styled(Slide)((
36 {
37 theme
38 }
39) => ({
40 [`& .${classes.offset}`]: {
41 paddingTop: theme.spacing(7),
42 },
43
44 [`& .${classes.rtlBox}`]: {
45 display: 'flex',
46 padding: 0,
47 margin: 0,
48 direction: 'rtl',
49 [theme.breakpoints.down('md')]: {
50 display: 'block',
51 paddingBottom: theme.spacing(1),
52 },
53 },
54
55 [`& .${classes.info}`]: {
56 padding: theme.spacing(0, 4, 0, 0),
57 width: '350px',
58 [theme.breakpoints.down('md')]: {
59 padding: theme.spacing(0.5, 1),
60 width: '100%',
61 textAlign: 'left',
62 },
63 },
64
65 [`& .${classes.listItem}`]: {
66 display: 'flex',
67 justifyContent: 'left',
68 [theme.breakpoints.down('md')]: {
69 display: 'block',
70 textAlign: 'center',
71 },
72 },
73
74 [`& .${classes.date}`]: {
75 textTransform: 'capitalize',
76 padding: theme.spacing(0, 0, 0.5, 0),
77 },
78
79 [`& .${classes.button}`]: {
80 padding: theme.spacing(1, 15),
81 margin: theme.spacing(1),
82 },
83
84 [`& .${classes.noTravel}`]: {
85 margin: '120px auto 0 auto',
86 width: '330px',
87 maxWidth: '100%',
88 textAlign: 'center',
89 },
90
91 [`& .${classes.noTravelImage}`]: {
92 width: 'calc(100% - 2px)',
93 [theme.breakpoints.down('md')]: {
94 width: 'calc(50% - 2px)',
95 },
96 },
97
98 [`& .${classes.share}`]: {
99 marginTop: theme.spacing(2),
100 backgroundColor: '#fff',
101 }
102}));
103
104interface Props {
105 eventName: string;
106 travels: Array<TravelEntity>;
107 passenger: Passenger;
108 open: boolean;
109 onClose: () => void;
110 onSelect: (travel: Travel & {id: string}) => void;
111}
112
113const TravelDialog = ({
114 eventName,
115 travels,
116 passenger,
117 open,
118 onClose,
119 onSelect,
120}: Props) => {
121
122 const {t} = useTranslation();
123
124 const availableTravels = travels?.filter(
125 ({attributes}) =>
126 attributes.passengers &&
127 attributes?.seats > attributes.passengers.data.length
128 );
129
130 return (
131 <Dialog
132 fullScreen
133 open={open}
134 onClose={onClose}
135 TransitionComponent={Transition}
136 >
137 <AppBar>
138 <Toolbar>
139 <IconButton onClick={onClose} color="inherit" size="large">
140 <Icon>arrow_back_ios</Icon>
141 </IconButton>
142 <Typography variant="h5">
143 {t('passenger.creation.available_cars')}
144 </Typography>
145 </Toolbar>
146 </AppBar>
147 {(availableTravels.length === 0 && (
148 <Box className={classes.noTravel}>
149 <Typography variant="h5">
150 {t('passenger.creation.no_travel.title')}
151 </Typography>
152 <img className={classes.noTravelImage} src="/assets/car.png" />
153 <Typography>
154 {t('passenger.creation.no_travel.desc', {name: passenger?.name})}
155 </Typography>
156 <ShareEvent
157 className={classes.share}
158 title={`Caroster ${eventName}`}
159 />
160 </Box>
161 )) || (
162 <div className={classes.offset}>
163 <List disablePadding>
164 {availableTravels.map(({id, attributes}, i) => {
165 const travel = {id, ...attributes};
166 const passengersCount = travel?.passengers?.data.length || 0;
167 const counter = `${passengersCount} / ${travel?.seats || 0}`;
168 return (
169 <ListItem key={i} divider className={classes.listItem}>
170 <Box className={classes.rtlBox}>
171 <Box className={classes.info}>
172 <Typography variant="subtitle1" className={classes.date}>
173 {t('passenger.creation.departure')}
174 {moment(travel.departure).format('LLLL')}
175 </Typography>
176 <Link
177 target="_blank"
178 rel="noreferrer"
179 href={getMapsLink(travel.meeting)}
180 onClick={e => e.preventDefault}
181 >
182 {travel.meeting}
183 </Link>
184 </Box>
185 <Box className={classes.info}>
186 <Typography variant="h6">{travel.vehicleName}</Typography>
187 <Typography variant="body2">
188 {t('passenger.creation.seats', {seats: counter})}
189 </Typography>
190 </Box>
191 </Box>
192 <Button
193 color="primary"
194 variant="contained"
195 onClick={() => onSelect(travel)}
196 className={classes.button}
197 >
198 {t('passenger.creation.assign')}
199 </Button>
200 </ListItem>
201 );
202 })}
203 </List>
204 </div>
205 )}
206 </Dialog>
207 );
208};
209
210const Transition = forwardRef(function Transition(props, ref) {
211 return <StyledSlide direction="up" ref={ref} {...props} />;
212});
213
214export default TravelDialog;