|
|
import React, { useState } from "react";
|
|
|
import { useForm } from "react-hook-form"
|
|
|
import InputMask from 'react-input-mask';
|
|
|
|
|
|
import { EmailValidation } from "../../Utils/ValidationRules";
|
|
|
import submitForm from "../../Services/submitForm";
|
|
|
|
|
|
import Modal from '../UI/Modal';
|
|
|
import Button from "../UI/Button";
|
|
|
import Input from "../UI/Input";
|
|
|
import Textarea from "../UI/Textarea";
|
|
|
import SubmitFormModal from "../Modals/SubmitFormModal";
|
|
|
|
|
|
|
|
|
const ContactFormModal = ({ modal, setModal }) => {
|
|
|
const [modal2, setModal2] = useState(false);
|
|
|
const [error, setError] = useState(false);
|
|
|
const { register, handleSubmit, setValue, watch, formState: { isSubmitting, errors } } = useForm()
|
|
|
const onSubmit = async (data) => {
|
|
|
const status = await submitForm(data);
|
|
|
status === 200 ? setError(false) : setError(true);
|
|
|
setModal(false);
|
|
|
setModal2(true);
|
|
|
}
|
|
|
return (
|
|
|
<>
|
|
|
<Modal active={modal} setActive={setModal} className='items-center max-w-[1000px]'>
|
|
|
<form onSubmit={handleSubmit(onSubmit)} className="container mx-auto px-24 max-md:px-3">
|
|
|
<h2 className='text-3xl max-md:text-2xl mb-16 max-md:mb-8 font-semibold text-slate-800 text-center uppercase'>Связаться с нами</h2>
|
|
|
<div className="flex max-md:flex-col mb-10 max-md:mb-8">
|
|
|
<div className="flex flex-col basis-[40%] mr-6 max-md:mr-0">
|
|
|
<Input type="text" register={register} errors={errors} validation={{required: "Поле должно быть заполнено"}} name="fio" labelClasses='!text-black' wrapperClasses='mb-5' className='border-2 !border-slate-700' label='Ваше ФИО:' placeholder='Иванов Иван Иванович'></Input>
|
|
|
<Input type="text" register={register} errors={errors} validation={EmailValidation} name="email" labelClasses='!text-black' wrapperClasses='mb-5' className='border-2 !border-slate-700' label='Ваш Email:' placeholder='exampel@yandex.ru'></Input>
|
|
|
|
|
|
<InputMask mask="+7 (999) 999 99 99" value={watch("phone", false)} onChange={e=> setValue("phone", e.target.value)}>
|
|
|
{() => <Input type="phone" register={register} errors={errors} validation={{required: "Поле должно быть заполнено"}} name="phone" labelClasses='!text-black' wrapperClasses='max-md:mb-5' className='border-2 !border-slate-700' label='Ваш телефон:' placeholder='+7 (999) 999 99-99'></Input>}
|
|
|
</InputMask>
|
|
|
|
|
|
</div>
|
|
|
<div className="flex basis-[60%]">
|
|
|
<Textarea register={register} errors={errors} name="message" labelClasses='!text-black' className='h-full resize-none border-2 !border-slate-700' label='Ваше обращение:' placeholder='Обращение...'></Textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className="flex justify-center">
|
|
|
<Button disabled={isSubmitting}>Отправить форму</Button>
|
|
|
</div>
|
|
|
</form>
|
|
|
</Modal>
|
|
|
<SubmitFormModal modal={modal2} setModal={setModal2} error={error}/>
|
|
|
</>
|
|
|
|
|
|
)
|
|
|
}
|
|
|
|
|
|
export default ContactFormModal; |