frontend/containers/TosDialog/index.js (view raw)
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;