upd

src/components/DiscussSection.tsx

@@ -1,8 +1,41 @@
 import CheckLabel from './CheckLabel'
 import Braces from './Braces'
 import Thesis from './Thesis'
+import { useState } from 'react'
+import axios from 'axios'
 
 const DiscussSection = () => {
+    const [consult, setConsult] = useState({
+        fio: '',
+        phone: '',
+        email: '',
+        desc: '',
+        conf: false
+    })
+
+    const mail = () => {
+        axios.create({
+            headers: {
+                'Access-Control-Allow-Headers': 'Content-Type',
+                'Access-Control-Allow-Origin': 'http://localhost:5173',
+                'Content-Type': 'application/json'
+            }
+        })
+        if (consult.conf) {
+            axios.post('http://localhost:3000/send_mail', consult).then(res => {
+                if (res.data == 'OK') {
+                    setConsult({
+                        fio: '',
+                        phone: '',
+                        email: '',
+                        desc: '',
+                        conf: false
+                    })
+                }
+            })
+        }
+    }
+
     return (
         <section id='discuss' className='max-w-7xl w-full h-auto flex flex-col sm:grid sm:grid-cols-5 gap-4'>
             <div className='flex flex-col col-span-3 gap-4 p-8'>
@@ -18,25 +51,25 @@ const DiscussSection = () => {
                 <CheckLabel text='Оценка стоимости и сроков' />
                 <CheckLabel text='Обсудим формат сотрудничества' />
 
-                <form className='flex flex-col gap-4'>
-                    <input type="name" placeholder="Введите ваше имя *" required className="input rounded-full w-full" />
-                    <input type="tel" placeholder="+7(000)000-00-00 *" required className="input rounded-full w-full" />
-                    <input type="email" placeholder="mail@company.ru *" required className="input validator rounded-full w-full" />
-                    <textarea className="textarea rounded-2xl w-full" placeholder="Опишите вашу ситуацию (необязательно)"></textarea>
+                <div id='form' className='flex flex-col gap-4'>
+                    <input type="name" onChange={(e) => { setConsult({ ...consult, fio: e.target.value }) }} value={consult.fio} placeholder="Введите ваше имя *" required className="input rounded-full w-full" />
+                    <input type="number" onChange={(e) => { setConsult({ ...consult, phone: e.target.value }) }} value={consult.phone} placeholder="+7(000)000-00-00 *" required className="input rounded-full w-full" />
+                    <input onChange={(e) => { setConsult({ ...consult, email: e.target.value }) }} value={consult.email} type="email" placeholder="mail@company.ru *" required className="input validator rounded-full w-full" />
+                    <textarea onChange={(e) => { setConsult({ ...consult, desc: e.target.value }) }} value={consult.desc} rows={5} cols={30} className="textarea rounded-2xl w-full" placeholder="Опишите вашу ситуацию (необязательно)"></textarea>
 
                     <label className="label flex flex-row items-start">
-                        <input type="checkbox" defaultChecked className="mt-1 checkbox checkbox-xs checked:border-blue-500 checked:bg-blue-400 checked:text-white rounded-sm" />
+                        <input type="checkbox" onChange={(e) => { setConsult({ ...consult, conf: e.target.checked }) }} checked={consult.conf} className="mt-1 checkbox checkbox-xs checked:border-blue-500 checked:bg-blue-400 checked:text-white rounded-sm" />
                         <span className='text-wrap'>
                             Я согласен(-на) с условиями <a className='text-blue-500'>Политики конфиденциальности</a> и разрешаю обработку моих персональных данных согласно <a className='text-blue-500'>Политики обработки персональных данных</a>
                         </span>
                     </label>
 
-                    <button className='btn btn-lg bg-blue-500 text-white rounded-full'>
+                    <button disabled={(consult.phone == '') || (consult.email == '') || (consult.desc == '') || (consult.fio == '') || (!consult.conf)} onClick={() => mail()} className='btn btn-lg not-disabled:bg-blue-500 text-white rounded-full'>
                         Оставить заявку
                     </button>
 
                     <span className='text-base-content/70'>Отправляя форму, вы даёте согласие на обработку ваших персональных данных (ФИО, номер телефона, электронную почту и комментарий) для связи c вами и обработки вашей заявки. Данные будут храниться в течение <span className='underline text-blue-500'>12 месяцев</span>. Вы можете отозвать своё согласие в любой момент</span>
-                </form>
+                </div>
             </div>
 
             <div className='flex flex-col col-span-2 bg-base-200 rounded-2xl gap-8'>