add functional AutstaffingForm and buttonInputFile

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>

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>

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;
+              }
             }
           }
         }