1import Typography from '@mui/material/Typography';
  2import FormControlLabel from '@mui/material/FormControlLabel';
  3import Checkbox from '@mui/material/Checkbox';
  4import Button from '@mui/material/Button';
  5import Box from '@mui/material/Box';
  6import {useTranslation, Trans} from 'next-i18next';
  7import {useMemo, useState} from 'react';
  8import pageUtils from '../../lib/pageUtils';
  9import CommonConfirm from '../../layouts/ConfirmLayout';
 10import {useUpdateMeMutation} from '../../generated/graphql';
 11import useSettings from '../../hooks/useSettings';
 12import moment from 'moment';
 13import {useSession} from 'next-auth/react';
 14import {TextField, useMediaQuery} from '@mui/material';
 15import theme from '../../theme';
 16
 17const Confirm = () => {
 18  const {t} = useTranslation();
 19  const settings = useSettings();
 20  const [updateMe] = useUpdateMeMutation();
 21  const session = useSession();
 22  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 23  const sessionNames = session?.data?.token?.name?.split(' ') || ['', ''];
 24
 25  const [firstname, setFirstname] = useState(sessionNames[0]);
 26  const [lastname, setLastname] = useState(sessionNames[1]);
 27  const [newsletterConsent, setNewsletterConsent] = useState(false);
 28  const [tosConsent, setTosConsent] = useState(false);
 29  const canConfirm = useMemo(
 30    () => firstname?.length > 1 && lastname?.length > 1 && tosConsent,
 31    [firstname, lastname, tosConsent]
 32  );
 33
 34  const onSubmit = async () => {
 35    const tosAcceptationDate = tosConsent ? moment().toISOString() : null;
 36    await updateMe({
 37      variables: {
 38        userUpdate: {
 39          newsletterConsent,
 40          tosAcceptationDate,
 41          firstName: firstname,
 42          lastName: lastname,
 43        },
 44      },
 45    });
 46    window.location.href = '/dashboard';
 47  };
 48
 49  return (
 50    <CommonConfirm>
 51      <Typography variant="h6" align="center">
 52        {t('signup.create')}
 53      </Typography>
 54      <Typography variant="h5" align="center">
 55        {t('confirm.google.title')}
 56      </Typography>
 57      <Box
 58        mt={3}
 59        mb={2}
 60        display="flex"
 61        gap={2}
 62        flexDirection={isMobile ? 'column' : 'row'}
 63      >
 64        <TextField
 65          label={t`signup.firstName`}
 66          variant="outlined"
 67          size="small"
 68          value={firstname}
 69          onChange={e => setFirstname(e.target.value)}
 70          fullWidth
 71        />
 72        <TextField
 73          label={t`signup.lastName`}
 74          variant="outlined"
 75          size="small"
 76          value={lastname}
 77          onChange={e => setLastname(e.target.value)}
 78          fullWidth
 79        />
 80      </Box>
 81      <FormControlLabel
 82        sx={{width: '100%', my: 2, mx: 0}}
 83        control={
 84          <Checkbox
 85            sx={{p: 0, mr: 2}}
 86            color="primary"
 87            value={newsletterConsent}
 88            onChange={({target: {checked = false}}) =>
 89              setNewsletterConsent(checked)
 90            }
 91          />
 92        }
 93        label={t('signup.newsletter.consent')}
 94      />
 95      <FormControlLabel
 96        sx={{width: '100%', mx: 0}}
 97        label={
 98          <Trans
 99            i18nKey="signup.tos.consent"
100            components={{
101              'tos-link': <a href={settings.tos_link} target="_blank" />,
102              'data-privacy-link': (
103                <a href={settings.data_policy_link} target="_blank" />
104              ),
105            }}
106          />
107        }
108        control={
109          <Checkbox
110            sx={{p: 0, mr: 2}}
111            value={tosConsent}
112            onChange={e => setTosConsent(e.target.checked)}
113          />
114        }
115      />
116      <Box sx={{textAlign: 'center'}} mt={2}>
117        <Button
118          variant="contained"
119          color="secondary"
120          onClick={onSubmit}
121          disabled={!canConfirm}
122        >
123          {t('generic.confirm')}
124        </Button>
125      </Box>
126    </CommonConfirm>
127  );
128};
129
130export default Confirm;
131
132export const getServerSideProps = pageUtils.getServerSideProps();