From f2821db65a362ce27aa75e6709110cdb073c1625 Mon Sep 17 00:00:00 2001
From: Gubar Nikita <dacentspartanec@gmail.com>
Date: Thu, 16 May 2024 05:31:48 +0300
Subject: [PATCH] add functional AutstaffingForm and buttonInputFile

---
 src/assets/icons/fileUploadIcon.svg |   3 +
 src/pages/Stack/Stack.jsx           | 104 ++++++++++++++++++++++------
 src/pages/Stack/stack.scss          |  49 ++++++++-----
 3 files changed, 118 insertions(+), 38 deletions(-)
 create mode 100644 src/assets/icons/fileUploadIcon.svg

diff --git a/src/assets/icons/fileUploadIcon.svg b/src/assets/icons/fileUploadIcon.svg
new file mode 100644
index 00000000..ff4b6f26
--- /dev/null
+++ b/src/assets/icons/fileUploadIcon.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="18" viewBox="0 0 13 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.50725 2.47136C2.50436 1.78015 2.76006 1.22498 3.27434 0.805861C3.70794 0.452635 4.20801 0.305158 4.75235 0.362311C5.83886 0.476243 6.65076 1.4055 6.60054 2.47136H6.7046C7.80231 2.47136 8.90008 2.47098 9.99792 2.47024C10.0851 2.46785 10.1718 2.48416 10.2526 2.51815C10.3335 2.55213 10.4067 2.60306 10.4676 2.66774C11.2505 3.47051 12.0342 4.27235 12.8186 5.07324C12.9431 5.20066 13.0007 5.35188 13.0007 5.53421C12.9994 9.26847 12.999 13.0027 12.9996 16.737C12.9996 17.1067 12.7648 17.3499 12.4044 17.3499C9.70343 17.3499 7.00246 17.3499 4.30142 17.3499C3.06532 17.3499 1.82916 17.3499 0.592938 17.3499C0.302611 17.3499 0.0834664 17.1839 0.0187889 16.9094C0.000722533 16.8344 0.000722533 16.7548 0.000722533 16.6774C0.000240763 13.0275 0 9.3776 0 5.72778C0 4.86055 0.00042168 3.99332 0.00126478 3.12609C-0.000977745 3.03599 0.00980072 2.94604 0.033242 2.85925C0.105507 2.62446 0.317787 2.47286 0.563851 2.4723C1.16835 2.47099 1.77285 2.4723 2.37753 2.4723L2.50725 2.47136ZM9.71265 3.63542H3.66476V4.23805C3.66476 5.40485 3.6644 6.57166 3.66367 7.73846C3.66367 7.9071 3.69384 8.06601 3.78183 8.2103C3.97008 8.51892 4.34514 8.68832 4.70484 8.62573C5.10356 8.5564 5.46164 8.2384 5.45134 7.71822C5.44339 7.31908 5.44899 6.91957 5.44971 6.52025C5.44971 6.12411 5.44249 5.72759 5.4573 5.33202C5.46995 4.99472 5.79659 4.74512 6.1169 4.80584C6.42006 4.86337 6.60469 5.0991 6.60469 5.43827C6.60596 6.212 6.61192 6.9859 6.60054 7.75925C6.59819 7.9771 6.56526 8.19343 6.5028 8.40143C6.23181 9.27653 5.40798 9.86137 4.51442 9.83251C3.87794 9.8119 3.34986 9.5548 2.94373 9.04548C2.64582 8.67071 2.50815 8.23615 2.50905 7.74951C2.51194 6.41756 2.51014 5.08542 2.51014 3.75328V3.63391H1.12264V16.1889H11.8784V5.85764H10.1172C9.83423 5.85764 9.71337 5.73134 9.71337 5.43546C9.71337 4.87067 9.71337 4.30601 9.71337 3.74147L9.71265 3.63542ZM3.67433 2.4648H5.45206C5.46146 1.85598 4.96138 1.50912 4.46329 1.5526C3.98959 1.59382 3.61327 2.02688 3.67433 2.4648Z" fill="#607536"/>
+</svg>
diff --git a/src/pages/Stack/Stack.jsx b/src/pages/Stack/Stack.jsx
index 926159f3..6d20f6b0 100644
--- a/src/pages/Stack/Stack.jsx
+++ b/src/pages/Stack/Stack.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import SVG from "react-inlinesvg";
 
 import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
