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} from 'react-i18next';
 9import {useState} from 'react';
10import pageUtils from '../../../lib/pageUtils';
11import CommonConfirm from '../../../layouts/ConfirmLayout';
12import {useUpdateMeMutation} from '../../../generated/graphql';
13import useRedirectUrlStore from '../../../stores/useRedirectUrl';
14import router from 'next/router';
15
16const Confirm = () => {
17  const theme = useTheme();
18  const {t} = useTranslation();
19
20  const [newsletterConsent, setNewsletterConsent] = useState(false);
21  const [updateMe] = useUpdateMeMutation();
22  const getRedirectUrl = useRedirectUrlStore(s => s.getRedirectUrl);
23  const onSubmit = async () => {
24    await updateMe({variables: {userUpdate: {newsletterConsent}}});
25    const callbackUrl = getRedirectUrl() || '/dashboard';
26    router.push(callbackUrl);
27  };
28
29  return (
30    <CommonConfirm>
31      <Typography variant="h6" align="center">
32        {t('signup.create')}
33      </Typography>
34      <Typography variant="h5" align="center">
35        {t('confirm.google.title')}
36      </Typography>
37      <Typography align="center" sx={{margin: theme.spacing(5, 0)}}>
38        <Icon fontSize="large">mail</Icon>
39      </Typography>
40      <FormControlLabel
41        sx={{width: '100%', margin: theme.spacing(2, 0)}}
42        control={
43          <Checkbox
44            sx={{padding: 0, marginRight: theme.spacing(2)}}
45            color="primary"
46            value={newsletterConsent}
47            onChange={({target: {checked = false}}) =>
48              setNewsletterConsent(checked)
49            }
50          />
51        }
52        label={t('signup.newsletter.consent')}
53      />
54      <Box sx={{textAlign: 'center'}}>
55        <Button variant="contained" color="secondary" onClick={onSubmit}>
56          {t('generic.confirm')}
57        </Button>
58      </Box>
59    </CommonConfirm>
60  );
61};
62
63export default Confirm;
64
65export const getServerSideProps = pageUtils.getServerSideProps();