1import Typography from '@material-ui/core/Typography';
 2import Icon from '@material-ui/core/Icon';
 3import FormControlLabel from '@material-ui/core/FormControlLabel';
 4import Checkbox from '@material-ui/core/Checkbox';
 5import Button from '@material-ui/core/Button';
 6import Box from '@material-ui/core/Box';
 7import {makeStyles} from '@material-ui/core/styles';
 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 {t} = useTranslation();
18  const classes = useStyles();
19  const [newsletterConsent, setNewsletterConsent] = useState(false);
20  const [updateMe] = useUpdateMeMutation();
21  const getRedirectUrl = useRedirectUrlStore(s => s.getRedirectUrl);
22  const onSubmit = async () => {
23    await updateMe({variables: {userUpdate: {newsletterConsent}}});
24    const callbackUrl = getRedirectUrl() || '/';
25    router.push(callbackUrl);
26  };
27
28  return (
29    <CommonConfirm>
30      <Typography variant="overline" component="h5" align="center">
31        {t('signup.create')}
32      </Typography>
33      <Typography variant="h5" component="h2" align="center">
34        {t('confirm.google.title')}
35      </Typography>
36      <Typography align="center" className={classes.margins} component="div">
37        <Icon fontSize="large">mail</Icon>
38      </Typography>
39      <FormControlLabel
40        className={classes.newsletter}
41        control={
42          <Checkbox
43            className={classes.checkbox}
44            color="primary"
45            value={newsletterConsent}
46            onChange={({target: {checked = false}}) =>
47              setNewsletterConsent(checked)
48            }
49          />
50        }
51        label={t('signup.newsletter.consent')}
52      />
53      <Box className={classes.center}>
54        <Button variant="contained" color="secondary" onClick={onSubmit}>
55          {t('generic.confirm')}
56        </Button>
57      </Box>
58    </CommonConfirm>
59  );
60};
61
62const useStyles = makeStyles(theme => ({
63  margins: {
64    margin: theme.spacing(5, 0),
65  },
66  newsletter: {
67    width: '100%',
68    margin: theme.spacing(2, 0),
69  },
70  checkbox: {
71    padding: 0,
72    marginRight: theme.spacing(2),
73  },
74  center: {
75    textAlign: 'center',
76  },
77}));
78
79export default Confirm;
80
81export const getServerSideProps = pageUtils.getServerSideProps();