diff --git a/src/Layout/ModalWithForm.tsx b/src/Layout/ModalWithForm.tsx new file mode 100644 index 0000000..f7d5490 --- /dev/null +++ b/src/Layout/ModalWithForm.tsx @@ -0,0 +1,275 @@ +import { api } from '../api'; +import { phoneCodes } from '../consts/phoneCodes'; +import { ClassNameWrapper } from '../hocs/ClassNameWrapper'; +import { useModalStore } from '@/stores/useModalStore'; +import { PhoneCode } from '@/types/PhoneCode'; +import { Button } from '@/ui/Button'; +import { FormEvent, useEffect, useRef, useState } from 'react'; +import ReactInputMask from 'react-input-mask'; +import { ArrowRightIcon } from '../icons/ArrowRightIcon'; +import { ChevronDownIcon } from '../icons/ChevronDownIcon'; +import { ChevronUpIcon } from '../icons/ChevronUpIcon'; +import { CloseIcon } from '../icons/CloseIcon'; +import { LoaderIcon } from '../icons/LoaderIcon'; +import { MailIcon } from '../icons/MailIcon'; + +export function ModalWithForm() { + const { setModal } = useModalStore(); + const [name, setName] = useState(''); + const [phoneCode, setPhoneCode] = useState('+7'); + const [phone, setPhone] = useState(''); + const [email, setEmail] = useState(''); + const [description, setDescription] = useState(''); + const [isLoading, setIsLoading] = useState(false); + const [isSend, setIsSend] = useState(false); + + const textAreaRef = useRef(null); + + useEffect(() => { + if (textAreaRef.current) { + textAreaRef.current.style.height = 'auto'; + textAreaRef.current.style.height = + textAreaRef.current.scrollHeight + 'px'; + } + }, [textAreaRef, description]); + + function handleSubmit(e: FormEvent) { + e.preventDefault(); + + sendMail(); + } + + async function sendMail() { + setIsLoading(true); + + try { + await api + .post('mail', { + json: { + fullname: name, + phone: phoneCode + phone, + email, + request: description, + }, + }) + .json(); + + setIsSend(true); + setIsLoading(false); + } catch (error) { + setIsLoading(false); + if (error instanceof Error) { + alert(error.message); + } + } + } + + useEffect(() => { + const listener = (e: KeyboardEvent) => { + if (e.key === 'Escape') { + setModal(false, 'form'); + } + }; + document.addEventListener('keydown', listener); + return () => document.removeEventListener('keydown', listener); + }, [setModal]); + + return ( +
+ {!isSend ? ( +
+
+

Оставьте заявку

+ +
+
+
+
+ +
+ + setName(e.target.value)} + placeholder="Ваше имя" + className="bg-transparent border-b border-[#3D425C] focus:border-white py-4 rounded-none outline-none transition-all w-full placeholder:h4 placeholder:font-medium placeholder:select-none" + /> +
+ +
+ +
+ +
+ setPhone(e.target.value)} + className="bg-transparent rounded-none outline-none transition-all w-full placeholder:h4 placeholder:font-medium placeholder:select-none peer" + /> +
+
+
+ +
+ + setEmail(e.target.value)} + placeholder="Ваш email" + className="bg-transparent border-b border-[#3D425C] focus:border-white py-4 rounded-none outline-none transition-all w-full placeholder:h4 placeholder:font-medium placeholder:select-none" + /> +
+ +
+ +