1import Button from '@mui/material/Button';
  2import Typography from '@mui/material/Typography';
  3import {useTheme} from '@mui/material/styles';
  4import {useTranslation} from 'next-i18next';
  5import {useRouter} from 'next/router';
  6import Box from '@mui/material/Box';
  7import ShareEvent from '../ShareEvent';
  8import SupportCaroster from '../SupportCaroster';
  9import {Icon} from '@mui/material';
 10import usePermissions from '../../hooks/usePermissions';
 11
 12interface Props {
 13  eventName: string;
 14  title: string;
 15  isCarosterPlus: string;
 16  showImage?: boolean;
 17  showTravelModal: () => void;
 18}
 19
 20const NoCar = ({
 21  eventName,
 22  title,
 23  isCarosterPlus,
 24  showImage,
 25  showTravelModal,
 26}: Props) => {
 27  const {t} = useTranslation();
 28  const theme = useTheme();
 29  const router = useRouter();
 30  const {uuid} = router.query;
 31  const {
 32    userPermissions: {canAddTravel},
 33  } = usePermissions();
 34
 35  return (
 36    <Box my={4} mx="auto" pb={16} mt={15} maxWidth="100%" width={340}>
 37      <Typography variant="h6" align="center" color="textSecondary">
 38        {title}
 39      </Typography>
 40
 41      {showImage && (
 42        <>
 43          {canAddTravel() && (
 44            <Box my={4} textAlign="center">
 45              <Button
 46                onClick={showTravelModal}
 47                aria-label="add-car"
 48                variant="contained"
 49                color="secondary"
 50                endIcon={<Icon>add</Icon>}
 51              >
 52                {t('travel.creation.title')}
 53              </Button>
 54            </Box>
 55          )}
 56          <Box
 57            component="img"
 58            sx={{
 59              display: 'block',
 60              margin: '0 auto',
 61              width: '100%',
 62              height: 'auto',
 63
 64              [theme.breakpoints.down('md')]: {
 65                width: '50%',
 66              },
 67            }}
 68            src="/assets/car.png"
 69          />
 70        </>
 71      )}
 72      <Typography sx={{whiteSpace: 'pre-line', mt: 4}} color="textSecondary">
 73        {isCarosterPlus
 74          ? t('event.no_travel.plus.desc')
 75          : t('event.no_travel.desc')}
 76      </Typography>
 77      {!isCarosterPlus && (
 78        <ShareEvent
 79          color="primary"
 80          sx={{
 81            mt: 4,
 82            backgroundColor: '#fff',
 83          }}
 84          title={`Caroster ${eventName}`}
 85        />
 86      )}
 87      {isCarosterPlus && (
 88        <Box textAlign="center" width={1} mt={4}>
 89          <Button
 90            variant="outlined"
 91            color="primary"
 92            onClick={() => router.push(`/e/${uuid}/alerts`)}
 93          >
 94            {t('event.no_travel.plus.action')}
 95          </Button>
 96        </Box>
 97      )}
 98      <Box mt={4} display="flex" justifyContent="center">
 99        <SupportCaroster />
100      </Box>
101    </Box>
102  );
103};
104
105export default NoCar;