registration-form/src/SignUpForm.js

import React, { useState, useRef } from 'react'
import { Formik, Form, Field } from 'formik'
import { TextField } from 'formik-mui'
import {
  Button,
  Box,
  Grid,
  Alert,
  Snackbar,
  CircularProgress
} from '@mui/material'
import emailjs from '@emailjs/browser'

const validate = (values) => {
  const errors = {}
  if (!values.fio) errors.fio = 'Укажите ваше ФИО'
  if (!values.phone) errors.phone = 'Укажите ваш номер телефона'
  else if (
    !/^(\+7|7|8)?[\s-]?\(?[489][0-9]{2}\)?[\s-]?[0-9]{3}[\s-]?[0-9]{2}[\s-]?[0-9]{2}$/i.test(
      values.phone
    )
  )
    errors.phone = 'Неправильный формат номера телефона'
  if (!values.email) errors.email = 'Укажите ваш email'
  else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email))
    errors.email = 'Неправильный формат email'
  return errors
}

const SignUpForm = () => {
  const [showToast, setShowToast] = useState(false)
  const form = useRef()

  const sendEmail = (values) => {
    emailjs
      .send(
        process.env.REACT_APP_SERVICE_ID,
        process.env.REACT_APP_TEMPLATE_ID,
        values,
        process.env.REACT_APP_PUBLIC_KEY
      )
      .then(
        (result) => {
          console.log(result.text)
          setShowToast(true)
        },
        (error) => {
          console.log(error.text)
        }
      )
  }

  return (
    <>
      <Formik
        initialValues={{
          fio: '',
          phone: '',
          email: '',
          business: '',
          about: ''
        }}
        validate={(values) => validate(values)}
        onSubmit={(values, { setSubmitting }) => {
          sendEmail(values)
          setSubmitting(false)
        }}
      >
        {({ submitForm, isSubmitting }) => (
          <Form style={{ width: 300 }} ref={form}>
            <Grid container justifyContent='center'>
              {isSubmitting && <CircularProgress />}
              <Box margin={1} marginTop={3}>
                <Field
                  component={TextField}
                  name='fio'
                  type='text'
                  label='Ваше ФИО'
                />
              </Box>
              <Box margin={1}>
                <Field
                  component={TextField}
                  name='phone'
                  type='tel'
                  label='Ваш номер телефона'
                />
              </Box>
              <Box margin={1}>
                <Field
                  component={TextField}
                  name='email'
                  type='email'
                  label='Ваш email'
                />
              </Box>
              <Box margin={1}>
                <Field
                  component={TextField}
                  name='business'
                  type='text'
                  label='Ваша сфера бизнеса'
                />
              </Box>
              <Box margin={1}>
                <Field
                  multiline
                  rows={3}
                  component={TextField}
                  name='about'
                  type='text'
                  label='Расскажите о себе'
                />
              </Box>
              <Box margin={1}>
                <Button
                  variant='contained'
                  color='primary'
                  disabled={isSubmitting}
                  onClick={submitForm}
                >
                  Зарегистрироваться
                </Button>
              </Box>
            </Grid>
          </Form>
        )}
      </Formik>
      <Snackbar
        open={showToast}
        autoHideDuration={6000}
        onClose={() => setShowToast(false)}
      >
        <Alert
          onClose={() => setShowToast(false)}
          severity='success'
          sx={{ width: '100%' }}
        >
          Вы успешно зарегистрировались на мероприятие!
        </Alert>
      </Snackbar>
    </>
  )
}
export default SignUpForm