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