2023-08-15 11:02:01 +03:00
|
|
|
|
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
|
2023-08-15 17:25:16 +03:00
|
|
|
|
multiline
|
|
|
|
|
rows={3}
|
2023-08-15 11:02:01 +03:00
|
|
|
|
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
|