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 ( <> validate(values)} onSubmit={(values, { setSubmitting }) => { sendEmail(values) setSubmitting(false) }} > {({ submitForm, isSubmitting }) => (
{isSubmitting && }
)}
setShowToast(false)} > setShowToast(false)} severity='success' sx={{ width: '100%' }} > Вы успешно зарегистрировались на мероприятие! ) } export default SignUpForm