TPS
/
halkbank_shahsyotag_frontend
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

credits api data integrated

This commit is contained in:
VividTruthKeeper 2022-03-30 20:25:34 +05:00
parent ffc68a3f92
commit 39825565f1
8 changed files with 125 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/backend/getData.js Normal file
View File

@ -0,0 +1,12 @@
import axios from "axios";
import { dataDestination } from "../destinationUrl";
export const getCardData = (isMounted, setState) => {
axios
.get(`${dataDestination}/card_data`)
.then((res) => {
if (isMounted) {
setState(res.data);
}
})
.catch();
};

61
src/components/CreditStages/CreditStage1.js
View File

@ -1,5 +1,5 @@
// IMPORT MODULES
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
// IMPORT COMPONENTS
import CustomSelect from "../global/CustomSelect";
@ -8,19 +8,29 @@ import CustomSelect from "../global/CustomSelect";
import arrow from "../../icons/arrow.svg";
import next from "../../icons/next.svg";
const CreditStage1 = ({ setStage, data, setData }) => {
const CreditStage1 = ({ setStage, data, setData, creditData, id, setId }) => {
const [input, setInput] = useState(data.type ? data.type : null);
const [dropdown, setDropdown] = useState({
one: true,
two: false,
});
useEffect(() => {
if (input !== "" && creditData) {
creditData.data.map((el) => {
if (Object.values(el).includes(input)) {
setId(el.id);
}
});
}
}, [input]);
return (
<section className="cs-1">
<form>
<div className="cs-1-top">
<label htmlFor="credit-type">Выберите вид кредита</label>
<CustomSelect
items={["Кредит для молодоженов"]}
items={creditData ? creditData.data.map((el) => el.name) : [""]}
customId={"credit-type"}
name={"credit-type"}
blockName={"cs-1-top-block"}
@ -53,30 +63,61 @@ const CreditStage1 = ({ setStage, data, setData }) => {
>
<div className="dropdown-inner bottom">
<h6>Срок</h6>
<h2>до 3 лет</h2>
<h2>
до{" "}
{creditData
? creditData.data.map((el) => (el.id === id ? el.term : ""))
: ""}{" "}
лет
</h2>
</div>
<div className="dropdown-inner left right bottom">
<h6>Сумма кредита</h6>
<h2>до 6000 манат</h2>
<h2>
{creditData
? creditData.data.map((el) => (el.id === id ? el.sum : ""))
: ""}
</h2>
</div>
<div className="dropdown-inner bottom">
<h6>Ставка</h6>
<h2>1 %</h2>
<h2>
{creditData
? creditData.data.map((el) => (el.id === id ? el.bet : ""))
: ""}{" "}
%
</h2>
</div>
<div className="dropdown-inner ">
<h6>Обеспечение возврата кредита</h6>
<h2>2 поручителя</h2>
<h2>
{creditData
? creditData.data.map((el) =>
el.id === id ? el.securing_return : ""
)
: ""}
</h2>
</div>
<div className="dropdown-inner left right">
<h6>Источник погашения кредита</h6>
<h2>
50% от зарплаты заемщика и поручителя для погашения кредита и
процентов по нему (или 50% от общего семейного)
{creditData
? creditData.data.map((el) =>
el.id === id ? el.source_of_repayment : ""
)
: ""}
</h2>
</div>
<div className="dropdown-inner">
<h6>Способ погашения</h6>
<h2>Наличным или безналичным способом</h2>
<h2>
{" "}
{creditData
? creditData.data.map((el) =>
el.id === id ? el.repayment_method : ""
)
: ""}
</h2>
</div>
</div>
</div>

60
src/components/CreditStages/CreditStage2.js
View File

@ -12,29 +12,44 @@ import logo from "../../icons/logo-transp.svg";
// IMPORT IMAGES
import next_reverse from "../../icons/next-reverse.svg";
const CreditStage2 = ({ setStage, data, setData, cardData }) => {
const [inputValue, setInputValue] = useState(
data.inputValue ? data.inputValue : 3000
);
const CreditStage2 = ({ setStage, data, setData, creditData, id }) => {
const [max, setMax] = useState(6000);
const [bet, setBet] = useState(1);
const [inputValue, setInputValue] = useState(max / 2);
const [radio, setRadio] = useState(1);
const [monthlyPayment, setMonthlyPayment] = useState(
(
inputValue / (radio * 12) +
(inputValue / (radio * 12)) * cardData.card1.percent
(inputValue / (radio * 12)) * (bet / 100)
).toFixed(2)
);
useEffect(() => {
setMonthlyPayment(
(
inputValue / (radio * 12) +
(inputValue / (radio * 12)) * cardData.card1.percent
(inputValue / (radio * 12)) * (bet / 100)
).toFixed(2)
);
}, [inputValue, radio]);
useEffect(() => {
setInputValue(max / 2);
}, [max]);
useEffect(() => {
input.current.value = inputValue;
}, [inputValue]);
useEffect(() => {
if (creditData) {
creditData.data.map((el) => {
if (el.id === id) {
setBet(el.bet);
setMax(el.sum);
}
});
}
}, [creditData]);
const input = useRef();
return (
<section className="cs-2">
@ -69,7 +84,7 @@ const CreditStage2 = ({ setStage, data, setData, cardData }) => {
type="range"
id="sum"
min="100"
max="6000"
max={max}
defaultValue={inputValue}
ref={input}
onChange={(e) => {
@ -120,19 +135,6 @@ const CreditStage2 = ({ setStage, data, setData, cardData }) => {
}}
/>
</label>
<label htmlFor="term1" className={radio === 4 ? "active" : ""}>
4 года
<input
type="radio"
name="term"
id="term1"
onClick={(e) => {
if (e.target.checked === true) {
setRadio(4);
}
}}
/>
</label>
</div>
</div>
<div className="card-button cs-2-bottom">
@ -186,12 +188,12 @@ const CreditStage2 = ({ setStage, data, setData, cardData }) => {
onClick={() => {
if (
((parseInt(monthlyPayment) - 1) * radio * 12) /
(1 + cardData.card1.percent) >
(1 + bet / 100) >
100
) {
setInputValue(
((parseInt(monthlyPayment) - 1) * radio * 12) /
(1 + cardData.card1.percent)
(1 + bet / 100)
);
}
}}
@ -204,12 +206,12 @@ const CreditStage2 = ({ setStage, data, setData, cardData }) => {
onClick={() => {
if (
((parseInt(monthlyPayment) + 1) * radio * 12) /
(1 + cardData.card1.percent) <
6000
(1 + bet / 100) <
max
) {
setInputValue(
((parseInt(monthlyPayment) + 1) * radio * 12) /
(1 + cardData.card1.percent)
(1 + bet / 100)
);
}
}}
@ -219,18 +221,14 @@ const CreditStage2 = ({ setStage, data, setData, cardData }) => {
</div>
<div className="percent">
<h6>Процентная ставка</h6>
<h5>{cardData.card1.percent * 100} %</h5>
<h5>{bet} %</h5>
</div>
</div>
<div className="cs-2-right-middle">
<div className="cs-2-right-middle-content">
<h6>Процентный платеж</h6>
<h5>
{(
(inputValue / (radio * 12)) *
cardData.card1.percent
).toFixed(2)}{" "}
TMT
{((inputValue / (radio * 12)) * (bet / 100)).toFixed(2)} TMT
</h5>
</div>
<div className="cs-2-right-middle-content">

16
src/components/credits/CreditModal.js
View File

@ -27,17 +27,11 @@ const CreditModal = ({
setLoader,
setSuccess,
setError,
creditData,
}) => {
const window = useRef();
const [data, setData] = useState({});
const [
cardData,
// setCardData
] = useState({
card1: {
percent: 0.01,
},
});
const [id, setId] = useState(1);
return (
<section
className={modalOpen ? "modal credit-modal active" : "modal credit-modal"}
@ -146,13 +140,17 @@ const CreditModal = ({
setStage={setStage}
data={data}
setData={setData}
creditData={creditData}
id={id}
setId={setId}
/>
) : stage === 2 ? (
<CreditStage2
setStage={setStage}
data={data}
setData={setData}
cardData={cardData}
creditData={creditData}
id={id}
/>
) : stage === 3 ? (
<CreditStage3

2
src/components/global/LoggedNav.js
View File

@ -45,7 +45,7 @@ const LoggedNav = ({ sideOpen, setSideOpen, animator, setAnimator }) => {
setSideOpen(!sideOpen);
}}
>
<div className={sideOpen ? "line-block active" : "line-block"}>
<div className={sideOpen ? "lines-block active" : "lines-block"}>
<div className="lines line-1"></div>
<div className="lines line-2"></div>
<div className="lines line-3"></div>

2
src/destinationUrl.js
View File

@ -1 +1,3 @@
export const destination = "https://shahsyotag.halkbank.gov.tm/app/api";
export const dataDestination = "https://shahsyotag.halkbank.gov.tm/app/api/v1";

21
src/pages/Credits.js
View File

@ -1,6 +1,7 @@
// IMPORT MODULES
import React, { useState, useEffect, useContext } from "react";
import { UserContext } from "../backend/UserContext";
import axios from "axios";
// IMPORT COMPONENTS
import Breadcrumb from "../components/global/Breadcrumb";
@ -9,6 +10,9 @@ import Loader from "../components/global/Loader";
import Success from "../components/global/Success";
import Error from "../components/global/Error";
// IMPORT HELPERS
import { dataDestination } from "../destinationUrl";
// IMPORT IMAGES
import credit from "../icons/credit-black.svg";
import add from "../icons/add.svg";
@ -22,6 +26,7 @@ const Credits = () => {
const [modalOpen, setModalOpen] = useState(false);
const [stage, setStage] = useState(1);
const [loader, setLoader] = useState(false);
const [creditData, setCreditData] = useState();
useEffect(() => {
if (modalOpen) {
document.body.style.overflowY = "hidden";
@ -30,6 +35,21 @@ const Credits = () => {
}
}, [modalOpen]);
useEffect(() => {
let isMounted = true;
axios
.get(`${dataDestination}/credit_data`)
.then((res) => {
if (isMounted) {
setCreditData(res.data);
}
})
.catch();
return () => {
isMounted = false;
};
}, []);
return (
<section className="cards">
{success ? <Success message={"Ваш запрос успешно отправлен!"} /> : null}
@ -44,6 +64,7 @@ const Credits = () => {
setLoader={setLoader}
setSuccess={setSuccess}
setError={setError}
creditData={creditData}
/>
{loader ? <Loader /> : null}
<div className="container">

3
src/styles/_nav.scss
View File

@ -1,4 +1,4 @@
.line-block {
.lines-block {
position: relative;
width: 3rem;
height: 2rem;
@ -51,6 +51,7 @@
&::after {
opacity: 1;
left: -48%;
top: 0.9rem;
transform: rotate(-90deg);
transition: all 0.3s ease;
}