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