1import React, {useState, useEffect, useMemo} from 'react';
  2import {makeStyles} from '@material-ui/core/styles';
  3import Typography from '@material-ui/core/Typography';
  4import TextField from '@material-ui/core/TextField';
  5import Button from '@material-ui/core/Button';
  6import Checkbox from '@material-ui/core/Checkbox';
  7import FormControlLabel from '@material-ui/core/FormControlLabel';
  8import {useTranslation} from 'react-i18next';
  9import useDebounce from '../../hooks/useDebounce';
 10import {CardActions} from '@material-ui/core';
 11import {isValidEmail} from '../../lib/formValidation';
 12import {useSession} from 'next-auth/react';
 13
 14const Step1 = ({nextStep, event, addToEvent}) => {
 15  const {t} = useTranslation();
 16  const session = useSession();
 17  const user = session?.data?.user;
 18  const isAuthenticated = session.status === 'authenticated';
 19  const classes = useStyles({connected: isAuthenticated});
 20
 21  // States
 22  const [name, setName] = useState(event.name ?? '');
 23  const [email, setEmail] = useState(event.email ?? '');
 24  const [emailIsValid, setEmailIsValid] = useState(false);
 25  const [newsletter, setNewsletter] = useState(false);
 26  const debouncedEmail = useDebounce(email, 400);
 27
 28  useEffect(() => {
 29    setEmailIsValid(isValidEmail(debouncedEmail));
 30  }, [debouncedEmail]);
 31
 32  const canSubmit = useMemo(() => {
 33    const n = name.length > 0;
 34    const e = email.length > 0 && emailIsValid;
 35    return isAuthenticated ? n : n && e;
 36  }, [name, email, emailIsValid, isAuthenticated]);
 37
 38  const onNext = submitEvent => {
 39    if (submitEvent.preventDefault) submitEvent.preventDefault();
 40    addToEvent({
 41      name,
 42      email: isAuthenticated ? user.email : email,
 43      newsletter: isAuthenticated ? true : newsletter,
 44    });
 45    nextStep();
 46    return false;
 47  };
 48
 49  return (
 50    <form onSubmit={onNext}>
 51      <TextField
 52        label={t('event.creation.name')}
 53        fullWidth
 54        autoFocus
 55        margin="dense"
 56        value={name}
 57        onChange={e => setName(e.target.value)}
 58        id="NewEventName"
 59        name="name"
 60      />
 61      {!isAuthenticated && (
 62        <>
 63          <TextField
 64            label={t('event.creation.creator_email')}
 65            fullWidth
 66            value={email}
 67            onChange={e => setEmail(e.target.value)}
 68            name="email"
 69            type="email"
 70            id="NewEventEmail"
 71          />
 72          <FormControlLabel
 73            className={classes.newsletter}
 74            label={t('event.creation.newsletter')}
 75            control={
 76              <Checkbox
 77                name="newsletter"
 78                color="primary"
 79                id="NewEventNewsletter"
 80                checked={newsletter}
 81                onChange={e => setNewsletter(e.target.checked)}
 82              />
 83            }
 84          />
 85        </>
 86      )}
 87      <Button
 88        className={classes.button}
 89        type="submit"
 90        variant="contained"
 91        color="secondary"
 92        fullWidth
 93        disabled={!canSubmit}
 94        aria-disabled={!canSubmit}
 95      >
 96        {t('event.creation.next')}
 97      </Button>
 98
 99      {!isAuthenticated && (
100        <div className={classes.addFromAccountSection}>
101          <Typography variant="body1">
102            {t('event.creation.addFromAccount.title')}
103          </Typography>
104          <Typography variant="body2">
105            {t('event.creation.addFromAccount.subtitle')}
106          </Typography>
107          <CardActions className={classes.actions}>
108            <Button variant="text" href="/auth/register">
109              {t('event.creation.addFromAccount.actions.register')}
110            </Button>
111            <Button color="primary" href="/auth/login">
112              {t('event.creation.addFromAccount.actions.login')}
113            </Button>
114          </CardActions>
115        </div>
116      )}
117    </form>
118  );
119};
120
121const useStyles = makeStyles(theme => ({
122  button: {
123    marginTop: theme.spacing(2),
124  },
125  newsletter: {
126    marginTop: theme.spacing(2),
127  },
128  addFromAccountSection: {
129    marginTop: theme.spacing(8),
130    textAlign: 'center',
131  },
132  actions: {
133    marginTop: theme.spacing(1),
134    justifyContent: 'space-evenly',
135    textAlign: 'center',
136  },
137}));
138
139export default Step1;