From 6f781ec3616ed5db90ddf389aae948208562f552 Mon Sep 17 00:00:00 2001 From: Kakabay <2kakabayashyrberdyew@gmail.com> Date: Mon, 25 Mar 2024 18:37:18 +0500 Subject: [PATCH] layout done --- .../ImmediateCreditsStages/AcceptStage.js | 128 +++++++++++++++ .../ImmediateCreditsStages/BorrowerStage.js | 2 + .../ImmediateCreditsStages/CalculateStage.js | 5 +- .../ImmediateCreditsStages/CardDetails.js | 99 ++++++++++++ .../ImmediateCreditsStages/GuaranterStage.js | 153 +++++++++--------- .../ImmediateCreditsStages/NotAUser.js | 41 +++-- .../ImmediateCreditsStages/PhoneAccept.js | 99 ++++++++++++ .../immediateCredits/ImmediateCreditModal.js | 26 ++- src/scss/_immediate-credits.scss | 10 ++ 9 files changed, 458 insertions(+), 105 deletions(-) create mode 100644 src/components/ImmediateCreditsStages/AcceptStage.js create mode 100644 src/components/ImmediateCreditsStages/CardDetails.js create mode 100644 src/components/ImmediateCreditsStages/PhoneAccept.js diff --git a/src/components/ImmediateCreditsStages/AcceptStage.js b/src/components/ImmediateCreditsStages/AcceptStage.js new file mode 100644 index 0000000..3178689 --- /dev/null +++ b/src/components/ImmediateCreditsStages/AcceptStage.js @@ -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 ( +
+
+

+ {locale === 'TKM' + ? 'Karzyň kalkulýatory' + : locale === 'РУС' + ? 'Подтвердите данные' + : locale === 'ENG' + ? 'Loan calculator' + : 'Karzyň kalkulýatory'} +

+
+
+ + + {errors.amount && {errors.amount.message}} +
+
+ + + {errors.duration && {errors.duration.message}} +
+
+ + + {/* {errors.phoneNumber && {errors.phoneNumber.message}} */} +
+
+
+ + +
+
+
+ ); +}; + +export default AcceptStage; diff --git a/src/components/ImmediateCreditsStages/BorrowerStage.js b/src/components/ImmediateCreditsStages/BorrowerStage.js index eccec20..9780f99 100644 --- a/src/components/ImmediateCreditsStages/BorrowerStage.js +++ b/src/components/ImmediateCreditsStages/BorrowerStage.js @@ -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) { diff --git a/src/components/ImmediateCreditsStages/CalculateStage.js b/src/components/ImmediateCreditsStages/CalculateStage.js index 13e14f5..3961c62 100644 --- a/src/components/ImmediateCreditsStages/CalculateStage.js +++ b/src/components/ImmediateCreditsStages/CalculateStage.js @@ -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); }}>

diff --git a/src/components/ImmediateCreditsStages/CardDetails.js b/src/components/ImmediateCreditsStages/CardDetails.js new file mode 100644 index 0000000..70137c4 --- /dev/null +++ b/src/components/ImmediateCreditsStages/CardDetails.js @@ -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 ( +
+
+

+ {locale === 'TKM' + ? 'Karzyň kalkulýatory' + : locale === 'РУС' + ? 'Введите реквизиты карты' + : locale === 'ENG' + ? 'Loan calculator' + : 'Karzyň kalkulýatory'} +

+
+
+ + + Оформить карту + {/* {errors.code && {errors.code.message}} */} +
+
+
+ + +
+
+
+ ); +}; + +export default CardDetails; diff --git a/src/components/ImmediateCreditsStages/GuaranterStage.js b/src/components/ImmediateCreditsStages/GuaranterStage.js index 8f15357..bb7f355 100644 --- a/src/components/ImmediateCreditsStages/GuaranterStage.js +++ b/src/components/ImmediateCreditsStages/GuaranterStage.js @@ -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 = ({

- {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'}

- diff --git a/src/components/ImmediateCreditsStages/PhoneAccept.js b/src/components/ImmediateCreditsStages/PhoneAccept.js new file mode 100644 index 0000000..71d9ce2 --- /dev/null +++ b/src/components/ImmediateCreditsStages/PhoneAccept.js @@ -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 ( +
+ +

+ {locale === 'TKM' + ? 'Karzyň kalkulýatory' + : locale === 'РУС' + ? 'Введите код' + : locale === 'ENG' + ? 'Loan calculator' + : 'Karzyň kalkulýatory'} +

+
+
+ + + Отправить код снова + {/* {errors.code && {errors.code.message}} */} +
+
+
+ + +
+ +
+ ); +}; + +export default PhoneAccept; diff --git a/src/components/immediateCredits/ImmediateCreditModal.js b/src/components/immediateCredits/ImmediateCreditModal.js index 0aab4ed..76831d2 100644 --- a/src/components/immediateCredits/ImmediateCreditModal.js +++ b/src/components/immediateCredits/ImmediateCreditModal.js @@ -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 (
@@ -269,6 +272,7 @@ const ImmediateCreditModal = ({ setSignRecipient={setSignRecipient} setMaxAmount={setMaxAmount} setRecepientAmount={setRecepientAmount} + setErrMessage={setErrMessage} /> ) : stage === 2 ? ( ) : stage === 3 ? ( - + ) : stage === 4 ? ( ) : stage === 5 ? ( ) : stage === 6 ? ( - + ) : stage === 7 ? ( + ) : stage === 8 ? ( + + ) : stage === 9 ? ( + + ) : stage === 10 ? ( + ) : ( '' )} diff --git a/src/scss/_immediate-credits.scss b/src/scss/_immediate-credits.scss index be77486..86c7fb3 100644 --- a/src/scss/_immediate-credits.scss +++ b/src/scss/_immediate-credits.scss @@ -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; +}