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