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

card api data integrated

This commit is contained in:
VividTruthKeeper 2022-03-30 21:00:50 +05:00
parent 39825565f1
commit 756d2be126
11 changed files with 106 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/backend/getData.js
View File

@ -1,12 +0,0 @@
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();
};

72
src/components/CardStages/CardStage1.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,17 +8,38 @@ import CustomSelect from "../global/CustomSelect";
import credit from "../../images/credit-card.jpg";
import next from "../../icons/next.svg";
const CardStage1 = ({ setStage, data, setData }) => {
const CardStage1 = ({ setStage, data, setData, cardData }) => {
const [inputValid, setInputValid] = useState(
data.selected_card ? data.selected_card : false
);
const [id, setId] = useState(1);
const [img, setImg] = useState(credit);
useEffect(() => {
if (inputValid !== "" && cardData) {
cardData.data.map((el) => {
if (Object.values(el).includes(inputValid)) {
setId(el.id);
}
});
}
}, [inputValid]);
useEffect(() => {
if (cardData) {
cardData.data.map((el) => {
if (el.id === id) {
setImg(el.image.path);
}
});
}
}, [id]);
return (
<section className="card-stage-1">
<form>
<div className="input-block">
<label htmlFor="card">Выберите вид карты</label>
<CustomSelect
items={["Зарплатная карта", "Кредитная карта"]}
items={cardData ? cardData.data.map((el) => el.name) : [""]}
customId={"card"}
blockName={"card-1-select"}
elName={"card-1-select-el"}
@ -34,32 +55,55 @@ const CardStage1 = ({ setStage, data, setData }) => {
<div className="card-description">
<div className="cd-top">
<div className="cd-img">
<img src={credit} alt="card" />
<img src={img} alt="card" />
</div>
<div className="cd-text">
<h2>HalkBank - Зарплатная карта</h2>
<h2>
HalkBank -{" "}
{cardData
? cardData.data.map((el) => (el.id === id ? el.name : ""))
: "Зарплатная карта"}
</h2>
<h3>
Банковская карта, на которую зачисляется заработная плата
клиента. Открывается на основании договора между банком и
предприятием. Эта карта предоставляет полный перечень услуг по
безналичному платежу в терминалах, перевод денежных средств с
одной зарплатной карты на другую, а также получению наличных
денежных средств в банкоматах на территории Туркменистана.
{cardData
? cardData.data.map((el) => (el.id === id ? el.text : ""))
: "Банковская карта, на которую зачисляется заработная плата клиента. Открывается на основании договора между банком и предприятием. Эта карта предоставляет полный перечень услуг по безналичному платежу в терминалах, перевод денежных средств с одной зарплатной карты на другую, а также получению наличных денежных средств в банкоматах на территории Туркменистана."}
</h3>
</div>
</div>
<div className="cd-bottom">
<div className="cd-bottom-content">
<h3>Срок действия карты</h3>
<h2>30 лет</h2>
<h2>
{cardData
? cardData.data.map((el) => (el.id === id ? el.term : ""))
: "30"}{" "}
лет
</h2>
</div>
<div className="cd-bottom-content">
<h3>Процентная ставка</h3>
<h2>0%</h2>
<h2>
{" "}
{cardData
? cardData.data.map((el) =>
el.id === id ? el.interest_rate : ""
)
: "0"}{" "}
%
</h2>
</div>
<div className="cd-bottom-content">
<h3>Стоимость карты</h3>
<h2>23 маната</h2>
<h2>
{" "}
{cardData
? cardData.data.map((el) =>
el.id === id ? el.card_cost : ""
)
: "23"}{" "}
маната
</h2>
</div>
</div>
</div>

2
src/components/CardStages/CardStage2.js
View File

@ -241,7 +241,7 @@ const CardStage2 = ({ setStage, data, setData }) => {
setStage(1);
}}
>
Редактировать
Назад
</h3>
</div>
</button>

2
src/components/CardStages/CardStage3.js
View File

@ -164,7 +164,7 @@ const CardStage3 = ({ setStage, data, setData }) => {
setStage(2);
}}
>
Редактировать
Назад
</h3>
</div>
</button>

2
src/components/CardStages/CardStage4.js
View File

@ -106,7 +106,7 @@ const CardStage4 = ({ setStage, data, setData }) => {
setStage(3);
}}
>
Редактировать
Назад
</h3>
</div>
</button>

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

@ -154,7 +154,7 @@ const CreditStage2 = ({ setStage, data, setData, creditData, id }) => {
setStage(1);
}}
>
Редактировать
Назад
</h3>
</div>
</button>

2
src/components/CreditStages/CreditStage3.js
View File

@ -241,7 +241,7 @@ const CreditStage3 = ({ setStage, data, setData }) => {
setStage(2);
}}
>
Редактировать
Назад
</h3>
</div>
</button>

2
src/components/CreditStages/CreditStage4.js
View File

@ -151,7 +151,7 @@ const CreditStage4 = ({ setStage, data, setData }) => {
setStage(3);
}}
>
Редактировать
Назад
</h3>
</div>
</button>

2
src/components/CreditStages/CreditStage5.js
View File

@ -106,7 +106,7 @@ const CreditStage5 = ({ setStage, data, setData }) => {
setStage(4);
}}
>
Редактировать
Назад
</h3>
</div>
</button>

30
src/components/cards/ModalForm.js
View File

@ -1,5 +1,6 @@
// IMPORT MODULES
import React, { useState, useRef } from "react";
import React, { useState, useRef, useEffect } from "react";
import axios from "axios";
// IMPORT IMAGES
import exit from "../../icons/exit.svg";
@ -18,6 +19,9 @@ import CardStage3 from "../CardStages/CardStage3";
import CardStage4 from "../CardStages/CardStage4";
import CardStage6 from "../CardStages/CardStage6";
// IMPORT HELPERS
import { dataDestination } from "../../destinationUrl";
const ModalForm = ({
modalOpen,
setModalOpen,
@ -29,6 +33,23 @@ const ModalForm = ({
}) => {
const window = useRef();
const [data, setData] = useState({});
const [cardData, setCardData] = useState();
useEffect(() => {
let isMounted = true;
axios
.get(`${dataDestination}/card_data`)
.then((res) => {
if (isMounted) {
setCardData(res.data);
}
})
.catch();
return () => {
isMounted = false;
};
}, []);
return (
<section className={modalOpen ? "modal active" : "modal"}>
@ -132,7 +153,12 @@ const ModalForm = ({
</div>
<div className="modal-bottom">
{stage === 1 ? (
<CardStage1 setStage={setStage} data={data} setData={setData} />
<CardStage1
setStage={setStage}
data={data}
setData={setData}
cardData={cardData}
/>
) : stage === 2 ? (
<CardStage2 setStage={setStage} data={data} setData={setData} />
) : stage === 3 ? (

13
src/styles/_modal-form.scss
View File

@ -476,6 +476,19 @@
}
}
.cd-img {
max-width: 22rem;
max-height: 13.8rem;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
// MEDIA
@media screen and (max-width: 1300px) {