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