1import React, {useEffect} from 'react';
 2import Dialog from '@material-ui/core/Dialog';
 3import DialogActions from '@material-ui/core/DialogActions';
 4import DialogContent from '@material-ui/core/DialogContent';
 5import DialogContentText from '@material-ui/core/DialogContentText';
 6import DialogTitle from '@material-ui/core/DialogTitle';
 7import Button from '@material-ui/core/Button';
 8import Slide from '@material-ui/core/Slide';
 9import {useStrapi} from 'strapi-react-context';
10import marked from 'marked';
11import {useTranslation} from 'react-i18next';
12
13const Transition = React.forwardRef(function Transition(props, ref) {
14  return <Slide direction="up" ref={ref} {...props} />;
15});
16
17const TosDialog = ({open, toggle}) => {
18  const strapi = useStrapi();
19  const {t} = useTranslation();
20  const page = strapi.stores?.pages?.find(({type}) => type === 'tos');
21
22  useEffect(() => {
23    strapi.services.pages.find({type: 'tos'});
24  }, [strapi.services.pages]);
25
26  return (
27    <Dialog
28      open={open}
29      TransitionComponent={Transition}
30      onClose={toggle}
31      fullWidth
32      maxWidth="sm"
33    >
34      <DialogTitle>{page?.name}</DialogTitle>
35      <DialogContent>
36        {page && (
37          <DialogContentText
38            dangerouslySetInnerHTML={{__html: marked(page.content)}}
39          />
40        )}
41      </DialogContent>
42      <DialogActions>
43        <Button onClick={toggle}>{t('generic.close')}</Button>
44      </DialogActions>
45    </Dialog>
46  );
47};
48
49export default TosDialog;