1import {
 2  Box,
 3  Button,
 4  Checkbox,
 5  Dialog,
 6  DialogActions,
 7  DialogContent,
 8  DialogTitle,
 9  Typography,
10} from '@mui/material';
11import {useSession} from 'next-auth/react';
12import {useEffect, useReducer, useState} from 'react';
13import {useTranslation, Trans} from 'next-i18next';
14import useSettings from '../../hooks/useSettings';
15
16const STORAGE_KEY = 'TOS_ACCEPTED';
17
18const TOSDialog = () => {
19  const {t} = useTranslation();
20  const settings = useSettings();
21  const session = useSession();
22  const [accepted, setAccepted] = useState(false);
23  const [showDialog, toggleDialog] = useReducer(i => !i, false);
24
25  const onConfirm = () => {
26    toggleDialog();
27    localStorage.setItem(STORAGE_KEY, new Date().toISOString());
28  };
29
30  useEffect(() => {
31    if (!localStorage.getItem(STORAGE_KEY)) toggleDialog();
32  }, []);
33
34  if (session.status !== 'unauthenticated') return null;
35
36  return (
37    <Dialog open={showDialog} fullWidth maxWidth="xs">
38      <DialogTitle>{t`signup.tos.title`}</DialogTitle>
39      <DialogContent>
40        <Box display="flex" justifyContent="space-between" gap={4}>
41          <Typography>
42            <Trans
43              i18nKey="signup.tos.consent"
44              components={{
45                'tos-link': <a href={settings.tos_link} target="_blank" />,
46                'data-privacy-link': (
47                  <a href={settings.tos_link} target="_blank" />
48                ),
49              }}
50            />
51          </Typography>
52          <Checkbox
53            checked={accepted}
54            onChange={e => setAccepted(e.target.checked)}
55          />
56        </Box>
57      </DialogContent>
58      <DialogActions>
59        <Button
60          variant="contained"
61          color="primary"
62          disabled={!accepted}
63          onClick={onConfirm}
64          fullWidth
65        >{t`signup.tos.button`}</Button>
66      </DialogActions>
67    </Dialog>
68  );
69};
70
71export default TOSDialog;