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 Button from '@material-ui/core/Button';
 9import {useTranslation} from 'react-i18next';
10import useTourStore from '../../stores/useTourStore';
11
12const WelcomeDialog = () => {
13  const {t} = useTranslation();
14  const showWelcome = useTourStore(s => s.showWelcome);
15  const setTour = useTourStore(s => s.setTour);
16  const classes = useStyles();
17
18  const onStartTour = () =>
19    setTour({showWelcome: false, run: true, step: 0, prev: -1});
20
21  const onCancel = () => setTour({showWelcome: false});
22
23  return (
24    <Dialog open={showWelcome}>
25      <CardMedia
26        className={classes.media}
27        image="/assets/Caroster_Octree_Social.jpg"
28      />
29      <DialogContent>
30        <DialogContentText>{t('tour.welcome.text')}</DialogContentText>
31      </DialogContent>
32      <DialogActions>
33        <Button onClick={onCancel} id="TourCancel">
34          {t('tour.welcome.nope')}
35        </Button>
36        <Button onClick={onStartTour} id="TourConfirm">
37          {t('tour.welcome.onboard')}
38        </Button>
39      </DialogActions>
40    </Dialog>
41  );
42};
43
44const useStyles = makeStyles({
45  media: {
46    height: 240,
47  },
48});
49
50export default WelcomeDialog;