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

layout done

This commit is contained in:
Kakabay 2024-03-25 18:37:18 +05:00
parent 8e87b02727
commit 6f781ec361
9 changed files with 458 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/components/ImmediateCreditsStages/AcceptStage.js Normal file
View File

@ -0,0 +1,128 @@
// IMPORT MODULES
import React, { useState, useContext } from 'react';
import { LanguageContext } from '../../backend/LanguageContext';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
// IMPORT IMAGES
import next from '../../icons/next.svg';
import next_reverse from '../../icons/next-reverse.svg';
// import arrow from "../../icons/arrow.svg";
const schema = z.object({
name: z.string().min(1),
surname: z.string().min(1),
});
const AcceptStage = ({ setStage, recepientAmount, creditDuration }) => {
const { locale } = useContext(LanguageContext);
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: zodResolver(schema),
defaultValues: {
amount: recepientAmount ? recepientAmount : 'Loading',
duration: creditDuration ? creditDuration : 'loading',
},
});
const onSubmit = (data) => {
console.log(data);
};
return (
<section className="imm-cs-1">
<form onSubmit={handleSubmit(onSubmit)}>
<h2 className="cs-2-title">
{locale === 'TKM'
? 'Karzyň kalkulýatory'
: locale === 'РУС'
? 'Подтвердите данные'
: locale === 'ENG'
? 'Loan calculator'
: 'Karzyň kalkulýatory'}
</h2>
<div className="imm-credit-form-wrapper">
<div className="input-block">
<label htmlFor="amount">
{locale === 'TKM'
? 'At'
: locale === 'РУС'
? 'Сумма'
: locale === 'ENG'
? 'amount'
: 'At'}
</label>
<input {...register('amount')} type="text" id="amount" disabled />
{errors.amount && <span>{errors.amount.message}</span>}
</div>
<div className="input-block">
<label htmlFor="surname">
{locale === 'TKM'
? 'At'
: locale === 'РУС'
? 'Срок'
: locale === 'ENG'
? 'duration'
: 'At'}
</label>
<input {...register('duration')} type="text" id="duration" disabled />
{errors.duration && <span>{errors.duration.message}</span>}
</div>
<div className="input-block">
<label htmlFor="phone-number">
{locale === 'TKM'
? 'Hasaba almak'
: locale === 'РУС'
? 'Номер телефона'
: locale === 'ENG'
? 'Sign up'
: 'Hasaba almak'}
</label>
<input {...register('phoneNumber')} type="text" id="phone-number" />
{/* {errors.phoneNumber && <span>{errors.phoneNumber.message}</span>} */}
</div>
</div>
<div className="cu-bottom cd-2-title">
<button type="button" className="sign-btn reg-btn" onClick={() => setStage(7)}>
<div>
<div className="btn-img">
<img src={next_reverse} alt="logout" />
</div>
<h3>
{locale === 'TKM'
? 'Yza'
: locale === 'РУС'
? 'Назад'
: locale === 'ENG'
? 'Back'
: 'Yza'}
</h3>
</div>
</button>
<button type="button" className="sign-btn cu-btn" onClick={() => setStage(9)}>
<div>
<h3>
{locale === 'TKM'
? 'Dowam et'
: locale === 'РУС'
? 'Подтвердить '
: locale === 'ENG'
? 'Proceed'
: 'Dowam et'}
</h3>
<div className="btn-img">
<img src={next} alt="logout" />
</div>
</div>
</button>
</div>
</form>
</section>
);
};
export default AcceptStage;

2
src/components/ImmediateCreditsStages/BorrowerStage.js
View File

