From 307e829c407f7a6a2ca8136fd43a2d69a1d1791c Mon Sep 17 00:00:00 2001
From: Kakabay <2kakabayashyrberdyew@gmail.com>
Date: Mon, 25 Mar 2024 17:47:39 +0500
Subject: [PATCH] calculator done

---
 .../ImmediateCreditsStages/BorrowerInfo.js    | 170 ++++----
 .../ImmediateCreditsStages/BorrowerStage.js   |   4 +
 .../ImmediateCreditsStages/CalculateStage.js  | 370 ++++++++++++++++++
 .../ImmediateCreditsStages/GuaranterInfo.js   | 181 ++++-----
 .../immediateCredits/ImmediateCreditModal.js  |  32 +-
 src/scss/_credit-modal.scss                   |  15 +-
 6 files changed, 563 insertions(+), 209 deletions(-)
 create mode 100644 src/components/ImmediateCreditsStages/CalculateStage.js

diff --git a/src/components/ImmediateCreditsStages/BorrowerInfo.js b/src/components/ImmediateCreditsStages/BorrowerInfo.js
index a51d586..c2474cd 100644
--- a/src/components/ImmediateCreditsStages/BorrowerInfo.js
+++ b/src/components/ImmediateCreditsStages/BorrowerInfo.js
@@ -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'
   );
 };
 
diff --git a/src/components/ImmediateCreditsStages/BorrowerStage.js b/src/components/ImmediateCreditsStages/BorrowerStage.js
index 5d1647e..eccec20 100644
--- a/src/components/ImmediateCreditsStages/BorrowerStage.js
+++ b/src/components/ImmediateCreditsStages/BorrowerStage.js
@@ -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);
 
diff --git a/src/components/ImmediateCreditsStages/CalculateStage.js b/src/components/ImmediateCreditsStages/CalculateStage.js
new file mode 100644
index 0000000..13e14f5
--- /dev/null
+++ b/src/components/ImmediateCreditsStages/CalculateStage.js
@@ -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;
diff --git a/src/components/ImmediateCreditsStages/GuaranterInfo.js b/src/components/ImmediateCreditsStages/GuaranterInfo.js
index b0fa50b..2a3b227 100644
--- a/src/components/ImmediateCreditsStages/GuaranterInfo.js
+++ b/src/components/ImmediateCreditsStages/GuaranterInfo.js
@@ -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" />
diff --git a/src/components/immediateCredits/ImmediateCreditModal.js b/src/components/immediateCredits/ImmediateCreditModal.js
index 6ff1175..0aab4ed 100644
--- a/src/components/immediateCredits/ImmediateCreditModal.js
+++ b/src/components/immediateCredits/ImmediateCreditModal.js
@@ -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}
+                />
               ) : (
                 ''
               )}
diff --git a/src/scss/_credit-modal.scss b/src/scss/_credit-modal.scss
index 68d10fd..476d605 100644
--- a/src/scss/_credit-modal.scss
+++ b/src/scss/_credit-modal.scss
@@ -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;