calculator done
This commit is contained in:
Kakabay
parent
9ecd0d0f16
commit
307e829c40
|
|
@ -1,12 +1,12 @@
|
|||
// 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 next from '../../icons/next.svg';
|
||||
import next_reverse from '../../icons/next-reverse.svg';
|
||||
// import arrow from "../../icons/arrow.svg";
|
||||
|
||||
// const schema = z.object({
|
||||
|
|
@ -36,11 +36,11 @@ const BorrowerInfo = ({ setStage, isGuranter, borrowerData }) => {
|
|||
} = useForm({
|
||||
// resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
name: borrowerData.name ? borrowerData.name : "Loading",
|
||||
surname: borrowerData.surname ? borrowerData.surname : "loading",
|
||||
passportSerial: borrowerData.idSeria ? borrowerData.idSeria : "Loading",
|
||||
passportNumber: borrowerData.idNo ? borrowerData.idNo : "Loading",
|
||||
bankAccount: borrowerData.accountNo ? borrowerData.accountNo : "Loading",
|
||||
name: borrowerData.name ? borrowerData.name : 'Loading',
|
||||
surname: borrowerData.surname ? borrowerData.surname : 'loading',
|
||||
passportSerial: borrowerData.idSeria ? borrowerData.idSeria : 'Loading',
|
||||
passportNumber: borrowerData.idNo ? borrowerData.idNo : 'Loading',
|
||||
bankAccount: borrowerData.accountNo ? borrowerData.accountNo : 'Loading',
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -52,93 +52,84 @@ const BorrowerInfo = ({ setStage, isGuranter, borrowerData }) => {
|
|||
<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">
|
||||
<div className="input-block">
|
||||
<label htmlFor="name">
|
||||
{locale === "TKM"
|
||||
? "At"
|
||||
: locale === "РУС"
|
||||
? "Имя"
|
||||
: locale === "ENG"
|
||||
? "Name"
|
||||
: "At"}
|
||||
{locale === 'TKM'
|
||||
? 'At'
|
||||
: locale === 'РУС'
|
||||
? 'Имя'
|
||||
: locale === 'ENG'
|
||||
? 'Name'
|
||||
: 'At'}
|
||||
</label>
|
||||
<input {...register("name")} type="text" id="name" disabled />
|
||||
<input {...register('name')} type="text" id="name" disabled />
|
||||
{/* {errors.name && <span>{errors.name.message}</span>} */}
|
||||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="surname">
|
||||
{locale === "TKM"
|
||||
? "At"
|
||||
: locale === "РУС"
|
||||
? "Фамилия"
|
||||
: locale === "ENG"
|
||||
? "Surname"
|
||||
: "At"}
|
||||
{locale === 'TKM'
|
||||
? 'At'
|
||||
: locale === 'РУС'
|
||||
? 'Фамилия'
|
||||
: locale === 'ENG'
|
||||
? 'Surname'
|
||||
: 'At'}
|
||||
</label>
|
||||
<input {...register("surname")} type="text" id="surname" disabled />
|
||||
<input {...register('surname')} type="text" id="surname" disabled />
|
||||
{/* {errors.surname && <span>{errors.surname.message}</span>} */}
|
||||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="passport-serial">
|
||||
{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("passportSerial")}
|
||||
type="text"
|
||||
id="passport-serial"
|
||||
disabled
|
||||
/>
|
||||
{errors.passportSerial && (
|
||||
<span>{errors.passportSerial.message}</span>
|
||||
)}
|
||||
<input {...register('passportSerial')} type="text" id="passport-serial" disabled />
|
||||
{errors.passportSerial && <span>{errors.passportSerial.message}</span>}
|
||||
</div>
|
||||
<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 })}
|
||||
{...register('passportNumber', { valueAsNumber: true })}
|
||||
type="number"
|
||||
id="passport-number"
|
||||
disabled
|
||||
/>
|
||||
{errors.passportNumber && (
|
||||
<span>{errors.passportNumber.message}</span>
|
||||
)}
|
||||
{errors.passportNumber && <span>{errors.passportNumber.message}</span>}
|
||||
</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 })}
|
||||
{...register('bankAccount', { valueAsNumber: true })}
|
||||
type="number"
|
||||
id="bank-acc"
|
||||
disabled
|
||||
|
|
@ -148,40 +139,35 @@ const BorrowerInfo = ({ setStage, isGuranter, borrowerData }) => {
|
|||
</div>
|
||||
|
||||
<div className="cu-bottom cd-2-title">
|
||||
<button
|
||||
type="button"
|
||||
className="sign-btn reg-btn"
|
||||
onClick={() => setStage(1)}
|
||||
>
|
||||
<button type="button" className="sign-btn reg-btn" onClick={() => setStage(1)}>
|
||||
<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="button"
|
||||
className="sign-btn cu-btn"
|
||||
onClick={() => setStage(4)}
|
||||
>
|
||||
onClick={() => (isGuranter ? setStage(4) : setStage(7))}>
|
||||
<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" />
|
||||
|
|
@ -192,7 +178,7 @@ const BorrowerInfo = ({ setStage, isGuranter, borrowerData }) => {
|
|||
</form>
|
||||
</section>
|
||||
) : (
|
||||
"Loading"
|
||||
'Loading'
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -30,6 +30,8 @@ const BorrowerStage = ({
|
|||
setIsGuranter,
|
||||
setSignRecipient,
|
||||
setBorrowerData,
|
||||
setMaxAmount,
|
||||
setRecepientAmount,
|
||||
}) => {
|
||||
const { locale } = useContext(LanguageContext);
|
||||
|
||||
|
|
@ -90,6 +92,8 @@ const BorrowerStage = ({
|
|||
const responseJson = await response.json();
|
||||
|
||||
setSignRecipient(responseJson.signRecipient);
|
||||
setRecepientAmount(responseJson.availableAmount);
|
||||
setMaxAmount(responseJson.availableAmount);
|
||||
setErrCode(await responseJson.errCode);
|
||||
setBorrowerData(responseJson);
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,370 @@
|
|||
// IMPORT MODULES
|
||||
import React, { useState, useEffect, useRef, useContext } from 'react';
|
||||
import { LanguageContext } from '../../backend/LanguageContext';
|
||||
|
||||
// IMPORT IMAGES
|
||||
import minus from '../../icons/minus.svg';
|
||||
import plus from '../../icons/plus.svg';
|
||||
import next from '../../icons/next.svg';
|
||||
import logo from '../../icons/logo-transp.svg';
|
||||
|
||||
// IMPORT IMAGES
|
||||
import next_reverse from '../../icons/next-reverse.svg';
|
||||
|
||||
const CalculateStage = ({
|
||||
setStage,
|
||||
isGuranter,
|
||||
recepientAmount,
|
||||
setRecepientAmount,
|
||||
setCreditDuration,
|
||||
maxAmount,
|
||||
}) => {
|
||||
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 [monthlyPayment, setMonthlyPayment] = useState(
|
||||
(inputValue / (radio * 12) + (inputValue / (radio * 12)) * (bet / 100)).toFixed(2),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setMonthlyPayment(
|
||||
(inputValue / (radio * 12) + ((inputValue * (bet / 100)) / 365) * 30).toFixed(2),
|
||||
);
|
||||
|
||||
setRecepientAmount(inputValue);
|
||||
setCreditDuration(radio);
|
||||
}, [inputValue, radio]);
|
||||
|
||||
useEffect(() => {
|
||||
setInputValue(recepientAmount);
|
||||
}, [recepientAmount]);
|
||||
|
||||
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">
|
||||
<form>
|
||||
<div className="cs-2-left">
|
||||
<h2 className="cs-2-title">
|
||||
{locale === 'TKM'
|
||||
? 'Karzyň kalkulýatory'
|
||||
: locale === 'РУС'
|
||||
? 'Калькулятор кредита'
|
||||
: locale === 'ENG'
|
||||
? 'Loan calculator'
|
||||
: 'Karzyň kalkulýatory'}
|
||||
</h2>
|
||||
<div className="input-block">
|
||||
<label htmlFor="sum">
|
||||
{locale === 'TKM'
|
||||
? 'Karzyň möçberi'
|
||||
: locale === 'РУС'
|
||||
? 'Сумма кредита'
|
||||
: locale === 'ENG'
|
||||
? 'Loan amount'
|
||||
: 'Karzyň möçberi'}
|
||||
</label>
|
||||
<div className="cs-2-input">
|
||||
<div className="input-data">
|
||||
<div
|
||||
className="data-img"
|
||||
onClick={() => {
|
||||
input.current.stepDown(1);
|
||||
setInputValue(input.current.value);
|
||||
}}>
|
||||
<img src={minus} alt="minus" />
|
||||
</div>
|
||||
<h6>{Math.ceil(inputValue)}</h6>
|
||||
<div
|
||||
className={`data-img ${inputValue === max ? 'data-img-disabled' : ''}`}
|
||||
onClick={() => {
|
||||
input.current.stepUp(1);
|
||||
setInputValue(input.current.value);
|
||||
}}>
|
||||
<img src={plus} alt="plus" />
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
id="sum"
|
||||
min="100"
|
||||
max={max}
|
||||
defaultValue={inputValue}
|
||||
ref={input}
|
||||
onChange={(e) => {
|
||||
setInputValue(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="credit-term input-block">
|
||||
<label>
|
||||
{locale === 'TKM'
|
||||
? 'Karzyň möhleti'
|
||||
: locale === 'РУС'
|
||||
? 'Срок кредита'
|
||||
: locale === 'ENG'
|
||||
? 'Credit term'
|
||||
: 'Karzyň möhleti'}
|
||||
</label>
|
||||
<div className="term-inputs">
|
||||
<label htmlFor="term2" className={radio === 1 ? 'active' : ''}>
|
||||
1{' '}
|
||||
{locale === 'TKM'
|
||||
? 'ýyl'
|
||||
: locale === 'РУС'
|
||||
? 'год'
|
||||
: locale === 'ENG'
|
||||
? 'year'
|
||||
: 'ýyl'}
|
||||
<input
|
||||
type="radio"
|
||||
name="term"
|
||||
id="term2"
|
||||
onClick={(e) => {
|
||||
if (e.target.checked === true) {
|
||||
setRadio(1);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<label htmlFor="term3" className={radio === 2 ? 'active' : ''}>
|
||||
2{' '}
|
||||
{locale === 'TKM'
|
||||
? 'ýyl'
|
||||
: locale === 'РУС'
|
||||
? 'год'
|
||||
: locale === 'ENG'
|
||||
? 'years'
|
||||
: 'ýyl'}
|
||||
<input
|
||||
type="radio"
|
||||
name="term"
|
||||
id="term3"
|
||||
onClick={(e) => {
|
||||
if (e.target.checked === true) {
|
||||
setRadio(2);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<label htmlFor="term4" className={radio === 3 ? 'active' : ''}>
|
||||
3{' '}
|
||||
{locale === 'TKM'
|
||||
? 'ýyl'
|
||||
: locale === 'РУС'
|
||||
? 'год'
|
||||
: locale === 'ENG'
|
||||
? 'years'
|
||||
: 'ýyl'}
|
||||
<input
|
||||
type="radio"
|
||||
name="term"
|
||||
id="term4"
|
||||
onClick={(e) => {
|
||||
if (e.target.checked === true) {
|
||||
setRadio(3);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-button cs-2-bottom">
|
||||
<button
|
||||
type="button"
|
||||
className="sign-btn reg-btn"
|
||||
onClick={() => {
|
||||
isGuranter ? setStage(5) : setStage(2);
|
||||
}}>
|
||||
<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 cd-btn"
|
||||
onClick={() => {
|
||||
// setStage(8);
|
||||
}}>
|
||||
<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>
|
||||
</div>
|
||||
<div className="cs-2-right">
|
||||
<div className="cs-2-right-inner">
|
||||
<div className="abs-img">
|
||||
<img src={logo} alt="logo" />
|
||||
</div>
|
||||
<div className="cs-2-right-top">
|
||||
<h6>
|
||||
{locale === 'TKM'
|
||||
? 'Her aý tölegi'
|
||||
: locale === 'РУС'
|
||||
? 'Ежемесячный платеж'
|
||||
: locale === 'ENG'
|
||||
? 'Monthly payment'
|
||||
: 'Her aý tölegi'}
|
||||
:
|
||||
</h6>
|
||||
<div className="payment">
|
||||
{/* <div
|
||||
className="data-img"
|
||||
onClick={() => {
|
||||
if (
|
||||
(parseInt(monthlyPayment) -
|
||||
(
|
||||
((inputValue * bet) / 100 / (radio * 365)) *
|
||||
(radio * 30)
|
||||
).toFixed(2)) *
|
||||
12 -
|
||||
1 >
|
||||
100
|
||||
) {
|
||||
setInputValue(
|
||||
(parseInt(monthlyPayment) -
|
||||
(
|
||||
((inputValue * bet) / 100 / (radio * 365)) *
|
||||
(radio * 30)
|
||||
).toFixed(2)) *
|
||||
12 -
|
||||
1
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<img src={minus2} alt="minus" />
|
||||
</div> */}
|
||||
<h5>{monthlyPayment} TMT</h5>
|
||||
{/* <div
|
||||
className="data-img"
|
||||
onClick={() => {
|
||||
if (
|
||||
(parseInt(monthlyPayment) +
|
||||
1 -
|
||||
(
|
||||
((inputValue * bet) / 100 / (radio * 365)) *
|
||||
(radio * 30)
|
||||
).toFixed(2)) *
|
||||
12 <
|
||||
max
|
||||
) {
|
||||
setInputValue(
|
||||
(parseInt(monthlyPayment) +
|
||||
1 -
|
||||
(
|
||||
((inputValue * bet) / 100 / (radio * 365)) *
|
||||
(radio * 30)
|
||||
).toFixed(2)) *
|
||||
12
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<img src={plus2} alt="plus" />
|
||||
</div> */}
|
||||
</div>
|
||||
<div className="percent">
|
||||
<h6>
|
||||
{locale === 'TKM'
|
||||
? 'Göterim töleg'
|
||||
: locale === 'РУС'
|
||||
? 'Процентная ставка'
|
||||
: locale === 'ENG'
|
||||
? 'Interest rate'
|
||||
: 'Göterim töleg'}
|
||||
:
|
||||
</h6>
|
||||
<h5>{bet} %</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="cs-2-right-middle">
|
||||
<div className="cs-2-right-middle-content">
|
||||
<h6>
|
||||
{locale === 'TKM'
|
||||
? 'Pul ýygymy'
|
||||
: locale === 'РУС'
|
||||
? 'Процентный платеж'
|
||||
: locale === 'ENG'
|
||||
? 'Interest payment'
|
||||
: 'UgrPul ýygymyatmak'}
|
||||
:
|
||||
</h6>
|
||||
<h5>{(((inputValue * (bet / 100)) / 365) * 30).toFixed(2)} TMT</h5>
|
||||
</div>
|
||||
<div className="cs-2-right-middle-content">
|
||||
<h6>
|
||||
{locale === 'TKM'
|
||||
? 'Karzyň esasy bergisiniň töleg möçberi'
|
||||
: locale === 'РУС'
|
||||
? 'Платеж для погашения основной суммы'
|
||||
: locale === 'ENG'
|
||||
? 'Principal payment'
|
||||
: 'Karzyň esasy bergisiniň töleg möçberi'}
|
||||
:
|
||||
</h6>
|
||||
<h5>{(inputValue / (radio * 12)).toFixed(2)} TMT</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="cs-2-right-bottom">
|
||||
<h6>
|
||||
{locale === 'TKM'
|
||||
? 'Karz almak üçin bolmaly aýlyk zähmet haky'
|
||||
: locale === 'РУС'
|
||||
? 'Необходимая заработная плата для кредита'
|
||||
: locale === 'ENG'
|
||||
? 'Required salary for a loan'
|
||||
: 'Karz almak üçin bolmaly aýlyk zähmet haky'}
|
||||
:
|
||||
</h6>
|
||||
<h5>{monthlyPayment * 2} TMT</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default CalculateStage;
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
// 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 next from '../../icons/next.svg';
|
||||
import next_reverse from '../../icons/next-reverse.svg';
|
||||
// import arrow from "../../icons/arrow.svg";
|
||||
|
||||
const schema = z.object({
|
||||
|
|
@ -16,13 +16,13 @@ const schema = z.object({
|
|||
passportNumber: z
|
||||
.number()
|
||||
.int()
|
||||
.gte(100000, { message: "Must be equal to 6 digits" })
|
||||
.lte(999999, { message: "Must be equal to 6 digits" }),
|
||||
.gte(100000, { message: 'Must be equal to 6 digits' })
|
||||
.lte(999999, { message: 'Must be equal to 6 digits' }),
|
||||
bankAccount: z
|
||||
.number()
|
||||
.int()
|
||||
.gte(100000, { message: "Must be equal to 6 digits" })
|
||||
.lte(999999, { message: "Must be equal to 6 digits" }),
|
||||
.gte(100000, { message: 'Must be equal to 6 digits' })
|
||||
.lte(999999, { message: 'Must be equal to 6 digits' }),
|
||||
// clientType: z.string(),
|
||||
});
|
||||
|
||||
|
|
@ -36,13 +36,11 @@ const GuaranterInfo = ({ setStage, isGuranter, guaranterInfo }) => {
|
|||
} = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
name: guaranterInfo.name ? guaranterInfo.name : "Loading",
|
||||
surname: guaranterInfo.surname ? guaranterInfo.surname : "loading",
|
||||
passportSerial: guaranterInfo.idSeria ? guaranterInfo.idSeria : "Loading",
|
||||
passportNumber: guaranterInfo.idNo ? guaranterInfo.idNo : "Loading",
|
||||
bankAccount: guaranterInfo.accountNo
|
||||
? guaranterInfo.accountNo
|
||||
: "Loading",
|
||||
name: guaranterInfo.name ? guaranterInfo.name : 'Loading',
|
||||
surname: guaranterInfo.surname ? guaranterInfo.surname : 'loading',
|
||||
passportSerial: guaranterInfo.idSeria ? guaranterInfo.idSeria : 'Loading',
|
||||
passportNumber: guaranterInfo.idNo ? guaranterInfo.idNo : 'Loading',
|
||||
bankAccount: guaranterInfo.accountNo ? guaranterInfo.accountNo : 'Loading',
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -56,93 +54,84 @@ const GuaranterInfo = ({ setStage, isGuranter, guaranterInfo }) => {
|
|||
<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">
|
||||
<div className="input-block">
|
||||
<label htmlFor="name">
|
||||
{locale === "TKM"
|
||||
? "At"
|
||||
: locale === "РУС"
|
||||
? "Имя"
|
||||
: locale === "ENG"
|
||||
? "Name"
|
||||
: "At"}
|
||||
{locale === 'TKM'
|
||||
? 'At'
|
||||
: locale === 'РУС'
|
||||
? 'Имя'
|
||||
: locale === 'ENG'
|
||||
? 'Name'
|
||||
: 'At'}
|
||||
</label>
|
||||
<input {...register("name")} type="text" id="name" disabled />
|
||||
<input {...register('name')} type="text" id="name" disabled />
|
||||
{errors.name && <span>{errors.name.message}</span>}
|
||||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="surname">
|
||||
{locale === "TKM"
|
||||
? "At"
|
||||
: locale === "РУС"
|
||||
? "Фамилия"
|
||||
: locale === "ENG"
|
||||
? "Surname"
|
||||
: "At"}
|
||||
{locale === 'TKM'
|
||||
? 'At'
|
||||
: locale === 'РУС'
|
||||
? 'Фамилия'
|
||||
: locale === 'ENG'
|
||||
? 'Surname'
|
||||
: 'At'}
|
||||
</label>
|
||||
<input {...register("surname")} type="text" id="surname" disabled />
|
||||
<input {...register('surname')} type="text" id="surname" disabled />
|
||||
{errors.surname && <span>{errors.surname.message}</span>}
|
||||
</div>
|
||||
<div className="input-block">
|
||||
<label htmlFor="passport-serial">
|
||||
{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("passportSerial")}
|
||||
type="text"
|
||||
id="passport-serial"
|
||||
disabled
|
||||
/>
|
||||
{errors.passportSerial && (
|
||||
<span>{errors.passportSerial.message}</span>
|
||||
)}
|
||||
<input {...register('passportSerial')} type="text" id="passport-serial" disabled />
|
||||
{errors.passportSerial && <span>{errors.passportSerial.message}</span>}
|
||||
</div>
|
||||
<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 })}
|
||||
{...register('passportNumber', { valueAsNumber: true })}
|
||||
type="number"
|
||||
id="passport-number"
|
||||
disabled
|
||||
/>
|
||||
{errors.passportNumber && (
|
||||
<span>{errors.passportNumber.message}</span>
|
||||
)}
|
||||
{errors.passportNumber && <span>{errors.passportNumber.message}</span>}
|
||||
</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 })}
|
||||
{...register('bankAccount', { valueAsNumber: true })}
|
||||
type="number"
|
||||
id="bank-acc"
|
||||
disabled
|
||||
|
|
@ -151,40 +140,32 @@ const GuaranterInfo = ({ setStage, isGuranter, guaranterInfo }) => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="cu-bottom cd-2-title">
|
||||
<button
|
||||
type="button"
|
||||
className="sign-btn reg-btn"
|
||||
onClick={() => setStage(3)}
|
||||
>
|
||||
<button type="button" className="sign-btn reg-btn" onClick={() => setStage(3)}>
|
||||
<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="button"
|
||||
className="sign-btn cu-btn"
|
||||
onClick={() => setStage(4)}
|
||||
>
|
||||
<button type="button" className="sign-btn cu-btn" onClick={() => setStage(7)}>
|
||||
<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" />
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import BorrowerInfo from '../ImmediateCreditsStages/BorrowerInfo';
|
|||
import GuaranterStage from '../ImmediateCreditsStages/GuaranterStage';
|
||||
import GuaranterInfo from '../ImmediateCreditsStages/GuaranterInfo';
|
||||
import NotAUser from '../ImmediateCreditsStages/NotAUser';
|
||||
import CalculateStage from '../ImmediateCreditsStages/CalculateStage';
|
||||
|
||||
const ImmediateCreditModal = ({
|
||||
modalOpen,
|
||||
|
|
@ -43,6 +44,11 @@ const ImmediateCreditModal = ({
|
|||
const [borrowerData, setBorrowerData] = useState();
|
||||
const [guaranterData, setGuaranterData] = useState();
|
||||
const [signRecipient, setSignRecipient] = useState();
|
||||
const [maxAmount, setMaxAmount] = useState();
|
||||
const [recepientAmount, setRecepientAmount] = useState(0);
|
||||
const [creditDuration, setCreditDuration] = useState(1);
|
||||
|
||||
console.log('Amount', recepientAmount, 'Credit Duration', creditDuration);
|
||||
|
||||
return (
|
||||
<section className={modalOpen ? 'modal credit-modal active' : 'modal credit-modal'}>
|
||||
|
|
@ -261,17 +267,14 @@ const ImmediateCreditModal = ({
|
|||
setBorrowerData={setBorrowerData}
|
||||
borrowerData={borrowerData}
|
||||
setSignRecipient={setSignRecipient}
|
||||
setMaxAmount={setMaxAmount}
|
||||
setRecepientAmount={setRecepientAmount}
|
||||
/>
|
||||
) : stage === 2 ? (
|
||||
<BorrowerInfo
|
||||
setStage={setStage}
|
||||
isGuranter={isGuranter}
|
||||
borrowerData={borrowerData}
|
||||
// data={data}
|
||||
// setData={setData}
|
||||
// immediatCreditData={immediatCreditData}
|
||||
// id={id}
|
||||
// setId={setId}
|
||||
/>
|
||||
) : stage === 3 ? (
|
||||
<NotAUser setStage={setStage} stage={stage} />
|
||||
|
|
@ -283,25 +286,24 @@ const ImmediateCreditModal = ({
|
|||
guaranterData={guaranterData}
|
||||
setGuaranterData={setGuaranterData}
|
||||
signRecipient={signRecipient}
|
||||
// data={data}
|
||||
// setData={setData}
|
||||
// immediatCreditData={immediatCreditData}
|
||||
// id={id}
|
||||
// setId={setId}
|
||||
/>
|
||||
) : stage === 5 ? (
|
||||
<GuaranterInfo
|
||||
setStage={setStage}
|
||||
isGuranter={isGuranter}
|
||||
guaranterData={guaranterData}
|
||||
// data={data}
|
||||
// setData={setData}
|
||||
// immediatCreditData={immediatCreditData}
|
||||
// id={id}
|
||||
// setId={setId}
|
||||
/>
|
||||
) : stage === 6 ? (
|
||||
<NotAUser setStage={setStage} stage={stage} />
|
||||
) : stage === 7 ? (
|
||||
<CalculateStage
|
||||
isGuranter={isGuranter}
|
||||
setStage={setStage}
|
||||
recepientAmount={recepientAmount}
|
||||
setRecepientAmount={setRecepientAmount}
|
||||
setCreditDuration={setCreditDuration}
|
||||
maxAmount={maxAmount}
|
||||
/>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -159,6 +159,17 @@
|
|||
img {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.data-img-disabled {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
|
||||
img {
|
||||
opacity: 0.5;
|
||||
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cs-2-left {
|
||||
|
|
@ -444,8 +455,8 @@
|
|||
.input-data {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"tp tp"
|
||||
"bt1 bt2";
|
||||
'tp tp'
|
||||
'bt1 bt2';
|
||||
h6 {
|
||||
grid-area: tp;
|
||||
text-align: center;
|
||||
|
|
|
|||
Loading…
Reference in New Issue