diff --git a/src/components/CardStages/CardStage3.js b/src/components/CardStages/CardStage3.js index b988ca3..5fa0801 100644 --- a/src/components/CardStages/CardStage3.js +++ b/src/components/CardStages/CardStage3.js @@ -2,8 +2,6 @@ import React, { useState, useEffect } from "react"; // IMPORT VALIDATORS -import { ValidateEmail } from "../../validators/ValidateEmail"; -import { ValidatePhoneNumber } from "../../validators/ValidatePhoneNumber"; import { getDate } from "../../helpers/Date"; // IMPORT IMAGES diff --git a/src/components/CardStages/CardStage4.js b/src/components/CardStages/CardStage4.js new file mode 100644 index 0000000..bc931da --- /dev/null +++ b/src/components/CardStages/CardStage4.js @@ -0,0 +1,79 @@ +// IMPORT MODULES +import React, { useState } from "react"; + +// IMPORT COMPONENTS +import CustomSelect from "../global/CustomSelect"; + +// IMPORT IMAGES +import remove from "../../icons/remove.svg"; + +const CardStage4 = ({ setStage }) => { + const [files, setFiles] = useState([]); + const [inputNumber, setInputNumber] = useState([""]); + return ( + + + + + Для оформления заявки на получения кредита загрузите требуемые + документы. + + null} + customId={"doc-type"} + blockName={"cd-4-custom"} + elName={"cd-4-custom-el"} + /> + + + Загрузить файл + {inputNumber.map((el, i) => { + return ( + { + setInputNumber([...inputNumber, ""]); + if (!files.includes(e.target.value)) { + setFiles([...files, e.target.files]); + } + console.log(files); + }} + /> + ); + })} + + + {files.map((el, i) => { + return ( + + {el[0].name} + { + setFiles( + files.filter((item) => { + return item !== el; + }) + ); + }} + > + + + + ); + })} + + + + ); +}; + +export default CardStage4; diff --git a/src/components/cards/ModalForm.js b/src/components/cards/ModalForm.js index a3130c8..61347b0 100644 --- a/src/components/cards/ModalForm.js +++ b/src/components/cards/ModalForm.js @@ -15,6 +15,7 @@ import { ReactComponent as Lines } from "../../icons/lines.svg"; import CardStage1 from "../CardStages/CardStage1"; import CardStage2 from "../CardStages/CardStage2"; import CardStage3 from "../CardStages/CardStage3"; +import CardStage4 from "../CardStages/CardStage4"; const ModalForm = ({ modalOpen, setModalOpen, stage, setStage }) => { return ( @@ -89,6 +90,8 @@ const ModalForm = ({ modalOpen, setModalOpen, stage, setStage }) => { ) : stage === 3 ? ( + ) : stage === 4 ? ( + ) : ( "" )} diff --git a/src/icons/remove.svg b/src/icons/remove.svg new file mode 100644 index 0000000..f90e791 --- /dev/null +++ b/src/icons/remove.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/styles/_modal-form.scss b/src/styles/_modal-form.scss index b8d2c98..0328b1c 100644 --- a/src/styles/_modal-form.scss +++ b/src/styles/_modal-form.scss @@ -301,3 +301,77 @@ } } } + +.card-stage-4 { + form { + display: flex; + flex-direction: column; + gap: 3rem; + } +} + +.cd-top-4 { + display: flex; + flex-direction: column; + gap: 3rem; + + h2 { + font-size: 1.2rem; + font-weight: normal; + } +} + +.cd-middle-4 { + position: relative; + input { + opacity: 0; + height: 5rem; + cursor: pointer; + width: 16.2rem; + position: absolute; + left: 0; + } + + button { + border-radius: 0.5rem; + border: 0.1rem solid $base-green; + background: transparent; + color: $base-green; + padding: 1.4rem 2rem; + height: 5rem; + width: 16.2rem; + font-size: 1.6rem; + } +} + +.cd-bottom-4 { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.file { + display: flex; + padding: 1.4rem 1.6rem 1.4rem 3rem; + justify-content: space-between; + align-items: center; + border: 0.1rem solid #e5e5e5; + border-radius: 0.5rem; + + p { + font-size: 1.6rem; + } +} + +.remove { + width: 1.8rem; + height: 1.8rem; + margin: 1rem; + cursor: pointer; + + img { + width: 100%; + height: 100%; + object-fit: contain; + } +}
{el[0].name}