immediateCreditModal component
This commit is contained in:
Kakabay
parent
2ab672afae
commit
6efcb64953
|
|
@ -1,19 +1,21 @@
|
|||
// IMPORT MODULES
|
||||
import React, { useRef, useState, useContext } from 'react';
|
||||
import { LanguageContext } from '../../backend/LanguageContext';
|
||||
import React, { useRef, useState, useContext } from "react";
|
||||
import { LanguageContext } from "../../backend/LanguageContext";
|
||||
|
||||
// IMPORT IMAGES
|
||||
import exit from '../../icons/exit.svg';
|
||||
import { ReactComponent as Lines } from '../../icons/lines.svg';
|
||||
import { ReactComponent as Img1 } from '../../icons/credit1.svg';
|
||||
import { ReactComponent as Img2 } from '../../icons/credit2.svg';
|
||||
import { ReactComponent as Img3 } from '../../icons/credit3.svg';
|
||||
import { ReactComponent as Img4 } from '../../icons/credit4.svg';
|
||||
import { ReactComponent as Img5 } from '../../icons/credit5.svg';
|
||||
import { ReactComponent as Img6 } from '../../icons/credit6.svg';
|
||||
import exit from "../../icons/exit.svg";
|
||||
import { ReactComponent as Lines } from "../../icons/lines.svg";
|
||||
import { ReactComponent as Img1 } from "../../icons/credit1.svg";
|
||||
import { ReactComponent as Img2 } from "../../icons/credit2.svg";
|
||||
import { ReactComponent as Img3 } from "../../icons/credit3.svg";
|
||||
import { ReactComponent as Img4 } from "../../icons/credit4.svg";
|
||||
import { ReactComponent as Img5 } from "../../icons/credit5.svg";
|
||||
import { ReactComponent as Img6 } from "../../icons/credit6.svg";
|
||||
|
||||
// IMPORT COMPONENTS
|
||||
import ImmediateCreditStage1 from '../ImmediateCreditsStages/ImmediateCreditStage1';
|
||||
import ImmediateCreditStage1 from "../ImmediateCreditsStages/ImmediateCreditStage1";
|
||||
import ImmediateCreditStage2 from "../ImmediateCreditsStages/ImmediateCreditStage2";
|
||||
import ImmediateCreditStage3 from "../ImmediateCreditsStages/ImmediateCreditStage3";
|
||||
|
||||
const ImmediateCreditModal = ({
|
||||
modalOpen,
|
||||
|
|
@ -23,30 +25,35 @@ const ImmediateCreditModal = ({
|
|||
setLoader,
|
||||
setSuccess,
|
||||
setError,
|
||||
immediatCreditData,
|
||||
// immediatCreditData,
|
||||
setProgress,
|
||||
}) => {
|
||||
const { locale } = useContext(LanguageContext);
|
||||
const window = useRef();
|
||||
const [data, setData] = useState({});
|
||||
const [id, setId] = useState(1);
|
||||
const [isGuranter, setIsGuranter] = useState(false);
|
||||
|
||||
console.log(stage);
|
||||
|
||||
return (
|
||||
<section className={modalOpen ? 'modal credit-modal active' : 'modal credit-modal'}>
|
||||
<section
|
||||
className={modalOpen ? "modal credit-modal active" : "modal credit-modal"}
|
||||
>
|
||||
<div className="modal-container">
|
||||
<div className="modal-inner" ref={window}>
|
||||
<div className="modal-window">
|
||||
<div className="modal-top">
|
||||
<h2>
|
||||
{locale === 'TKM'
|
||||
? 'Çalt karz almak üçin onlaýn-ýüzlenme'
|
||||
: 'Онлайн-заявка для получения быстрого кредита'}
|
||||
{locale === "TKM"
|
||||
? "Çalt karz almak üçin onlaýn-ýüzlenme"
|
||||
: "Онлайн-заявка для получения быстрого кредита"}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="exit-btn"
|
||||
onClick={() => {
|
||||
setModalOpen(false);
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<img src={exit} alt="exit" />
|
||||
</div>
|
||||
|
|
@ -54,238 +61,261 @@ const ImmediateCreditModal = ({
|
|||
</div>
|
||||
<div className="modal-middle">
|
||||
<div className="icon-block active">
|
||||
<Img1 className="modal-icon" />
|
||||
<h3 className="icon-title">
|
||||
{locale === 'TKM'
|
||||
? 'Karzyň görnüşini saýlaň'
|
||||
: locale === 'РУС'
|
||||
? 'Выберите вид кредита'
|
||||
: locale === 'ENG'
|
||||
? 'Choose the type of loan'
|
||||
: 'Karzyň görnüşini saýlaň'}
|
||||
</h3>
|
||||
</div>
|
||||
<div className={stage > 1 ? 'line-block active' : 'line-block'}>
|
||||
<Lines className="lines" />
|
||||
<Lines className="lines" />
|
||||
</div>
|
||||
<div className={stage > 1 ? 'icon-block active' : 'icon-block'}>
|
||||
<Img2 className="modal-icon" />
|
||||
<h3 className="icon-title">
|
||||
{locale === 'TKM'
|
||||
? 'Karzyň kalkulýatory'
|
||||
: locale === 'РУС'
|
||||
? 'Калькулятор кредита'
|
||||
: locale === 'ENG'
|
||||
? 'Loan calculator'
|
||||
: 'Karzyň kalkulýatory'}
|
||||
</h3>
|
||||
</div>
|
||||
<div className={stage > 2 ? 'line-block active' : 'line-block'}>
|
||||
<Lines className="lines" />
|
||||
<Lines className="lines" />
|
||||
</div>
|
||||
<div className={stage > 2 ? 'icon-block active' : 'icon-block'}>
|
||||
<Img3 className="modal-icon" />
|
||||
<h3 className="icon-title">
|
||||
{locale === 'TKM'
|
||||
? 'Şahsy maglumatlar'
|
||||
: locale === 'РУС'
|
||||
? 'Личные данные'
|
||||
: locale === 'ENG'
|
||||
? 'Personal data'
|
||||
: 'Şahsy maglumatlar'}
|
||||
</h3>
|
||||
</div>
|
||||
<div className={stage > 3 ? 'line-block active' : 'line-block'}>
|
||||
<Lines className="lines" />
|
||||
<Lines className="lines" />
|
||||
</div>
|
||||
<div className={stage > 3 ? 'icon-block active' : 'icon-block'}>
|
||||
<Img4 className="modal-icon" />
|
||||
<h3 className="icon-title">
|
||||
{locale === 'TKM'
|
||||
? 'Karz üçin maglumat'
|
||||
: locale === 'РУС'
|
||||
? 'Данные для кредита'
|
||||
: locale === 'ENG'
|
||||
? 'Loan details'
|
||||
: 'Karz üçin maglumat'}
|
||||
{locale === "TKM"
|
||||
? "Karz üçin maglumat"
|
||||
: locale === "РУС"
|
||||
? "Заполните данные"
|
||||
: locale === "ENG"
|
||||
? "Loan details"
|
||||
: "Karz üçin maglumat"}
|
||||
</h3>
|
||||
</div>
|
||||
<div className={stage > 4 ? 'line-block active' : 'line-block'}>
|
||||
|
||||
<div className={stage > 1 ? "line-block active" : "line-block"}>
|
||||
<Lines className="lines" />
|
||||
<Lines className="lines" />
|
||||
</div>
|
||||
<div className={stage > 4 ? 'icon-block active' : 'icon-block'}>
|
||||
|
||||
{isGuranter && (
|
||||
<>
|
||||
<div
|
||||
className={stage > 1 ? "icon-block active" : "icon-block"}
|
||||
>
|
||||
<Img4 className="modal-icon" />
|
||||
<h3 className="icon-title">
|
||||
{locale === "TKM"
|
||||
? "Karz üçin maglumat"
|
||||
: locale === "РУС"
|
||||
? "Заполните данные поручитель"
|
||||
: locale === "ENG"
|
||||
? "Loan details"
|
||||
: "Karz üçin maglumat"}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={stage > 1 ? "line-block active" : "line-block"}
|
||||
>
|
||||
<Lines className="lines" />
|
||||
<Lines className="lines" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className={stage > 2 ? "icon-block active" : "icon-block"}>
|
||||
<Img3 className="modal-icon" />
|
||||
<h3 className="icon-title">
|
||||
{locale === "TKM"
|
||||
? "Şahsy maglumatlar"
|
||||
: locale === "РУС"
|
||||
? "Подтвердите личные данные"
|
||||
: locale === "ENG"
|
||||
? "Personal data"
|
||||
: "Şahsy maglumatlar"}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className={stage > 3 ? "line-block active" : "line-block"}>
|
||||
<Lines className="lines" />
|
||||
<Lines className="lines" />
|
||||
</div>
|
||||
|
||||
<div className={stage > 3 ? "icon-block active" : "icon-block"}>
|
||||
<Img4 className="modal-icon" />
|
||||
<h3 className="icon-title">
|
||||
{locale === "TKM"
|
||||
? "Karz üçin maglumat"
|
||||
: locale === "РУС"
|
||||
? "Данные для кредита"
|
||||
: locale === "ENG"
|
||||
? "Loan details"
|
||||
: "Karz üçin maglumat"}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className={stage > 4 ? "line-block active" : "line-block"}>
|
||||
<Lines className="lines" />
|
||||
<Lines className="lines" />
|
||||
</div>
|
||||
|
||||
<div className={stage > 4 ? "icon-block active" : "icon-block"}>
|
||||
<Img5 className="modal-icon" />
|
||||
<h3 className="icon-title">
|
||||
{locale === 'TKM'
|
||||
? 'Talaplar we resminamalar'
|
||||
: locale === 'РУС'
|
||||
? 'Требования и документы'
|
||||
: locale === 'ENG'
|
||||
? 'Requirements and documents'
|
||||
: 'Talaplar we resminamalar'}
|
||||
{locale === "TKM"
|
||||
? "Talaplar we resminamalar"
|
||||
: locale === "РУС"
|
||||
? "Требования и документы"
|
||||
: locale === "ENG"
|
||||
? "Requirements and documents"
|
||||
: "Talaplar we resminamalar"}
|
||||
</h3>
|
||||
</div>
|
||||
<div className={stage > 5 ? 'line-block active' : 'line-block'}>
|
||||
|
||||
<div className={stage > 5 ? "line-block active" : "line-block"}>
|
||||
<Lines className="lines" />
|
||||
<Lines className="lines" />
|
||||
</div>
|
||||
<div className={stage > 5 ? 'icon-block active' : 'icon-block'}>
|
||||
|
||||
<div className={stage > 5 ? "icon-block active" : "icon-block"}>
|
||||
<Img6 className="modal-icon" />
|
||||
<h3 className="icon-title">
|
||||
{locale === 'TKM'
|
||||
? 'Ugratmak'
|
||||
: locale === 'РУС'
|
||||
? 'Отправка'
|
||||
: locale === 'ENG'
|
||||
? 'Sending'
|
||||
: 'Ugratmak'}
|
||||
{locale === "TKM"
|
||||
? "Ugratmak"
|
||||
: locale === "РУС"
|
||||
? "Отправка"
|
||||
: locale === "ENG"
|
||||
? "Sending"
|
||||
: "Ugratmak"}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-middle modal-middle-mobile">
|
||||
{stage === 1 ? (
|
||||
<div className="icon-block active">
|
||||
<Img1 className="modal-icon" />
|
||||
<Img4 className="modal-icon" />
|
||||
<h3 className="icon-title">
|
||||
{locale === 'TKM'
|
||||
? 'Karzyň görnüşini saýlaň'
|
||||
: locale === 'РУС'
|
||||
? 'Выберите вид кредита'
|
||||
: locale === 'ENG'
|
||||
? 'Choose the type of loan'
|
||||
: 'Karzyň görnüşini saýlaň'}
|
||||
{locale === "TKM"
|
||||
? "Karz üçin maglumat"
|
||||
: locale === "РУС"
|
||||
? "Заполните данные"
|
||||
: locale === "ENG"
|
||||
? "Loan details"
|
||||
: "Karz üçin maglumat"}
|
||||
</h3>
|
||||
</div>
|
||||
) : stage === 2 ? (
|
||||
<div className="icon-block active">
|
||||
<Img2 className="modal-icon" />
|
||||
<h3 className="icon-title">
|
||||
{locale === 'TKM'
|
||||
? 'Karzyň kalkulýatory'
|
||||
: locale === 'РУС'
|
||||
? 'Калькулятор кредита'
|
||||
: locale === 'ENG'
|
||||
? 'Loan calculator'
|
||||
: 'Karzyň kalkulýatory'}
|
||||
{locale === "TKM"
|
||||
? "Karzyň kalkulýatory"
|
||||
: locale === "РУС"
|
||||
? "Калькулятор кредита"
|
||||
: locale === "ENG"
|
||||
? "Loan calculator"
|
||||
: "Karzyň kalkulýatory"}
|
||||
</h3>
|
||||
</div>
|
||||
) : stage === 3 ? (
|
||||
<div className="icon-block active">
|
||||
<Img3 className="modal-icon" />
|
||||
<h3 className="icon-title">
|
||||
{locale === 'TKM'
|
||||
? 'Şahsy maglumatlar'
|
||||
: locale === 'РУС'
|
||||
? 'Личные данные'
|
||||
: locale === 'ENG'
|
||||
? 'Personal data'
|
||||
: 'Şahsy maglumatlar'}
|
||||
{locale === "TKM"
|
||||
? "Şahsy maglumatlar"
|
||||
: locale === "РУС"
|
||||
? "Личные данные"
|
||||
: locale === "ENG"
|
||||
? "Personal data"
|
||||
: "Şahsy maglumatlar"}
|
||||
</h3>
|
||||
</div>
|
||||
) : stage === 4 ? (
|
||||
<div className="icon-block active">
|
||||
<Img4 className="modal-icon" />
|
||||
<h3 className="icon-title">
|
||||
{locale === 'TKM'
|
||||
? 'Karz üçin maglumat'
|
||||
: locale === 'РУС'
|
||||
? 'Данные для кредита'
|
||||
: locale === 'ENG'
|
||||
? 'Loan details'
|
||||
: 'Karz üçin maglumat'}
|
||||
{locale === "TKM"
|
||||
? "Karz üçin maglumat"
|
||||
: locale === "РУС"
|
||||
? "Данные для кредита"
|
||||
: locale === "ENG"
|
||||
? "Loan details"
|
||||
: "Karz üçin maglumat"}
|
||||
</h3>
|
||||
</div>
|
||||
) : stage === 5 ? (
|
||||
<div className="icon-block active">
|
||||
<Img5 className="modal-icon" />
|
||||
<h3 className="icon-title">
|
||||
{locale === 'TKM'
|
||||
? 'Talaplar we resminamalar'
|
||||
: locale === 'РУС'
|
||||
? 'Требования и документы'
|
||||
: locale === 'ENG'
|
||||
? 'Requirements and documents'
|
||||
: 'Talaplar we resminamalar'}
|
||||
{locale === "TKM"
|
||||
? "Talaplar we resminamalar"
|
||||
: locale === "РУС"
|
||||
? "Требования и документы"
|
||||
: locale === "ENG"
|
||||
? "Requirements and documents"
|
||||
: "Talaplar we resminamalar"}
|
||||
</h3>
|
||||
</div>
|
||||
) : stage === 6 ? (
|
||||
<div className="icon-block active">
|
||||
<Img6 className="modal-icon" />
|
||||
<h3 className="icon-title">
|
||||
{locale === 'TKM'
|
||||
? 'Ugratmak'
|
||||
: locale === 'РУС'
|
||||
? 'Отправка'
|
||||
: locale === 'ENG'
|
||||
? 'Sending'
|
||||
: 'Ugratmak'}
|
||||
{locale === "TKM"
|
||||
? "Ugratmak"
|
||||
: locale === "РУС"
|
||||
? "Отправка"
|
||||
: locale === "ENG"
|
||||
? "Sending"
|
||||
: "Ugratmak"}
|
||||
</h3>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
<div className="modal-bottom">
|
||||
{stage === 1 ? (
|
||||
<ImmediateCreditStage1
|
||||
setStage={setStage}
|
||||
data={data}
|
||||
setData={setData}
|
||||
immediatCreditData={immediatCreditData}
|
||||
id={id}
|
||||
setId={setId}
|
||||
isGuranter={isGuranter}
|
||||
setIsGuranter={setIsGuranter}
|
||||
// data={data}
|
||||
// setData={setData}
|
||||
// immediatCreditData={immediatCreditData}
|
||||
// id={id}
|
||||
// setId={setId}
|
||||
/>
|
||||
) : stage === 2 ? (
|
||||
<ImmediateCreditStage1
|
||||
<ImmediateCreditStage2
|
||||
setStage={setStage}
|
||||
data={data}
|
||||
setData={setData}
|
||||
immediatCreditData={immediatCreditData}
|
||||
id={id}
|
||||
setId={setId}
|
||||
isGuranter={isGuranter}
|
||||
setIsGuranter={setIsGuranter}
|
||||
// data={data}
|
||||
// setData={setData}
|
||||
// immediatCreditData={immediatCreditData}
|
||||
// id={id}
|
||||
// setId={setId}
|
||||
/>
|
||||
) : stage === 3 ? (
|
||||
<ImmediateCreditStage1
|
||||
<ImmediateCreditStage3
|
||||
setStage={setStage}
|
||||
data={data}
|
||||
setData={setData}
|
||||
immediatCreditData={immediatCreditData}
|
||||
id={id}
|
||||
setId={setId}
|
||||
isGuranter={isGuranter}
|
||||
// data={data}
|
||||
// setData={setData}
|
||||
// immediatCreditData={immediatCreditData}
|
||||
// id={id}
|
||||
// setId={setId}
|
||||
/>
|
||||
) : stage === 4 ? (
|
||||
<ImmediateCreditStage1
|
||||
setStage={setStage}
|
||||
data={data}
|
||||
setData={setData}
|
||||
immediatCreditData={immediatCreditData}
|
||||
id={id}
|
||||
setId={setId}
|
||||
// data={data}
|
||||
// setData={setData}
|
||||
// immediatCreditData={immediatCreditData}
|
||||
// id={id}
|
||||
// setId={setId}
|
||||
/>
|
||||
) : stage === 5 ? (
|
||||
<ImmediateCreditStage1
|
||||
setStage={setStage}
|
||||
data={data}
|
||||
setData={setData}
|
||||
immediatCreditData={immediatCreditData}
|
||||
id={id}
|
||||
setId={setId}
|
||||
// data={data}
|
||||
// setData={setData}
|
||||
// immediatCreditData={immediatCreditData}
|
||||
// id={id}
|
||||
// setId={setId}
|
||||
/>
|
||||
) : stage === 6 ? (
|
||||
<ImmediateCreditStage1
|
||||
setStage={setStage}
|
||||
data={data}
|
||||
setData={setData}
|
||||
immediatCreditData={immediatCreditData}
|
||||
id={id}
|
||||
setId={setId}
|
||||
// data={data}
|
||||
// setData={setData}
|
||||
// immediatCreditData={immediatCreditData}
|
||||
// id={id}
|
||||
// setId={setId}
|
||||
/>
|
||||
) : (
|
||||
''
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue