CardsStage 2 added

src/components/CardStages/CardStage2.js

@@ -0,0 +1,232 @@
+// IMPORT MODULES
+import React, { useState, useEffect } from "react";
+
+// IMPORT VALIDATORS
+import { ValidateEmail } from "../../validators/ValidateEmail";
+import { ValidatePhoneNumber } from "../../validators/ValidatePhoneNumber";
+
+// IMPORT IMAGES
+import next from "../../icons/next.svg";
+
+const CardStage2 = ({ setStage }) => {
+  const [inputValid, setInputValid] = useState({
+    surname: true,
+    name: true,
+    fathers: true,
+    date: true,
+    passport: true,
+    p_address: true,
+    address: true,
+    mail: true,
+    mobile: true,
+    home: true,
+  });
+  const [btnEnabled, setBtnEnabled] = useState(false);
+
+  useEffect(() => {
+    if (
+      inputValid.surname &&
+      inputValid.name &&
+      inputValid.fathers &&
+      inputValid.date &&
+      inputValid.passport &&
+      inputValid.p_address &&
+      inputValid.address &&
+      inputValid.mail &&
+      inputValid.mobile
+    ) {
+      setBtnEnabled(true);
+    } else {
+      setBtnEnabled(false);
+    }
+  }, [inputValid]);
+  return (
+    <section className="card-stage-2">
+      <form>
+        <div className="form-top">
+          <div className="input-block">
+            <label htmlFor="surname">
+              Фамилия<span>*</span>
+            </label>
+            <input
+              type="text"
+              id="surname"
+              defaultValue={"Amanow"}
+              onChange={(e) => {
+                if (e.target.value !== "") {
+                  setInputValid({ ...inputValid, surname: true });
+                } else {
+                  setInputValid({ ...inputValid, surname: false });
+                }
+              }}
+            />
+          </div>
+          <div className="input-block">
+            <label htmlFor="name">
+              Имя<span>*</span>
+            </label>
+            <input
+              type="text"
+              id="name"
+              defaultValue={"Aman"}
+              onChange={(e) => {
+                if (e.target.value !== "") {
+                  setInputValid({ ...inputValid, name: true });
+                } else {
+                  setInputValid({ ...inputValid, name: false });
+                }
+              }}
+            />
+          </div>
+          <div className="input-block">
+            <label htmlFor="fathers">
+              Отчество<span>*</span>
+            </label>
+            <input
+              type="text"
+              id="fathers"
+              defaultValue={"Amanowic"}
+              onChange={(e) => {
+                if (e.target.value !== "") {
+                  setInputValid({ ...inputValid, fathers: true });
+                } else {
+                  setInputValid({ ...inputValid, fathers: false });
+                }
+              }}
+            />
+          </div>
+          <div className="input-block">
+            <label htmlFor="date">
+              Дата рождения<span>*</span>
+            </label>
+            <input
+              type="date"
+              id="date"
+              defaultValue={"1990-02-20"}
+              onChange={(e) => {
+                if (e.target.value !== "") {
+                  setInputValid({ ...inputValid, date: true });
+                } else {
+                  setInputValid({ ...inputValid, date: false });
+                }
+              }}
+            />
+          </div>
+          <div className="input-block">
+            <label htmlFor="passport">
+              Паспортные данные<span>*</span>
+            </label>
+            <input
+              type="text"
+              id="passport"
+              defaultValue={"I-AŞ 212121"}
+              onChange={(e) => {
+                if (e.target.value !== "") {
+                  setInputValid({ ...inputValid, passport: true });
+                } else {
+                  setInputValid({ ...inputValid, passport: false });
+                }
+              }}
+            />
+          </div>
+          <div className="input-block">
+            <label htmlFor="p-address">
+              Место выдачи паспорта<span>*</span>
+            </label>
+            <input
+              type="text"
+              id="p-address"
+              defaultValue={"Kopetdag etrapyň häkimliki"}
+              onChange={(e) => {
+                if (e.target.value !== "") {
+                  setInputValid({ ...inputValid, p_address: true });
+                } else {
+                  setInputValid({ ...inputValid, p_address: false });
+                }
+              }}
+            />
+          </div>
+          <div className="input-block">
+            <label htmlFor="address">
+              Адрес проживания<span>*</span>
+            </label>
+            <input
+              type="text"
+              id="address"
+              defaultValue={"Parahat 3/1, j.16, k.5"}
+              onChange={(e) => {
+                if (e.target.value !== "") {
+                  setInputValid({ ...inputValid, address: true });
+                } else {
+                  setInputValid({ ...inputValid, address: false });
+                }
+              }}
+            />
+          </div>
+          <div className="input-block">
+            <label htmlFor="mail">
+              Электронная почта<span>*</span>
+            </label>
+            <input
+              type="email"
+              id="mail"
+              defaultValue={"amanamanow@gmail.com"}
+              onChange={(e) => {
+                if (ValidateEmail(e.target.value)) {
+                  setInputValid({ ...inputValid, mail: true });
+                } else {
+                  setInputValid({ ...inputValid, mail: false });
+                }
+              }}
+            />
+          </div>
+          <div className="input-block">
+            <label htmlFor="mobile">
+              Мобильный телефон<span>*</span>
+            </label>
+            <input
+              type="text"
+              id="mobile"
+              defaultValue={"+99365656565"}
+              onChange={(e) => {
+                if (ValidatePhoneNumber(e.target.value)) {
+                  setInputValid({ ...inputValid, mobile: true });
+                } else {
+                  setInputValid({ ...inputValid, mobile: false });
+                }
+              }}
+            />
+          </div>
+          <div className="input-block">
+            <label htmlFor="homeTel">Домашний телефон</label>
+            <input type="text" id="homeTel" defaultValue={"+99312121212"} />
+          </div>
+        </div>
+        <div className="form-bottom">
+          <div className="cu-bottom cd-2-title">
+            <h4>
+              Все поля с символом ( <span>*</span> ) обязательны для заполнения
+            </h4>
+            <button
+              type="button"
+              disabled={!btnEnabled}
+              className="sign-btn cu-btn"
+              onClick={() => {
+                setStage(3);
+              }}
+            >
+              <div>
+                <h3>Продолжить</h3>
+                <div className="btn-img">
+                  <img src={next} alt="logout" />
+                </div>
+              </div>
+            </button>
+          </div>
+        </div>
+      </form>
+    </section>
+  );
+};
+
+export default CardStage2;

