1import Typography from '@mui/material/Typography';
 2import {useTheme} from '@mui/material/styles';
 3import Icon from '@mui/material/Icon';
 4import FormControlLabel from '@mui/material/FormControlLabel';
 5import Checkbox from '@mui/material/Checkbox';
 6import Button from '@mui/material/Button';
 7import Box from '@mui/material/Box';
 8import {useTranslation, Trans} from 'react-i18next';
 9import {useState} from 'react';
10import pageUtils from '../../../lib/pageUtils';
11import CommonConfirm from '../../../layouts/ConfirmLayout';
12import {useUpdateMeMutation} from '../../../generated/graphql';
13import router from 'next/router';
14import useSettings from '../../../hooks/useSettings';
15import moment from 'moment';
16
17const Confirm = () => {
18  const theme = useTheme();
19  const {t} = useTranslation();
20  const settings = useSettings();
21  const [updateMe] = useUpdateMeMutation();
22
23  const [newsletterConsent, setNewsletterConsent] = useState(false);
24  const [tosConsent, setTosConsent] = useState(false);
25
26  const onSubmit = async () => {
27    const tosAcceptationDate = tosConsent ? moment().toISOString() : null;
28    await updateMe({
29      variables: {userUpdate: {newsletterConsent, tosAcceptationDate}},
30    });
31    router.push('/dashboard');
32  };
33
34  return (
35    <CommonConfirm>
36      <Typography variant="h6" align="center">
37        {t('signup.create')}
38      </Typography>
39      <Typography variant="h5" align="center">
40        {t('confirm.google.title')}
41      </Typography>
42      <Typography align="center" sx={{margin: theme.spacing(5, 0)}}>
43        <Icon fontSize="large">mail</Icon>
44      </Typography>
45      <FormControlLabel
46        sx={{width: '100%', my: 2, mx: 0}}
47        control={
48          <Checkbox
49            sx={{p: 0, mr: 2}}
50            color="primary"
51            value={newsletterConsent}
52            onChange={({target: {checked = false}}) =>
53              setNewsletterConsent(checked)
54            }
55          />
56        }
57        label={t('signup.newsletter.consent')}
58      />
59      <FormControlLabel
60        sx={{width: '100%', my: 2, mx: 0}}
61        label={
62          <Trans
63            i18nKey="signup.tos.consent"
64            components={{
65              'tos-link': <a href={settings.tos_link} target="_blank" />,
66              'data-privacy-link': (
67                <a href={settings.tos_link} target="_blank" />
68              ),
69            }}
70          />
71        }
72        control={
73          <Checkbox
74            sx={{p: 0, mr: 2}}
75            value={tosConsent}
76            onChange={e => setTosConsent(e.target.checked)}
77          />
78        }
79      />
80      <Box sx={{textAlign: 'center'}} mt={2}>
81        <Button
82          variant="contained"
83          color="secondary"
84          onClick={onSubmit}
85          disabled={!tosConsent}
86        >
87          {t('generic.confirm')}
88        </Button>
89      </Box>
90    </CommonConfirm>
91  );
92};
93
94export default Confirm;
95
96export const getServerSideProps = pageUtils.getServerSideProps();