@ -32,6 +32,7 @@ const BorrowerStage = ({
setBorrowerData,
setMaxAmount,
setRecepientAmount,
setErrMessage,
}) => {
const { locale } = useContext(LanguageContext);
@ -103,6 +104,7 @@ const BorrowerStage = ({
setStage(2);
console.log('availabel');
} else if (responseJson.errCode !== 0) {
setErrMessage(responseJson.messageRu);
setStage(3);
}
} catch (error) {

5
src/components/ImmediateCreditsStages/CalculateStage.js
View File

@ -18,12 +18,13 @@ const CalculateStage = ({
setRecepientAmount,
setCreditDuration,
maxAmount,
creditDuration,
}) => {
const { locale } = useContext(LanguageContext);
const [max, setMax] = useState(maxAmount);
const [bet, setBet] = useState(12);
const [inputValue, setInputValue] = useState(recepientAmount);
const [radio, setRadio] = useState(1);
const [radio, setRadio] = useState(creditDuration !== 0 ? 1 : creditDuration);
const [monthlyPayment, setMonthlyPayment] = useState(
(inputValue / (radio * 12) + (inputValue / (radio * 12)) * (bet / 100)).toFixed(2),
);
@ -213,7 +214,7 @@ const CalculateStage = ({
type="button"
className="sign-btn cd-btn"
onClick={() => {
// setStage(8);
setStage(8);
}}>
<div>
<h3>

99
src/components/ImmediateCreditsStages/CardDetails.js Normal file
View File

@ -0,0 +1,99 @@
// IMPORT MODULES
import React, { useState, useContext } from 'react';
import { LanguageContext } from '../../backend/LanguageContext';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
// IMPORT IMAGES
import next from '../../icons/next.svg';
import next_reverse from '../../icons/next-reverse.svg';
// import arrow from "../../icons/arrow.svg";
const schema = z.object({
code: z.string().min(1),
// surname: z.string().min(1),
});
const CardDetails = ({ setStage }) => {
const { locale } = useContext(LanguageContext);
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: zodResolver(schema),
});
const onSubmit = (data) => {
console.log(data);
};
return (
<section className="imm-cs-1">
<form onSubmit={handleSubmit(onSubmit)}>
<h2 className="cs-2-title">
{locale === 'TKM'
? 'Karzyň kalkulýatory'
: locale === 'РУС'
? 'Введите реквизиты карты'
: locale === 'ENG'
? 'Loan calculator'
: 'Karzyň kalkulýatory'}
</h2>
<div className="imm-credit-form-wrapper">
<div className="input-block">
<label htmlFor="code">
{locale === 'TKM'
? 'At'
: locale === 'РУС'
? 'Реквизиты карты'
: locale === 'ENG'
? 'amount'
: 'At'}
</label>
<input {...register('code')} type="text" id="code" />
<span className="another-option">Оформить карту</span>
{/* {errors.code && <span>{errors.code.message}</span>} */}
</div>
</div>
<div className="cu-bottom cd-2-title">
<button type="button" className="sign-btn reg-btn" onClick={() => setStage(9)}>
<div>
<div className="btn-img">
<img src={next_reverse} alt="logout" />
</div>
<h3>
{locale === 'TKM'
? 'Yza'
: locale === 'РУС'
? 'Назад'
: locale === 'ENG'
? 'Back'
: 'Yza'}
</h3>
</div>
</button>
<button type="button" className="sign-btn cu-btn" onClick={() => setStage(10)}>
<div>
<h3>
{locale === 'TKM'
? 'Dowam et'
: locale === 'РУС'
? 'Подтвердить '
: locale === 'ENG'
? 'Proceed'
: 'Dowam et'}
</h3>
<div className="btn-img">
<img src={next} alt="logout" />
</div>
</div>
</button>
</div>
</form>
</section>
);
};
export default CardDetails;

153
src/components/ImmediateCreditsStages/GuaranterStage.js
View File

@ -1,13 +1,13 @@
// IMPORT MODULES
import React, { useState, useContext } from "react";
import { LanguageContext } from "../../backend/LanguageContext";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import React, { useState, useContext } from 'react';
import { LanguageContext } from '../../backend/LanguageContext';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
// IMPORT IMAGES
import next from "../../icons/next.svg";
import next_reverse from "../../icons/next-reverse.svg";
import Select from "../global/Select";
import next from '../../icons/next.svg';
import next_reverse from '../../icons/next-reverse.svg';
import Select from '../global/Select';
// const schema = z.object({
// passportNumber: z
@ -23,13 +23,14 @@ import Select from "../global/Select";
// // clientType: z.string(),
// });
const IDSerias = ["I-AS", "I-AH", "I-BN", "I-LB", "I-MR", "I-DZ"];
const IDSerias = ['I-AS', 'I-AH', 'I-BN', 'I-LB', 'I-MR', 'I-DZ'];
const GuaranterStage = ({
setStage,
signRecipient,
setGuaranterData,
isGuranter,
setErrMessage,
}) => {
const { locale } = useContext(LanguageContext);
@ -37,9 +38,9 @@ const GuaranterStage = ({
const [err, setErr] = useState(false);
const [errCode, setErrCode] = useState();
const [idSerial, setIdSerial] = useState("I-AS");
const [passportNumber, setPassportNumber] = useState("");
const [accNumber, setAccNumber] = useState("");
const [idSerial, setIdSerial] = useState('I-AS');
const [passportNumber, setPassportNumber] = useState('');
const [accNumber, setAccNumber] = useState('');
const handlePassportNumber = (e) => {
setPassportNumber(e.target.value);
@ -56,24 +57,24 @@ const GuaranterStage = ({
// resolver: zodResolver(schema),
});
const fetchData = async (idSeria, idNo, accountNo, clientType) => {
const fetchData = async (idSeria, idNo, accountNo, setErrMessage) => {
try {
setIsLoading(true);
const response = await fetch(
`https://shahsyotag.halkbank.gov.tm/onlineloan-services/api/clientinfo`,
{
method: "POST",
method: 'POST',
headers: {
"Content-Type": "application/json",
'Content-Type': 'application/json',
},
body: JSON.stringify({
idSeria: idSeria,
idNo: idNo,
accountNo: accountNo,
clientType: "guaranter",
clientType: 'guaranter',
signRecipient: signRecipient,
}),
}
},
);
if (!response.ok) {
@ -84,10 +85,17 @@ const GuaranterStage = ({
setErrCode(responseJson.errCode);
setErrMessage(responseJson.messageRu);
setGuaranterData(responseJson);
setIsLoading(false);
responseJson.errCode === 0 ? setStage(5) : setStage(6);
if (responseJson.errCode === 0) {
setStage(5);
} else if (responseJson.errCode !== 0) {
setStage(6);
}
} catch (error) {
console.error(error.toString());
// Handle errors as needed
@ -96,7 +104,7 @@ const GuaranterStage = ({
};
const onSubmit = (data) => {
fetchData(idSerial, passportNumber, accNumber, isGuranter);
fetchData(idSerial, passportNumber, accNumber, setErrMessage);
};
if (isLoading) {
@ -111,44 +119,44 @@ const GuaranterStage = ({
<section className="imm-cs-1">
<form onSubmit={handleSubmit(onSubmit)}>
<h2 className="cs-2-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'}
</h2>
<div className="imm-credit-form-wrapper">
<Select
items={IDSerias}
customId={"card"}
blockName={"card-1-select"}
elName={"card-1-select-el"}
name={"passportSerial"}
customId={'card'}
blockName={'card-1-select'}
elName={'card-1-select-el'}
name={'passportSerial'}
eTarget={true}
register={register}
label={
locale === "TKM"
? "Kartyň görnüşi"
: locale === "РУС"
? "Серия паспорта"
: locale === "ENG"
? "Card type"
: "Kartyň görnüşi"
locale === 'TKM'
? 'Kartyň görnüşi'
: locale === 'РУС'
? 'Серия паспорта'
: locale === 'ENG'
? 'Card type'
: 'Kartyň görnüşi'
}
stateSetter={setIdSerial}
/>
<div className="input-block">
<label htmlFor="passport-number">
{locale === "TKM"
? "Hasaba almak"
: locale === "РУС"
? "Номер паспорта"
: locale === "ENG"
? "Sign up"
: "Hasaba almak"}
{locale === 'TKM'
? 'Hasaba almak'
: locale === 'РУС'
? 'Номер паспорта'
: locale === 'ENG'
? 'Sign up'
: 'Hasaba almak'}
</label>
<input
// {...register("passportNumber", { valueAsNumber: true })}
@ -163,13 +171,13 @@ const GuaranterStage = ({
</div>
<div className="input-block">
<label htmlFor="bank-acc">
{locale === "TKM"
? "Hasaba almak"
: locale === "РУС"
? "Номер банковского аккаунта"
: locale === "ENG"
? "Sign up"
: "Hasaba almak"}
{locale === 'TKM'
? 'Hasaba almak'
: locale === 'РУС'
? 'Номер банковского аккаунта'
: locale === 'ENG'
? 'Sign up'
: 'Hasaba almak'}
</label>
<input
// {...register("bankAccount", { valueAsNumber: true })}
@ -183,44 +191,35 @@ const GuaranterStage = ({
</div>
<div className="cu-bottom cd-2-title">
<button
type="button"
className="sign-btn reg-btn"
onClick={() => setStage(2)}
>
<button type="button" className="sign-btn reg-btn" onClick={() => setStage(2)}>
<div>
<div className="btn-img">
<img src={next_reverse} alt="logout" />
</div>
<h3>
{locale === "TKM"
? "Yza"
: locale === "РУС"
? "Назад"
: locale === "ENG"
? "Back"
: "Yza"}
{locale === 'TKM'
? 'Yza'
: locale === 'РУС'
? 'Назад'
: locale === 'ENG'
? 'Back'
: 'Yza'}
</h3>
</div>
</button>
<button
type="submit"
disabled={
passportNumber.length === 6 && accNumber.length === 23
? false
: true
}
className="sign-btn cu-btn"
>
disabled={passportNumber.length === 6 && accNumber.length === 23 ? false : true}
className="sign-btn cu-btn">
<div>
<h3>
{locale === "TKM"
? "Dowam et"
: locale === "РУС"
? "Подтвердить "
: locale === "ENG"
? "Proceed"
: "Dowam et"}
{locale === 'TKM'
? 'Dowam et'
: locale === 'РУС'
? 'Подтвердить '
: locale === 'ENG'
? 'Proceed'
: 'Dowam et'}
</h3>
<div className="btn-img">
<img src={next} alt="logout" />

41
src/components/ImmediateCreditsStages/NotAUser.js
View File

@ -1,42 +1,41 @@
import React, { useContext } from "react";
import { LanguageContext } from "../../backend/LanguageContext";
import React, { useContext } from 'react';
import { LanguageContext } from '../../backend/LanguageContext';
import next from "../../icons/next.svg";
import next_reverse from "../../icons/next-reverse.svg";
import next from '../../icons/next.svg';
import next_reverse from '../../icons/next-reverse.svg';
const NotAUser = ({ setStage, stage }) => {
const NotAUser = ({ setStage, stage, errMessage }) => {
const { locale } = useContext(LanguageContext);
return (
<section className="imm-cs-1">
<form>
<h2 className="notauser-title">
{locale === "TKM"
? "Karzyň kalkulýatory"
: locale === "РУС"
? "Пользователь не обнаружен"
: locale === "ENG"
? "Loan calculator"
: "Karzyň kalkulýatory"}
{locale === 'TKM'
? 'Karzyň kalkulýatory'
: locale === 'РУС'
? errMessage
: locale === 'ENG'
? 'Loan calculator'
: 'Karzyň kalkulýatory'}
</h2>
<div className="cu-bottom cd-2-title">
<button
type="button"
className="sign-btn reg-btn"
onClick={() => setStage((stage) => stage - 2)}
>
onClick={() => setStage((stage) => stage - 2)}>
<div>
<div className="btn-img">
<img src={next_reverse} alt="logout" />
</div>
<h3>
{locale === "TKM"
? "Yza"
: locale === "РУС"
? "Назад"
: locale === "ENG"
? "Back"
: "Yza"}
{locale === 'TKM'
? 'Yza'
: locale === 'РУС'
? 'Назад'
: locale === 'ENG'
? 'Back'
: 'Yza'}
</h3>
</div>
</button>

99
src/components/ImmediateCreditsStages/PhoneAccept.js Normal file
View File

@ -0,0 +1,99 @@
// IMPORT MODULES
import React, { useState, useContext } from 'react';
import { LanguageContext } from '../../backend/LanguageContext';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
// IMPORT IMAGES
import next from '../../icons/next.svg';
import next_reverse from '../../icons/next-reverse.svg';
// import arrow from "../../icons/arrow.svg";
const schema = z.object({
code: z.string().min(1),
// surname: z.string().min(1),
});
const PhoneAccept = ({ setStage }) => {
const { locale } = useContext(LanguageContext);
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: zodResolver(schema),
});
const onSubmit = (data) => {
console.log(data);
};
return (
<section className="imm-cs-1">
<form onSubmit={handleSubmit(onSubmit)}>
<h2 className="cs-2-title">
{locale === 'TKM'
? 'Karzyň kalkulýatory'
: locale === 'РУС'
? 'Введите код'
: locale === 'ENG'
? 'Loan calculator'
: 'Karzyň kalkulýatory'}
</h2>
<div className="imm-credit-form-wrapper">
<div className="input-block">
<label htmlFor="code">
{locale === 'TKM'
? 'At'
: locale === 'РУС'
? 'Код'
: locale === 'ENG'
? 'amount'
: 'At'}
</label>
<input {...register('code')} type="text" id="code" />
<span className="another-option">Отправить код снова</span>
{/* {errors.code && <span>{errors.code.message}</span>} */}
</div>
</div>
<div className="cu-bottom cd-2-title">
<button type="button" className="sign-btn reg-btn" onClick={() => setStage(8)}>
<div>
<div className="btn-img">
<img src={next_reverse} alt="logout" />
</div>
<h3>
{locale === 'TKM'
? 'Yza'
: locale === 'РУС'
? 'Назад'
: locale === 'ENG'
? 'Back'
: 'Yza'}
</h3>
</div>
</button>
<button type="button" className="sign-btn cu-btn" onClick={() => setStage(10)}>
<div>
<h3>
{locale === 'TKM'
? 'Dowam et'
: locale === 'РУС'
? 'Подтвердить '
: locale === 'ENG'
? 'Proceed'
: 'Dowam et'}
</h3>
<div className="btn-img">
<img src={next} alt="logout" />
</div>
</div>
</button>
</div>
</form>
</section>
);
};
export default PhoneAccept;

26
src/components/immediateCredits/ImmediateCreditModal.js
View File

@ -21,6 +21,9 @@ import GuaranterStage from '../ImmediateCreditsStages/GuaranterStage';
import GuaranterInfo from '../ImmediateCreditsStages/GuaranterInfo';
import NotAUser from '../ImmediateCreditsStages/NotAUser';
import CalculateStage from '../ImmediateCreditsStages/CalculateStage';
import AcceptStage from '../ImmediateCreditsStages/AcceptStage';
import PhoneAccept from '../ImmediateCreditsStages/PhoneAccept';
import CardDetails from '../ImmediateCreditsStages/CardDetails';
const ImmediateCreditModal = ({
modalOpen,
@ -35,12 +38,12 @@ const ImmediateCreditModal = ({
const { locale } = useContext(LanguageContext);
const window = useRef();
const [isGuranter, setIsGuranter] = useState(false);
const [err, setErr] = useState(false);
const [data, setData] = useState();
const [loading, setLoading] = useState();
const [error, setError] = useState();
const [errMessage, setErrMessage] = useState('');
const [borrowerData, setBorrowerData] = useState();
const [guaranterData, setGuaranterData] = useState();
const [signRecipient, setSignRecipient] = useState();
@ -48,7 +51,7 @@ const ImmediateCreditModal = ({
const [recepientAmount, setRecepientAmount] = useState(0);
const [creditDuration, setCreditDuration] = useState(1);
console.log('Amount', recepientAmount, 'Credit Duration', creditDuration);
console.log(stage);
return (
<section className={modalOpen ? 'modal credit-modal active' : 'modal credit-modal'}>
@ -269,6 +272,7 @@ const ImmediateCreditModal = ({
setSignRecipient={setSignRecipient}
setMaxAmount={setMaxAmount}
setRecepientAmount={setRecepientAmount}
setErrMessage={setErrMessage}
/>
) : stage === 2 ? (
<BorrowerInfo
@ -277,7 +281,7 @@ const ImmediateCreditModal = ({
borrowerData={borrowerData}
/>
) : stage === 3 ? (
<NotAUser setStage={setStage} stage={stage} />
<NotAUser setStage={setStage} stage={stage} errMessage={errMessage} />
) : stage === 4 ? (
<GuaranterStage
setStage={setStage}
@ -286,6 +290,7 @@ const ImmediateCreditModal = ({
guaranterData={guaranterData}
setGuaranterData={setGuaranterData}
signRecipient={signRecipient}
setErrMessage={setErrMessage}
/>
) : stage === 5 ? (
<GuaranterInfo
@ -294,16 +299,27 @@ const ImmediateCreditModal = ({
guaranterData={guaranterData}
/>
) : stage === 6 ? (
<NotAUser setStage={setStage} stage={stage} />
<NotAUser setStage={setStage} stage={stage} errMessage={errMessage} />
) : stage === 7 ? (
<CalculateStage
isGuranter={isGuranter}
setStage={setStage}
recepientAmount={recepientAmount}
setRecepientAmount={setRecepientAmount}
creditDuration={creditDuration}
setCreditDuration={setCreditDuration}
maxAmount={maxAmount}
/>
) : stage === 8 ? (
<AcceptStage
setStage={setStage}
recepientAmount={recepientAmount}
creditDuration={creditDuration}
/>
) : stage === 9 ? (
<PhoneAccept setStage={setStage} />
) : stage === 10 ? (
<CardDetails setStage={setStage} />
) : (
''
)}

10
src/scss/_immediate-credits.scss
View File

@ -39,6 +39,11 @@
font-size: 1.4rem;
// font-weight: 600;
}
.another-option {
color: $base-green;
cursor: pointer;
}
}
.radio-button {
@ -46,3 +51,8 @@
height: 1.6rem;
border-radius: 0.4rem;
}
.notauser-title {
font-size: 3rem;
color: red;
}