src/components/cards/ModalForm.js

@@ -13,6 +13,7 @@ import { ReactComponent as Lines } from "../../icons/lines.svg";
 
 // IMPORT COMPONENTS
 import CardStage1 from "../CardStages/CardStage1";
+import CardStage2 from "../CardStages/CardStage2";
 
 const ModalForm = ({ modalOpen, setModalOpen, stage, setStage }) => {
   return (
@@ -81,7 +82,13 @@ const ModalForm = ({ modalOpen, setModalOpen, stage, setStage }) => {
               </div>
             </div>
             <div className="modal-bottom">
-              {stage === 1 ? <CardStage1 setStage={setStage} /> : ""}
+              {stage === 1 ? (
+                <CardStage1 setStage={setStage} />
+              ) : stage === 2 ? (
+                <CardStage2 setStage={setStage} />
+              ) : (
+                ""
+              )}
             </div>
           </div>
         </div>

src/components/global/CustomSelect.js

@@ -18,18 +18,26 @@ const CustomSelect = ({
   const inner1 = useRef();
   const inner2 = useRef();
 
+  const handleOpen = (e) => {
+    if (e.target !== inner1.current && e.target !== inner2.current) {
+      setIsOpen(false);
+    }
+  };
+
   useEffect(() => {
-    window.addEventListener("click", (e) => {
-      if (e.target !== inner1.current && e.target !== inner2.current) {
-        setIsOpen(false);
-      }
-    });
+    window.addEventListener("click", handleOpen);
+
+    return () => {
+      window.removeEventListener("click", handleOpen);
+    };
   }, []);
 
   useEffect(() => {
     if (input !== "") {
       stateSetter(true);
     }
+
+    return () => null;
   }, [input]);
   return (
     <div className="custom-select">

src/styles/_modal-form.scss

@@ -216,3 +216,35 @@
 .cd-btn {
   max-width: 20rem;
 }
+
+.card-stage-2 {
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+  }
+}
+
+.card-stage-2 {
+  .form-top {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 2rem;
+  }
+}
+
+.cd-2-title {
+  h4 {
+    font-size: 1.2rem;
+    font-weight: normal;
+  }
+  span {
+    color: red;
+  }
+}
+
+.input-block {
+  span {
+    color: red;
+  }
+}