@@ -6,6 +6,7 @@ import { Footer } from "@components/Common/Footer/Footer";
 
 import arrowReviewsLeft from "assets/icons/arrows/arrowReviewsLeft.png";
 import arrowReviewsRight from "assets/icons/arrows/arrowReviewsRight.png";
+import fileUploadIcon from "assets/icons/fileUploadIcon.svg";
 import Ellipse from "assets/images/EllipseIntro.svg";
 import backgroundOpp from "assets/images/backgroundOpportunity.png";
 import cat from "assets/images/cat.png";
@@ -103,8 +104,14 @@ export const Stack = () => {
   const [error, setError] = useState({
     name: false,
     companyName: false,
-    email: false,
-    phoneNumber: false,
+    email: {
+      state: false,
+      text: ""
+    },
+    phoneNumber: {
+      state: false,
+      text: ""
+    },
     requestDescription: false,
     agreement: false
   });
@@ -119,6 +126,24 @@ export const Stack = () => {
     agreement: false
   });
 
+  // Создаем ссылку на скрытый элемент input для файла
+  const hiddenFileInput = useRef(null);
+
+  // Программно нажимаем на скрытый элемент input для файла
+  // когда компонент Button будет нажат
+  const handleClick = () => {
+    hiddenFileInput.current.click();
+  };
+
+  // Вызываем функцию для обработки выбранного пользователем файла
+  const handleChangeFile = (event) => {
+    const fileUploaded = event.target.files[0];
+    setFormData((prevState) => ({
+      ...prevState,
+      file: fileUploaded
+    }));
+  };
+
   const handleChange = (e) => {
     const { name, value, type, checked } = e.target;
     setFormData((prevState) => ({
@@ -130,17 +155,41 @@ export const Stack = () => {
   const handleSubmit = (e) => {
     e.preventDefault();
 
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    const phoneRegex = /^\+?\d+$/;
+
     const newError = {
       name: !formData.name.trim(),
       companyName: !formData.companyName.trim(),
-      email: !formData.email.trim(),
-      phoneNumber: !formData.phoneNumber.trim(),
+      email: {
+        state: !formData.email.trim() || !emailRegex.test(formData.email),
+        text: !formData.email.trim()
+          ? "поле обязательно для заполнения"
+          : !emailRegex.test(formData.email)
+          ? "e-mail не соответствует формату"
+          : ""
+      },
+      phoneNumber: {
+        state:
+          !formData.phoneNumber.trim() ||
+          !phoneRegex.test(formData.phoneNumber),
+        text: !formData.phoneNumber.trim()
+          ? "поле обязательно для заполнения"
+          : !phoneRegex.test(formData.phoneNumber)
+          ? "введите корректный номер телефона"
+          : ""
+      },
       requestDescription: !formData.requestDescription.trim(),
       agreement: !formData.agreement
     };
 
     setError(newError);
-    const isValid = !Object.values(newError).some((err) => err);
+    const isValid = Object.values(newError).every((err) => {
+      if (typeof err === "object") {
+        return !err.state;
+      }
+      return !err;
+    });
     if (isValid) {
       // Данные формы валидны, можно отправлять форму
       console.log("Форма отправлена", formData);
@@ -155,7 +204,7 @@ export const Stack = () => {
       });
     } else {
       // Данные формы невалидны, показываем ошибки
-      console.log("Форма содержит ошибки");
+      console.log("Форма содержит ошибки", newError);
     }
   };
 
@@ -431,6 +480,7 @@ export const Stack = () => {
                 <div className="form-info">
                   <div>
                     <input
+                      className={error.name ? "input-error" : ""}
                       type="text"
                       name="name"
                       value={formData.name}
@@ -439,12 +489,13 @@ export const Stack = () => {
                     />
                     {error.name && (
                       <span className="error">
-                        Поле обязательно для заполнения
+                        поле обязательно для заполнения
                       </span>
                     )}
                   </div>
                   <div>
                     <input
+                      className={error.companyName ? "input-error" : ""}
                       type="text"
                       name="companyName"
                       value={formData.companyName}
@@ -453,41 +504,40 @@ export const Stack = () => {
                     />
                     {error.companyName && (
                       <span className="error">
-                        Поле обязательно для заполнения
+                        поле обязательно для заполнения
                       </span>
                     )}
                   </div>
                   <div>
                     <input
-                      type="email"
+                      className={error.email.state ? "input-error" : ""}
+                      type="text"
                       name="email"
                       value={formData.email}
                       onChange={handleChange}
                       placeholder="e-mail"
                     />
-                    {error.email && (
-                      <span className="error">
-                        Поле обязательно для заполнения
-                      </span>
+                    {error.email.state && (
+                      <span className="error">{error.email.text}</span>
                     )}
                   </div>
                   <div>
                     <input
+                      className={error.phoneNumber.state ? "input-error" : ""}
                       type="tel"
                       name="phoneNumber"
                       value={formData.phoneNumber}
                       onChange={handleChange}
                       placeholder="+7"
                     />
-                    {error.phoneNumber && (
-                      <span className="error">
-                        Поле обязательно для заполнения
-                      </span>
+                    {error.phoneNumber.state && (
+                      <span className="error">{error.phoneNumber.text}</span>
                     )}
                   </div>
                 </div>
                 <div className="form-description">
                   <textarea
+                    className={error.requestDescription ? "input-error" : ""}
                     name="requestDescription"
                     value={formData.requestDescription}
                     onChange={handleChange}
@@ -495,13 +545,23 @@ export const Stack = () => {
                   />
                   {error.requestDescription && (
                     <span className="error">
-                      Поле обязательно для заполнения
+                      поле обязательно для заполнения
                     </span>
                   )}
                 </div>
 
                 <div className="form-file">
-                  <input type="file" name="file" onChange={handleChange} />
+                  <div className="button-upload" onClick={handleClick}>
+                    <img src={fileUploadIcon} alt="" />
+                    <span>прикрепить файл</span>
+                  </div>
+                  <input
+                    type="file"
+                    name="file"
+                    onChange={handleChangeFile}
+                    ref={hiddenFileInput}
+                    style={{ display: "none" }}
+                  />
                   <p>
                     .eps, .ai, .psd, .jpg, .png, .pdf, .doc, .docx, .xlsx, .xls,
                     .ppt, .jpeg <br />
@@ -524,7 +584,9 @@ export const Stack = () => {
                     </p>
                   </div>
 
-                  <button type="submit">оставить заявку</button>
+                  <button className="form-submit__button" type="submit">
+                    оставить заявку
+                  </button>
                 </div>
               </div>
             </form>
diff --git a/src/pages/Stack/stack.scss b/src/pages/Stack/stack.scss
index f0506fd4..7ad54be1 100644
--- a/src/pages/Stack/stack.scss
+++ b/src/pages/Stack/stack.scss
@@ -909,9 +909,10 @@
 
             h4 {
               color: #a7ca60;
-              font-weight: 900;
               font-size: 66px;
+              font-weight: 900;
               line-height: 64.94px;
+              letter-spacing: 0.03em;
               text-transform: uppercase;
               margin: 20px 0 30px 0;
             }
@@ -970,6 +971,10 @@
             font-weight: 700;
             color: #607536;
 
+            .input-error {
+              border: 1px solid red;
+            }
+
             .error {
               color: red;
               font-size: 11px;
@@ -1030,27 +1035,31 @@
 
           &-file {
             display: flex;
-            margin-top: 17px;
-            input {
-              width: 40%;
-            }
-            input::-webkit-file-upload-button {
-              visibility: hidden;
-              display: none;
-            }
-            input::before {
+            margin: 17px 0 17px 0;
+            justify-content: space-between;
+            align-items: center;
+
+            .button-upload {
               cursor: pointer;
-              content: "прикрепите файл";
               width: 160px;
               height: 45px;
-              color: #435225;
-              font-size: 13px;
-              font-weight: 400;
+              border-radius: 8px;
+              border: 0.2px solid #89a64f;
               display: flex;
               justify-content: center;
               align-items: center;
-              border: 0.2px solid #89a64f;
-              border-radius: 8px;
+              column-gap: 7px;
+
+              img {
+                width: 15px;
+              }
+
+              span {
+                font-size: 13px;
+                font-weight: 400;
+                line-height: 15.08px;
+                color: #435225;
+              }
             }
 
             p {
@@ -1091,7 +1100,7 @@
               }
             }
 
-            button {
+            &__button {
               width: 177px;
               height: 44px;
               background-color: #ffffff;
@@ -1100,6 +1109,12 @@
               color: #4a4a4a;
               border-radius: 44px;
               border: none;
+              outline: none;
+
+              &:hover {
+                color: #000000;
+                font-weight: 500;
+              }
             }
           }
         }