minor changes

This commit is contained in:
VividTruthKeeper 2022-04-12 15:49:43 +05:00
parent 719b03c732
commit fd42d20574
13 changed files with 244 additions and 167 deletions

View File

@ -53,19 +53,12 @@ const CardStage4 = ({ setStage, data, setData, req, setReq }) => {
dropdown ? "data-dropdown docs active" : "data-dropdown docs"
}
>
<div className="text-block">
{locale === "TUK"
? parser
.parseFromString(req.tuk, "text/html")
.getElementsByTagName("p")[0]
.innerText.split(". ")
.map((el, i) => <p key={i}>- {el}</p>)
: parser
.parseFromString(req.rus, "text/html")
.getElementsByTagName("p")[0]
.innerText.split(". ")
.map((el, i) => <p key={i}>- {el}</p>)}
</div>
<div
className="text-block"
dangerouslySetInnerHTML={{
__html: locale === "TUK" ? req.tuk : req.rus,
}}
></div>
</div>
</div>
</div>

View File

@ -20,7 +20,6 @@ const CreditStage1 = ({ setStage, data, setData, creditData, id, setId }) => {
one: false,
two: false,
});
const parser = new DOMParser();
useEffect(() => {
if (input !== "" && creditData) {
@ -98,7 +97,9 @@ const CreditStage1 = ({ setStage, data, setData, creditData, id, setId }) => {
</div>
<div
className={
dropdown.one ? "data-dropdown active" : "data-dropdown"
dropdown.one
? "data-dropdown grid active"
: "data-dropdown grid"
}
>
<div className="dropdown-inner bottom">
@ -226,21 +227,12 @@ const CreditStage1 = ({ setStage, data, setData, creditData, id, setId }) => {
: "data-dropdown docs"
}
>
<div className="text-block">
{
locale === "TUK"
? parser
.parseFromString(req.tuk, "text/html")
.getElementsByTagName("p")[0]
: // .innerText.split(". ")
// .map((el, i) => <p key={i}>- {el}</p>)
parser
.parseFromString(req.rus, "text/html")
.getElementsByTagName("p")[0]
// .innerText.split(". ")
// .map((el, i) => <p key={i}>- {el}</p>)
}
</div>
<div
className="text-block"
dangerouslySetInnerHTML={{
__html: locale === "TUK" ? req.tuk : req.rus,
}}
></div>
</div>
</div>
</div>

View File

@ -65,6 +65,7 @@ const CreditStage5 = ({ setStage, data, setData }) => {
<input
id="file"
type="file"
accept=".jpg, .jpeg, .docx, .doc, .pdf, .png"
onChange={(e) => {
setFiles([...files, e.target.files[0]]);
e.target.value = "";
@ -97,6 +98,12 @@ const CreditStage5 = ({ setStage, data, setData }) => {
})
: null}
</ul>
<p className="alert">
{locale === "TUK"
? "Hemme faýllar diňe görkezilen formatda bolmaly: "
: "Все файлы должны быть следующих форматов: "}
<span className="red">.jpg, .jpeg, .doc, .docx, .pdf, .png</span>
</p>
<div className="cu-bottom card-stage-4-bottom">
<button
type="button"
@ -128,7 +135,7 @@ const CreditStage5 = ({ setStage, data, setData }) => {
}}
>
<div>
<h3>{locale === "TUK" ? "Продолжить" : "Продолжить"}</h3>
<h3>{locale === "TUK" ? "Dowam et" : "Продолжить"}</h3>
<div className="btn-img">
<img src={next} alt="logout" />
</div>

View File

@ -88,9 +88,7 @@ const CreditModal = ({
<div className={stage > 2 ? "icon-block active" : "icon-block"}>
<Img3 className="modal-icon" />
<h3 className="icon-title">
{locale === "TUK"
? "Karz üçin maglumat"
: "Данные для кредита"}
{locale === "TUK" ? "Şahsy maglumatlar" : "Личные данные"}
</h3>
</div>
<div className={stage > 3 ? "line-block active" : "line-block"}>
@ -101,8 +99,8 @@ const CreditModal = ({
<Img4 className="modal-icon" />
<h3 className="icon-title">
{locale === "TUK"
? "Talaplar we resminamalar"
: "Требования и документы"}
? "Karz üçin maglumat"
: "Данные для кредита"}
</h3>
</div>
<div className={stage > 4 ? "line-block active" : "line-block"}>
@ -113,8 +111,8 @@ const CreditModal = ({
<Img5 className="modal-icon" />
<h3 className="icon-title">
{locale === "TUK"
? "Karz üçin talaplar"
: "Требования для кредита"}
? "Talaplar we resminamalar"
: "Требования и документы"}
</h3>
</div>
<div className={stage > 5 ? "line-block active" : "line-block"}>
@ -143,17 +141,15 @@ const CreditModal = ({
<Img2 className="modal-icon" />
<h3 className="icon-title">
{locale === "TUK"
? "Калькулятор кредита"
: "Karzyň kalkulýatory"}
? "Karzyň kalkulýatory"
: "Калькулятор кредита"}
</h3>
</div>
) : stage === 3 ? (
<div className="icon-block active">
<Img3 className="modal-icon" />
<h3 className="icon-title">
{locale === "TUK"
? "Karz üçin maglumat"
: "Данные для кредита"}
{locale === "TUK" ? "Şahsy maglumatlar" : "Личные данные"}
</h3>
</div>
) : stage === 4 ? (
@ -161,8 +157,8 @@ const CreditModal = ({
<Img4 className="modal-icon" />
<h3 className="icon-title">
{locale === "TUK"
? "Talaplar we resminamalar"
: "Требования и документы"}
? "Karz üçin maglumat"
: "Данные для кредита"}
</h3>
</div>
) : stage === 5 ? (
@ -170,8 +166,8 @@ const CreditModal = ({
<Img5 className="modal-icon" />
<h3 className="icon-title">
{locale === "TUK"
? "Karz üçin talaplar"
: "Требования для кредита"}
? "Talaplar we resminamalar"
: "Требования и документы"}
</h3>
</div>
) : stage === 6 ? (

View File

@ -125,13 +125,13 @@ const LoggedNav = ({ sideOpen, setSideOpen }) => {
: "Данные профиля"}
</Link>
</li>
<li>
{/* <li>
<Link to="/home/recovery">
{locale === "TUK"
? "Açar sözüni çalyşmak"
: "Смена пароля"}
</Link>
</li>
</li> */}
<li>
<button
type="button"

View File

@ -1,5 +1,5 @@
// IMPORT MODULES
import React, { useState, useEffect, useContext, useRef } from "react";
import React, { useState, useEffect, useContext, useRef, useMemo } from "react";
import { Link } from "react-router-dom";
import { UserContext } from "../../backend/UserContext";
import { deleteUser } from "../../backend/deleteUser";
@ -15,13 +15,21 @@ import user from "../../icons/user-square.svg";
import arrow from "../../icons/arrow-back.svg";
import close from "../../icons/close.svg";
// HOOKS
import useMediaQuery from "../../hooks/useMediaQuery";
const Side = ({ sideOpen, setSideOpen }) => {
const inner = useRef();
const { locale } = useContext(LanguageContext);
const { setUser } = useContext(UserContext);
const [linkStage, setLinkStage] = useState(0);
const [closeOnInteract, setCloseOnInteract] = useState(false);
const location = window.location.href;
const viewPortWidth = useMediaQuery("(max-width: 1300px)");
useEffect(() => {
setCloseOnInteract(viewPortWidth);
}, [viewPortWidth]);
useEffect(() => {
if (location.includes("cards")) {
@ -70,7 +78,14 @@ const Side = ({ sideOpen, setSideOpen }) => {
setLinkStage(1);
}}
>
<Link to="/home/cards">
<Link
to="/home/cards"
onClick={() => {
if (closeOnInteract) {
setSideOpen(true);
}
}}
>
<div className="link-img">
<img src={card} alt="link" />
</div>
@ -85,7 +100,14 @@ const Side = ({ sideOpen, setSideOpen }) => {
setLinkStage(2);
}}
>
<Link to="/home/credits">
<Link
to="/home/credits"
onClick={() => {
if (closeOnInteract) {
setSideOpen(true);
}
}}
>
<div className="link-img">
<img src={credit} alt="link" />
</div>
@ -98,7 +120,14 @@ const Side = ({ sideOpen, setSideOpen }) => {
setLinkStage(3);
}}
>
<Link to="/home/contact-us">
<Link
to="/home/contact-us"
onClick={() => {
if (closeOnInteract) {
setSideOpen(true);
}
}}
>
<div className="link-img">
<img src={mail} alt="link" />
</div>
@ -120,7 +149,14 @@ const Side = ({ sideOpen, setSideOpen }) => {
setLinkStage(4);
}}
>
<Link to="/home/profile">
<Link
to="/home/profile"
onClick={() => {
if (closeOnInteract) {
setSideOpen(true);
}
}}
>
<div className="link-img">
<img src={user} alt="link" />
</div>
@ -135,7 +171,14 @@ const Side = ({ sideOpen, setSideOpen }) => {
setLinkStage(5);
}}
>
<Link to="/home/recovery">
<Link
to="/home/recovery"
onClick={() => {
if (closeOnInteract) {
setSideOpen(true);
}
}}
>
<div className="link-img">
<img src={password} alt="link" />
</div>
@ -160,7 +203,15 @@ const Side = ({ sideOpen, setSideOpen }) => {
</li>
</ul>
</div>
<Link to="/" className="side-footer">
<Link
to="/"
className="side-footer"
onClick={() => {
if (closeOnInteract) {
setSideOpen(true);
}
}}
>
<div className="footer-img">
<img src={arrow} alt="arrow" />
</div>

View File

@ -230,7 +230,7 @@ const RegForm = () => {
<span>*</span>
</label>
<CustomSelect
items={["I", "A", "E"]}
items={["I", "II", "III", "IV"]}
blockName={"select-block"}
elName={"select-el"}
customId={"serie"}

View File

@ -0,0 +1,19 @@
import { useState, useEffect } from "react";
const useMediaQuery = (query) => {
const [matches, setMatches] = useState(false);
useEffect(() => {
const media = window.matchMedia(query);
if (media.matches !== matches) {
setMatches(media.matches);
}
const listener = () => setMatches(media.matches);
window.addEventListener("resize", listener);
return () => window.removeEventListener("resize", listener);
}, [matches, query]);
return matches;
};
export default useMediaQuery;

View File

@ -139,60 +139,62 @@ const Base = () => {
{user
? user.online_card.length !== 0
? user.online_card.map((el, i) => {
return (
<tr key={i}>
<td>#{el.id}</td>
<td>{el.selected_card}</td>
<td>{el.date}</td>
<td
className={
el.status === "5"
? "red"
: el.status === "4" || el.status === "2"
? "green"
: ""
}
>
{el.status === "1"
? locale === "TUK"
? "Ugradyldy"
: "Отправлено"
: el.status === "2"
? locale === "TUK"
? "Kabul edildi"
: "Принята"
: el.status === "3"
? locale === "TUK"
? "Görülyar"
: "На стадии рассмотрения"
: el.status === "4"
? locale === "TUK"
? "Kart çykaryldy"
: "Карта выпущена"
: el.status === "5"
? locale === "TUK"
? "Ret edildi"
: "Отказано"
: ""}
</td>
<td>
{el.status === "5" ? (
<div className="reject">
<div className="reason">
<h4>{el.action}</h4>
if (el.payed) {
return (
<tr key={i}>
<td>#{el.id}</td>
<td>{el.selected_card}</td>
<td>{el.date}</td>
<td
className={
el.status === "5"
? "red"
: el.status === "4" || el.status === "2"
? "green"
: ""
}
>
{el.status === "1"
? locale === "TUK"
? "Ugradyldy"
: "Отправлено"
: el.status === "2"
? locale === "TUK"
? "Kabul edildi"
: "Принята"
: el.status === "3"
? locale === "TUK"
? "Görülyar"
: "На стадии рассмотрения"
: el.status === "4"
? locale === "TUK"
? "Kart çykaryldy"
: "Карта выпущена"
: el.status === "5"
? locale === "TUK"
? "Ret edildi"
: "Отказано"
: ""}
</td>
<td>
{el.status === "5" ? (
<div className="reject">
<div className="reason">
<h4>{el.action}</h4>
</div>
<img src={allert} alt="reject" />
</div>
<img src={allert} alt="reject" />
</div>
) : el.status !== "4" && el.status !== "2" ? (
<div>
<img src={nul} alt="null" />
</div>
) : (
""
)}
</td>
</tr>
);
) : el.status !== "4" && el.status !== "2" ? (
<div>
<img src={nul} alt="null" />
</div>
) : (
""
)}
</td>
</tr>
);
}
})
: null
: null}

View File

@ -24,6 +24,7 @@ const Cards = () => {
const [loader, setLoader] = useState(false);
const [modalOpen, setModalOpen] = useState(false);
const [stage, setStage] = useState(1);
console.log(user);
useEffect(() => {
if (modalOpen) {
document.body.style.overflowY = "hidden";
@ -104,60 +105,62 @@ const Cards = () => {
{user ? (
user.online_card.length !== 0 ? (
user.online_card.map((el, i) => {
return (
<tr key={i}>
<td>#{el.id}</td>
<td>{el.selected_card}</td>
<td>{el.date}</td>
<td
className={
el.status === "5"
? "red"
: el.status === "4" || el.status === "2"
? "green"
: ""
}
>
{el.status === "1"
? locale === "TUK"
? "Ugradyldy"
: "Отправлено"
: el.status === "2"
? locale === "TUK"
? "Kabul edildi"
: "Принята"
: el.status === "3"
? locale === "TUK"
? "Görülyar"
: "На стадии рассмотрения"
: el.status === "4"
? locale === "TUK"
? "Kart çykaryldy"
: "Карта выпущена"
: el.status === "5"
? locale === "TUK"
? "Ret edildi"
: "Отказано"
: ""}
</td>
<td>
{el.status === "5" ? (
<div className="reject">
<div className="reason">
<h4>{el.action}</h4>
if (el.payed) {
return (
<tr key={i}>
<td>#{el.id}</td>
<td>{el.selected_card}</td>
<td>{el.date}</td>
<td
className={
el.status === "5"
? "red"
: el.status === "4" || el.status === "2"
? "green"
: ""
}
>
{el.status === "1"
? locale === "TUK"
? "Ugradyldy"
: "Отправлено"
: el.status === "2"
? locale === "TUK"
? "Kabul edildi"
: "Принята"
: el.status === "3"
? locale === "TUK"
? "Görülyar"
: "На стадии рассмотрения"
: el.status === "4"
? locale === "TUK"
? "Kart çykaryldy"
: "Карта выпущена"
: el.status === "5"
? locale === "TUK"
? "Ret edildi"
: "Отказано"
: ""}
</td>
<td>
{el.status === "5" ? (
<div className="reject">
<div className="reason">
<h4>{el.action}</h4>
</div>
<img src={allert} alt="reject" />
</div>
<img src={allert} alt="reject" />
</div>
) : el.status !== "4" && el.status !== "2" ? (
<div>
<img src={nul} alt="null" />
</div>
) : (
""
)}
</td>
</tr>
);
) : el.status !== "4" && el.status !== "2" ? (
<div>
<img src={nul} alt="null" />
</div>
) : (
""
)}
</td>
</tr>
);
}
})
) : (
<tr>

View File

@ -3,7 +3,6 @@
flex-direction: column;
justify-content: flex-start;
gap: 1.4rem;
max-width: 42rem;
width: 100%;
label {
@ -11,7 +10,6 @@
}
.cs-1-top-block {
max-width: 42rem;
width: 100%;
}
}
@ -46,6 +44,10 @@
}
.data-dropdown {
&.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.text-block {
padding: 4rem 2rem;
}
@ -294,7 +296,8 @@
.cs-1-middle {
gap: 1rem;
}
.data-dropdown {
.data-dropdown,
.data-dropdown.grid {
display: grid;
grid-template-columns: 1fr;

View File

@ -3,6 +3,9 @@
display: inline-block;
input {
&:read-only {
background-color: #fff !important;
}
width: 100%;
padding: 2rem;
border-radius: 0.5rem;

View File

@ -3,6 +3,10 @@
margin: auto 0;
}
.alert {
font-size: 1.2rem;
}
.modal {
display: flex;
justify-content: center;
@ -19,6 +23,10 @@
overflow-y: auto;
z-index: 10000;
input:read-only {
background: #f2f2f2;
}
&.active {
opacity: 1;
pointer-events: all;