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 'next-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  const onStartTour = () =>
31    setTour({showWelcome: false, run: true, step: 0, prev: -1});
32
33  const onCancel = () => setTour({showWelcome: false});
34
35  return (
36    <StyledDialog open={showWelcome} fullWidth maxWidth="xs">
37      <CardMedia
38        className={classes.media}
39        image="/assets/Caroster_Octree_Social.jpg"
40      />
41      <DialogContent>
42        <DialogContentText align="center">
43          <Typography variant="h6" color="primary">
44            {t('tour.welcome.title')}
45          </Typography>
46          <Typography color="textPrimary">{t('tour.welcome.text')}</Typography>
47        </DialogContentText>
48      </DialogContent>
49      <DialogActions>
50        <Button onClick={onCancel} id="TourCancel">
51          {t('tour.welcome.nope')}
52        </Button>
53        <Button
54          onClick={onStartTour}
55          id="TourConfirm"
56          variant="contained"
57          color="primary"
58        >
59          {t('tour.welcome.onboard')}
60        </Button>
61      </DialogActions>
62    </StyledDialog>
63  );
64};
65
66export default WelcomeDialog;