1import React from 'react';
 2import {makeStyles} from '@material-ui/core/styles';
 3import Dialog from '@material-ui/core/Dialog';
 4import CardMedia from '@material-ui/core/CardMedia';
 5import DialogActions from '@material-ui/core/DialogActions';
 6import DialogContent from '@material-ui/core/DialogContent';
 7import DialogContentText from '@material-ui/core/DialogContentText';
 8import Typography from '@material-ui/core/Typography';
 9import Button from '@material-ui/core/Button';
10import {useTranslation} from 'react-i18next';
11import useTourStore from '../../stores/useTourStore';
12
13const WelcomeDialog = () => {
14  const {t} = useTranslation();
15  const showWelcome = useTourStore(s => s.showWelcome);
16  const setTour = useTourStore(s => s.setTour);
17  const classes = useStyles();
18
19  const onStartTour = () =>
20    setTour({showWelcome: false, run: true, step: 0, prev: -1});
21
22  const onCancel = () => setTour({showWelcome: false});
23
24  return (
25    <Dialog open={showWelcome} fullWidth maxWidth="xs">
26      <CardMedia
27        className={classes.media}
28        image="/assets/Caroster_Octree_Social.jpg"
29      />
30      <DialogContent>
31        <DialogContentText align="center">
32          <Typography variant="h6" color="primary">
33            {t('tour.welcome.title')}
34          </Typography>
35          <Typography color="textPrimary">{t('tour.welcome.text')}</Typography>
36        </DialogContentText>
37      </DialogContent>
38      <DialogActions>
39        <Button onClick={onCancel} id="TourCancel">
40          {t('tour.welcome.nope')}
41        </Button>
42        <Button
43          onClick={onStartTour}
44          id="TourConfirm"
45          variant="contained"
46          color="primary"
47        >
48          {t('tour.welcome.onboard')}
49        </Button>
50      </DialogActions>
51    </Dialog>
52  );
53};
54
55const useStyles = makeStyles({
56  media: {
57    height: 240,
58  },
59});
60
61export default WelcomeDialog;