build

sidebar height media query added
build styles
2024-07-08 13:22:06 +05:00 · 2024-07-08 13:18:41 +05:00 · 2024-07-08 12:19:54 +05:00 · 2024-07-08 12:18:45 +05:00 · 2024-07-08 11:57:11 +05:00 · 2024-07-08 11:40:41 +05:00
62 changed files with 15257 additions and 20540 deletions
--- a/.env
+++ b/.env
@ -0,0 +1 @@
+GENERATE_SOURCEMAP=false;
--- a/build/asset-manifest.json
+++ b/build/asset-manifest.json
@ -1,7 +1,7 @@
 {
  "files": {
-    "main.css": "/static/css/main.f51c8969.css",
-    "main.js": "/static/js/main.d94b0863.js",
+    "main.css": "/static/css/main.30999d98.css",
+    "main.js": "/static/js/main.2f846226.js",
    "static/media/logo-transp.svg": "/static/media/logo-transp.66d6235f12fb5d9a6264c592bce58c5a.svg",
    "static/media/logo-bg.jpg": "/static/media/logo-bg.1d55df78b7376108f96c.jpg",
    "static/media/credit-card.jpg": "/static/media/credit-card.ff2990f7d50439a8f34d.jpg",
@ -32,8 +32,8 @@
    "static/media/edit.svg": "/static/media/edit.f04f9b21b9f585bc059183ca447e883b.svg",
    "static/media/credit6.svg": "/static/media/credit6.a21da4d3a0d502acdd33a24ca161c3e4.svg",
    "static/media/task.svg": "/static/media/task.a21da4d3a0d502acdd33a24ca161c3e4.svg",
-    "static/media/topup-black.svg": "/static/media/topup-black.e45d3a054706d3797334e462739b85ea.svg",
-    "static/media/topup.svg": "/static/media/topup.2bfe76731f2156d07e5e33888c9325e6.svg",
+    "static/media/topup-black.svg": "/static/media/topup-black.603b73e605952a6eabd6bf662e38bbb1.svg",
+    "static/media/topup.svg": "/static/media/topup.a89621c10a2c6977ec53b7c82b69ab92.svg",
    "static/media/user.svg": "/static/media/user.1edbaf08b8a73a42744cfa2a9a55d0ff.svg",
    "static/media/wifi.svg": "/static/media/wifi.2bacc2f134adb4f3817304c8d8ef41dd.svg",
    "static/media/user-black.svg": "/static/media/user-black.dc11738a24d21930a3ccfd02e31c6422.svg",
@ -65,12 +65,10 @@
    "static/media/lines.svg": "/static/media/lines.f57f3a2b0957a77869601f6d6a220791.svg",
    "static/media/arrow-gray.svg": "/static/media/arrow-gray.c688e9bf277186332d33431cd6f52c8e.svg",
    "static/media/arrow-down.svg": "/static/media/arrow-down.2ec2ec0ddf677f60c1aa23e6d1abdc8d.svg",
-    "static/media/arrow.svg": "/static/media/arrow.c8492a68102634ab2875008b3e67164c.svg",
-    "main.f51c8969.css.map": "/static/css/main.f51c8969.css.map",
-    "main.d94b0863.js.map": "/static/js/main.d94b0863.js.map"
+    "static/media/arrow.svg": "/static/media/arrow.c8492a68102634ab2875008b3e67164c.svg"
  },
  "entrypoints": [
-    "static/css/main.f51c8969.css",
-    "static/js/main.d94b0863.js"
+    "static/css/main.30999d98.css",
+    "static/js/main.2f846226.js"
  ]
 }
--- a/build/index.html
+++ b/build/index.html
@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/><meta name="theme-color" content="#000000"/><meta name="Content-Security-Policy" content="default-src 'self'; script-src 'self' www.google.com www.gstatic.com; style-src 'self' https: 'unsafe-inline'; frame-src www.google.com;"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Shahsy Otag</title><script defer="defer" src="/static/js/main.d94b0863.js"></script><link href="/static/css/main.f51c8969.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="//www.google.com/recaptcha/api.js" nonce="{NONCE}" async defer="defer"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/><meta name="theme-color" content="#000000"/><meta name="Content-Security-Policy" content="default-src https://shahsyotag.halkbank.gov.tm 'self'; content-src 'self' https://shahsyotag.halkbank.gov.tm; script-src 'self' www.google.com www.gstatic.com; style-src 'self' https: 'unsafe-inline'; frame-src www.google.com;"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Shahsy Otag</title><script defer="defer" src="/static/js/main.2f846226.js"></script><link href="/static/css/main.30999d98.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="//www.google.com/recaptcha/api.js" nonce="{NONCE}" async defer="defer"></script></body></html>
--- a/build/static/css/main.30999d98.css
+++ b/build/static/css/main.30999d98.css
--- a/build/static/css/main.f51c8969.css
+++ b/build/static/css/main.f51c8969.css
--- a/build/static/css/main.f51c8969.css.map
+++ b/build/static/css/main.f51c8969.css.map
--- a/build/static/js/main.2f846226.js
+++ b/build/static/js/main.2f846226.js
--- a/build/static/js/main.2f846226.js.LICENSE.txt
+++ b/build/static/js/main.2f846226.js.LICENSE.txt
@ -5,7 +5,7 @@ object-assign
 */

 /**
- * React Router DOM v6.2.1
+ * @remix-run/router v1.17.1
 *
 * Copyright (c) Remix Software Inc.
 *
@ -16,7 +16,18 @@ object-assign
 */

 /**
- * React Router v6.2.1
+ * React Router DOM v6.24.1
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.24.1
 *
 * Copyright (c) Remix Software Inc.
 *
--- a/build/static/js/main.d94b0863.js
+++ b/build/static/js/main.d94b0863.js
--- a/build/static/js/main.d94b0863.js.map
+++ b/build/static/js/main.d94b0863.js.map
--- a/build/static/media/topup-black.603b73e605952a6eabd6bf662e38bbb1.svg
+++ b/build/static/media/topup-black.603b73e605952a6eabd6bf662e38bbb1.svg
--- a/build/static/media/topup.a89621c10a2c6977ec53b7c82b69ab92.svg
+++ b/build/static/media/topup.a89621c10a2c6977ec53b7c82b69ab92.svg
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -3,21 +3,25 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+    "@hookform/resolvers": "^3.3.4",
    "@testing-library/jest-dom": "5.16.1",
    "@testing-library/react": "12.1.2",
    "@testing-library/user-event": "13.5.0",
    "axios": "^0.26.0",
+    "node": "^14.15.1",
    "node-sass": "^7.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-google-recaptcha": "^2.1.0",
+    "react-hook-form": "^7.51.1",
    "react-router-dom": "^6.2.1",
    "react-scripts": "^5.0.0",
-    "web-vitals": "2.1.4"
+    "web-vitals": "2.1.4",
+    "zod": "^3.22.4"
  },
  "scripts": {
    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
--- a/public/index.html
+++ b/public/index.html
@ -3,14 +3,11 @@
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self' www.google.com www.gstatic.com; style-src 'self' https: 'unsafe-inline'; frame-src www.google.com;"
+      content="default-src https://shahsyotag.halkbank.gov.tm 'self'; content-src 'self' https://shahsyotag.halkbank.gov.tm; script-src 'self' www.google.com www.gstatic.com; style-src 'self' https: 'unsafe-inline'; frame-src www.google.com;"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

@ -21,11 +18,6 @@
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
-    <script
-      src="//www.google.com/recaptcha/api.js"
-      nonce="{NONCE}"
-      async
-      defer
-    ></script>
+    <script src="//www.google.com/recaptcha/api.js" nonce="{NONCE}" async defer></script>
  </body>
 </html>
--- a/src/App.js
+++ b/src/App.js
@ -1,57 +1,55 @@
 // IMPORT MODULES
-import React, { useState, useEffect, useMemo } from "react";
-import { Routes, Route } from "react-router-dom";
-import { UserContext } from "./backend/UserContext";
-import { LanguageContext } from "./backend/LanguageContext";
+import React, { useState, useEffect, useMemo } from 'react';
+import { Routes, Route } from 'react-router-dom';
+import { UserContext } from './backend/UserContext';
+import { LanguageContext } from './backend/LanguageContext';

 // IMPORT FUNCTIONS
-import { getUserInfo } from "./backend/getUserInfo";
+import { getUserInfo } from './backend/getUserInfo';

 // IMPORT STYLES
-import "./scss/style.scss";
+import './scss/style.scss';

 // IMPORT INNER PAGES
-import Base from "./pages/Base";
-import Cards from "./pages/Cards";
-import Credits from "./pages/Credits";
-import ContactUs from "./pages/ContactUs";
-import Recovery from "./pages/Recovery";
-import Profile from "./pages/Profile";
-import SuccessPage from "./pages/SuccessPage";
-import ErrorPage from "./pages/ErrorPage";
-import Topup from "./pages/Topup";
+import Base from './pages/Base';
+import Cards from './pages/Cards';
+import Credits from './pages/Credits';
+import ImmediateCredit from './pages/ImmediateCredit';
+import ContactUs from './pages/ContactUs';
+import Recovery from './pages/Recovery';
+import Profile from './pages/Profile';
+import SuccessPage from './pages/SuccessPage';
+import ErrorPage from './pages/ErrorPage';
+import Topup from './pages/Topup';

 // IMPORT PAGES
-import Main from "./pages/Main";
-import SignIn from "./pages/SignIn";
-import SignUp from "./pages/SignUp";
-import Home from "./pages/Home";
-import PaymentResult from "./pages/PaymentResult";
-import Redirect from "./pages/Redirect";
+import Main from './pages/Main';
+import SignIn from './pages/SignIn';
+import SignUp from './pages/SignUp';
+import Home from './pages/Home';
+import PaymentResult from './pages/PaymentResult';
+import Redirect from './pages/Redirect';

 // IMPORT COMPONENTS
-import Loader from "./components/global/Loader";
+import Loader from './components/global/Loader';

 // URL
-import { destination } from "./destinationUrl";
+import { destination } from './destinationUrl';

 const App = () => {
-  const loginUrl = destination + "/me";
+  const loginUrl = destination + '/me';
  const [user, setUser] = useState();
  const [locale, setLocale] = useState(
-    localStorage.getItem("userLanguage")
-      ? localStorage.getItem("userLanguage")
-      : "TKM"
+    localStorage.getItem('userLanguage') ? localStorage.getItem('userLanguage') : 'TKM',
  );
+
  const [loaderActive, setLoaderActive] = useState(false);
  const providerValue = useMemo(() => ({ user, setUser }), [user, setUser]);
-  const languageValue = useMemo(
-    () => ({ locale, setLocale }),
-    [locale, setLocale]
-  );
+  const languageValue = useMemo(() => ({ locale, setLocale }), [locale, setLocale]);
+
  useEffect(() => {
-    const userLanguage = localStorage.getItem("userLanguage");
-    const userToken = localStorage.getItem("userToken");
+    const userLanguage = localStorage.getItem('userLanguage');
+    const userToken = localStorage.getItem('userToken');
    // const params = new URLSearchParams(window.location.search);
    // const init_lang = params.get("init_lang");
    setLoaderActive(true);
@ -70,11 +68,11 @@ const App = () => {
    <LanguageContext.Provider value={languageValue}>
      <UserContext.Provider value={providerValue}>
        <div className="App">
-          {loaderActive ? <Loader /> : ""}
+          {loaderActive ? <Loader /> : ''}
          <Routes>
-            <Route path="/ru" element={<Redirect lang={"ENG"} />} />
-            <Route path="/ru" element={<Redirect lang={"РУС"} />} />
-            <Route path="/tm" element={<Redirect lang={"TKM"} />} />
+            <Route path="/ru" element={<Redirect lang={'ENG'} />} />
+            <Route path="/ru" element={<Redirect lang={'РУС'} />} />
+            <Route path="/tm" element={<Redirect lang={'TKM'} />} />
            <Route path="/" element={<Main />} />
            <Route path="/sign-in" element={<SignIn stage={1} />} />
            <Route path="/sign-in-direct" element={<SignIn stage={2} />} />
@ -82,15 +80,10 @@ const App = () => {
            <Route path="/home" element={<Home ChildEl={Base} />} />
            <Route path="/home/cards" element={<Home ChildEl={Cards} />} />
            <Route path="/home/credits" element={<Home ChildEl={Credits} />} />
+            <Route path="/home/immediate-credits" element={<Home ChildEl={ImmediateCredit} />} />
            <Route path="/home/topup" element={<Home ChildEl={Topup} />} />
-            <Route
-              path="/home/contact-us"
-              element={<Home ChildEl={ContactUs} />}
-            />
-            <Route
-              path="/home/recovery"
-              element={<Home ChildEl={Recovery} />}
-            />
+            <Route path="/home/contact-us" element={<Home ChildEl={ContactUs} />} />
+            <Route path="/home/recovery" element={<Home ChildEl={Recovery} />} />
            <Route path="/home/profile" element={<Home ChildEl={Profile} />} />
            <Route path="/payment-result" element={<PaymentResult />} />
            <Route path="/success" element={<SuccessPage />} />
--- a/src/backend/sendRequest.js
+++ b/src/backend/sendRequest.js
@ -90,7 +90,7 @@ export const sendTopupRequest = (
  form.append("passport_series", data.passport);
  form.append("passport_by", data.p_address);
  form.append("region", data.region);
-  form.append("place_of_residence", data.place_of_residence);
+  form.append("place_of_residence", data.address);
  form.append("comment", data.message);
  form.append("date", `${dd}.${mm}.${yyyy}`);
  axios
--- a/src/components/CardStages/CardStage1.js
+++ b/src/components/CardStages/CardStage1.js
@ -1,53 +1,43 @@
 // IMPORT MODULES
-import React, { useState, useEffect, useContext } from "react";
-import { LanguageContext } from "../../backend/LanguageContext";
+import React, { useState, useEffect, useContext } from 'react';
+import { LanguageContext } from '../../backend/LanguageContext';

 // IMPORT COMPONENTS
-import CustomSelect from "../global/CustomSelect";
+import CustomSelect from '../global/CustomSelect';

 // IMPORT IMAGES
-import credit from "../../images/credit-card.jpg";
-import next from "../../icons/next.svg";
+import credit from '../../images/credit-card.jpg';
+import next from '../../icons/next.svg';

 const CardStage1 = ({ setStage, data, setData, cardData, req, setReq }) => {
  const { locale } = useContext(LanguageContext);
  const [price, setPrice] = useState(0);
-  const [input, setInput] = useState(
-    data.selected_card ? data.selected_card : false
-  );
+  const [input, setInput] = useState(data.selected_card ? data.selected_card : false);
  const [inputValid, setInputValid] = useState(
-    data.selected_card_localized ? data.selected_card_localized : false
+    data.selected_card_localized ? data.selected_card_localized : false,
  );
  const [id, setId] = useState(1);
  const [img, setImg] = useState(credit);
  useEffect(() => {
-    if (inputValid !== "" && cardData) {
-      console.log(JSON.parse(cardData.data[0].translations[1].attribute_data));
+    if (inputValid !== '' && cardData) {
      cardData.data.map((el) => {
        if (
          Object.values(el).includes(inputValid) ||
          Object.values(
-            JSON.parse(
-              el.translations.find((els) => els.locale === "ru").attribute_data
-            )
+            JSON.parse(el.translations.find((els) => els.locale === 'ru').attribute_data),
          ).includes(inputValid) ||
          Object.values(
-            JSON.parse(
-              el.translations.find((els) => els.locale === "en").attribute_data
-            )
+            JSON.parse(el.translations.find((els) => els.locale === 'en').attribute_data),
          ).includes(inputValid)
        ) {
-          console.log(el.id);
          setId(el.id);
          setPrice(el.card_cost);
          setReq({
            TKM: el.documents,
-            RUS: JSON.parse(
-              el.translations.find((els) => els.locale === "ru").attribute_data
-            ).documents,
-            ENG: JSON.parse(
-              el.translations.find((els) => els.locale === "en").attribute_data
-            ).documents,
+            RUS: JSON.parse(el.translations.find((els) => els.locale === 'ru').attribute_data)
+              .documents,
+            ENG: JSON.parse(el.translations.find((els) => els.locale === 'en').attribute_data)
+              .documents,
          });
        }
      });
@ -64,61 +54,60 @@ const CardStage1 = ({ setStage, data, setData, cardData, req, setReq }) => {
      });
    }
  }, [id]);
+
  return (
    <section className="card-stage-1">
      <form>
        <div className="input-block">
          <label htmlFor="card">
-            {locale === "TKM"
-              ? "Kartyň görnüşini saýlaň"
-              : locale === "РУС"
-              ? "Выберите вид карты"
-              : locale === "ENG"
-              ? "Choose card type"
-              : "Kartyň görnüşini saýlaň"}
+            {locale === 'TKM'
+              ? 'Kartyň görnüşini saýlaň'
+              : locale === 'РУС'
+              ? 'Выберите вид карты'
+              : locale === 'ENG'
+              ? 'Choose card type'
+              : 'Kartyň görnüşini saýlaň'}
          </label>
          <CustomSelect
            items={
              cardData
-                ? locale === "ENG"
+                ? locale === 'ENG'
                  ? cardData.data.map((el) =>
-                      el.translations.find((els) => els.locale === "en")
+                      el.translations.find((els) => els.locale === 'en')
                        ? JSON.parse(
-                            el.translations.find((els) => els.locale === "en")
-                              .attribute_data
+                            el.translations.find((els) => els.locale === 'en').attribute_data,
                          ).name
-                        : ""
+                        : '',
                    )
-                  : locale === "РУС"
+                  : locale === 'РУС'
                  ? cardData.data.map((el) =>
-                      el.translations.find((els) => els.locale === "ru")
+                      el.translations.find((els) => els.locale === 'ru')
                        ? JSON.parse(
-                            el.translations.find((els) => els.locale === "ru")
-                              .attribute_data
+                            el.translations.find((els) => els.locale === 'ru').attribute_data,
                          ).name
-                        : ""
+                        : '',
                    )
-                  : locale === "TKM"
+                  : locale === 'TKM'
                  ? cardData.data.map((el) => el.name)
                  : cardData.data.map((el) => el.name)
-                : [""]
+                : ['']
            }
-            customId={"card"}
-            blockName={"card-1-select"}
-            elName={"card-1-select-el"}
-            name={"card-type"}
+            customId={'card'}
+            blockName={'card-1-select'}
+            elName={'card-1-select-el'}
+            name={'card-type'}
            stateSetter={(e) => {
              setInputValid(e);
            }}
            eTarget={true}
            placeholder={
-              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'
            }
            defaultValue={inputValid}
          />
@ -130,184 +119,172 @@ const CardStage1 = ({ setStage, data, setData, cardData, req, setReq }) => {
            </div>
            <div className="cd-text">
              <h2>
-                HalkBank -{" "}
+                HalkBank -{' '}
                {cardData
-                  ? locale === "ENG"
+                  ? locale === 'ENG'
                    ? cardData.data.map((el) =>
                        el.id === id
-                          ? el.translations.find((els) => els.locale === "en")
+                          ? el.translations.find((els) => els.locale === 'en')
                            ? JSON.parse(
-                                el.translations.find(
-                                  (els) => els.locale === "en"
-                                ).attribute_data
+                                el.translations.find((els) => els.locale === 'en').attribute_data,
                              ).name
-                            : ""
-                          : ""
+                            : ''
+                          : '',
                      )
-                    : locale === "РУС"
+                    : locale === 'РУС'
                    ? cardData.data.map((el) =>
                        el.id === id
-                          ? el.translations.find((els) => els.locale === "ru")
+                          ? el.translations.find((els) => els.locale === 'ru')
                            ? JSON.parse(
-                                el.translations.find(
-                                  (els) => els.locale === "ru"
-                                ).attribute_data
+                                el.translations.find((els) => els.locale === 'ru').attribute_data,
                              ).name
-                            : ""
-                          : ""
+                            : ''
+                          : '',
                      )
-                    : locale === "TKM"
-                    ? cardData.data.map((el) => (el.id === id ? el.name : ""))
-                    : cardData.data.map((el) => (el.id === id ? el.name : ""))
-                  : locale === "TKM"
-                  ? "Aýlyk karty"
-                  : locale === "РУС"
-                  ? "Зарплатная карта"
-                  : locale === "ENG"
-                  ? "Salary card"
-                  : "Aýlyk karty"}
+                    : locale === 'TKM'
+                    ? cardData.data.map((el) => (el.id === id ? el.name : ''))
+                    : cardData.data.map((el) => (el.id === id ? el.name : ''))
+                  : locale === 'TKM'
+                  ? 'Aýlyk karty'
+                  : locale === 'РУС'
+                  ? 'Зарплатная карта'
+                  : locale === 'ENG'
+                  ? 'Salary card'
+                  : 'Aýlyk karty'}
              </h2>
              <h3>
                {cardData
-                  ? locale === "ENG"
+                  ? locale === 'ENG'
                    ? cardData.data.map((el) =>
                        el.id === id
-                          ? el.translations.find((els) => els.locale === "en")
+                          ? el.translations.find((els) => els.locale === 'en')
                            ? JSON.parse(
-                                el.translations.find(
-                                  (els) => els.locale === "en"
-                                ).attribute_data
+                                el.translations.find((els) => els.locale === 'en').attribute_data,
                              ).text
-                            : ""
-                          : ""
+                            : ''
+                          : '',
                      )
-                    : locale === "РУС"
+                    : locale === 'РУС'
                    ? cardData.data.map((el) =>
                        el.id === id
-                          ? el.translations.find((els) => els.locale === "ru")
+                          ? el.translations.find((els) => els.locale === 'ru')
                            ? JSON.parse(
-                                el.translations.find(
-                                  (els) => els.locale === "ru"
-                                ).attribute_data
+                                el.translations.find((els) => els.locale === 'ru').attribute_data,
                              ).text
-                            : ""
-                          : ""
+                            : ''
+                          : '',
                      )
-                    : locale === "TKM"
-                    ? cardData.data.map((el) => (el.id === id ? el.text : ""))
-                    : cardData.data.map((el) => (el.id === id ? el.text : ""))
-                  : locale === "TKM"
-                  ? "Müşderiniň bankymyzdan alan karz pul serişdeleri “Karz kartyna geçirilýär . Müşderi “Karz karty” bank karty üsti bilen ähli nagt däl hasaplaşyk töleglerini amala aşyrýar."
-                  : locale === "РУС"
-                  ? "Банковская карта, на которую зачисляется заработная плата клиента. Открывается на основании договора между банком и предприятием. Эта карта предоставляет полный перечень услуг по безналичному платежу в терминалах, перевод денежных средств с одной зарплатной карты на другую, а также получению наличных денежных средств в банкоматах на территории Туркменистана."
-                  : locale === "ENG"
+                    : locale === 'TKM'
+                    ? cardData.data.map((el) => (el.id === id ? el.text : ''))
+                    : cardData.data.map((el) => (el.id === id ? el.text : ''))
+                  : locale === 'TKM'
+                  ? 'Müşderiniň bankymyzdan alan karz pul serişdeleri “Karz kartyna geçirilýär . Müşderi “Karz karty” bank karty üsti bilen ähli nagt däl hasaplaşyk töleglerini amala aşyrýar.'
+                  : locale === 'РУС'
+                  ? 'Банковская карта, на которую зачисляется заработная плата клиента. Открывается на основании договора между банком и предприятием. Эта карта предоставляет полный перечень услуг по безналичному платежу в терминалах, перевод денежных средств с одной зарплатной карты на другую, а также получению наличных денежных средств в банкоматах на территории Туркменистана.'
+                  : locale === 'ENG'
                  ? "A bank card to which the client's salary is credited. It is opened on the basis of an agreement between the bank and the enterprise. This card provides a full range of services for non-cash payment in terminals, transfer of funds from one payroll card to another, as well as cash withdrawal from ATMs in Turkmenistan."
-                  : "Müşderiniň bankymyzdan alan karz pul serişdeleri “Karz kartyna geçirilýär . Müşderi “Karz karty” bank karty üsti bilen ähli nagt däl hasaplaşyk töleglerini amala aşyrýar."}
+                  : 'Müşderiniň bankymyzdan alan karz pul serişdeleri “Karz kartyna geçirilýär . Müşderi “Karz karty” bank karty üsti bilen ähli nagt däl hasaplaşyk töleglerini amala aşyrýar.'}
              </h3>
            </div>
          </div>
          <div className="cd-bottom">
            <div className="cd-bottom-content">
              <h3>
-                {locale === "TKM"
-                  ? "Kartyň möhleti"
-                  : locale === "РУС"
-                  ? "Срок действия карты"
-                  : locale === "ENG"
-                  ? "Card expiry date"
-                  : "Kartyň möhleti"}
+                {locale === 'TKM'
+                  ? 'Kartyň möhleti'
+                  : locale === 'РУС'
+                  ? 'Срок действия карты'
+                  : locale === 'ENG'
+                  ? 'Card expiry date'
+                  : 'Kartyň möhleti'}
              </h3>
              <h2>
                {cardData
                  ? cardData.data.map((el) => {
                      if (el.id === id) {
-                        if (el.term === 1 || el.term === "1") {
+                        if (el.term === 1 || el.term === '1') {
                          return `${el.term} ${
-                            locale === "TKM"
-                              ? "ýyl"
-                              : locale === "РУС"
-                              ? "год"
-                              : locale === "ENG"
-                              ? "year"
-                              : "ýyl"
+                            locale === 'TKM'
+                              ? 'ýyl'
+                              : locale === 'РУС'
+                              ? 'год'
+                              : locale === 'ENG'
+                              ? 'year'
+                              : 'ýyl'
                          }`;
                        } else if (
                          el.term === 2 ||
-                          el.term === "2" ||
+                          el.term === '2' ||
                          el.term === 3 ||
-                          el.term === "3" ||
+                          el.term === '3' ||
                          el.term === 4 ||
-                          el.term === "4"
+                          el.term === '4'
                        ) {
                          return `${el.term} ${
-                            locale === "TKM"
-                              ? "ýyl"
-                              : locale === "РУС"
-                              ? "года"
-                              : locale === "ENG"
-                              ? "years"
-                              : "ýyl"
+                            locale === 'TKM'
+                              ? 'ýyl'
+                              : locale === 'РУС'
+                              ? 'года'
+                              : locale === 'ENG'
+                              ? 'years'
+                              : 'ýyl'
                          }`;
                        } else {
                          return `${el.term} ${
-                            locale === "TKM"
-                              ? "ýyl"
-                              : locale === "РУС"
-                              ? "лет"
-                              : locale === "ENG"
-                              ? "years"
-                              : "ýyl"
+                            locale === 'TKM'
+                              ? 'ýyl'
+                              : locale === 'РУС'
+                              ? 'лет'
+                              : locale === 'ENG'
+                              ? 'years'
+                              : 'ýyl'
                          }`;
                        }
                      }
                    })
-                  : "30"}
+                  : '30'}
              </h2>
            </div>
            <div className="cd-bottom-content">
              <h3>
-                {locale === "TKM"
-                  ? "Göterim"
-                  : locale === "РУС"
-                  ? "Процентная ставка"
-                  : locale === "ENG"
-                  ? "Interest rate"
-                  : "Göterim"}{" "}
+                {locale === 'TKM'
+                  ? 'Göterim'
+                  : locale === 'РУС'
+                  ? 'Процентная ставка'
+                  : locale === 'ENG'
+                  ? 'Interest rate'
+                  : 'Göterim'}{' '}
              </h3>
              <h2>
-                {" "}
+                {' '}
                {cardData
-                  ? cardData.data.map((el) =>
-                      el.id === id ? el.interest_rate : ""
-                    )
-                  : "0"}{" "}
+                  ? cardData.data.map((el) => (el.id === id ? el.interest_rate : ''))
+                  : '0'}{' '}
                %
              </h2>
            </div>
            <div className="cd-bottom-content">
              <h3>
-                {locale === "TKM"
-                  ? "Kartyň bahasy"
-                  : locale === "РУС"
-                  ? "Стоимость карты"
-                  : locale === "ENG"
-                  ? "Card cost"
-                  : "Kartyň bahasy"}
+                {locale === 'TKM'
+                  ? 'Kartyň bahasy (GBüS bilen)'
+                  : locale === 'РУС'
+                  ? 'Стоимость карты  (с учётом НДС)'
+                  : locale === 'ENG'
+                  ? 'Card cost (with VAT)'
+                  : 'Kartyň bahasy (GBüS bilen)'}
              </h3>
              <h2>
-                {" "}
+                {' '}
                {cardData
-                  ? cardData.data.map((el) =>
-                      el.id === id ? el.card_cost : ""
-                    )
-                  : "23"}{" "}
-                {locale === "TKM"
-                  ? "manat"
-                  : locale === "РУС"
-                  ? "маната"
-                  : locale === "ENG"
-                  ? "manats"
-                  : "manat"}
+                  ? cardData.data.map((el) => (el.id === id ? el.card_cost : ''))
+                  : '28.75'}{' '}
+                {locale === 'TKM'
+                  ? 'manat'
+                  : locale === 'РУС'
+                  ? 'маната'
+                  : locale === 'ENG'
+                  ? 'manats'
+                  : 'manat'}
              </h2>
            </div>
          </div>
@ -325,17 +302,16 @@ const CardStage1 = ({ setStage, data, setData, cardData, req, setReq }) => {
                selected_card_localized: inputValid,
                price: price,
              });
-            }}
-          >
+            }}>
            <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" />
--- a/src/components/CardStages/CardStage3.js
+++ b/src/components/CardStages/CardStage3.js
@ -1,18 +1,20 @@
 // IMPORT MODULES
-import React, { useState, useEffect, useContext } from "react";
+
+import React, { useContext, useEffect, useState } from "react";
+
+import CustomSelect from "../global/CustomSelect";
 import { LanguageContext } from "../../backend/LanguageContext";
 import { branchData } from "../../localization/branchData";
+import { getDate } from "../../helpers/Date";
+import next from "../../icons/next.svg";
+import next_reverse from "../../icons/next-reverse.svg";
 import { timeSheet } from "../../data/timeSheet";

 // IMPORT VALIDATORS
-import { getDate } from "../../helpers/Date";

 // IMPORT IMAGES
-import next from "../../icons/next.svg";
-import next_reverse from "../../icons/next-reverse.svg";

 // IMPORT COMPONENTS
-import CustomSelect from "../global/CustomSelect";

 const CardStage3 = ({ setStage, data, setData }) => {
  const { locale } = useContext(LanguageContext);
@ -34,17 +36,33 @@ const CardStage3 = ({ setStage, data, setData }) => {

  useEffect(() => {
    if (
-      inputValid.region &&
-      inputValid.affiliate &&
-      inputValid.date &&
-      inputValid.time &&
-      inputValid.code
+      inputValid.region === branch.regions.TKM[7] ||
+      inputValid.region === branch.regions.RUS[7] ||
+      inputValid.region === branch.regions.ENG[7]
    ) {
-      setBtnEnabled(true);
+      if (inputValid.region && inputValid.date && inputValid.time && inputValid.code) {
+        setBtnEnabled(true);
+      } else {
+        setBtnEnabled(false);
+      }
    } else {
-      setBtnEnabled(false);
+      if (inputValid.region && inputValid.affiliate && inputValid.date && inputValid.time && inputValid.code) {
+        setBtnEnabled(true);
+      } else {
+        setBtnEnabled(false);
+      }
    }
-  }, [inputValid]);
+  }, [branch.regions.ENG, branch.regions.RUS, branch.regions.TKM, inputValid]);
+
+  useEffect(() => {
+    if (
+      inputValid.region === branch.regions.TKM[7] ||
+      inputValid.region === branch.regions.RUS[7] ||
+      inputValid.region === branch.regions.ENG[7]
+    ) {
+      setInputValid({ ...inputValid, affiliate: null });
+    }
+  }, [branch.regions.ENG, branch.regions.RUS, branch.regions.TKM, inputValid, inputValid.region]);

  return (
    <section className="card-stage-3">
@ -52,13 +70,7 @@ const CardStage3 = ({ setStage, data, setData }) => {
        <div className="card-stage-3-top">
          <div className="input-block">
            <label htmlFor="region">
-              {locale === "TKM"
-                ? "Welaýat"
-                : locale === "РУС"
-                ? "Регион"
-                : locale === "ENG"
-                ? "Region"
-                : "Welaýat"}
+              {locale === "TKM" ? "Welaýat" : locale === "РУС" ? "Регион" : locale === "ENG" ? "Region" : "Welaýat"}
              <span>*</span>
            </label>
            <CustomSelect
@ -107,156 +119,165 @@ const CardStage3 = ({ setStage, data, setData }) => {
              defaultValue={inputValid.region}
            />
          </div>
-          <div className="input-block">
-            <label htmlFor="affiliate">
-              {locale === "TKM"
-                ? "Filial"
-                : locale === "РУС"
-                ? "Филиал"
-                : locale === "ENG"
-                ? "Branch"
-                : "Filial"}
-              <span>*</span>
-            </label>
-            <CustomSelect
-              items={
-                inputValid.region === "Город Ашхабад" ||
-                inputValid.region === "Ashgabat city" ||
-                inputValid.region === "Aşgabat şäheri"
-                  ? locale === "TKM"
-                    ? branch.Ashgabat.TKM
-                    : locale === "РУС"
-                    ? branch.Ashgabat.RUS
-                    : locale === "ENG"
-                    ? branch.Ashgabat.ENG
-                    : branch.Ashgabat.TKM
-                  : inputValid.region === "Ахалский регион" ||
-                    inputValid.region === "Akhal region" ||
-                    inputValid.region === "Ahal"
-                  ? locale === "TKM"
-                    ? branch.Ahal.TKM
-                    : locale === "РУС"
-                    ? branch.Ahal.RUS
-                    : locale === "ENG"
-                    ? branch.Ahal.ENG
-                    : branch.Ahal.TKM
-                  : inputValid.region === "Балканский регион" ||
-                    inputValid.region === "Balkan region" ||
-                    inputValid.region === "Balkan"
-                  ? locale === "TKM"
-                    ? branch.Balkan.TKM
-                    : locale === "РУС"
-                    ? branch.Balkan.RUS
-                    : locale === "ENG"
-                    ? branch.Balkan.ENG
-                    : branch.Balkan.TKM
-                  : inputValid.region === "Дашогузский регион" ||
-                    inputValid.region === "Dashoguz region" ||
-                    inputValid.region === "Daşoguz"
-                  ? locale === "TKM"
-                    ? branch.Dashoguz.TKM
-                    : locale === "РУС"
-                    ? branch.Dashoguz.RUS
-                    : locale === "ENG"
-                    ? branch.Dashoguz.ENG
-                    : branch.Dashoguz.TKM
-                  : inputValid.region === "Лебапский регион" ||
-                    inputValid.region === "Lebap region" ||
-                    inputValid.region === "Lebap"
-                  ? locale === "TKM"
-                    ? branch.Lebap.TKM
-                    : locale === "РУС"
-                    ? branch.Lebap.RUS
-                    : locale === "ENG"
-                    ? branch.Lebap.ENG
-                    : branch.Lebap.TKM
-                  : inputValid.region === "Марыйский регион" ||
-                    inputValid.region === "Mary region" ||
-                    inputValid.region === "Mary"
-                  ? locale === "TKM"
-                    ? branch.Mary.TKM
-                    : locale === "РУС"
-                    ? branch.Mary.RUS
-                    : locale === "ENG"
-                    ? branch.Mary.ENG
-                    : branch.Mary.TKM
-                  : [""]
-              }
-              customId={"affiliate"}
-              blockName={"card-3-select"}
-              elName={"card-3-select-el"}
-              name={"affiliate"}
-              placeholder={
-                locale === "TKM"
-                  ? "Şahamçany saýlaň"
-                  : locale === "РУС"
-                  ? "Выберите филиал"
-                  : locale === "ENG"
-                  ? "Choose branch"
-                  : "Şahamçany saýlaň"
-              }
-              stateSetter={(state) => {
-                setInputValid({ ...inputValid, affiliate: state });
-                if (state && inputLocal.region) {
-                  let index;
-                  if (inputLocal.region === "Aşgabat şäheri") {
-                    if (locale === "РУС") {
-                      index = branch["Ashgabat"].RUS.findIndex(
-                        (e) => e === state
-                      );
-                    } else if (locale === "ENG") {
-                      index = branch["Ashgabat"].ENG.findIndex(
-                        (e) => e === state
-                      );
-                    }
-                  } else if (inputLocal.region === "Daşoguz") {
-                    if (locale === "РУС") {
-                      index = branch["Dashoguz"].RUS.findIndex(
-                        (e) => e === state
-                      );
-                    } else if (locale === "ENG") {
-                      index = branch["Dashoguz"].ENG.findIndex(
-                        (e) => e === state
-                      );
-                    }
-                  } else {
-                    if (locale === "РУС") {
-                      index = branch[inputLocal.region].RUS.findIndex(
-                        (e) => e === state
-                      );
-                    } else if (locale === "ENG") {
-                      index = branch[inputLocal.region].ENG.findIndex(
-                        (e) => e === state
-                      );
-                    }
-                  }

-                  if (index === -1) {
-                    setInputLocal({ ...inputLocal, affiliate: state });
-                  } else {
+          {inputValid.region !== branch.regions.TKM[7] &&
+          inputValid.region !== branch.regions.RUS[7] &&
+          inputValid.region !== branch.regions.ENG[7] ? (
+            <div className="input-block">
+              <label htmlFor="affiliate">
+                {locale === "TKM" ? "Şahamça" : locale === "РУС" ? "Филиал" : locale === "ENG" ? "Branch" : "Şahamça"}
+                <span>*</span>
+              </label>
+              <CustomSelect
+                items={
+                  inputValid.region === "Город Ашхабад" ||
+                  inputValid.region === "Ashgabat city" ||
+                  inputValid.region === "Aşgabat şäheri"
+                    ? locale === "TKM"
+                      ? branch.Ashgabat.TKM
+                      : locale === "РУС"
+                      ? branch.Ashgabat.RUS
+                      : locale === "ENG"
+                      ? branch.Ashgabat.ENG
+                      : branch.Ashgabat.TKM
+                    : inputValid.region === "Ахалский регион" ||
+                      inputValid.region === "Akhal region" ||
+                      inputValid.region === "Ahal"
+                    ? locale === "TKM"
+                      ? branch.Ahal.TKM
+                      : locale === "РУС"
+                      ? branch.Ahal.RUS
+                      : locale === "ENG"
+                      ? branch.Ahal.ENG
+                      : branch.Ahal.TKM
+                    : inputValid.region === "Балканский регион" ||
+                      inputValid.region === "Balkan region" ||
+                      inputValid.region === "Balkan"
+                    ? locale === "TKM"
+                      ? branch.Balkan.TKM
+                      : locale === "РУС"
+                      ? branch.Balkan.RUS
+                      : locale === "ENG"
+                      ? branch.Balkan.ENG
+                      : branch.Balkan.TKM
+                    : inputValid.region === "Дашогузский регион" ||
+                      inputValid.region === "Dashoguz region" ||
+                      inputValid.region === "Daşoguz"
+                    ? locale === "TKM"
+                      ? branch.Dashoguz.TKM
+                      : locale === "РУС"
+                      ? branch.Dashoguz.RUS
+                      : locale === "ENG"
+                      ? branch.Dashoguz.ENG
+                      : branch.Dashoguz.TKM
+                    : inputValid.region === "Лебапский регион" ||
+                      inputValid.region === "Lebap region" ||
+                      inputValid.region === "Lebap"
+                    ? locale === "TKM"
+                      ? branch.Lebap.TKM
+                      : locale === "РУС"
+                      ? branch.Lebap.RUS
+                      : locale === "ENG"
+                      ? branch.Lebap.ENG
+                      : branch.Lebap.TKM
+                    : inputValid.region === "Марыйский регион" ||
+                      inputValid.region === "Mary region" ||
+                      inputValid.region === "Mary"
+                    ? locale === "TKM"
+                      ? branch.Mary.TKM
+                      : locale === "РУС"
+                      ? branch.Mary.RUS
+                      : locale === "ENG"
+                      ? branch.Mary.ENG
+                      : branch.Mary.TKM
+                    : inputValid.region === "Город Аркадаг" ||
+                      inputValid.region === "Arkadag city" ||
+                      inputValid.region === "Arkadag şäheri"
+                    ? locale === "TKM"
+                      ? branch.Arkadag.TKM
+                      : locale === "РУС"
+                      ? branch.Arkadag.RUS
+                      : locale === "ENG"
+                      ? branch.Arkadag.ENG
+                      : branch.Arkadag.TKM
+                    : [""]
+                }
+                customId={"affiliate"}
+                blockName={"card-3-select"}
+                elName={"card-3-select-el"}
+                name={"affiliate"}
+                placeholder={
+                  locale === "TKM"
+                    ? "Şahamçany saýlaň"
+                    : locale === "РУС"
+                    ? "Выберите филиал"
+                    : locale === "ENG"
+                    ? "Choose branch"
+                    : "Şahamçany saýlaň"
+                }
+                stateSetter={(state) => {
+                  setInputValid({ ...inputValid, affiliate: state });
+                  if (state && inputLocal.region) {
+                    let index;
                    if (inputLocal.region === "Aşgabat şäheri") {
-                      setInputLocal({
-                        ...inputLocal,
-                        affiliate: branch["Ashgabat"].TKM[index],
-                      });
-                    } else if (inputLocal.region === "Daşoguz") {
-                      setInputLocal({
-                        ...inputLocal,
-                        affiliate: branch["Dashoguz"].TKM[index],
-                      });
+                      if (locale === "РУС") {
+                        index = branch["Ashgabat"].RUS.findIndex((e) => e === state);
+                      } else if (locale === "ENG") {
+                        index = branch["Ashgabat"].ENG.findIndex((e) => e === state);
+                      }
+                    } else if (inputLocal.region === "Mary") {
+                      if (locale === "РУС") {
+                        index = branch["Mary"].RUS.findIndex((e) => e === state);
+                      } else if (locale === "ENG") {
+                        index = branch["Mary"].ENG.findIndex((e) => e === state);
+                      }
+                    } else if (inputLocal.region === "Arkadag şäheri") {
+                      if (locale === "РУС") {
+                        index = branch["Arkadag"].RUS.findIndex((e) => e === state);
+                      } else if (locale === "ENG") {
+                        index = branch["Arkadag"].ENG.findIndex((e) => e === state);
+                      }
                    } else {
-                      setInputLocal({
-                        ...inputLocal,
-                        affiliate: branch[inputLocal.region].TKM[index],
-                      });
+                      if (locale === "РУС") {
+                        index = branch[inputLocal].RUS.findIndex((e) => e === state);
+                      } else if (locale === "ENG") {
+                        index = branch[inputLocal.region].ENG.findIndex((e) => e === state);
+                      }
+                    }
+
+                    if (index === -1) {
+                      setInputLocal({ ...inputLocal, affiliate: state });
+                    } else {
+                      if (inputLocal.region === "Aşgabat şäheri") {
+                        setInputLocal({
+                          ...inputLocal,
+                          affiliate: branch["Ashgabat"].TKM[index],
+                        });
+                      } else if (inputLocal.region === "Mary") {
+                        setInputLocal({
+                          ...inputLocal,
+                          affiliate: branch["Mary"].TKM[index],
+                        });
+                      } else if (inputLocal.region === "Arkadag şäheri") {
+                        setInputLocal({
+                          ...inputLocal,
+                          affiliate: branch["Arkadag"].TKM[index],
+                        });
+                      } else {
+                        setInputLocal({
+                          ...inputLocal,
+                          affiliate: branch[inputLocal.region].TKM[index],
+                        });
+                      }
                    }
                  }
-                }
-              }}
-              eTarget={true}
-              defaultValue={inputValid.affiliate}
-            />
-          </div>
+                }}
+                eTarget={true}
+                defaultValue={inputValid.affiliate}
+              />
+            </div>
+          ) : null}
+
          <div className="input-block">
            <label htmlFor="date">
              {locale === "TKM"
@ -311,9 +332,7 @@ const CardStage3 = ({ setStage, data, setData }) => {
                  ? "Choose time"
                  : "Wagty saýlaň"
              }
-              stateSetter={(state) =>
-                setInputValid({ ...inputValid, time: state })
-              }
+              stateSetter={(state) => setInputValid({ ...inputValid, time: state })}
              eTarget={true}
              defaultValue={inputValid.time}
            />
@ -368,25 +387,19 @@ const CardStage3 = ({ setStage, data, setData }) => {
          </div>
          {locale === "TKM" ? (
            inputValid.sms ? (
-              <h3 className="green">
-                Siziň kartyňyz SMS hyzmatyna birikdiriler
-              </h3>
+              <h3 className="green">Siziň kartyňyz SMS hyzmatyna birikdiriler</h3>
            ) : (
              ""
            )
          ) : locale === "РУС" ? (
            inputValid.sms ? (
-              <h3 className="green">
-                Ваша карта будет подключена к СМС услуге
-              </h3>
+              <h3 className="green">Ваша карта будет подключена к СМС услуге</h3>
            ) : (
              ""
            )
          ) : locale === "ENG" ? (
            inputValid.sms ? (
-              <h3 className="green">
-                Your card will be connected to the SMS service
-              </h3>
+              <h3 className="green">Your card will be connected to the SMS service</h3>
            ) : (
              ""
            )
@ -413,13 +426,7 @@ const CardStage3 = ({ setStage, data, setData }) => {
                  setStage(2);
                }}
              >
-                {locale === "TKM"
-                  ? "Yza"
-                  : locale === "РУС"
-                  ? "Назад"
-                  : locale === "ENG"
-                  ? "Back"
-                  : "Yza"}
+                {locale === "TKM" ? "Yza" : locale === "РУС" ? "Назад" : locale === "ENG" ? "Back" : "Yza"}
              </h3>
            </div>
          </button>
--- a/src/components/CardStages/CardStage4.js
+++ b/src/components/CardStages/CardStage4.js
@ -1,13 +1,13 @@
 // IMPORT MODULES
-import React, { useState, useEffect, useContext } from "react";
-import { LanguageContext } from "../../backend/LanguageContext";
-import { maxFileSize } from "../../maxFileSize";
+import React, { useState, useEffect, useContext } from 'react';
+import { LanguageContext } from '../../backend/LanguageContext';
+import { maxFileSize } from '../../maxFileSize';

 // IMPORT IMAGES
-import remove from "../../icons/remove.svg";
-import next from "../../icons/next.svg";
-import arrow from "../../icons/arrow.svg";
-import next_reverse from "../../icons/next-reverse.svg";
+import remove from '../../icons/remove.svg';
+import next from '../../icons/next.svg';
+import arrow from '../../icons/arrow.svg';
+import next_reverse from '../../icons/next-reverse.svg';

 const CardStage4 = ({ setStage, data, setData, req }) => {
  const { locale } = useContext(LanguageContext);
@ -32,77 +32,71 @@ const CardStage4 = ({ setStage, data, setData, req }) => {
      <form>
        <div className="cd-top-4">
          <h2>
-            {locale === "TKM"
-              ? "Kart almak üçin ýüzlenmäni resmileşdirmek üçin talap edilýän resminamalary ýükläň"
-              : locale === "РУС"
-              ? "Для оформления заявки на получение карты загрузите требуемые документы."
-              : locale === "ENG"
-              ? "To apply for a card, please upload the required documents."
-              : "Kart almak üçin ýüzlenmäni resmileşdirmek üçin talap edilýän resminamalary ýükläň"}
+            {locale === 'TKM'
+              ? 'Kart almak üçin ýüzlenmäni resmileşdirmek üçin talap edilýän resminamalary ýükläň'
+              : locale === 'РУС'
+              ? 'Для оформления заявки на получение карты загрузите требуемые документы.'
+              : locale === 'ENG'
+              ? 'To apply for a card, please upload the required documents.'
+              : 'Kart almak üçin ýüzlenmäni resmileşdirmek üçin talap edilýän resminamalary ýükläň'}
          </h2>
          <div
            className="data-block docs"
            onClick={() => {
              setDropdown(!dropdown);
-            }}
-          >
+            }}>
            <div className="data-title">
              <h4>
-                {locale === "TKM"
-                  ? "Talaplar we resminamalar"
-                  : locale === "РУС"
-                  ? "Требования и документы"
-                  : locale === "ENG"
-                  ? "Requirements and documents"
-                  : "Talaplar we resminamalar"}
+                {locale === 'TKM'
+                  ? 'Talaplar we resminamalar'
+                  : locale === 'РУС'
+                  ? 'Требования и документы'
+                  : locale === 'ENG'
+                  ? 'Requirements and documents'
+                  : 'Talaplar we resminamalar'}
              </h4>
              <div className="data-img">
                <img src={arrow} alt="arrow" />
              </div>
            </div>
-            <div
-              className={
-                dropdown ? "data-dropdown docs active" : "data-dropdown docs"
-              }
-            >
+            <div className={dropdown ? 'data-dropdown docs active' : 'data-dropdown docs'}>
              <div
                className="text-block"
                dangerouslySetInnerHTML={{
                  __html:
-                    locale === "TKM"
+                    locale === 'TKM'
                      ? req.TKM
-                      : locale === "РУС"
-                      ? req.rus
-                      : locale === "ENG"
+                      : locale === 'РУС'
+                      ? req.RUS
+                      : locale === 'ENG'
                      ? req.ENG
                      : req.TKM,
-                }}
-              ></div>
+                }}></div>
            </div>
          </div>
        </div>
        <div className="cd-bottom-4">
          <div>
            <label htmlFor="file">
-              {locale === "TKM"
-                ? "Faýl ýükläň"
-                : locale === "РУС"
-                ? "Загрузить файл"
-                : locale === "ENG"
-                ? "Upload a file"
-                : "Faýl ýükläň"}
+              {locale === 'TKM'
+                ? 'Faýl ýükläň'
+                : locale === 'РУС'
+                ? 'Загрузить файл'
+                : locale === 'ENG'
+                ? 'Upload a file'
+                : 'Faýl ýükläň'}
            </label>
            <input
              id="file"
              type="file"
-              accept=".jpg, .jpeg, .docx, .xls, .xlsx, .doc, .pdf, .png"
+              accept=".jpg, .jpeg, .pdf, .png"
              onChange={(e) => {
                if (e.target.files[0].size > maxSize) {
                  setValidSize(false);
-                  e.target.value = "";
+                  e.target.value = '';
                } else {
                  setFiles([...files, e.target.files[0]]);
-                  e.target.value = "";
+                  e.target.value = '';
                  setValidSize(true);
                }
              }}
@ -110,7 +104,7 @@ const CardStage4 = ({ setStage, data, setData, req }) => {
          </div>
        </div>
        <ul className="cd-4-files">
-          {files !== []
+          {files
            ? files.map((el, i) => {
                if (el) {
                  return (
@ -122,10 +116,9 @@ const CardStage4 = ({ setStage, data, setData, req }) => {
                          setFiles(
                            files.filter((file) => {
                              return file !== el;
-                            })
+                            }),
                          );
-                        }}
-                      >
+                        }}>
                        <img src={remove} alt="remove" />
                      </div>
                    </li>
@ -135,23 +128,21 @@ const CardStage4 = ({ setStage, data, setData, req }) => {
            : null}
        </ul>
        <p className="alert">
-          {locale === "TKM"
-            ? "Hemme faýllar diňe görkezilen formatda bolmaly: "
-            : locale === "РУС"
-            ? "Все файлы должны быть следующих форматов: "
-            : locale === "ENG"
-            ? "All files should be in following types:"
-            : "Hemme faýllar diňe görkezilen formatda bolmaly: "}
-          <span className="red">
-            .jpg, .jpeg, .doc, .docx, .xls, .xlsx, .pdf, .png
-          </span>
+          {locale === 'TKM'
+            ? 'Hemme faýllar diňe görkezilen formatda bolmaly: '
+            : locale === 'РУС'
+            ? 'Все файлы должны быть следующих форматов: '
+            : locale === 'ENG'
+            ? 'All files should be in following types:'
+            : 'Hemme faýllar diňe görkezilen formatda bolmaly: '}
+          <span className="red">.jpg, .jpeg, .pdf, .png</span>
        </p>
-        <p className={!validSize ? "alert red bold" : "alert"}>
-          {locale === "TKM"
+        <p className={!validSize ? 'alert red bold' : 'alert'}>
+          {locale === 'TKM'
            ? `Faýlyň ölçegi ${maxFileSize} MB-den geçmeli däl`
-            : locale === "РУС"
+            : locale === 'РУС'
            ? `Размер файла не должен превышать ${maxFileSize} МБ`
-            : locale === "ENG"
+            : locale === 'ENG'
            ? `Size of the file should not exceed ${maxFileSize} MB`
            : `Faýlyň ölçegi ${maxFileSize} MB-den geçmeli däl`}
        </p>
@ -161,8 +152,7 @@ const CardStage4 = ({ setStage, data, setData, req }) => {
            className="sign-btn reg-btn"
            onClick={() => {
              setStage(3);
-            }}
-          >
+            }}>
            <div>
              <div className="btn-img">
                <img src={next_reverse} alt="logout" />
@ -170,15 +160,14 @@ const CardStage4 = ({ setStage, data, setData, req }) => {
              <h3
                onClick={() => {
                  setStage(3);
-                }}
-              >
-                {locale === "TKM"
-                  ? "Yza"
-                  : locale === "РУС"
-                  ? "Назад"
-                  : locale === "ENG"
-                  ? "Back"
-                  : "Yza"}
+                }}>
+                {locale === 'TKM'
+                  ? 'Yza'
+                  : locale === 'РУС'
+                  ? 'Назад'
+                  : locale === 'ENG'
+                  ? 'Back'
+                  : 'Yza'}
              </h3>
            </div>
          </button>
@ -189,17 +178,16 @@ const CardStage4 = ({ setStage, data, setData, req }) => {
            onClick={() => {
              setData({ ...data, file: files });
              setStage(5);
-            }}
-          >
+            }}>
            <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" />
--- a/src/components/CardStages/CardStage6.js
+++ b/src/components/CardStages/CardStage6.js
@ -203,12 +203,12 @@ const CardStage6 = ({
          <li>
            <p>
              {locale === "TKM"
-                ? "Filial"
+                ? "Şahamça"
                : locale === "РУС"
                ? "Филиал"
                : locale === "ENG"
                ? "Branch"
-                : "Filial"}
+                : "Şahamça"}
              :
            </p>
            <h4>{data.branch_localized ? data.branch_localized : "-"}</h4>
--- a/src/components/CreditStages/CreditStage4.js
+++ b/src/components/CreditStages/CreditStage4.js
@ -1,14 +1,16 @@
 // IMPORT MODULES
-import React, { useState, useEffect, useContext } from "react";
+
+import React, { useContext, useEffect, useState } from "react";
+
+import CustomSelect from "../global/CustomSelect";
 import { LanguageContext } from "../../backend/LanguageContext";
 import { branchData } from "../../localization/branchData";
-
-// IMPORT IMAGES
 import next from "../../icons/next.svg";
 import next_reverse from "../../icons/next-reverse.svg";

+// IMPORT IMAGES
+
 // IMPORT COMPONENTS
-import CustomSelect from "../global/CustomSelect";

 const CreditStage4 = ({ setStage, data, setData }) => {
  const { locale } = useContext(LanguageContext);
@ -30,19 +32,47 @@ const CreditStage4 = ({ setStage, data, setData }) => {

  useEffect(() => {
    if (
-      inputValid.workplace &&
-      inputValid.salary &&
-      inputValid.position &&
-      inputValid.experience &&
-      inputValid.region &&
-      inputValid.affiliate
+      inputValid.region === branch.regions.TKM[7] ||
+      inputValid.region === branch.regions.RUS[7] ||
+      inputValid.region === branch.regions.ENG[7]
    ) {
-      setBtnEnabled(true);
+      if (
+        inputValid.workplace &&
+        inputValid.salary &&
+        inputValid.position &&
+        inputValid.experience &&
+        inputValid.region
+      ) {
+        setBtnEnabled(true);
+      } else {
+        setBtnEnabled(false);
+      }
    } else {
-      setBtnEnabled(false);
+      if (
+        inputValid.workplace &&
+        inputValid.salary &&
+        inputValid.position &&
+        inputValid.experience &&
+        inputValid.region &&
+        inputValid.affiliate
+      ) {
+        setBtnEnabled(true);
+      } else {
+        setBtnEnabled(false);
+      }
    }
  }, [inputValid]);

+  useEffect(() => {
+    if (
+      inputValid.region === branch.regions.TKM[7] ||
+      inputValid.region === branch.regions.RUS[7] ||
+      inputValid.region === branch.regions.ENG[7]
+    ) {
+      setInputValid({ ...inputValid, affiliate: null });
+    }
+  }, [inputValid.region]);
+
  return (
    <section className="card-stage-3">
      <form>
@ -145,13 +175,7 @@ const CreditStage4 = ({ setStage, data, setData }) => {
          </div>
          <div className="input-block">
            <label htmlFor="region">
-              {locale === "TKM"
-                ? "Welaýat"
-                : locale === "РУС"
-                ? "Регион"
-                : locale === "ENG"
-                ? "Region"
-                : "Welaýat"}
+              {locale === "TKM" ? "Welaýat" : locale === "РУС" ? "Регион" : locale === "ENG" ? "Region" : "Welaýat"}
              <span>*</span>
            </label>
            <CustomSelect
@ -200,156 +224,163 @@ const CreditStage4 = ({ setStage, data, setData }) => {
              defaultValue={inputValid.region}
            />
          </div>
-          <div className="input-block">
-            <label htmlFor="affiliate">
-              {locale === "TKM"
-                ? "Filial"
-                : locale === "РУС"
-                ? "Филиал"
-                : locale === "ENG"
-                ? "Branch"
-                : "Filial"}
-              <span>*</span>
-            </label>
-            <CustomSelect
-              items={
-                inputValid.region === "Город Ашхабад" ||
-                inputValid.region === "Ashgabat city" ||
-                inputValid.region === "Aşgabat şäheri"
-                  ? locale === "TKM"
-                    ? branch.Ashgabat.TKM
-                    : locale === "РУС"
-                    ? branch.Ashgabat.RUS
-                    : locale === "ENG"
-                    ? branch.Ashgabat.ENG
-                    : branch.Ashgabat.TKM
-                  : inputValid.region === "Ахалский регион" ||
-                    inputValid.region === "Akhal region" ||
-                    inputValid.region === "Ahal"
-                  ? locale === "TKM"
-                    ? branch.Ahal.TKM
-                    : locale === "РУС"
-                    ? branch.Ahal.RUS
-                    : locale === "ENG"
-                    ? branch.Ahal.ENG
-                    : branch.Ahal.TKM
-                  : inputValid.region === "Балканский регион" ||
-                    inputValid.region === "Balkan region" ||
-                    inputValid.region === "Balkan"
-                  ? locale === "TKM"
-                    ? branch.Balkan.TKM
-                    : locale === "РУС"
-                    ? branch.Balkan.RUS
-                    : locale === "ENG"
-                    ? branch.Balkan.ENG
-                    : branch.Balkan.TKM
-                  : inputValid.region === "Дашогузский регион" ||
-                    inputValid.region === "Dashoguz region" ||
-                    inputValid.region === "Daşoguz"
-                  ? locale === "TKM"
-                    ? branch.Dashoguz.TKM
-                    : locale === "РУС"
-                    ? branch.Dashoguz.RUS
-                    : locale === "ENG"
-                    ? branch.Dashoguz.ENG
-                    : branch.Dashoguz.TKM
-                  : inputValid.region === "Лебапский регион" ||
-                    inputValid.region === "Lebap region" ||
-                    inputValid.region === "Lebap"
-                  ? locale === "TKM"
-                    ? branch.Lebap.TKM
-                    : locale === "РУС"
-                    ? branch.Lebap.RUS
-                    : locale === "ENG"
-                    ? branch.Lebap.ENG
-                    : branch.Lebap.TKM
-                  : inputValid.region === "Марыйский регион" ||
-                    inputValid.region === "Mary region" ||
-                    inputValid.region === "Mary"
-                  ? locale === "TKM"
-                    ? branch.Mary.TKM
-                    : locale === "РУС"
-                    ? branch.Mary.RUS
-                    : locale === "ENG"
-                    ? branch.Mary.ENG
-                    : branch.Mary.TKM
-                  : [""]
-              }
-              customId={"affiliate"}
-              blockName={"card-3-select"}
-              elName={"card-3-select-el"}
-              defaultValue={inputValid.affiliate}
-              name={"affiliate"}
-              placeholder={
-                locale === "TKM"
-                  ? "Filialy saýlaň"
-                  : locale === "РУС"
-                  ? "Выберите филиал"
-                  : locale === "ENG"
-                  ? "Choose branch"
-                  : "Filialy saýlaň"
-              }
-              stateSetter={(state) => {
-                setInputValid({ ...inputValid, affiliate: state });
-                if (state && inputLocal.region) {
-                  let index;
-                  if (inputLocal.region === "Aşgabat şäheri") {
-                    if (locale === "РУС") {
-                      index = branch["Ashgabat"].RUS.findIndex(
-                        (e) => e === state
-                      );
-                    } else if (locale === "ENG") {
-                      index = branch["Ashgabat"].ENG.findIndex(
-                        (e) => e === state
-                      );
-                    }
-                  } else if (inputLocal.region === "Daşoguz") {
-                    if (locale === "РУС") {
-                      index = branch["Dashoguz"].RUS.findIndex(
-                        (e) => e === state
-                      );
-                    } else if (locale === "ENG") {
-                      index = branch["Dashoguz"].ENG.findIndex(
-                        (e) => e === state
-                      );
-                    }
-                  } else {
-                    if (locale === "РУС") {
-                      index = branch[inputLocal.region].RUS.findIndex(
-                        (e) => e === state
-                      );
-                    } else if (locale === "ENG") {
-                      index = branch[inputLocal.region].ENG.findIndex(
-                        (e) => e === state
-                      );
-                    }
-                  }
-
-                  if (index === -1) {
-                    setInputLocal({ ...inputLocal, affiliate: state });
-                  } else {
-                    if (inputLocal.region === "Aşgabat şäheri") {
-                      setInputLocal({
-                        ...inputLocal,
-                        affiliate: branch["Ashgabat"].TKM[index],
-                      });
-                    } else if (inputLocal.region === "Daşoguz") {
-                      setInputLocal({
-                        ...inputLocal,
-                        affiliate: branch["Dashoguz"].TKM[index],
-                      });
-                    } else {
-                      setInputLocal({
-                        ...inputLocal,
-                        affiliate: branch[inputLocal.region].TKM[index],
-                      });
-                    }
-                  }
+          {inputValid.region !== branch.regions.TKM[7] &&
+          inputValid.region !== branch.regions.RUS[7] &&
+          inputValid.region !== branch.regions.ENG[7] ? (
+            <div className="input-block">
+              <label htmlFor="affiliate">
+                {locale === "TKM" ? "Şahamça" : locale === "РУС" ? "Филиал" : locale === "ENG" ? "Branch" : "Şahamça"}
+                <span>*</span>
+              </label>
+              <CustomSelect
+                items={
+                  inputValid.region === "Город Ашхабад" ||
+                  inputValid.region === "Ashgabat city" ||
+                  inputValid.region === "Aşgabat şäheri"
+                    ? locale === "TKM"
+                      ? branch.Ashgabat.TKM
+                      : locale === "РУС"
+                      ? branch.Ashgabat.RUS
+                      : locale === "ENG"
+                      ? branch.Ashgabat.ENG
+                      : branch.Ashgabat.TKM
+                    : inputValid.region === "Ахалский регион" ||
+                      inputValid.region === "Akhal region" ||
+                      inputValid.region === "Ahal"
+                    ? locale === "TKM"
+                      ? branch.Ahal.TKM
+                      : locale === "РУС"
+                      ? branch.Ahal.RUS
+                      : locale === "ENG"
+                      ? branch.Ahal.ENG
+                      : branch.Ahal.TKM
+                    : inputValid.region === "Балканский регион" ||
+                      inputValid.region === "Balkan region" ||
+                      inputValid.region === "Balkan"
+                    ? locale === "TKM"
+                      ? branch.Balkan.TKM
+                      : locale === "РУС"
+                      ? branch.Balkan.RUS
+                      : locale === "ENG"
+                      ? branch.Balkan.ENG
+                      : branch.Balkan.TKM
+                    : inputValid.region === "Дашогузский регион" ||
+                      inputValid.region === "Dashoguz region" ||
+                      inputValid.region === "Daşoguz"
+                    ? locale === "TKM"
+                      ? branch.Dashoguz.TKM
+                      : locale === "РУС"
+                      ? branch.Dashoguz.RUS
+                      : locale === "ENG"
+                      ? branch.Dashoguz.ENG
+                      : branch.Dashoguz.TKM
+                    : inputValid.region === "Лебапский регион" ||
+                      inputValid.region === "Lebap region" ||
+                      inputValid.region === "Lebap"
+                    ? locale === "TKM"
+                      ? branch.Lebap.TKM
+                      : locale === "РУС"
+                      ? branch.Lebap.RUS
+                      : locale === "ENG"
+                      ? branch.Lebap.ENG
+                      : branch.Lebap.TKM
+                    : inputValid.region === "Марыйский регион" ||
+                      inputValid.region === "Mary region" ||
+                      inputValid.region === "Mary"
+                    ? locale === "TKM"
+                      ? branch.Mary.TKM
+                      : locale === "РУС"
+                      ? branch.Mary.RUS
+                      : locale === "ENG"
+                      ? branch.Mary.ENG
+                      : branch.Mary.TKM
+                    : inputValid.region === "Город Аркадаг" ||
+                      inputValid.region === "Arkadag city" ||
+                      inputValid.region === "Arkadag şäheri"
+                    ? locale === "TKM"
+                      ? branch.Arkadag.TKM
+                      : locale === "РУС"
+                      ? branch.Arkadag.RUS
+                      : locale === "ENG"
+                      ? branch.Arkadag.ENG
+                      : branch.Arkadag.TKM
+                    : [""]
                }
-              }}
-              eTarget={true}
-            />
-          </div>
+                customId={"affiliate"}
+                blockName={"card-3-select"}
+                elName={"card-3-select-el"}
+                name={"affiliate"}
+                placeholder={
+                  locale === "TKM"
+                    ? "Şahamçany saýlaň"
+                    : locale === "РУС"
+                    ? "Выберите филиал"
+                    : locale === "ENG"
+                    ? "Choose branch"
+                    : "Şahamçany saýlaň"
+                }
+                stateSetter={(state) => {
+                  setInputValid({ ...inputValid, affiliate: state });
+                  if (state && inputLocal.region) {
+                    let index;
+                    if (inputLocal.region === "Aşgabat şäheri") {
+                      if (locale === "РУС") {
+                        index = branch["Ashgabat"].RUS.findIndex((e) => e === state);
+                      } else if (locale === "ENG") {
+                        index = branch["Ashgabat"].ENG.findIndex((e) => e === state);
+                      }
+                    } else if (inputLocal.region === "Daşoguz") {
+                      if (locale === "РУС") {
+                        index = branch["Dashoguz"].RUS.findIndex((e) => e === state);
+                      } else if (locale === "ENG") {
+                        index = branch["Dashoguz"].ENG.findIndex((e) => e === state);
+                      }
+                    } else if (inputLocal.region === "Arkadag şäheri") {
+                      if (locale === "РУС") {
+                        index = branch["Arkadag"].RUS.findIndex((e) => e === state);
+                      } else if (locale === "ENG") {
+                        index = branch["Arkadag"].ENG.findIndex((e) => e === state);
+                      }
+                    } else {
+                      if (locale === "РУС") {
+                        index = branch[inputLocal.region].RUS.findIndex((e) => e === state);
+                      } else if (locale === "ENG") {
+                        index = branch[inputLocal.region].ENG.findIndex((e) => e === state);
+                      }
+                    }
+
+                    if (index === -1) {
+                      setInputLocal({ ...inputLocal, affiliate: state });
+                    } else {
+                      if (inputLocal.region === "Aşgabat şäheri") {
+                        setInputLocal({
+                          ...inputLocal,
+                          affiliate: branch["Ashgabat"].TKM[index],
+                        });
+                      } else if (inputLocal.region === "Daşoguz") {
+                        setInputLocal({
+                          ...inputLocal,
+                          affiliate: branch["Dashoguz"].TKM[index],
+                        });
+                      } else if (inputLocal.region === "Arkadag şäheri") {
+                        setInputLocal({
+                          ...inputLocal,
+                          affiliate: branch["Arkadag"].TKM[index],
+                        });
+                      } else {
+                        setInputLocal({
+                          ...inputLocal,
+                          affiliate: branch[inputLocal.region].TKM[index],
+                        });
+                      }
+                    }
+                  }
+                }}
+                eTarget={true}
+                defaultValue={inputValid.affiliate}
+              />
+            </div>
+          ) : null}
        </div>
        <div className="cu-bottom card-stage-3-bottom cs-4-bottom">
          <button
@ -368,13 +399,7 @@ const CreditStage4 = ({ setStage, data, setData }) => {
                  setStage(3);
                }}
              >
-                {locale === "TKM"
-                  ? "Yza"
-                  : locale === "РУС"
-                  ? "Назад"
-                  : locale === "ENG"
-                  ? "Back"
-                  : "Yza"}
+                {locale === "TKM" ? "Yza" : locale === "РУС" ? "Назад" : locale === "ENG" ? "Back" : "Yza"}
              </h3>
            </div>
          </button>
@ -387,9 +412,9 @@ const CreditStage4 = ({ setStage, data, setData }) => {
              setData({
                ...data,
                workplace: inputValid.workplace,
-                region: inputLocal.region,
+                region: locale === "TKM" ? inputValid.region : inputLocal.region,
                region_localized: inputValid.region,
-                branch: inputLocal.affiliate,
+                branch: locale === "TKM" ? inputValid.affiliate : inputLocal.affiliate,
                branch_localized: inputValid.affiliate,
                exp: inputValid.experience,
                position: inputValid.position,
--- a/src/components/CreditStages/CreditStage5.js
+++ b/src/components/CreditStages/CreditStage5.js
@ -1,13 +1,13 @@
 // IMPORT MODULES
-import React, { useState, useEffect, useContext } from "react";
-import { LanguageContext } from "../../backend/LanguageContext";
-import { maxFileSize } from "../../maxFileSize";
+import React, { useState, useEffect, useContext } from 'react';
+import { LanguageContext } from '../../backend/LanguageContext';
+import { maxFileSize } from '../../maxFileSize';

 // IMPORT IMAGES
-import remove from "../../icons/remove.svg";
-import next from "../../icons/next.svg";
-import arrow from "../../icons/arrow.svg";
-import next_reverse from "../../icons/next-reverse.svg";
+import remove from '../../icons/remove.svg';
+import next from '../../icons/next.svg';
+import arrow from '../../icons/arrow.svg';
+import next_reverse from '../../icons/next-reverse.svg';

 const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
  const [files, setFiles] = useState(data.file ? data.file : []);
@ -15,9 +15,9 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
  const [btnEnabled, setBtnEnabled] = useState(false);
  const [dropdown, setDropdown] = useState(false);
  const [req, setReq] = useState({
-    RUS: "",
-    TKM: "",
-    ENG: "",
+    RUS: '',
+    TKM: '',
+    ENG: '',
  });

  const [validSize, setValidSize] = useState(true);
@ -41,18 +41,14 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
          setReq({
            ...req,
            TKM: el.documents,
-            RUS: el.translations.find((els) => els.locale === "ru")
-              ? JSON.parse(
-                  el.translations.find((els) => els.locale === "ru")
-                    .attribute_data
-                ).documents
-              : "",
-            ENG: el.translations.find((els) => els.locale === "en")
-              ? JSON.parse(
-                  el.translations.find((els) => els.locale === "en")
-                    .attribute_data
-                ).documents
-              : "",
+            RUS: el.translations.find((els) => els.locale === 'ru')
+              ? JSON.parse(el.translations.find((els) => els.locale === 'ru').attribute_data)
+                  .documents
+              : '',
+            ENG: el.translations.find((els) => els.locale === 'en')
+              ? JSON.parse(el.translations.find((els) => els.locale === 'en').attribute_data)
+                  .documents
+              : '',
          });
        }
      });
@ -63,77 +59,71 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
      <form>
        <div className="cd-top-4">
          <h2>
-            {locale === "TKM"
-              ? "Karz almak üçin ýüzlenmäni resmileşdirmek üçin talap edilýän resminamalary ýükläň"
-              : locale === "РУС"
-              ? "Для оформления заявки на получение кредита загрузите требуемые документы."
-              : locale === "ENG"
-              ? "To apply for a loan, please upload the required documents."
-              : "Kart almak üçin ýüzlenmäni resmileşdirmek üçin talap edilýän resminamalary ýükläň"}
+            {locale === 'TKM'
+              ? 'Karz almak üçin ýüzlenmäni resmileşdirmek üçin talap edilýän resminamalary ýükläň'
+              : locale === 'РУС'
+              ? 'Для оформления заявки на получение кредита загрузите требуемые документы.'
+              : locale === 'ENG'
+              ? 'To apply for a loan, please upload the required documents.'
+              : 'Kart almak üçin ýüzlenmäni resmileşdirmek üçin talap edilýän resminamalary ýükläň'}
          </h2>
          <div
            className="data-block docs"
            onClick={() => {
              setDropdown(!dropdown);
-            }}
-          >
+            }}>
            <div className="data-title">
              <h4>
-                {locale === "TKM"
-                  ? "Talaplar we resminamalar"
-                  : locale === "РУС"
-                  ? "Требования и документы"
-                  : locale === "ENG"
-                  ? "Requirements and documents"
-                  : "Talaplar we resminamalar"}
+                {locale === 'TKM'
+                  ? 'Talaplar we resminamalar'
+                  : locale === 'РУС'
+                  ? 'Требования и документы'
+                  : locale === 'ENG'
+                  ? 'Requirements and documents'
+                  : 'Talaplar we resminamalar'}
              </h4>
              <div className="data-img">
                <img src={arrow} alt="arrow" />
              </div>
            </div>
-            <div
-              className={
-                dropdown ? "data-dropdown docs active" : "data-dropdown docs"
-              }
-            >
+            <div className={dropdown ? 'data-dropdown docs active' : 'data-dropdown docs'}>
              <div
                className="text-block"
                dangerouslySetInnerHTML={{
                  __html:
-                    locale === "TKM"
+                    locale === 'TKM'
                      ? req.TKM
-                      : locale === "РУС"
+                      : locale === 'РУС'
                      ? req.RUS
-                      : locale === "ENG"
+                      : locale === 'ENG'
                      ? req.ENG
                      : req.TKM,
-                }}
-              ></div>
+                }}></div>
            </div>
          </div>
        </div>
        <div className="cd-bottom-4">
          <div>
            <label htmlFor="file">
-              {locale === "TKM"
-                ? "Faýl ýükläň"
-                : locale === "РУС"
-                ? "Загрузить файл"
-                : locale === "ENG"
-                ? "Upload a file"
-                : "Faýl ýükläň"}
+              {locale === 'TKM'
+                ? 'Faýl ýükläň'
+                : locale === 'РУС'
+                ? 'Загрузить файл'
+                : locale === 'ENG'
+                ? 'Upload a file'
+                : 'Faýl ýükläň'}
            </label>
            <input
              id="file"
              type="file"
-              accept=".jpg, .jpeg, .docx, .xls, .xlsx, .doc, .pdf, .png"
+              accept=".jpg, .jpeg, .pdf, .png"
              onChange={(e) => {
                if (e.target.files[0].size > maxSize) {
                  setValidSize(false);
-                  e.target.value = "";
+                  e.target.value = '';
                } else {
                  setFiles([...files, e.target.files[0]]);
-                  e.target.value = "";
+                  e.target.value = '';
                  setValidSize(true);
                }
              }}
@ -141,7 +131,7 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
          </div>
        </div>
        <ul className="cd-4-files">
-          {files !== []
+          {files
            ? files.map((el, i) => {
                if (el) {
                  return (
@ -153,10 +143,9 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
                          setFiles(
                            files.filter((file) => {
                              return file !== el;
-                            })
+                            }),
                          );
-                        }}
-                      >
+                        }}>
                        <img src={remove} alt="remove" />
                      </div>
                    </li>
@ -166,23 +155,21 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
            : null}
        </ul>
        <p className="alert">
-          {locale === "TKM"
-            ? "Hemme faýllar diňe görkezilen formatda bolmaly: "
-            : locale === "РУС"
-            ? "Все файлы должны быть следующих форматов: "
-            : locale === "ENG"
-            ? "All files should be in following types:"
-            : "Hemme faýllar diňe görkezilen formatda bolmaly: "}
-          <span className="red">
-            .jpg, .jpeg, .doc, .docx, .xls, .xlsx, .pdf, .png
-          </span>
+          {locale === 'TKM'
+            ? 'Hemme faýllar diňe görkezilen formatda bolmaly: '
+            : locale === 'РУС'
+            ? 'Все файлы должны быть следующих форматов: '
+            : locale === 'ENG'
+            ? 'All files should be in following types:'
+            : 'Hemme faýllar diňe görkezilen formatda bolmaly: '}
+          <span className="red">.jpg, .jpeg, .pdf, .png</span>
        </p>
-        <p className={!validSize ? "alert red bold" : "alert"}>
-          {locale === "TKM"
+        <p className={!validSize ? 'alert red bold' : 'alert'}>
+          {locale === 'TKM'
            ? `Faýlyň ölçegi ${maxFileSize} MB-den geçmeli däl`
-            : locale === "РУС"
+            : locale === 'РУС'
            ? `Размер файла не должен превышать ${maxFileSize} МБ`
-            : locale === "ENG"
+            : locale === 'ENG'
            ? `Size of the file should not exceed ${maxFileSize} MB`
            : `Faýlyň ölçegi ${maxFileSize} MB-den geçmeli däl`}
        </p>
@ -192,8 +179,7 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
            className="sign-btn reg-btn"
            onClick={() => {
              setStage(4);
-            }}
-          >
+            }}>
            <div>
              <div className="btn-img">
                <img src={next_reverse} alt="logout" />
@ -201,15 +187,14 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
              <h3
                onClick={() => {
                  setStage(4);
-                }}
-              >
-                {locale === "TKM"
-                  ? "Yza"
-                  : locale === "РУС"
-                  ? "Назад"
-                  : locale === "ENG"
-                  ? "Back"
-                  : "Yza"}
+                }}>
+                {locale === 'TKM'
+                  ? 'Yza'
+                  : locale === 'РУС'
+                  ? 'Назад'
+                  : locale === 'ENG'
+                  ? 'Back'
+                  : 'Yza'}
              </h3>
            </div>
          </button>
@ -220,17 +205,16 @@ const CreditStage5 = ({ setStage, data, setData, creditData, id }) => {
            onClick={() => {
              setData({ ...data, file: files });
              setStage(6);
-            }}
-          >
+            }}>
            <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" />
--- a/src/components/CreditStages/CreditStage6.js
+++ b/src/components/CreditStages/CreditStage6.js
@ -179,12 +179,12 @@ const CreditStage6 = ({
          <li>
            <p>
              {locale === "TKM"
-                ? "Filial"
+                ? "Şahamça"
                : locale === "РУС"
                ? "Филиал"
                : locale === "ENG"
                ? "Branch"
-                : "Filial"}
+                : "Şahamça"}
              :
            </p>
            <h4>{data.branch_localized ? data.branch_localized : "-"}</h4>
--- a/src/components/ImmediateCreditsStages/AcceptStage.js
+++ b/src/components/ImmediateCreditsStages/AcceptStage.js
@ -0,0 +1,430 @@
+// IMPORT MODULES
+import React, { useState, useContext } from "react";
+import { LanguageContext } from "../../backend/LanguageContext";
+import { UserContext } from "../../backend/UserContext";
+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,
+  cardDetails,
+  setCardDetails,
+  borrowerData,
+  guaranterData,
+  isGuranter,
+  setAcceptedMessage,
+  setUserDataRes,
+  userDataRes,
+  setErrMessage,
+  setErrMessageEn,
+  setErrMessageTkm,
+  recipientWorkPlace,
+  recipientWorkPosition,
+}) => {
+  const { locale } = useContext(LanguageContext);
+  const userToken = localStorage.getItem("userToken");
+  const { user } = useContext(UserContext);
+  const handleCardDetails = (e) => {
+    setCardDetails(e.target.value);
+  };
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const [errorMessage, setErrorMesage] = useState("");
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      amount: recepientAmount ? recepientAmount : "Loading",
+      duration: creditDuration ? creditDuration : "loading",
+    },
+  });
+
+  const loanCreateCheck = async () => {
+    setIsLoading(true);
+    try {
+      const response = await fetch(
+        "https://shahsyotag.halkbank.gov.tm/onlineloancre-services/api/loancre/check",
+        {
+          method: "POST",
+          headers: {
+            Accept: "application/json, text/plain",
+            "Content-Type": "application/json;charset=UTF-8",
+          },
+          body: JSON.stringify({
+            clientRecipient: {
+              idSeria: borrowerData.idSeria,
+              idNo: borrowerData.idNo,
+              cardMaskNumber: borrowerData.cardMaskNumber,
+              name: borrowerData.name,
+              surname: borrowerData.surname,
+              lastname: borrowerData.lastname,
+              availableAmount: borrowerData.availableAmount,
+              clientType: "recipient",
+              signRecipient: borrowerData.signRecipient,
+              expDate: borrowerData.expDate,
+            },
+            clientGuarantor: isGuranter
+              ? {
+                  idSeria: guaranterData.idSeria,
+                  idNo: guaranterData.idNo,
+                  cardMaskNumber: guaranterData.cardMaskNumber,
+                  name: guaranterData.name,
+                  surname: guaranterData.surname,
+                  lastname: guaranterData.lastname,
+                  availableAmount: guaranterData.availableAmount,
+                  clientType: "guarantor",
+                  signGuarantor: guaranterData.signGuarantor,
+                  expDate: guaranterData.expDate,
+                }
+              : null,
+            availableAmount: recepientAmount,
+            creditCardAccountNumber: cardDetails,
+            mrtIsInsuarance: isGuranter ? 0 : 1,
+            termInYears: creditDuration,
+          }),
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const jsonedResponse = await response.json();
+
+      if (jsonedResponse.errCode === 0) {
+        // sendCode();
+        //setStage(11);
+        loanCreate();
+      } else {
+        setErrMessage(jsonedResponse.messageRu);
+        setErrMessageTkm(jsonedResponse.message);
+        setErrMessageEn(jsonedResponse.messageEn);
+        setStage(10);
+      }
+    } catch (error) {}
+  };
+
+  const loanCreate = async () => {
+    try {
+      const response = await fetch(
+        `https://shahsyotag.halkbank.gov.tm/onlineloancre-services/api/loancre`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            clientRecipient: {
+              idSeria: borrowerData.idSeria,
+              idNo: borrowerData.idNo,
+              cardMaskNumber: borrowerData.cardMaskNumber,
+              name: borrowerData.name,
+              surname: borrowerData.surname,
+              lastname: borrowerData.lastname,
+              availableAmount: borrowerData.availableAmount,
+              clientType: "recipient",
+              signRecipient: borrowerData.signRecipient,
+              expDate: borrowerData.expDate,
+            },
+            clientGuarantor: isGuranter
+              ? {
+                  idSeria: guaranterData.idSeria,
+                  idNo: guaranterData.idNo,
+                  cardMaskNumber: guaranterData.cardMaskNumber,
+                  name: guaranterData.name,
+                  surname: guaranterData.surname,
+                  lastname: guaranterData.lastname,
+                  availableAmount: guaranterData.availableAmount,
+                  clientType: "guarantor",
+                  signGuarantor: guaranterData.signGuarantor,
+                  expDate: guaranterData.expDate,
+                }
+              : null,
+            availableAmount: recepientAmount,
+            creditCardAccountNumber: cardDetails,
+            mrtIsInsuarance: isGuranter ? 0 : 1,
+            termInYears: creditDuration,
+          }),
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const responseJson = await response.json();
+
+      if (responseJson.errCode === 0) {
+        sendData(responseJson);
+      } else {
+        setErrMessage(responseJson.messageRu);
+        setStage(10);
+      }
+    } catch (error) {
+      console.error(error.toString());
+      // Handle errors as needed
+      setError(true);
+    }
+  };
+
+  const sendData = async (requestBody) => {
+    try {
+      const headers = {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${userToken}`,
+      };
+      const response = await fetch(
+        "https://shahsyotag.halkbank.gov.tm/app/api/quick_loans",
+        {
+          method: "POST",
+          headers: headers,
+          body: JSON.stringify({
+            sign: requestBody.sign,
+            where_works: recipientWorkPlace,
+            position: recipientWorkPosition,
+            mobile_phone: user.mobile_phone,
+            name: borrowerData.name,
+            surname: borrowerData.surname,
+            lastname: borrowerData.lastname,
+          }),
+        }
+      );
+
+      const jsonedResponse = await response.json();
+
+      setIsLoading(false);
+      cardDetails ? setStage(11) : setStage(16);
+    } catch (error) {
+      console.error(error.toString());
+      setError(true);
+    }
+  };
+  const sendCode = async () => {
+    try {
+      const response = await fetch(
+        "https://shahsyotag.halkbank.gov.tm/sendOTP",
+        {
+          method: "POST",
+          headers: { "Content-Type": "aplication/json" },
+          body: JSON.stringify({
+            phone_number: user.mobile_phone,
+          }),
+        }
+      );
+
+      if (!response.ok) {
+        setError(true);
+        setErrorMesage(response.status);
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      if (response.status !== 200 || response.status !== 201) {
+        console.log(response.status);
+      }
+
+      setStage(9);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const onSubmit = () => {
+    loanCreateCheck();
+  };
+
+  if (error) {
+    return (
+      <section className="cs-1 err-section">
+        <h1 className="cs-2-title">
+          {errorMessage}
+          {locale === "TKM"
+            ? " Bir zat  ýalňyş ..."
+            : locale === "РУС"
+            ? " Ошибка..."
+            : locale === "ENG"
+            ? "Error..."
+            : " Bir zat  ýalňyş ..."}
+        </h1>
+        <br />
+        <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>
+      </section>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <section className="loading">
+        <h1 className="cs-2-title">
+          {locale === "TKM"
+            ? "Garaşmagyňyzy haýyş edýäris ..."
+            : locale === "РУС"
+            ? "Пожалуйста, подождите..."
+            : locale === "ENG"
+            ? "Please wait..."
+            : "Garaşmagyňyzy haýyş edýäris ..."}
+        </h1>
+      </section>
+    );
+  }
+
+  return (
+    <section className="imm-cs-1 cs-1">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <h2 className="cs-2-title">
+          {locale === "TKM"
+            ? "Karzyň maglumatlaryny tassyklaň"
+            : locale === "РУС"
+            ? "Подтвердите данные кредита"
+            : locale === "ENG"
+            ? "Confirm the loan details"
+            : "Karzyň maglumatlaryny tassyklaň"}
+        </h2>
+        <div className="imm-credit-form-wrapper">
+          <div className="input-block">
+            <label htmlFor="amount">
+              {locale === "TKM"
+                ? "Karzyň möçberi"
+                : locale === "РУС"
+                ? "Сумма кредита"
+                : locale === "ENG"
+                ? "Amount of loan"
+                : "Karzyň möçberi"}
+            </label>
+            <input {...register("amount")} type="text" id="amount" disabled />
+            {errors.amount && <span>{errors.amount.message}</span>}
+          </div>
+          <div className="input-block">
+            <label htmlFor="duration">
+              {locale === "TKM"
+                ? "Karzyň möhleti"
+                : locale === "РУС"
+                ? "Срок кредита"
+                : locale === "ENG"
+                ? "Term of loan"
+                : "Karzyň möhleti"}
+            </label>
+            <input
+              {...register("duration")}
+              type="text"
+              id="duration"
+              disabled
+            />
+            {errors.duration && <span>{errors.duration.message}</span>}
+          </div>
+          <div className="input-block">
+            <label htmlFor="code">
+              {locale === "TKM"
+                ? "Karz kartynyň hasabyny dolduryň"
+                : locale === "РУС"
+                ? "Заполните счет кредитной карты"
+                : locale === "ENG"
+                ? "Fill the credit card account number"
+                : "Karz kartynyň hasabyny dolduryň"}
+            </label>
+            <input
+              value={cardDetails}
+              onChange={handleCardDetails}
+              type="text"
+              id="code"
+              placeholder="6435980023168745"
+            />
+            <span className="another-option" onClick={() => setStage(12)}>
+              {locale === "TKM"
+                ? "Kartyňyz ýok bolsa, täze karty üçin ýüz tutuň"
+                : locale === "РУС"
+                ? "Оформите новую карту, если она у вас отсувствует"
+                : locale === "ENG"
+                ? "Apply for a new card if you do not have one"
+                : "Kartyňyz ýok bolsa, täze karty üçin ýüz tutuň"}
+            </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(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="submit"
+            className="sign-btn cu-btn"
+            disabled={cardDetails.length !== 23 && !isLoading ? true : false}
+            onClick={() => {
+              onSubmit();
+            }}
+          >
+            <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;
--- a/src/components/ImmediateCreditsStages/BorrowerInfo.js
+++ b/src/components/ImmediateCreditsStages/BorrowerInfo.js
@ -0,0 +1,307 @@
+// 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 { UserContext } from '../../backend/UserContext';
+// import arrow from "../../icons/arrow.svg";
+
+// const schema = z.object({
+//   name: z.string().min(1),
+//   surname: z.string().min(1),
+//   passportSerial: z.string().min(1),
+//   passportNumber: z
+//     .number()
+//     .int()
+//     .gte(100000, { message: "Must be equal to 6 digits" })
+//     .lte(999999, { message: "Must be equal to 6 digits" }),
+//   cardMaskNumber: z
+//     .number()
+//     .int()
+//     .gte(100000, { message: "Must be equal to 6 digits" })
+//     .lte(999999, { message: "Must be equal to 6 digits" }),
+//   // clientType: z.string(),
+// });
+
+const BorrowerInfo = ({
+  setStage,
+  isGuranter,
+  borrowerData,
+  setRecipientWorkPlace,
+  setRecipientWorkPosition,
+  recipientWorkPlace,
+  recipientWorkPosition,
+}) => {
+  const { locale } = useContext(LanguageContext);
+  const { user } = useContext(UserContext);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    // resolver: zodResolver(schema),
+    defaultValues: {
+      name: borrowerData.name ? borrowerData.name : 'Loading',
+      surname: borrowerData.surname ? borrowerData.surname : 'loading',
+      lastname: borrowerData.lastname ? borrowerData.lastname : 'loading',
+      passportSerial: borrowerData.idSeria ? borrowerData.idSeria : 'Loading',
+      passportNumber: borrowerData.idNo ? borrowerData.idNo : 'Loading',
+      cardMaskNumber: borrowerData.cardMaskNumber ? borrowerData.cardMaskNumber : 'Loading',
+      birthDate: borrowerData.birthDate ? borrowerData.birthDate : 'Loading',
+      address: borrowerData.address ? borrowerData.address : 'Loading',
+      phoneNumber: user.mobile_phone,
+    },
+  });
+
+  console.log(borrowerData.cardMaskNumber);
+
+  const handleWorkPlace = (e) => {
+    setRecipientWorkPlace(e.target.value);
+  };
+  const handleWorkPosition = (e) => {
+    setRecipientWorkPosition(e.target.value);
+  };
+
+  const onSubmit = (data) => {
+    // console.log(data);
+  };
+
+  return borrowerData ? (
+    <section className="imm-cs-1 cs-1">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <h2 className="cs-2-title">
+          {locale === 'TKM'
+            ? 'Görkezilen maglumatlary tassyklaň, eger-de görkezilen maglumatlar nädogry bolsa ýa-da doldurylmadyk meýdançalar bar bolsa, bank bilen habarlaşyň!'
+            : locale === 'РУС'
+            ? 'Подтвердите указанные данные. В случае, если данные не верны или есть незаполненные поля, просим обратиться в Банк!'
+            : locale === 'ENG'
+            ? 'Confirm the provided information. If the data is incorrect or there are blank fields, please contact the Bank!'
+            : 'Görkezilen maglumatlary tassyklaň, eger-de görkezilen maglumatlar nädogry bolsa ýa-da doldurylmadyk meýdançalar bar bolsa, bank bilen habarlaşyň!'}
+        </h2>
+        <div className="imm-credit-form-wrapper">
+          <div className="input-block">
+            <label htmlFor="name">
+              {locale === 'TKM'
+                ? 'Ady'
+                : locale === 'РУС'
+                ? 'Имя'
+                : locale === 'ENG'
+                ? 'Name'
+                : 'Ady'}
+            </label>
+            <input {...register('name')} type="text" id="name" disabled />
+            {/* {errors.name && <span>{errors.name.message}</span>} */}
+          </div>
+
+          <div className="input-block">
+            <label htmlFor="lastname">
+              {locale === 'TKM'
+                ? 'Familiýasy'
+                : locale === 'РУС'
+                ? 'Фамилия'
+                : locale === 'ENG'
+                ? 'Lastname'
+                : 'Familiýasy'}
+            </label>
+            <input {...register('lastname')} type="text" id="lastname" disabled />
+            {/* {errors.surname && <span>{errors.surname.message}</span>} */}
+          </div>
+
+          <div className="input-block">
+            <label htmlFor="surname">
+              {locale === 'TKM'
+                ? 'Atasynyň ady'
+                : locale === 'РУС'
+                ? 'Отчество'
+                : locale === 'ENG'
+                ? 'Middle name'
+                : 'Atasynyň ady'}
+            </label>
+            <input {...register('surname')} type="text" id="surname" disabled />
+            {/* {errors.surname && <span>{errors.surname.message}</span>} */}
+          </div>
+          <div className="input-block">
+            <label htmlFor="birthDate">
+              {locale === 'TKM'
+                ? 'Doglan senesi'
+                : locale === 'РУС'
+                ? 'Дата рождения'
+                : locale === 'ENG'
+                ? 'Date of birth'
+                : 'Doglan senesi'}
+            </label>
+            <input {...register('birthDate')} type="text" id="birthDate" disabled />
+            {/* {errors.surname && <span>{errors.surname.message}</span>} */}
+          </div>
+
+          <div className="input-block">
+            <label htmlFor="passport-serial">
+              {locale === 'TKM'
+                ? 'Pasport seriýasy'
+                : locale === 'РУС'
+                ? 'Серия паспорта'
+                : locale === 'ENG'
+                ? 'Passport Series'
+                : 'Pasport seriýasy'}
+            </label>
+            <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'
+                ? 'Pasport belgisi'
+                : locale === 'РУС'
+                ? 'Номер паспорта'
+                : locale === 'ENG'
+                ? 'Passport number'
+                : 'Pasport belgisi'}
+            </label>
+            <input
+              {...register('passportNumber', { valueAsNumber: true })}
+              type="number"
+              id="passport-number"
+              disabled
+            />
+            {errors.passportNumber && <span>{errors.passportNumber.message}</span>}
+          </div>
+
+          <div className="input-block">
+            <label htmlFor="address">
+              {locale === 'TKM'
+                ? 'Ýaşaýan salgysy'
+                : locale === 'РУС'
+                ? 'Адрес прописки'
+                : locale === 'ENG'
+                ? 'Address of residence'
+                : 'Ýaşaýan salgysy'}
+            </label>
+            <input {...register('address')} type="text" id="address" disabled />
+          </div>
+
+          <div className="input-block">
+            <label htmlFor="bank-acc">
+              {locale === 'TKM'
+                ? 'Bank kart belgisi'
+                : locale === 'РУС'
+                ? 'Номер банковсой карты'
+                : locale === 'ENG'
+                ? 'Bank card number'
+                : 'Bank kart belgisi'}
+            </label>
+            <input
+              {...register('cardMaskNumber', { valueAsNumber: true })}
+              type="text"
+              id="bank-acc"
+              disabled
+            />
+            {errors.cardMaskNumber && <span>{errors.cardMaskNumber.message}</span>}
+          </div>
+          <div className="input-block">
+            <label htmlFor="phone-number">
+              {locale === 'TKM'
+                ? 'Telefon belgisi'
+                : locale === 'РУС'
+                ? 'Номер телефона'
+                : locale === 'ENG'
+                ? 'Phone number'
+                : 'Telefon belgisi'}
+            </label>
+            <input disabled type="text" id="phone-number" {...register('phoneNumber')} />
+
+            {errors.phoneNumber && <span>{errors.phoneNumber.message}</span>}
+          </div>
+
+          <div className="input-block">
+            <label htmlFor="workPlace">
+              {locale === 'TKM'
+                ? 'Iş ýeriňizi dolduryň'
+                : locale === 'РУС'
+                ? 'Заполните место работы'
+                : locale === 'ENG'
+                ? 'Fill the place of work'
+                : 'Iş ýeriňizi dolduryň'}
+              <span> *</span>
+            </label>
+            <input
+              type="text"
+              id="workPlace"
+              required={true}
+              onChange={handleWorkPlace}
+              value={recipientWorkPlace}
+            />
+          </div>
+          <div className="input-block">
+            <label htmlFor="workPosition">
+              {locale === 'TKM'
+                ? 'Wezipäňizi dolduryň'
+                : locale === 'РУС'
+                ? 'Заполните должность'
+                : locale === 'ENG'
+                ? 'Fill the position'
+                : 'Wezipäňizi dolduryň'}
+              <span> *</span>
+            </label>
+            <input
+              type="text"
+              id="workPosition"
+              required={true}
+              onChange={handleWorkPosition}
+              value={recipientWorkPosition}
+            />
+          </div>
+        </div>
+
+        <div className="cu-bottom cd-2-title">
+          <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'}
+              </h3>
+            </div>
+          </button>
+          <button
+            type="button"
+            disabled={
+              recipientWorkPosition.length < 3 || recipientWorkPlace.length < 3 ? true : false
+            }
+            className="sign-btn cu-btn"
+            onClick={() => (isGuranter ? setStage(4) : setStage(7))}>
+            <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>
+  ) : (
+    'Loading'
+  );
+};
+
+export default BorrowerInfo;
--- a/src/components/ImmediateCreditsStages/BorrowerStage.js
+++ b/src/components/ImmediateCreditsStages/BorrowerStage.js
@ -0,0 +1,413 @@
+// IMPORT MODULES
+import React, { useState, useRef, useContext, useEffect } 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 arrow from "../../icons/arrow.svg";
+
+const IDSerias = [
+  'I-AS',
+  'I-AH',
+  'I-BN',
+  'I-LB',
+  'I-MR',
+  'I-DZ',
+  'II-AS',
+  'II-AH',
+  'II-BN',
+  'II-LB',
+  'II-MR',
+  'II-DZ',
+];
+// 478992
+// 23908934160170143144000
+
+const BorrowerStage = ({
+  setStage,
+  isGuranter,
+  setIsGuranter,
+  setSignRecipient,
+  setBorrowerData,
+  setMaxAmount,
+  setRecepientAmount,
+  setErrMessage,
+  modalOpen,
+  setErrMessageEn,
+  setErrMessageTkm,
+}) => {
+  const { locale } = useContext(LanguageContext);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [err, setErr] = useState(false);
+  const [errCode, setErrCode] = useState();
+  const [isGuranterSelected, setIsGuranterSelected] = useState(false);
+
+  const [idSerial, setIdSerial] = useState('I-AS');
+  const [passportNumber, setPassportNumber] = useState('');
+  const [cardMaskNumber, setCardMaskNumber] = useState('');
+
+  const [paymentCardDurationYear, setPaymentCardDurationYear] = useState('');
+  const [paymentCardDurationMonth, setPaymentCardDurationMonth] = useState('');
+
+  const handlePassportNumber = (e) => {
+    setPassportNumber(e.target.value);
+  };
+  const handleAccMaskNumber = (e) => {
+    setCardMaskNumber(e.target.value);
+  };
+
+  const handlePaymentCardDurationYear = (e) => {
+    setPaymentCardDurationYear(e.target.value);
+  };
+  const handlePaymentCardDurationMonth = (e) => {
+    setPaymentCardDurationMonth(e.target.value);
+  };
+
+  const isGuranterHandler = (value) => {
+    setIsGuranterSelected(true);
+    setIsGuranter(value);
+  };
+
+  const checkboxHandleChange = (e) => {
+    e.target.value === 'guaranter' ? setIsGuranter(true) : setIsGuranter(false);
+  };
+
+  function maskString(str) {
+    if (str.length !== 16) {
+      throw new Error('String length must be 16.');
+    }
+
+    const firstPart = str.slice(0, 6);
+    const middlePart = '*'.repeat(6);
+    const lastPart = str.slice(12);
+
+    return firstPart + middlePart + lastPart;
+  }
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    // resolver: zodResolver(schema),
+  });
+
+  const clientInfoRequest = async (idSeria, idNo, accountNo, clientType, stage) => {
+    try {
+      setIsLoading(true);
+      const response = await fetch(
+        `https://shahsyotag.halkbank.gov.tm/onlineloan-services/api/clientinfo`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            idSeria: idSeria,
+            idNo: idNo,
+            cardMaskNumber: maskString(cardMaskNumber),
+            clientType: 'recipient',
+            expDate: `${paymentCardDurationMonth}/${paymentCardDurationYear}`,
+          }),
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const responseJson = await response.json();
+
+      setSignRecipient(responseJson.signRecipient);
+      setRecepientAmount(responseJson.availableAmount);
+      setMaxAmount(responseJson.availableAmount);
+      setErrCode(await responseJson.errCode);
+      setBorrowerData(responseJson);
+
+      setIsLoading(false);
+      // responseJson.errCode === 0 ? setStage(2) : setStage(3);
+      if (responseJson.errCode === 0) {
+        setStage(2);
+      } else if (responseJson.errCode !== 0) {
+        setErrMessage(responseJson.messageRu);
+        setErrMessageEn(responseJson.messageEn);
+        setErrMessageTkm(responseJson.message);
+        setStage(3);
+      }
+    } catch (error) {
+      // setStage(3);
+      setIsLoading(false);
+
+      console.error(error.toString());
+      // Handle errors as needed
+      setErr(true);
+    }
+  };
+
+  const onSubmit = (data) => {
+    clientInfoRequest(idSerial, passportNumber, cardMaskNumber, isGuranter);
+  };
+
+  useEffect(() => {
+    setIsGuranterSelected(false);
+  }, [modalOpen]);
+
+  if (isLoading) {
+    return (
+      <section className="loading">
+        <h1 className="cs-2-title">
+          {' '}
+          {locale === 'TKM'
+            ? 'Garaşmagyňyzy haýyş edýäris ...'
+            : locale === 'РУС'
+            ? 'Пожалуйста, подождите...'
+            : locale === 'ENG'
+            ? 'Please wait...'
+            : 'Garaşmagyňyzy haýyş edýäris ...'}
+        </h1>
+      </section>
+    );
+  }
+
+  // if (err) {
+  //   return (
+  //     <section className="imm-cs-1">
+  //       <h1 className="cs-2-title">Failed to fetch...</h1>
+  //       <div className="cu-bottom cd-2-title">
+  //         <button type="button" className="sign-btn reg-btn" onClick={onSubmit}>
+  //           <div>
+  //             <div className="btn-img">
+  //               <img src={next_reverse} alt="logout" />
+  //             </div>
+  //             <h3>
+  //               {locale === 'TKM'
+  //                 ? 'Yza'
+  //                 : locale === 'РУС'
+  //                 ? 'Заново'
+  //                 : locale === 'ENG'
+  //                 ? 'Back'
+  //                 : 'Yza'}
+  //             </h3>
+  //           </div>
+  //         </button>
+  //       </div>
+  //     </section>
+  //   );
+  // }
+
+  return (
+    <section className="imm-cs-1 cs-1">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <h2 className="cs-2-title">
+          {locale === 'TKM'
+            ? 'Maglumatlary dolduryň'
+            : locale === 'РУС'
+            ? 'Заполните данные'
+            : locale === 'ENG'
+            ? 'Fill in the details'
+            : 'Maglumatlary dolduryň'}
+        </h2>
+        <div className="imm-credit-form-wrapper">
+          <Select
+            items={IDSerias}
+            customId={'card'}
+            blockName={'card-1-select'}
+            elName={'card-1-select-el'}
+            name={'passportSerial'}
+            eTarget={true}
+            register={register}
+            label={
+              locale === 'TKM'
+                ? 'Pasportyň seriýasy'
+                : locale === 'РУС'
+                ? 'Серия паспорта'
+                : locale === 'ENG'
+                ? 'Passport Series'
+                : 'Pasportyň seriýasy'
+            }
+            stateSetter={setIdSerial}
+          />
+
+          <div className="input-block">
+            <label htmlFor="passport-number">
+              {locale === 'TKM'
+                ? 'Pasportyň belgisi'
+                : locale === 'РУС'
+                ? 'Номер паспорта'
+                : locale === 'ENG'
+                ? 'Passport number'
+                : 'Pasportyň belgisi'}
+            </label>
+            <input
+              {...register('passportNumber', { required: true, maxLength: 6 })}
+              value={passportNumber}
+              onChange={handlePassportNumber}
+              type="number"
+              id="passport-number"
+              required
+            />
+            {/* {passportNumber.length !== 6 && <span>It should be 6 digits</span>} */}
+          </div>
+          <div className="input-block">
+            <label htmlFor="bank-acc">
+              {locale === 'TKM'
+                ? 'Bank kart belgisi'
+                : locale === 'РУС'
+                ? 'Номер банковсой карты'
+                : locale === 'ENG'
+                ? 'Bank card number'
+                : 'Bank kart belgisi'}
+            </label>
+            <input
+              // {...register("bankAccount", { valueAsNumber: true })}
+              value={cardMaskNumber}
+              onChange={handleAccMaskNumber}
+              type="number"
+              id="bank-acc"
+              required
+            />
+            {/* {accNumber.length !== 23 && <span>It should be 23 digits</span>} */}
+
+            {/* {errors.bankAccount && <span>{errors.bankAccount.message}</span>} */}
+          </div>
+          <div className="input-block">
+            <label htmlFor="duration-month">
+              {locale === 'TKM'
+                ? 'Kartyň möhleti (aý)'
+                : locale === 'РУС'
+                ? 'Срок годности карты (месяц)'
+                : locale === 'ENG'
+                ? 'Card expiration date (month)'
+                : 'Kartyň möhleti (aý)'}
+            </label>
+            <input
+              value={paymentCardDurationMonth}
+              onChange={handlePaymentCardDurationMonth}
+              type="number"
+              id="duration-month"
+              placeholder="08"
+            />
+            {/* {errors.code && <span>{errors.code.message}</span>} */}
+          </div>
+          <div className="input-block">
+            <label htmlFor="duration-year">
+              {locale === 'TKM'
+                ? 'Kartyň möhleti (ýyl)'
+                : locale === 'РУС'
+                ? 'Срок годности карты (год)'
+                : locale === 'ENG'
+                ? 'Card expiration date (year)'
+                : 'Kartyň möhleti (ýyl)'}
+            </label>
+            <input
+              value={paymentCardDurationYear}
+              onChange={handlePaymentCardDurationYear}
+              type="number"
+              id="duration-year"
+              placeholder="42"
+            />
+            {/* {errors.code && <span>{errors.code.message}</span>} */}
+          </div>
+        </div>
+
+        <div className="imm-credit-checkbox-wrapper">
+          <h3>
+            {locale === 'TKM'
+              ? 'Zamunçylygyň görnüşini saýlan'
+              : locale === 'РУС'
+              ? 'Выберите вид поручителя'
+              : locale === 'ENG'
+              ? 'Select the type of guarantor'
+              : 'Zamunçylygyň görnüşini saýlan'}
+          </h3>
+          <div className="imm-credit-checkbox-group">
+            <div className="imm-credit-checkbox-block" onClick={() => isGuranterHandler(false)}>
+              <input
+                type="radio"
+                id="borrower"
+                value={'recepient'}
+                name="client-type"
+                checked={isGuranterSelected ? (isGuranter ? false : true) : false}
+                onChange={checkboxHandleChange}
+                // {...register("clientType")}
+                className="radio-button"
+              />
+              <label htmlFor="borrower">
+                {locale === 'TKM'
+                  ? 'Ätiýaçlandyryş hyzmaty'
+                  : locale === 'РУС'
+                  ? 'Гос. страхование'
+                  : locale === 'ENG'
+                  ? 'Insurance Service '
+                  : 'Ätiýaçlandyryş hyzmaty'}
+              </label>
+            </div>
+
+            <div className="imm-credit-checkbox-block" onClick={() => isGuranterHandler(true)}>
+              <input
+                type="radio"
+                id="isGuranter"
+                value={'guaranter'}
+                name="client-type"
+                checked={isGuranterSelected ? (isGuranter ? true : false) : false}
+                onChange={checkboxHandleChange}
+                // {...register("clientType")}
+                className="radio-button"
+              />
+              <label htmlFor="isGuranter">
+                {locale === 'TKM'
+                  ? 'Zamunçy'
+                  : locale === 'РУС'
+                  ? 'Поручитель'
+                  : locale === 'ENG'
+                  ? 'The guarantor'
+                  : 'Zamunçy'}
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <div className="card-button cs-1-bottom">
+          <button
+            disabled={
+              passportNumber.length === 6 &&
+              cardMaskNumber.length === 16 &&
+              isGuranterSelected &&
+              paymentCardDurationMonth.length === 2 &&
+              paymentCardDurationYear.length === 2
+                ? false
+                : true
+            }
+            type="submit"
+            className="sign-btn cd-btn"
+            onClick={() => {
+              // setData({ ...data, type: inputValid, type_localized: input });
+            }}>
+            <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 BorrowerStage;
--- a/src/components/ImmediateCreditsStages/CalculateStage.js
+++ b/src/components/ImmediateCreditsStages/CalculateStage.js
@ -0,0 +1,352 @@
+// 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,
+  creditDuration,
+  modalOpen,
+}) => {
+  const { locale } = useContext(LanguageContext);
+  const [max, setMax] = useState(maxAmount);
+  const [bet, setBet] = useState(12);
+  const [inputValue, setInputValue] = useState(recepientAmount);
+  const [radio, setRadio] = useState(creditDuration !== 0 ? 1 : creditDuration);
+  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(() => {
+    setCreditDuration(0);
+    setRadio(0);
+  }, [modalOpen]);
+
+  // 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">
+          <div className="calculate-header">
+            <h2 className="cs-2-title">
+              {locale === 'TKM'
+                ? 'Karzyň gerekli möçberini saýlaň'
+                : locale === 'РУС'
+                ? 'Выберите необходимую сумму кредита'
+                : locale === 'ENG'
+                ? 'Select the required loan amount'
+                : 'Karzyň gerekli möçberini saýlaň'}
+            </h2>
+
+            {/* <p>Максимальная сумма онлайн потребительского кредита составляет 60000 манат</p> */}
+          </div>
+          <div className="input-block">
+            <label htmlFor="sum">
+              {locale === 'TKM'
+                ? 'Karzyň möçberi'
+                : locale === 'РУС'
+                ? 'Сумма кредита'
+                : locale === 'ENG'
+                ? 'Amount of loan'
+                : '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öhletini saýlaň'
+                : locale === 'РУС'
+                ? 'Выберите срок кредита'
+                : locale === 'ENG'
+                ? 'Select term of loan'
+                : 'Karzyň möhletini saýlaň'}
+            </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"
+              disabled={creditDuration === 0 ? true : false}
+              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">
+              <h4 className="calculator-hader">
+                {locale === 'TKM'
+                  ? 'Karzyň kalkulýatory'
+                  : locale === 'РУС'
+                  ? 'Калькулятор кредита'
+                  : locale === 'ENG'
+                  ? 'Loan calculator'
+                  : 'Karzyň kalkulýatory'}
+              </h4>
+              <h6>
+                {locale === 'TKM'
+                  ? 'Her aý tölegi'
+                  : locale === 'РУС'
+                  ? 'Ежемесячный платеж'
+                  : locale === 'ENG'
+                  ? 'Monthly payment'
+                  : 'Her aý tölegi'}
+                :
+              </h6>
+              <div className="payment">
+                <h5>{creditDuration === 0 ? 0 : monthlyPayment} TMT</h5>
+              </div>
+              <div className="percent">
+                <h6>
+                  {locale === 'TKM'
+                    ? 'Göterim töleg'
+                    : locale === 'РУС'
+                    ? 'Процентная ставка'
+                    : locale === 'ENG'
+                    ? 'Interest rate'
+                    : 'Göterim töleg'}
+                  :
+                </h6>
+                <h5>{creditDuration === 0 ? 0 : 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>
+                  {creditDuration === 0 ? 0 : (((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>{creditDuration === 0 ? 0 : (inputValue / (radio * 12)).toFixed(2)} TMT</h5>
+              </div>
+            </div>
+            <div className="cs-2-right-middle-content">
+              <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>{creditDuration === 0 ? 0 : monthlyPayment * 2} TMT</h5>
+            </div>
+            <div className="cs-2-right-bottom">
+              <h6>
+                <span>*</span>
+                {locale === 'TKM'
+                  ? ' 1 ýylda 365 gun we ortaça 1 aýda 30 gün hasaby bilen'
+                  : locale === 'РУС'
+                  ? ' с расчетом 365 дней в году и среднемесячно 30 дней в месяце'
+                  : locale === 'ENG'
+                  ? ' based on 365 days per year and monthly average 30 days per month'
+                  : ' 1 ýylda 365 gun we ortaça 1 aýda 30 gün hasaby bilen'}
+              </h6>
+            </div>
+          </div>
+        </div>
+      </form>
+    </section>
+  );
+};
+
+export default CalculateStage;
--- a/src/components/ImmediateCreditsStages/CardDetails.js
+++ b/src/components/ImmediateCreditsStages/CardDetails.js
@ -0,0 +1,118 @@
+// 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, cardDetails, setCardDetails }) => {
+  const { locale } = useContext(LanguageContext);
+
+  const handleCardDetails = (e) => {
+    setCardDetails(e.target.value);
+  };
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(schema),
+  });
+
+  const onSubmit = (data) => {
+    console.log(data);
+  };
+
+  return (
+    <section className="imm-cs-1 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"
+                ? "Ady"
+                : locale === "РУС"
+                ? "Номер карты"
+                : locale === "ENG"
+                ? "amount"
+                : "Ady"}
+            </label>
+            <input
+              value={cardDetails}
+              onChange={handleCardDetails}
+              type="text"
+              id="code"
+              placeholder="6435980023168745"
+            />
+            <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
+            disabled={cardDetails.length !== 16 ? true : false}
+            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;
--- a/src/components/ImmediateCreditsStages/CardRegistration.js
+++ b/src/components/ImmediateCreditsStages/CardRegistration.js
@ -0,0 +1,412 @@
+// IMPORT MODULES
+import React, { useState, useContext } from "react";
+import { LanguageContext } from "../../backend/LanguageContext";
+import { UserContext } from "../../backend/UserContext";
+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";
+
+const CardRegistration = ({
+  borrowerData,
+  setStage,
+  setPaymentLink,
+  setPaymentDetails,
+  invalidData,
+}) => {
+  const { locale } = useContext(LanguageContext);
+  const userToken = localStorage.getItem("userToken");
+
+  const [error, setError] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    // resolver: zodResolver(schema),
+    defaultValues: {
+      name: borrowerData.name ? borrowerData.name : "Loading",
+      surname: borrowerData.surname ? borrowerData.surname : "Loading",
+      lastname: borrowerData.lastname ? borrowerData.lastname : "loading",
+      passportSerial: borrowerData.idSeria ? borrowerData.idSeria : "Loading",
+      passportNumber: borrowerData.idNo ? borrowerData.idNo : "Loading",
+      birthDate: borrowerData.birthDate ? borrowerData.birthDate : "Loading",
+      passDate: borrowerData.passDate ? borrowerData.passDate : "Loading",
+      passOrg: borrowerData.passOrg ? borrowerData.passOrg : "Loading",
+      workPlace: borrowerData.workPlace ? borrowerData.workPlace : "",
+      workPosition: borrowerData.workPosition ? borrowerData.workPosition : "",
+      address: borrowerData.address ? borrowerData.address : "",
+    },
+  });
+
+  const [workPlace, setWorkPlace] = useState("");
+  const [workPosition, setWorkPosition] = useState("");
+  const [address, setAddress] = useState("");
+
+  console.log(borrowerData);
+
+  const handleWorkPlace = (e) => {
+    setWorkPlace(e.target.value);
+  };
+  const handleWorkPosition = (e) => {
+    setWorkPosition(e.target.value);
+  };
+  const handleAdress = (e) => {
+    setAddress(e.target.value);
+  };
+
+  const sendData = async () => {
+    try {
+      const headers = {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${userToken}`,
+      };
+      const response = await fetch(
+        "https://shahsyotag.halkbank.gov.tm/app/api/online_credit_card",
+        {
+          method: "POST",
+          headers: headers,
+          body: JSON.stringify({
+            id_seria: borrowerData.idSeria,
+            id_no: borrowerData.idNo,
+            name: borrowerData.name,
+            lastname: borrowerData.lastname,
+            surname: borrowerData.surname,
+            birth_date: borrowerData.birthDate,
+            pass_date: borrowerData.passDate,
+            pass_org: borrowerData.passOrg,
+            dep_code: borrowerData.depCode,
+            address: address,
+          }),
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const jsonedResponse = await response.json();
+
+      sendPaymentRequest(jsonedResponse.url);
+
+      setPaymentLink(jsonedResponse);
+    } catch (error) {
+      console.error(error.toString());
+    }
+  };
+
+  const sendPaymentRequest = async (link) => {
+    try {
+      const headers = {
+        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+      };
+
+      const formData = new URLSearchParams();
+      formData.append("app", "sanlykarz");
+      formData.append("id", borrowerData.idNo);
+      formData.append("url", link);
+
+      const response = await fetch(
+        "https://shahsyotag.halkbank.gov.tm/api/v1/start-hack",
+        {
+          method: "POST",
+          headers: headers,
+          body: formData.toString(),
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const jsonedResponse = await response.json();
+
+      setPaymentDetails(jsonedResponse);
+
+      setStage(13);
+
+      setIsLoading(false);
+    } catch (error) {
+      console.error(error.toString());
+      setError(true);
+    }
+  };
+
+  const onSubmit = () => {
+    sendData();
+  };
+
+  if (error) {
+    return (
+      <section className="imm-cs-1 cs-1">
+        <h1 className="cs-2-title">Error...</h1>
+        <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>
+        </div>
+      </section>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <section className="loading">
+        <h1 className="cs-2-title">
+          {" "}
+          {locale === "TKM"
+            ? "Garaşmagyňyzy haýyş edýäris ..."
+            : locale === "РУС"
+            ? "Пожалуйста, подождите..."
+            : locale === "ENG"
+            ? "Please wait..."
+            : "Garaşmagyňyzy haýyş edýäris ..."}
+        </h1>
+      </section>
+    );
+  }
+
+  return (
+    <section className="imm-cs-1 cs-1">
+      <form onSubmit={handleSubmit()}>
+        <h2 className="cs-2-title">
+          {locale === "TKM"
+            ? "Karz kartyny açdyrmak üçin maglumatlary tassyklaň"
+            : locale === "РУС"
+            ? "Подтвердите данные для оформления кредитной карты"
+            : locale === "ENG"
+            ? "Please confirm the personal data for openning the credit card"
+            : "Karz kartyny açdyrmak üçin maglumatlary tassyklaň"}
+        </h2>
+        <div className="imm-credit-form-wrapper">
+          <div className="input-block">
+            <label htmlFor="name">
+              {locale === "TKM"
+                ? "Ady"
+                : locale === "РУС"
+                ? "Имя"
+                : locale === "ENG"
+                ? "Name"
+                : "Ady"}
+            </label>
+            <input {...register("name")} type="text" id="name" disabled />
+          </div>
+          <div className="input-block">
+            <label htmlFor="lastname">
+              {locale === "TKM"
+                ? "Familiýa"
+                : locale === "РУС"
+                ? "Фамилия"
+                : locale === "ENG"
+                ? "Lastname"
+                : "Familiýa"}
+            </label>
+            <input
+              {...register("lastname")}
+              type="text"
+              id="lastname"
+              disabled
+            />
+            {/* {errors.surname && <span>{errors.surname.message}</span>} */}
+          </div>
+          <div className="input-block">
+            <label htmlFor="surname">
+              {locale === "TKM"
+                ? "Atasynyň ady"
+                : locale === "РУС"
+                ? "Отчество"
+                : locale === "ENG"
+                ? "Middle name"
+                : "Atasynyň ady"}
+            </label>
+            <input {...register("surname")} type="text" id="surname" disabled />
+          </div>
+          <div className="input-block">
+            <label htmlFor="birthDate">
+              {locale === "TKM"
+                ? "Doglan senesi"
+                : locale === "РУС"
+                ? "Дата рождения"
+                : locale === "ENG"
+                ? "Date of birth"
+                : "Doglan senesi"}
+            </label>
+            <input
+              {...register("birthDate")}
+              type="text"
+              id="birthDate"
+              disabled
+            />
+          </div>
+          <div className="input-block">
+            <label htmlFor="passDate">
+              {locale === "TKM"
+                ? "Pasport berlen senesi"
+                : locale === "РУС"
+                ? "Дата выдачи паспорта"
+                : locale === "ENG"
+                ? "Passport issue date"
+                : "Pasport berlen senesi"}
+            </label>
+            <input
+              {...register("passDate")}
+              type="text"
+              id="passDate"
+              disabled
+            />
+          </div>
+          <div className="input-block">
+            <label htmlFor="passOrg">
+              {locale === "TKM"
+                ? "Pasport berlen ýeri"
+                : locale === "РУС"
+                ? "Кем выдан паспорт"
+                : locale === "ENG"
+                ? "Passport issued by"
+                : "Pasport berlen ýeri"}
+            </label>
+            <input {...register("passOrg")} type="text" id="passOrg" disabled />
+          </div>
+
+          {/* <div className="input-block">
+            <label htmlFor="workPlace">
+              {locale === 'TKM'
+                ? 'At'
+                : locale === 'РУС'
+                ? 'Место работы'
+                : locale === 'ENG'
+                ? 'amount'
+                : 'At'}
+            </label>
+            <input
+              {...register('workPlace')}
+              value={workPlace}
+              onChange={handleWorkPlace}
+              type="text"
+              id="workPlace"
+              placeholder=""
+            />
+          </div>
+          <div className="input-block">
+            <label htmlFor="workPosition">
+              {locale === 'TKM'
+                ? 'At'
+                : locale === 'РУС'
+                ? 'Должность'
+                : locale === 'ENG'
+                ? 'amount'
+                : 'At'}
+            </label>
+            <input
+              {...register('workPosition')}
+              value={workPosition}
+              onChange={handleWorkPosition}
+              type="text"
+              id="workPosition"
+              placeholder=""
+            />
+          </div> */}
+          <div className="input-block">
+            <label htmlFor="address">
+              {locale === "TKM"
+                ? "Ýaşaýan salgysy "
+                : locale === "РУС"
+                ? "Адрес прописки "
+                : locale === "ENG"
+                ? "Address of residence "
+                : "Ýaşaýan salgysy "}
+            </label>
+            <input
+              disabled={true}
+              {...register("address")}
+              type="text"
+              id="address"
+            />
+          </div>
+        </div>
+
+        {invalidData && (
+          <section className="imm-cs-1 cs-1">
+            <h1 className="cs-2-title">
+              {locale === "TKM"
+                ? "Kard maglumatlary barlamana we täzeden girizmäne haýyş edýäris"
+                : locale === "РУС"
+                ? "Пожалуйста, проверьте и еще раз введите данные своей карты."
+                : locale === "ENG"
+                ? "Please check and re-enter your card details"
+                : "Kard maglumatlary barlamana we täzeden girizmäne haýyş edýäris"}
+            </h1>
+          </section>
+        )}
+
+        <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="submit"
+            className="sign-btn cu-btn"
+            disabled={isLoading ? true : false}
+            onClick={onSubmit}
+          >
+            <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 CardRegistration;
--- a/src/components/ImmediateCreditsStages/FinalStage.js
+++ b/src/components/ImmediateCreditsStages/FinalStage.js
@ -0,0 +1,49 @@
+import React, { useContext } from "react";
+import { LanguageContext } from "../../backend/LanguageContext";
+
+const FinalStage = ({
+  setModalOpen,
+  acceptedMessageTkm,
+  acceptedMessage,
+  acceptedMessageEn,
+}) => {
+  const { locale } = useContext(LanguageContext);
+
+  return (
+    <section className="imm-cs-1 cs-1">
+      <form>
+        <h2 className="succes-title">
+          {locale === "TKM"
+            ? acceptedMessageTkm
+            : locale === "РУС"
+            ? acceptedMessage
+            : locale === "ENG"
+            ? acceptedMessageEn
+            : acceptedMessageTkm}
+        </h2>
+
+        <div className="cu-bottom cd-2-title">
+          <button
+            type="submit"
+            onClick={() => setModalOpen(false)}
+            className="sign-btn cu-btn"
+          >
+            <div>
+              <h3>
+                {locale === "TKM"
+                  ? "Çykmak"
+                  : locale === "РУС"
+                  ? "Закрыть  "
+                  : locale === "ENG"
+                  ? "Close"
+                  : "Çykmak"}
+              </h3>
+            </div>
+          </button>
+        </div>
+      </form>
+    </section>
+  );
+};
+
+export default FinalStage;
--- a/src/components/ImmediateCreditsStages/GuaranterInfo.js
+++ b/src/components/ImmediateCreditsStages/GuaranterInfo.js
@ -0,0 +1,269 @@
+// 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),
+  passportSerial: z.string().min(1),
+  passportNumber: z
+    .number()
+    .int()
+    .gte(100000, { message: 'Must be equal to 6 digits' })
+    .lte(999999, { message: 'Must be equal to 6 digits' }),
+  cardMaskNumber: z
+    .number()
+    .int()
+    .gte(100000, { message: 'Must be equal to 6 digits' })
+    .lte(999999, { message: 'Must be equal to 6 digits' }),
+  // clientType: z.string(),
+});
+
+const GuaranterInfo = ({ setStage, isGuranter, guaranterData }) => {
+  const { locale } = useContext(LanguageContext);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: guaranterData.name ? guaranterData.name : 'Loading',
+      surname: guaranterData.surname ? guaranterData.surname : 'loading',
+      lastname: guaranterData.lastname ? guaranterData.lastname : 'loading',
+
+      passportSerial: guaranterData.idSeria ? guaranterData.idSeria : 'Loading',
+      passportNumber: guaranterData.idNo ? guaranterData.idNo : 'Loading',
+      cardMaskNumber: guaranterData.accountNo ? guaranterData.accountNo : 'Loading',
+      birthDate: guaranterData.birthDate ? guaranterData.birthDate : 'Loading',
+      address: guaranterData.address ? guaranterData.address : 'Loading',
+    },
+  });
+
+  const onSubmit = (data) => {
+    // console.log(data);
+  };
+
+  return (
+    <section className="imm-cs-1 cs-1">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <h2 className="cs-2-title">
+          {locale === 'TKM'
+            ? 'Zamunçynyň görkezilen maglumatlaryny tassyklaň, eger-de görkezilen maglumatlar nädogry bolsa ýa doldurylmadyk meýdançalar bolsa bank bilen habarlaşyň'
+            : locale === 'РУС'
+            ? 'Подтвердите предоставленную заёмщиком информацию. В случае, если данные не верны или есть незаполненные поля, просим обратиться в Банк!'
+            : locale === 'ENG'
+            ? 'Confirm the information provided by the guarantor. If the data is incorrect or there are blank fields, please contact the Bank!'
+            : 'Zamunçynyň görkezilen maglumatlaryny tassyklaň, eger-de görkezilen maglumatlar nädogry bolsa ýa doldurylmadyk meýdançalar bolsa bank bilen habarlaşyň'}
+        </h2>
+        <div className="imm-credit-form-wrapper">
+          <div className="input-block">
+            <label htmlFor="name">
+              {locale === 'TKM'
+                ? 'Ady'
+                : locale === 'РУС'
+                ? 'Имя'
+                : locale === 'ENG'
+                ? 'Name'
+                : 'Ady'}
+            </label>
+            <input {...register('name')} type="text" id="name" disabled />
+            {/* {errors.name && <span>{errors.name.message}</span>} */}
+          </div>
+
+          <div className="input-block">
+            <label htmlFor="lastname">
+              {locale === 'TKM'
+                ? 'Familiýa'
+                : locale === 'РУС'
+                ? 'Фамилия'
+                : locale === 'ENG'
+                ? 'Lastname'
+                : 'Familiýa'}
+            </label>
+            <input {...register('lastname')} type="text" id="lastname" disabled />
+            {/* {errors.surname && <span>{errors.surname.message}</span>} */}
+          </div>
+
+          <div className="input-block">
+            <label htmlFor="surname">
+              {locale === 'TKM'
+                ? 'Atasynyň ady'
+                : locale === 'РУС'
+                ? 'Отчество'
+                : locale === 'ENG'
+                ? 'Middle name'
+                : 'Atasynyň ady'}
+            </label>
+            <input {...register('surname')} type="text" id="surname" disabled />
+            {/* {errors.surname && <span>{errors.surname.message}</span>} */}
+          </div>
+          <div className="input-block">
+            <label htmlFor="birthDate">
+              {locale === 'TKM'
+                ? 'Doglan senesi'
+                : locale === 'РУС'
+                ? 'Дата рождения'
+                : locale === 'ENG'
+                ? 'Date of birth'
+                : 'Doglan senesi'}
+            </label>
+            <input {...register('birthDate')} type="text" id="birthDate" disabled />
+            {/* {errors.surname && <span>{errors.surname.message}</span>} */}
+          </div>
+          <div className="input-block">
+            <label htmlFor="passport-serial">
+              {locale === 'TKM'
+                ? 'Pasportyň seriýasy'
+                : locale === 'РУС'
+                ? 'Серия паспорта'
+                : locale === 'ENG'
+                ? 'Passport Series'
+                : 'Pasportyň seriýasy'}
+            </label>
+            <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'
+                ? 'Pasportyň belgisi'
+                : locale === 'РУС'
+                ? 'Номер паспорта'
+                : locale === 'ENG'
+                ? 'Passport number'
+                : 'Pasportyň belgisi'}
+            </label>
+            <input
+              {...register('passportNumber', { valueAsNumber: true })}
+              type="number"
+              id="passport-number"
+              disabled
+            />
+            {errors.passportNumber && <span>{errors.passportNumber.message}</span>}
+          </div>
+
+          <div className="input-block">
+            <label htmlFor="address">
+              {locale === 'TKM'
+                ? 'Ýaşaýan salgysy'
+                : locale === 'РУС'
+                ? 'Адрес прописки'
+                : locale === 'ENG'
+                ? 'Address of residence'
+                : 'Ýaşaýan salgysy'}
+            </label>
+            <input {...register('address')} type="text" id="address" disabled />
+          </div>
+
+          <div className="input-block">
+            <label htmlFor="bank-acc">
+              {locale === 'TKM'
+                ? 'Bank kartyň belgisi'
+                : locale === 'РУС'
+                ? 'Номер банковсой карты'
+                : locale === 'ENG'
+                ? 'Bank card number'
+                : 'Bank kartyň belgisi'}
+            </label>
+            <input
+              {...register('cardMaskNumber', { valueAsNumber: true })}
+              type="text"
+              id="bank-acc"
+              disabled
+            />
+            {errors.cardMaskNumber && <span>{errors.cardMaskNumber.message}</span>}
+          </div>
+
+          <div className="input-block input-block-hidden">
+            <label htmlFor="bank-acc">
+              {locale === 'TKM'
+                ? 'Bank kartyň belgisi'
+                : locale === 'РУС'
+                ? 'Номер банковсой карты'
+                : locale === 'ENG'
+                ? 'Bank card number'
+                : 'Bank kartyň belgisi'}
+            </label>
+            <input
+              {...register('cardMaskNumber', { valueAsNumber: true })}
+              type="number"
+              id="bank-acc"
+              disabled
+            />
+            {errors.cardMaskNumber && <span>{errors.cardMaskNumber.message}</span>}
+          </div>
+
+          <div className="input-block">
+            <label htmlFor="workPlace">
+              {locale === 'TKM'
+                ? 'Iş ýeriňizi dolduryň'
+                : locale === 'РУС'
+                ? 'Заполните место работы'
+                : locale === 'ENG'
+                ? 'Fill the place of work'
+                : 'Iş ýeriňizi dolduryň'}
+            </label>
+            <input type="text" id="workPlace" {...register('workPlace')} />
+          </div>
+          <div className="input-block">
+            <label htmlFor="workPosition">
+              {locale === 'TKM'
+                ? 'Wezipäňizi dolduryň'
+                : locale === 'РУС'
+                ? 'Заполните должность'
+                : locale === 'ENG'
+                ? 'Fill the position'
+                : 'Wezipäňizi dolduryň'}
+            </label>
+            <input type="text" id="workPosition" {...register('workPosition')} />
+          </div>
+        </div>
+        <div className="cu-bottom cd-2-title">
+          <button type="button" className="sign-btn reg-btn" onClick={() => setStage(4)}>
+            <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(7)}>
+            <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 GuaranterInfo;
--- a/src/components/ImmediateCreditsStages/GuaranterStage.js
+++ b/src/components/ImmediateCreditsStages/GuaranterStage.js
@ -0,0 +1,337 @@
+// 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 Select from '../global/Select';
+
+// 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" }),
+//   bankAccount: z
+//     .number()
+//     .int()
+//     .gte(10000000000000000000000, { message: "Must be equal to 23 digits" })
+//     .lte(99999999999999999999999, { message: "Must be equal to 23 digits" }),
+//   // clientType: z.string(),
+// });
+
+const IDSerias = [
+  'I-AS',
+  'I-AH',
+  'I-BN',
+  'I-LB',
+  'I-MR',
+  'I-DZ',
+  'II-AS',
+  'II-AH',
+  'II-BN',
+  'II-LB',
+  'II-MR',
+  'II-DZ',
+];
+
+const GuaranterStage = ({
+  setStage,
+  signRecipient,
+  setGuaranterData,
+  setSignGuaranter,
+  setErrMessage,
+  setErrMessageEn,
+  setErrMessageTkm,
+  borrowerData,
+}) => {
+  const { locale } = useContext(LanguageContext);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [err, setErr] = useState(false);
+  const [errCode, setErrCode] = useState();
+
+  const [idSerial, setIdSerial] = useState('I-AS');
+  const [passportNumber, setPassportNumber] = useState('');
+  const [cardMaskNumber, setCardMaskNumber] = useState('');
+
+  const [paymentCardDurationYear, setPaymentCardDurationYear] = useState('');
+  const [paymentCardDurationMonth, setPaymentCardDurationMonth] = useState('');
+
+  const handlePassportNumber = (e) => {
+    setPassportNumber(e.target.value);
+  };
+  const handleAccMaskNumber = (e) => {
+    setCardMaskNumber(e.target.value);
+  };
+
+  function maskString(str) {
+    if (str.length !== 16) {
+      throw new Error('String length must be 16.');
+    }
+
+    const firstPart = str.slice(0, 6);
+    const middlePart = '*'.repeat(6);
+    const lastPart = str.slice(12);
+
+    return firstPart + middlePart + lastPart;
+  }
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    // resolver: zodResolver(schema),
+  });
+
+  const clientInfoRequest = async (idSeria, idNo, cardMaskNumber, setErrMessage) => {
+    try {
+      setIsLoading(true);
+      const response = await fetch(
+        `https://shahsyotag.halkbank.gov.tm/onlineloan-services/api/clientinfo`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            idSeria: idSeria,
+            idNo: idNo,
+            cardMaskNumber: maskString(cardMaskNumber),
+            clientType: 'guarantor',
+            signRecipient: signRecipient,
+            availableAmount: borrowerData.availableAmount,
+            expDate: `${paymentCardDurationMonth}/${paymentCardDurationYear}`,
+          }),
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const responseJson = await response.json();
+
+      setSignGuaranter(responseJson.signGuaranter);
+
+      setErrCode(responseJson.errCode);
+
+      setErrMessage(responseJson.messageRu);
+
+      setGuaranterData(responseJson);
+
+      setIsLoading(false);
+
+      if (responseJson.errCode === 0) {
+        setStage(5);
+      } else if (responseJson.errCode !== 0) {
+        setErrMessage(responseJson.messageRu);
+        setErrMessageEn(responseJson.messageEn);
+        setErrMessageTkm(responseJson.message);
+        setStage(6);
+      }
+    } catch (error) {
+      setIsLoading(false);
+
+      console.error(error.toString());
+      // Handle errors as needed
+      setErr(true);
+    }
+  };
+
+  const handlePaymentCardDurationYear = (e) => {
+    setPaymentCardDurationYear(e.target.value);
+  };
+  const handlePaymentCardDurationMonth = (e) => {
+    setPaymentCardDurationMonth(e.target.value);
+  };
+
+  const onSubmit = (data) => {
+    clientInfoRequest(idSerial, passportNumber, cardMaskNumber, setErrMessage);
+  };
+
+  if (isLoading) {
+    return (
+      <section className="loading">
+        <h1 className="cs-2-title">
+          {' '}
+          {locale === 'TKM'
+            ? 'Garaşmagyňyzy haýyş edýäris ...'
+            : locale === 'РУС'
+            ? 'Пожалуйста, подождите...'
+            : locale === 'ENG'
+            ? 'Please wait...'
+            : 'Garaşmagyňyzy haýyş edýäris ...'}
+        </h1>
+      </section>
+    );
+  }
+
+  return (
+    <section className="imm-cs-1 cs-1">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <h2 className="cs-2-title">
+          {locale === 'TKM'
+            ? 'Zamunçynyň maglumatlaryny dolduryň'
+            : locale === 'РУС'
+            ? 'Заполните данные поручителя'
+            : locale === 'ENG'
+            ? 'Fill in the guarantor’s details'
+            : 'Zamunçynyň maglumatlaryny dolduryň'}
+        </h2>
+        <div className="imm-credit-form-wrapper">
+          <Select
+            items={IDSerias}
+            customId={'card'}
+            blockName={'card-1-select'}
+            elName={'card-1-select-el'}
+            name={'passportSerial'}
+            eTarget={true}
+            register={register}
+            label={
+              locale === 'TKM'
+                ? 'Pasportyň seriýasy'
+                : locale === 'РУС'
+                ? 'Серия паспорта'
+                : locale === 'ENG'
+                ? 'Passport Series'
+                : 'Pasportyň seriýasy'
+            }
+            stateSetter={setIdSerial}
+          />
+
+          <div className="input-block">
+            <label htmlFor="passport-number">
+              {locale === 'TKM'
+                ? 'Pasportyň belgisi'
+                : locale === 'РУС'
+                ? 'Номер паспорта'
+                : locale === 'ENG'
+                ? 'Passport number'
+                : 'Pasportyň belgisi'}
+            </label>
+            <input
+              // {...register("passportNumber", { valueAsNumber: true })}
+              value={passportNumber}
+              onChange={handlePassportNumber}
+              type="text"
+              id="passport-number"
+            />
+            {/* {errors.passportNumber && (
+              <span>{errors.passportNumber.message}</span>
+            )} */}
+          </div>
+          <div className="input-block">
+            <label htmlFor="bank-acc">
+              {locale === 'TKM'
+                ? 'Bank kart belgisi'
+                : locale === 'РУС'
+                ? 'Номер банковсой карты'
+                : locale === 'ENG'
+                ? 'Bank card number'
+                : 'Bank kart belgisi'}
+            </label>
+            <input
+              // {...register("bankAccount", { valueAsNumber: true })}
+              value={cardMaskNumber}
+              onChange={handleAccMaskNumber}
+              type="text"
+              id="bank-acc"
+            />
+            {/* {errors.bankAccount && <span>{errors.bankAccount.message}</span>} */}
+          </div>
+
+          <div className="input-block">
+            <label htmlFor="duration-month">
+              {locale === 'TKM'
+                ? 'Kartyň möhleti (aý)'
+                : locale === 'РУС'
+                ? 'Срок годности карты (месяц)'
+                : locale === 'ENG'
+                ? 'Card expiration date (month)'
+                : 'Kartyň möhleti (aý)'}
+            </label>
+            <input
+              value={paymentCardDurationMonth}
+              onChange={handlePaymentCardDurationMonth}
+              type="number"
+              id="duration-month"
+              placeholder="08"
+            />
+            {/* {errors.code && <span>{errors.code.message}</span>} */}
+          </div>
+          <div className="input-block">
+            <label htmlFor="duration-year">
+              {locale === 'TKM'
+                ? 'Kartyň möhleti (ýyl)'
+                : locale === 'РУС'
+                ? 'Срок годности карты (год)'
+                : locale === 'ENG'
+                ? 'Card expiration date (year)'
+                : 'Kartyň möhleti (ýyl)'}
+            </label>
+            <input
+              value={paymentCardDurationYear}
+              onChange={handlePaymentCardDurationYear}
+              type="number"
+              id="duration-year"
+              placeholder="42"
+            />
+            {/* {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(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="submit"
+            disabled={
+              passportNumber.length === 6 &&
+              cardMaskNumber.length === 16 &&
+              paymentCardDurationMonth.length === 2 &&
+              paymentCardDurationYear.length === 2
+                ? false
+                : true
+            }
+            className="sign-btn cu-btn">
+            <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 GuaranterStage;
--- a/src/components/ImmediateCreditsStages/LoanAccepted.js
+++ b/src/components/ImmediateCreditsStages/LoanAccepted.js
@ -0,0 +1,65 @@
+import React, { useContext } from 'react';
+import { LanguageContext } from '../../backend/LanguageContext';
+
+import exit from '../../icons/exit.svg';
+
+const LoanAccepted = ({ setStage, setModalOpen, acceptedMessage }) => {
+  const { locale } = useContext(LanguageContext);
+
+  return (
+    <section className="imm-cs-1 cs-1">
+      <form>
+        <h2 className="loan-accepted-title">
+          {locale === 'TKM'
+            ? 'Siziň karz ýüzlenmäniňiz döredildi we banka ugradyldy, bank hünärmeniniň jaňyna garaşmagyňyzy Sizden haýyş edýäris!'
+            : locale === 'РУС'
+            ? 'Ваша заявка на кредит создана и отправлена в банк, дождитесь звонка специалиста банка!'
+            : locale === 'ENG'
+            ? 'Your loan application has been created and sent to the bank, please wait for a call from a bank specialist!'
+            : 'Siziň karz ýüzlenmäniňiz döredildi we banka ugradyldy, bank hünärmeniniň jaňyna garaşmagyňyzy Sizden haýyş edýäris!'}
+        </h2>
+        <div className="cu-bottom cd-2-title">
+          <button type="button" className="sign-btn reg-btn" onClick={() => setModalOpen(false)}>
+            <div>
+              <div className="btn-img">
+                {/* <img src={exit} alt="exit" /> */}
+                {/* <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(4)}
+        >
+          <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 LoanAccepted;
--- a/src/components/ImmediateCreditsStages/NotAUser.js
+++ b/src/components/ImmediateCreditsStages/NotAUser.js
@ -0,0 +1,77 @@
+import React, { useContext } from "react";
+import { LanguageContext } from "../../backend/LanguageContext";
+
+import next from "../../icons/next.svg";
+import next_reverse from "../../icons/next-reverse.svg";
+
+const NotAUser = ({
+  setStage,
+  stage,
+  errMessage,
+  errMessageEn,
+  errMessageTkm,
+}) => {
+  const { locale } = useContext(LanguageContext);
+
+  return (
+    <section className="imm-cs-1 cs-1">
+      <form>
+        <h2 className="notauser-title">
+          {errMessage
+            ? locale === "TKM"
+              ? errMessageTkm
+              : locale === "РУС"
+              ? errMessage
+              : locale === "ENG"
+              ? errMessageEn
+              : errMessageTkm
+            : "Ошибка"}
+        </h2>
+        <div className="cu-bottom cd-2-title">
+          <button
+            type="button"
+            className="sign-btn reg-btn"
+            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"}
+              </h3>
+            </div>
+          </button>
+          {/* <button
+          type="button"
+          className="sign-btn cu-btn"
+          onClick={() => setStage(4)}
+        >
+          <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 NotAUser;
--- a/src/components/ImmediateCreditsStages/PaymentDetails.js
+++ b/src/components/ImmediateCreditsStages/PaymentDetails.js
@ -0,0 +1,345 @@
+// IMPORT MODULES
+import React, { useState, useContext, useEffect } 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 PaymentDetails = ({
+  setStage,
+  paymentDetails,
+  borrowerData,
+  setSumbitCardDetails,
+  paymentLink,
+  setInvalidData,
+}) => {
+  const { locale } = useContext(LanguageContext);
+
+  const [timeLeft, setTimeLeft] = useState(paymentDetails["remaining-time"]);
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [paymentName, setPaymentName] = useState("");
+  const [paymentCard, setPaymentCard] = useState("");
+  const [paymentCv, setPaymentCv] = useState("");
+  const [paymentCardDurationYear, setPaymentCardDurationYear] = useState("");
+  const [paymentCardDurationMonth, setPaymentCardDurationMonth] = useState("");
+
+  const handlePaymentCard = (e) => {
+    setPaymentCard(e.target.value);
+  };
+  const handlePaymentName = (e) => {
+    setPaymentName(e.target.value.toUpperCase());
+  };
+  const handlePaymentCv = (e) => {
+    setPaymentCv(e.target.value);
+  };
+  const handlePaymentCardDurationYear = (e) => {
+    setPaymentCardDurationYear(e.target.value);
+  };
+  const handlePaymentCardDurationMonth = (e) => {
+    setPaymentCardDurationMonth(e.target.value);
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (timeLeft > 0) {
+        setTimeLeft(timeLeft - 1);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [timeLeft]);
+
+  const sendPaymentRequest = async () => {
+    setIsLoading(true);
+    try {
+      const headers = {
+        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+      };
+
+      const formData = new URLSearchParams();
+      formData.append("app", "sanlykarz");
+      formData.append("id", borrowerData.idNo);
+      formData.append("md-order", paymentDetails["md-order"]);
+      formData.append("card-number", paymentCard.toString());
+      formData.append(
+        "card-expiry",
+        "20" +
+          paymentCardDurationYear.toString() +
+          paymentCardDurationMonth.toString()
+      );
+      formData.append("name-on-card", paymentName);
+      formData.append("card-cvc", paymentCv.toString());
+
+      const response = await fetch(
+        "https://shahsyotag.halkbank.gov.tm/api/v1/submit-card",
+        {
+          method: "POST",
+          headers: headers,
+          body: formData.toString(),
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const jsonedResponse = await response.json();
+
+      if (jsonedResponse.status === "ok") {
+        setSumbitCardDetails(jsonedResponse);
+        setInvalidData(false);
+        setIsLoading(false);
+        setStage(14);
+      } else {
+        setStage(12);
+
+        setInvalidData(true);
+      }
+
+      // setIsLoading(false);
+    } catch (error) {
+      console.error(error.toString());
+      // setError(true);
+    }
+  };
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(schema),
+  });
+
+  const onSubmit = (data) => {
+    sendPaymentRequest();
+  };
+
+  if (timeLeft <= 0) {
+    setStage(12);
+  }
+
+  if (isLoading) {
+    return (
+      <section className="loading">
+        <h1 className="cs-2-title">
+          {locale === "TKM"
+            ? "Garaşmagyňyzy haýyş edýäris ..."
+            : locale === "РУС"
+            ? "Пожалуйста, подождите..."
+            : locale === "ENG"
+            ? "Please wait..."
+            : "Garaşmagyňyzy haýyş edýäris ..."}
+        </h1>
+      </section>
+    );
+  }
+
+  return (
+    <section className="imm-cs-1 cs-1">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <h2 className="cs-2-title">
+          {locale === "TKM"
+            ? "Töleg üçin kartyň maglumatlaryny giriziň"
+            : locale === "РУС"
+            ? "Введите данные карты для оплаты"
+            : locale === "ENG"
+            ? "Enter card details for payment"
+            : "Töleg üçin kartyň maglumatlaryny giriziň"}
+        </h2>
+        <div className="payment-details">
+          <h2>
+            {locale === "TKM"
+              ? "Tölemeli mukdar:"
+              : locale === "РУС"
+              ? "Сумма к оплате:"
+              : locale === "ENG"
+              ? "Amount to pay:"
+              : "Tölemeli mukdar:"}
+            {paymentDetails["amount-info"]}
+          </h2>
+          <h2>
+            {locale === "TKM"
+              ? "Wagt galdy:"
+              : locale === "РУС"
+              ? "Оставшееся время:"
+              : locale === "ENG"
+              ? "Time left:"
+              : "Wagt galdy:"}
+            {Math.floor((timeLeft % 3600) / 60)}:{timeLeft % 60}
+          </h2>
+        </div>
+        <div className="imm-credit-form-wrapper">
+          <div className="input-block">
+            <label htmlFor="card">
+              {locale === "TKM"
+                ? "Kartyň ýüzünde görkezilen ady, familiýasyny giriziň"
+                : locale === "РУС"
+                ? "Имя и фамилия, указанные на карте"
+                : locale === "ENG"
+                ? "Enter first name and last name indicated on the card"
+                : "Kartyň ýüzünde görkezilen ady, familiýasyny giriziň"}
+            </label>
+            <input
+              value={paymentName}
+              onChange={handlePaymentName}
+              type="text"
+              id="card"
+              placeholder="6435980023168745"
+            />
+            {/* {errors.code && <span>{errors.code.message}</span>} */}
+          </div>
+          <div className="input-block">
+            <label htmlFor="card">
+              {locale === "TKM"
+                ? "Kart belgisi"
+                : locale === "РУС"
+                ? "Номер карты"
+                : locale === "ENG"
+                ? "Card number"
+                : "Kart belgisi"}
+            </label>
+            <input
+              value={paymentCard}
+              onChange={handlePaymentCard}
+              type="number"
+              id="card"
+              placeholder="6435980023168745"
+            />
+            {/* {errors.code && <span>{errors.code.message}</span>} */}
+          </div>
+          {paymentDetails["is-cvc-required"] && (
+            <div className="input-block">
+              <label htmlFor="cvc">
+                {locale === "TKM"
+                  ? "Kartyň CVC"
+                  : locale === "РУС"
+                  ? "CVC карты"
+                  : locale === "ENG"
+                  ? "Card's CVC"
+                  : "Kartyň CVC"}
+              </label>
+              <input
+                value={paymentCv}
+                onChange={handlePaymentCv}
+                type="number"
+                id="cvc"
+                // maxLength={3}
+                max={999}
+                placeholder="123"
+              />
+              {/* {errors.code && <span>{errors.code.message}</span>} */}
+            </div>
+          )}
+
+          <div className="input-block">
+            <label htmlFor="duration-month">
+              {locale === "TKM"
+                ? "Kartyň möhleti (aý)"
+                : locale === "РУС"
+                ? "Срок годности карты (месяц)"
+                : locale === "ENG"
+                ? "Card expiration date (month)"
+                : "Kartyň möhleti (aý)"}
+            </label>
+            <input
+              value={paymentCardDurationMonth}
+              onChange={handlePaymentCardDurationMonth}
+              type="number"
+              id="duration-month"
+              placeholder="08"
+            />
+            {/* {errors.code && <span>{errors.code.message}</span>} */}
+          </div>
+          <div className="input-block">
+            <label htmlFor="duration-year">
+              {locale === "TKM"
+                ? "Kartyň möhleti (ýyl)"
+                : locale === "РУС"
+                ? "Срок годности карты (год)"
+                : locale === "ENG"
+                ? "Card expiration date (year)"
+                : "Kartyň möhleti (ýyl)"}
+            </label>
+            <input
+              value={paymentCardDurationYear}
+              onChange={handlePaymentCardDurationYear}
+              type="number"
+              id="duration-year"
+              placeholder="42"
+            />
+            {/* {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(12)}
+          >
+            <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
+            disabled={
+              paymentName.length < 4 ||
+              paymentName.length > 32 ||
+              paymentCard.toString().length !== 16 ||
+              paymentCv.toString().length !== 3 ||
+              paymentCardDurationYear.toString().length !== 2 ||
+              paymentCardDurationMonth.toString().length !== 2 ||
+              +paymentCardDurationMonth <= 0 ||
+              +paymentCardDurationMonth > 12
+                ? true
+                : false
+            }
+            type="submit"
+            className="sign-btn cu-btn"
+            onClick={() => onSubmit()}
+          >
+            <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 PaymentDetails;
--- a/src/components/ImmediateCreditsStages/PaymentSuccess.js
+++ b/src/components/ImmediateCreditsStages/PaymentSuccess.js
@ -0,0 +1,242 @@
+import React, { useContext, useState } from "react";
+import { LanguageContext } from "../../backend/LanguageContext";
+
+import next from "../../icons/next.svg";
+import next_reverse from "../../icons/next-reverse.svg";
+import { UserContext } from "../../backend/UserContext";
+
+const PaymentSuccess = ({
+  setStage,
+  stage,
+  borrowerData,
+  guaranterData,
+  isGuranter,
+  recepientAmount,
+  creditDuration,
+  setErrMessage,
+  setAcceptedMessage,
+  setAcceptedMessageEn,
+  setAcceptedMessageTkm,
+  cardDetails,
+}) => {
+  const { locale } = useContext(LanguageContext);
+  const { user } = useContext(UserContext);
+
+  const [codeValue, setPhoneValue] = useState("");
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(false);
+
+  const handleCodeChange = (e) => {
+    setPhoneValue(e.target.value);
+  };
+
+  const confirmCode = async () => {
+    try {
+      setIsLoading(true);
+      const response = await fetch(
+        "https://shahsyotag.halkbank.gov.tm/validateOTP",
+        {
+          headers: { "Content-Type": "aplication/json" },
+          method: "POST",
+
+          body: JSON.stringify({
+            phone_number: user.mobile_phone,
+            otp: codeValue,
+          }),
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const jsonedResponse = await response.json();
+
+      if (jsonedResponse === "OTP validated successfully") {
+        fetchData();
+        setIsLoading(false);
+      }
+    } catch (error) {}
+  };
+
+  const fetchData = async () => {
+    try {
+      const response = await fetch(
+        `https://shahsyotag.halkbank.gov.tm/onlineloancre-services/api/loancre`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            clientRecipient: {
+              idSeria: borrowerData.idSeria,
+              idNo: borrowerData.idNo,
+              cardMaskNumber: borrowerData.cardMaskNumber,
+              name: borrowerData.name,
+              surname: borrowerData.surname,
+              lastname: borrowerData.lastname,
+              availableAmount: borrowerData.availableAmount,
+              clientType: "recipient",
+              signRecipient: borrowerData.signRecipient,
+              expDate: borrowerData.expDate,
+            },
+            clientGuarantor: isGuranter
+              ? {
+                  idSeria: guaranterData.idSeria,
+                  idNo: guaranterData.idNo,
+                  cardMaskNumber: guaranterData.cardMaskNumber,
+                  name: guaranterData.name,
+                  surname: guaranterData.surname,
+                  lastname: guaranterData.lastname,
+                  availableAmount: guaranterData.availableAmount,
+                  clientType: "guarantor",
+                  signGuarantor: guaranterData.signGuarantor,
+                  expDate: guaranterData.expDate,
+                }
+              : null,
+            availableAmount: recepientAmount,
+            creditCardAccountNumber: cardDetails ? cardDetails : "",
+            mrtIsInsuarance: isGuranter ? 0 : 1,
+            termInYears: creditDuration,
+          }),
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const responseJson = await response.json();
+
+      if (responseJson.errCode === 0) {
+        setAcceptedMessage(responseJson.messageRu);
+        setAcceptedMessageEn(responseJson.messageEn);
+        setAcceptedMessageTkm(responseJson.message);
+        setStage(16);
+      } else {
+        setErrMessage(responseJson.messageRu);
+        setStage(10);
+      }
+    } catch (error) {
+      console.error(error.toString());
+      // Handle errors as needed
+      setError(true);
+    }
+  };
+
+  const onSubmit = (data) => {
+    fetchData();
+  };
+
+  if (isLoading) {
+    return (
+      <section className="loading">
+        <h1 className="cs-2-title">
+          {" "}
+          {locale === "TKM"
+            ? "Garaşmagyňyzy haýyş edýäris ..."
+            : locale === "РУС"
+            ? "Пожалуйста, подождите..."
+            : locale === "ENG"
+            ? "Please wait..."
+            : "Garaşmagyňyzy haýyş edýäris ..."}
+        </h1>
+      </section>
+    );
+  }
+
+  return (
+    <section className="imm-cs-1 cs-1">
+      <form>
+        <h2 className="succes-title">
+          {locale === "TKM"
+            ? "Karz karty açmak üçin tölegiňiz üstünlikli geçdi we arzaňyz kabul edildi "
+            : locale === "РУС"
+            ? "Оплата прошла успешно, заявка на оформление кредитной карты принята."
+            : locale === "ENG"
+            ? "To complete the application for a Digital loan, enter the SMS code sent to the number"
+            : "Karz karty açmak üçin tölegiňiz üstünlikli geçdi we arzaňyz kabul edildi "}
+        </h2>
+        <h3 className="succes-sub-title">
+          {locale === "TKM"
+            ? "Sanly karz ýüz tutmaňyzy doly tamamlamak üçin siziň telefon belgiňize gelen SMS kody giriziň"
+            : locale === "РУС"
+            ? "Для завершения оформления заявки на получение быстрого кредита введите СМС код, отправленный на номер ….."
+            : locale === "ENG"
+            ? "To complete the application for a Digital loan, enter the SMS code sent to the number"
+            : "Sanly karz ýüz tutmaňyzy doly tamamlamak üçin siziň telefon belgiňize gelen SMS kody giriziň"}
+        </h3>
+        <div className="imm-credit-form-wrapper">
+          <div className="input-block">
+            <label htmlFor="code">
+              {locale === "TKM"
+                ? "Kod"
+                : locale === "РУС"
+                ? "Код"
+                : locale === "ENG"
+                ? "Code"
+                : "Kod"}
+            </label>
+            <input
+              value={codeValue}
+              onChange={handleCodeChange}
+              type="text"
+              id="code"
+            />
+            {/* <span className="another-option" onClick={codeResend}>
+              Отправить код снова
+            </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(14)}
+          >
+            <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
+            disabled={codeValue.length !== 6 && !isLoading ? true : false}
+            type="submit"
+            onClick={onSubmit}
+            className="sign-btn cu-btn"
+          >
+            <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 PaymentSuccess;
--- a/src/components/ImmediateCreditsStages/PhoneAccept.js
+++ b/src/components/ImmediateCreditsStages/PhoneAccept.js
@ -0,0 +1,594 @@
+// IMPORT MODULES
+import React, { useState, useContext, useEffect } 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 { UserContext } from "../../backend/UserContext";
+// import arrow from "../../icons/arrow.svg";
+
+const schema = z.object({
+  code: z.string().min(1),
+  // surname: z.string().min(1),
+});
+
+const PhoneAccept = ({
+  paymentDetails,
+  borrowerData,
+  submitCardDetails,
+  paymentLink,
+  setStage,
+  isGuranter,
+  guaranterData,
+  recepientAmount,
+  cardDetails,
+  creditDuration,
+  recipientWorkPlace,
+  recipientWorkPosition,
+  availableAmount,
+  setAcceptedMessage,
+  setAcceptedMessageEn,
+  setAcceptedMessageTkm,
+}) => {
+  const { locale } = useContext(LanguageContext);
+  const { user } = useContext(UserContext);
+  const userToken = localStorage.getItem("userToken");
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(false);
+
+  const [invalidData, setInvalidData] = useState(false);
+  const [tryAgain, setTryAgain] = useState(false);
+
+  const [codeValue, setPhoneValue] = useState("");
+
+  const [errMessage, setErrMessage] = useState();
+
+  const [messageSend, setMessageSend] = useState(false);
+  const [timeLeft, setTimeLeft] = useState(0);
+
+  const handleCodeChange = (e) => {
+    setPhoneValue(e.target.value);
+  };
+
+  const { register, handleSubmit } = useForm({
+    resolver: zodResolver(schema),
+  });
+
+  // ///////////////////Card registration
+
+  const confirmPayment = async () => {
+    setIsLoading(true);
+    try {
+      const headers = {
+        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+      };
+
+      const formData = new URLSearchParams();
+      formData.append("app", "sanlykarz");
+      formData.append("id", borrowerData.idNo);
+      formData.append("md-order", paymentDetails["md-order"]);
+      formData.append("acs-req-id", submitCardDetails["acs-request-id"]);
+      formData.append("acs-session-url", submitCardDetails["acs-session-url"]);
+      formData.append("otp", codeValue);
+      formData.append("term-url", submitCardDetails["terminate-url"]);
+
+      const response = await fetch(
+        "https://shahsyotag.halkbank.gov.tm/api/v1/confirm-payment",
+        {
+          method: "POST",
+          headers: headers,
+          body: formData.toString(),
+        }
+      );
+
+      const jsonedResponse = await response.json();
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      if (
+        jsonedResponse.status === "ok" &&
+        jsonedResponse["final-url"].includes("status=1")
+      ) {
+        console.log(jsonedResponse["final-url"]);
+        setInvalidData(false);
+        checkPayment();
+      } else if (
+        jsonedResponse.status === "wrong-otp" ||
+        !jsonedResponse["final-url"].includes("status=1")
+      ) {
+        setTryAgain(true);
+      } else {
+        setInvalidData(true);
+      }
+    } catch (error) {}
+  };
+
+  const checkPayment = async () => {
+    try {
+      const response = await fetch(
+        `https://shahsyotag.halkbank.gov.tm/app/api/check-payment-credit-card?paymentId=${paymentLink.id}&orderId=${paymentDetails["md-order"]}&status=1`
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const jsonedResponse = await response.json();
+
+      if (jsonedResponse.status.ErrorCode === "0") {
+        loanCreate();
+      }
+    } catch (error) {
+      console.error(error.toString());
+    }
+  };
+
+  const loanCreateCheck = async () => {
+    try {
+      const response = await fetch(
+        "https://shahsyotag.halkbank.gov.tm/onlineloancre-services/api/loancre/check",
+        {
+          method: "POST",
+          headers: {
+            Accept: "application/json, text/plain",
+            "Content-Type": "application/json;charset=UTF-8",
+          },
+          body: JSON.stringify({
+            clientRecipient: {
+              idSeria: borrowerData.idSeria,
+              idNo: borrowerData.idNo,
+              cardMaskNumber: borrowerData.cardMaskNumber,
+              name: borrowerData.name,
+              surname: borrowerData.surname,
+              lastname: borrowerData.lastname,
+              availableAmount: borrowerData.availableAmount,
+              clientType: "recipient",
+              signRecipient: borrowerData.signRecipient,
+              expDate: borrowerData.expDate,
+            },
+            clientGuarantor: isGuranter
+              ? {
+                  idSeria: guaranterData.idSeria,
+                  idNo: guaranterData.idNo,
+                  cardMaskNumber: guaranterData.cardMaskNumber,
+                  name: guaranterData.name,
+                  surname: guaranterData.surname,
+                  lastname: guaranterData.lastname,
+                  availableAmount: guaranterData.availableAmount,
+                  clientType: "guarantor",
+                  signGuarantor: guaranterData.signGuarantor,
+                  expDate: guaranterData.expDate,
+                }
+              : null,
+            availableAmount: recepientAmount,
+            creditCardAccountNumber: cardDetails,
+            mrtIsInsuarance: isGuranter ? 0 : 1,
+            termInYears: creditDuration,
+          }),
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const jsonedResponse = await response.json();
+
+      if (jsonedResponse.errCode === 0) {
+        // sendCode();
+        loanCreate();
+      } else {
+        setStage(10);
+      }
+    } catch (error) {}
+  };
+
+  const sendCode = async () => {
+    try {
+      const response = await fetch(
+        "https://shahsyotag.halkbank.gov.tm/sendOTP",
+        {
+          method: "POST",
+          headers: { "Content-Type": "aplication/json" },
+          body: JSON.stringify({
+            phone_number: user.mobile_phone,
+          }),
+        }
+      );
+
+      if (!response.ok) {
+        setErrMessage(response.status);
+        setError(true);
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      setStage(15);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  // ///////////////////Loan creating
+
+  const confirmCode = async () => {
+    try {
+      setIsLoading(true);
+      const response = await fetch(
+        "https://shahsyotag.halkbank.gov.tm/validateOTP",
+        {
+          headers: { "Content-Type": "aplication/json" },
+          method: "POST",
+
+          body: JSON.stringify({
+            phone_number: user.mobile_phone,
+            otp: codeValue,
+          }),
+        }
+      );
+
+      const jsonedResponse = await response.json();
+
+      if (jsonedResponse === "OTP validated successfully") {
+        loanCreate();
+      } else {
+        setErrMessage(true);
+      }
+    } catch (error) {}
+  };
+
+  const loanCreate = async () => {
+    try {
+      const response = await fetch(
+        `https://shahsyotag.halkbank.gov.tm/onlineloancre-services/api/loancre`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            clientRecipient: {
+              idSeria: borrowerData.idSeria,
+              idNo: borrowerData.idNo,
+              cardMaskNumber: borrowerData.cardMaskNumber,
+              name: borrowerData.name,
+              surname: borrowerData.surname,
+              lastname: borrowerData.lastname,
+              availableAmount: borrowerData.availableAmount,
+              clientType: "recipient",
+              signRecipient: borrowerData.signRecipient,
+              expDate: borrowerData.expDate,
+            },
+            clientGuarantor: isGuranter
+              ? {
+                  idSeria: guaranterData.idSeria,
+                  idNo: guaranterData.idNo,
+                  cardMaskNumber: guaranterData.cardMaskNumber,
+                  name: guaranterData.name,
+                  surname: guaranterData.surname,
+                  lastname: guaranterData.lastname,
+                  availableAmount: guaranterData.availableAmount,
+                  clientType: "guarantor",
+                  signGuarantor: guaranterData.signGuarantor,
+                  expDate: guaranterData.expDate,
+                }
+              : null,
+            availableAmount: recepientAmount,
+            creditCardAccountNumber: cardDetails,
+            mrtIsInsuarance: isGuranter ? 0 : 1,
+            termInYears: creditDuration,
+          }),
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const responseJson = await response.json();
+
+      if (responseJson.errCode === 0) {
+        sendData(responseJson);
+        setAcceptedMessage(responseJson.messageRu);
+        setAcceptedMessageEn(responseJson.messageEn);
+        setAcceptedMessageTkm(responseJson.message);
+      } else {
+        setErrMessage(responseJson.messageRu);
+        setStage(10);
+      }
+    } catch (error) {
+      console.error(error.toString());
+      // Handle errors as needed
+      setError(true);
+    }
+  };
+
+  const sendData = async (requestBody) => {
+    try {
+      const headers = {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${userToken}`,
+      };
+      const response = await fetch(
+        "https://shahsyotag.halkbank.gov.tm/app/api/quick_loans",
+        {
+          method: "POST",
+          headers: headers,
+          body: JSON.stringify({
+            sign: requestBody.sign,
+            where_works: recipientWorkPlace,
+            position: recipientWorkPosition,
+            mobile_phone: user.mobile_phone,
+            name: borrowerData.name,
+            surname: borrowerData.surname,
+            lastname: borrowerData.lastname,
+          }),
+        }
+      );
+
+      const jsonedResponse = await response.json();
+
+      setIsLoading(false);
+      cardDetails ? setStage(11) : setStage(16);
+    } catch (error) {
+      console.error(error.toString());
+      setError(true);
+    }
+  };
+
+  const codeResend = async () => {
+    try {
+      const response = await fetch(
+        "https://shahsyotag.halkbank.gov.tm/sendOTP",
+        {
+          method: "POST",
+          headers: { "Content-Type": "aplication/json" },
+          body: JSON.stringify({
+            phone_number: user.mobile_phone,
+          }),
+        }
+      );
+
+      if (!response.ok) {
+        setError(true);
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      if (response.status !== 200 || response.status !== 201) {
+        setMessageSend(true);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const startTimer = () => {
+    setTimeLeft(30); // Set initial time
+    const intervalId = setInterval(() => {
+      setTimeLeft((prevTimeLeft) => {
+        if (prevTimeLeft === 1) {
+          clearInterval(intervalId);
+          setMessageSend(false); // Reset messageSend state after timer finishes
+        }
+        return prevTimeLeft - 1;
+      });
+    }, 1000);
+  };
+
+  useEffect(() => {
+    if (messageSend) {
+      startTimer();
+    }
+  }, [messageSend]);
+
+  const onSubmit = (data) => {
+    if (cardDetails) {
+      confirmCode();
+    } else {
+      confirmPayment();
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <section className="loading">
+        <h1 className="cs-2-title">
+          {locale === "TKM"
+            ? "Garaşmagyňyzy haýyş edýäris ..."
+            : locale === "РУС"
+            ? "Пожалуйста, подождите..."
+            : locale === "ENG"
+            ? "Please wait..."
+            : "Garaşmagyňyzy haýyş edýäris ..."}
+        </h1>
+      </section>
+    );
+  }
+
+  if (error) {
+    return (
+      <section className="cs-1 err-section">
+        <h1 className="cs-2-title">
+          {errMessage}
+          {locale === "TKM"
+            ? "Bir zat  ýalňyş ..."
+            : locale === "РУС"
+            ? " Ошибка..."
+            : locale === "ENG"
+            ? " Error..."
+            : " Bir zat  ýalňyş ..."}
+        </h1>
+        <br />
+        <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>
+      </section>
+    );
+  }
+
+  return (
+    <section className="imm-cs-1 cs-1">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <h2 className="cs-2-title">
+          {locale === "TKM"
+            ? `${
+                cardDetails
+                  ? user.mobile_phone
+                  : submitCardDetails["three-d-secure-number"]
+              } Karz ýüzlenmäni tassyklamak üçin belgä iberilen SMS duýduryş koduny giriziň`
+            : locale === "РУС"
+            ? `Для подтверждения кредитной заявки, введите код с СМС оповещения, отправленный на номер ${
+                cardDetails
+                  ? user.mobile_phone
+                  : submitCardDetails["three-d-secure-number"]
+              }`
+            : locale === "ENG"
+            ? `To confirm the loan application enter the SMS alert code sent to the number ${
+                cardDetails
+                  ? user.mobile_phone
+                  : submitCardDetails["three-d-secure-number"]
+              }`
+            : `${
+                cardDetails
+                  ? user.mobile_phone
+                  : submitCardDetails["three-d-secure-number"]
+              } Karz ýüzlenmäni tassyklamak üçin belgä iberilen SMS duýduryş koduny giriziň`}
+        </h2>
+        <div className="imm-credit-form-wrapper">
+          <div className="input-block">
+            <label htmlFor="code">
+              {locale === "TKM"
+                ? "Kod"
+                : locale === "РУС"
+                ? "Код"
+                : locale === "ENG"
+                ? "Code"
+                : "Kod"}
+            </label>
+            <input
+              value={codeValue}
+              onChange={handleCodeChange}
+              type="text"
+              id="code"
+            />
+            {cardDetails && (
+              <button
+                type="button"
+                disabled={messageSend}
+                className="another-option"
+                onClick={codeResend}
+              >
+                Отправить код снова
+              </button>
+            )}
+            {messageSend && <p>Time left: {timeLeft} seconds</p>}
+            {/* {errors.code && <span>{errors.code.message}</span>} */}
+          </div>
+        </div>
+        {invalidData && (
+          <section className=" cs-1">
+            <h1 className="cs-2-title">
+              {locale === "TKM"
+                ? "Ýalňyş, maglumatlary barlaň"
+                : locale === "РУС"
+                ? "Ошибка, проверьте данные"
+                : locale === "ENG"
+                ? "Error, check data"
+                : "Ýalňyş, maglumatlary barlaň"}
+            </h1>
+          </section>
+        )}
+        {tryAgain && (
+          <section className="imm-cs-1 cs-1">
+            <h1 className="cs-2-title">
+              {" "}
+              {locale === "TKM"
+                ? "Gaýtadan iberip görüň"
+                : locale === "РУС"
+                ? "Попробуйте отправить снова"
+                : locale === "ENG"
+                ? "Try sending again"
+                : "Gaýtadan iberip görüň"}
+            </h1>
+          </section>
+        )}
+        <div className="cu-bottom cd-2-title">
+          <button
+            type="submit"
+            className="sign-btn reg-btn"
+            onClick={() => (cardDetails ? setStage(8) : setStage(13))}
+          >
+            <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
+            disabled={
+              cardDetails
+                ? codeValue.length !== 6 && !isLoading
+                  ? true
+                  : false
+                : codeValue.length !== 5 && !isLoading
+                ? true
+                : false
+            }
+            type="submit"
+            onClick={onSubmit}
+            className="sign-btn cu-btn"
+          >
+            <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;
--- a/src/components/TopupStages/TopupStage1.js
+++ b/src/components/TopupStages/TopupStage1.js
@ -102,6 +102,14 @@ const TopupStage1 = ({ setStage, data, setData, topupData, id, setId }) => {
                  : topupData.data.map((el) => el.type)
                : [""]
            }
+            // items={[
+            //   "VISA hasaby doldurmak",
+            //   "VISA hasaby doldurmak (RUB)",
+            //   "VISA hasaby doldurmak (talyplar üçin)",
+            //   "VISA hasaby doldurmak (telekeçiler üçin)",
+            //   "Daşary ýurt ýokary okuw mekdebi we umumy ýaşaýyş jaýy üçin tölegi",
+            //   "Saglygy barlanylmagy we bejerilmegi üçin tölegi",
+            // ]}
            customId={"credit-type"}
            name={"credit-type"}
            blockName={"cs-1-top-block"}
@ -122,23 +130,12 @@ const TopupStage1 = ({ setStage, data, setData, topupData, id, setId }) => {
            defaultValue={input}
          />
        </div>
-        <div className="tp-1-middle">
-          <h2>HalkBank - Пополнение карты Visa</h2>
-          <p>
-            Подобный сервис весьма востребован у держателей карт, потому что,
-            во-первых, позволяет пополнять в одном месте имеющиеся карты разных
-            банков, что сейчас с повышением популярности «пластика» весьма
-            актуально. Во-вторых, таким образом можно в экстренной ситуации
-            пополнить карту другого человека, например, члена семьи,
-            находящегося в данный момент за рубежом Это весьма удобно, поскольку
-            не требуется тратить время на поездку в офис или на поиск
-            терминала/банкомата cash-in конкретного банка. Для оформления карты
-            Вам следует обратиться в Отдел счетов физических лиц (окна 29-30)
-            Департамента расчетных операций банка, предоставить оригинал
-            паспорта и его копию, и заполнить заявление на открытие карточного
-            счета.
-          </p>
-        </div>
+        <div
+          className="tp-1-middle"
+          dangerouslySetInnerHTML={{
+            __html: topupData ? topupData.data[id - 1].information : "",
+          }}
+        ></div>
        <div className="card-button cs-1-bottom">
          <button
            disabled={!input}
--- a/src/components/TopupStages/TopupStage3.js
+++ b/src/components/TopupStages/TopupStage3.js
@ -26,7 +26,7 @@ const TopupStage3 = ({ setStage, data, setData }) => {
  const [btnEnabled, setBtnEnabled] = useState(false);

  useEffect(() => {
-    if (inputValid.message && inputValid.region && inputValid.affiliate) {
+    if (inputValid.region && inputValid.affiliate) {
      setBtnEnabled(true);
    } else {
      setBtnEnabled(false);
@ -98,12 +98,12 @@ const TopupStage3 = ({ setStage, data, setData }) => {
            <div className="input-block">
              <label htmlFor="affiliate">
                {locale === "TKM"
-                  ? "Filial"
+                  ? "Şahamça"
                  : locale === "РУС"
                  ? "Филиал"
                  : locale === "ENG"
                  ? "Branch"
-                  : "Filial"}
+                  : "Şahamça"}
                <span>*</span>
              </label>
              <CustomSelect
@ -177,12 +177,12 @@ const TopupStage3 = ({ setStage, data, setData }) => {
                name={"affiliate"}
                placeholder={
                  locale === "TKM"
-                    ? "Filialy saýlaň"
+                    ? "Şahamçany saýlaň"
                    : locale === "РУС"
                    ? "Выберите филиал"
                    : locale === "ENG"
                    ? "Choose branch"
-                    : "Filialy saýlaň"
+                    : "Şahamçany saýlaň"
                }
                stateSetter={(state) => {
                  setInputValid({ ...inputValid, affiliate: state });
@ -314,9 +314,13 @@ const TopupStage3 = ({ setStage, data, setData }) => {
              setData({
                ...data,
                message: inputValid.message,
-                region: inputLocal.region,
+                region:
+                  locale === "TKM" ? inputValid.region : inputLocal.region,
                region_localized: inputValid.region,
-                branch: inputLocal.affiliate,
+                branch:
+                  locale === "TKM"
+                    ? inputValid.affiliate
+                    : inputLocal.affiliate,
                branch_localized: inputValid.affiliate,
              });
            }}
--- a/src/components/TopupStages/TopupStage4.js
+++ b/src/components/TopupStages/TopupStage4.js
@ -25,6 +25,82 @@ const TopupStage4 = ({ setStage, data, setData, topupData, id }) => {
  //    Bytes <=    Megabytes
  //      |      |||||||||||||||||
  const maxSize = maxFileSize * 1024 * 1024;
+  // const tempData = [
+  //   `
+  //   1. Arza - (Bankyň Nusgasy);
+  //   2. Pasport Raýat (asyl nusga, hemme sahypalaryň kopiýasy bilen); \n
+  //   3. Pasport Daşary ýurt (asyl nusga, hemme sahypalaryň kopiýasy bilen); \n
+  //   4. Visa kartynyň rekwizitleriniň kopiýasy 2 nusgada; \n
+  //   5. Aýlyk haky barada kepilnama; \n
+  //   6. Nagt däl doldurylýan bolasa, kartyň göçürmesi (wypiska); \n
+  //   7. Pensiýa kitapçasy asyl nusga (döwlete dahylsyz edarada işleýänler); \n
+  //   8. Maşgala agzalary üçin töleg edilende: \n
+  //   Maşgala agzasydygyny tassyklaýan resminama (dogluş hakynda
+  //   şahadatnama, nika hakynda şahadatnama we ş.m. kopiýalary bilen); \n
+  //   *Bellik: 2016-njy ýylyň 5-nji sentýabryndan soňra pasport çalşylan bolsa,
+  //   könesiniň kopiýasy hem gerek! \n
+  //   Töleg edijiniň özüniň bolmagy hökmany. Hemme resminamalaryň asyl nusgalary bolmagy
+  //   zerurdyr.Töleýjiniň ýazgyda duran ýeri \n
+  //   Aşgabat ş. hökmany bolmaly.`,
+  //   ``,
+  //   `
+  //   1. Arza - (Bankyň Nusgasy); \n
+  //   2. Pasport Raýat ( hemme sahypalaryň kopiýasy bilen); \n
+  //   3. Pasport Daşary ýurt (hemme sahypalaryň kopiýasy bilen girdi çhykdy
+  //   peçatlary, daşary ýurtda ýaşamak baradaky wagtlaýynça wizasy bolmaly); \n
+  //   4. Talybyň okaýandygy baradaky kepilnamasy 2 nusgada \n
+  //   5. Talybyň talyp şahadatnamasy 2 nusgada \n
+  //   6. Visa kartynyň rekwizitleriniň kopiýasy 2 nusgada; \n
+  //   7. Maşgala agzalary töleg edende: \n
+  //   Maşgala agzasydygyny tassyklaýan resminama (dogluş hakynda
+  //   şahadatnama, nika hakynda şahadatnama, pasport we ş.m. kopiýalary
+  //   bilen); \n
+  //   *Bellik: 2016-njy ýylyň 5-nji sentýabryndan soňra pasport çalşylan bolsa,
+  //   könesiniň kopiýasy hem gerek!
+  //   Töleg edijiniň özüniň bolmagy hökmany. Hemme resminamalaryň asyl nusgalary bolmagy zerurdyr.
+  //   Töleýjiniň ýazgyda duran ýeri
+  //   Aşgabat ş. hökmany bolmaly.`,
+  //   `
+  //   1. Arza - (Bankyň Nusgasy); \n
+  //   2. Pasport Raýat (asyl nusga, hemme sahypalaryň kopiýasy bilen); \n
+  //   3. Pasport Daşary ýurt (asyl nusga, hemme sahypalaryň kopiýasy bilen); \n
+  //   4. Visa kartynyň rekwizitleriniň kopiýasy 2 nusgada; \n
+  //   5. Deklarasiýa; \n
+  //   6. Salgyt gullugyndan bergisi ýok diýip sprawka \n
+  //   7. Pensiýonnydan bergisi ýok diýip sprawka; Pensiýa kitapçasy asyl nusga; \n
+  //   8. Nagt (10%) kartyň göçürmesi (wypiska) \n
+  //   9. Maşgala agzalary üçin töleg edilende: \n
+  //   Maşgala agzasydygyny tassyklaýan resminama (dogluş hakynda
+  //   şahadatnama, nika hakynda şahadatnama we ş.m. kopiýalary bilen); \n
+  //   *Bellik: 2016-njy ýylyň 5-nji sentýabryndan soňra pasport çalşylan bolsa,
+  //   könesiniň kopiýasy hem gerek! \n
+  //   Töleg edijiniň özüniň bolmagy hökmany. Hemme resminamalaryň asyl nusgalary bolmagy zerurdyr. \n
+  //   Töleýjiniň ýazgyda duran ýeri \n
+  //   Aşgabat ş. hökmany bolmaly.`,
+  //   `
+  //   1. Fiziki şahsyň arzasy we töleg tabşyrygy; \n
+  //   2. Talyp bilen ýokary okuw mekdep arasyndaky baglaşylan şertnama (asyl nusgasy ýa-da
+  //   aragatnaşyk edaralaryň (telekom, internet, elektron görnüşde) üsti bilen gelen we göçürmesi); \n
+  //   3. Ýokary okuw mekdep tarapyndan berilen hasap-nyrhnama (ýa-da aragatnaşyk edaralaryň
+  //   (telekom, internet, elektron görnüşde) üsti bilen gelen we göçürmesi); \n
+  //   4. Ýokary okuw mekdebinde okaýandygy barada güwänamasy şertnama (asyl nusgasy ýa-da
+  //   aragatnaşyk edaralaryň (telekom, internet, elektron görnüşde) üsti bilen gelen we göçürmesi); \n
+  //   5. Talyp şahadatnamasy; \n
+  //   6. Okuw töleg möçberini görkezýän bilim edaranyň internet sahypasyndan göçürme; \n
+  //   7. Okuw tölegi başga bankdan tölenen ýagdaýynda şol bankyndan geçirilen tölegiň SWIFT
+  //   resminamasy ýa-da beýleki tassyklaýjy resminamalar; \n
+  //   8. Talyp okaýan ýokary okuw mekdebini çalşan ýagdaýynda okan ýokary okuw mekdebiniň
+  //   resminamalary; \n
+  //   9. Talybyň we talyp üçin töleg geçirmek isleg bildirýän garyndaşlarynyň pasport (içki, daşky) we
+  //   garyndaşlygyny anyklaýan resminamalaryň göçürmeleri.`,
+  //   `1. Fiziki şahsyň arzasy we töleg tabşyrygy; \n
+  //   2. Türkmenistanyň Saglygy goraýyş we derman senagaty ministrliginiň Türkmenistanyň çäginden
+  //   daşarda saglygynyň barlanmagynyň we bejerilmeginiň zerurlygy baradaky netijenamasy; \n
+  //   3. Netijenamada görkezilen saglygy goraýyş edaranyň hasap-nyrhanamasy we/ýa-da şertnama; \n
+  //   4. Daşary ýurdyň çakylyk haty; \n
+  //   5. Fiziki şahsyň we/ýa-da onuň üçin töleg geçirmek isleg bildiryän garyndaşlarynyň pasport
+  //   (içki,daşky) we garyndaşlygyny anyklaýan resminamalaryň göçürmeleri.`,
+  // ];

  useEffect(() => {
    if (files.length > 0) {
@ -33,25 +109,24 @@ const TopupStage4 = ({ setStage, data, setData, topupData, id }) => {
      setBtnEnabled(false);
    }
  }, [files]);
-
  useEffect(() => {
    if (topupData) {
      topupData.data.map((el) => {
        if (el.id === id) {
          setReq({
            ...req,
-            TKM: el.documents,
+            TKM: el.requirements_documents,
            RUS: el.translations.find((els) => els.locale === "ru")
              ? JSON.parse(
                  el.translations.find((els) => els.locale === "ru")
                    .attribute_data
-                ).documents
+                ).requirements_documents
              : "",
            ENG: el.translations.find((els) => els.locale === "en")
              ? JSON.parse(
                  el.translations.find((els) => els.locale === "en")
                    .attribute_data
-                ).documents
+                ).requirements_documents
              : "",
          });
        }
@ -108,7 +183,27 @@ const TopupStage4 = ({ setStage, data, setData, topupData, id }) => {
                      ? req.ENG
                      : req.TKM,
                }}
-              ></div>
+              >
+                {/* <pre>
+                  {data.type_localized === "VISA hasaby doldurmak"
+                    ? tempData[0]
+                    : data.type_localized === "VISA hasaby doldurmak (RUB)"
+                    ? tempData[1]
+                    : data.type_localized ===
+                      "VISA hasaby doldurmak (talyplar üçin)"
+                    ? tempData[2]
+                    : data.type_localized ===
+                      "VISA hasaby doldurmak (telekeçiler üçin)"
+                    ? tempData[3]
+                    : data.type_localized ===
+                      "Daşary ýurt ýokary okuw mekdebi we umumy ýaşaýyş jaýy üçin tölegi"
+                    ? tempData[4]
+                    : data.type_localized ===
+                      "Saglygy barlanylmagy we bejerilmegi üçin tölegi"
+                    ? tempData[5]
+                    : ""}
+                </pre> */}
+              </div>
            </div>
          </div>
        </div>
--- a/src/components/TopupStages/TopupStage5.js
+++ b/src/components/TopupStages/TopupStage5.js
@ -179,12 +179,12 @@ const TopupStage5 = ({
          <li>
            <p>
              {locale === "TKM"
-                ? "Filial"
+                ? "Şahamça"
                : locale === "РУС"
                ? "Филиал"
                : locale === "ENG"
                ? "Branch"
-                : "Filial"}
+                : "Şahamça"}
              :
            </p>
            <h4>{data.branch_localized ? data.branch_localized : "-"}</h4>
--- a/src/components/credits/CreditModal.js
+++ b/src/components/credits/CreditModal.js
@ -1,24 +1,24 @@
 // IMPORT MODULES
-import React, { useRef, useState, useContext } from "react";
-import { LanguageContext } from "../../backend/LanguageContext";
+import React, { useRef, useState, useContext } from 'react';
+import { LanguageContext } from '../../backend/LanguageContext';

 // IMPORT IMAGES
-import exit from "../../icons/exit.svg";
-import { ReactComponent as Lines } from "../../icons/lines.svg";
-import { ReactComponent as Img1 } from "../../icons/credit1.svg";
-import { ReactComponent as Img2 } from "../../icons/credit2.svg";
-import { ReactComponent as Img3 } from "../../icons/credit3.svg";
-import { ReactComponent as Img4 } from "../../icons/credit4.svg";
-import { ReactComponent as Img5 } from "../../icons/credit5.svg";
-import { ReactComponent as Img6 } from "../../icons/credit6.svg";
+import exit from '../../icons/exit.svg';
+import { ReactComponent as Lines } from '../../icons/lines.svg';
+import { ReactComponent as Img1 } from '../../icons/credit1.svg';
+import { ReactComponent as Img2 } from '../../icons/credit2.svg';
+import { ReactComponent as Img3 } from '../../icons/credit3.svg';
+import { ReactComponent as Img4 } from '../../icons/credit4.svg';
+import { ReactComponent as Img5 } from '../../icons/credit5.svg';
+import { ReactComponent as Img6 } from '../../icons/credit6.svg';

 // IMPORT COMPONENTS
-import CreditStage1 from "../CreditStages/CreditStage1";
-import CreditStage2 from "../CreditStages/CreditStage2";
-import CreditStage3 from "../CreditStages/CreditStage3";
-import CreditStage4 from "../CreditStages/CreditStage4";
-import CreditStage5 from "../CreditStages/CreditStage5";
-import CreditStage6 from "../CreditStages/CreditStage6";
+import CreditStage1 from '../CreditStages/CreditStage1';
+import CreditStage2 from '../CreditStages/CreditStage2';
+import CreditStage3 from '../CreditStages/CreditStage3';
+import CreditStage4 from '../CreditStages/CreditStage4';
+import CreditStage5 from '../CreditStages/CreditStage5';
+import CreditStage6 from '../CreditStages/CreditStage6';

 const CreditModal = ({
  modalOpen,
@ -36,25 +36,22 @@ const CreditModal = ({
  const [data, setData] = useState({});
  const [id, setId] = useState(1);
  return (
-    <section
-      className={modalOpen ? "modal credit-modal active" : "modal credit-modal"}
-    >
+    <section className={modalOpen ? 'modal credit-modal active' : 'modal credit-modal'}>
      <div className="modal-container">
        <div className="modal-inner" ref={window}>
-          <div className="modal-window">
+          <div className="modal-window ">
            <div className="modal-top">
              <h2>
-                {locale === "TKM"
-                  ? "Karz almak üçin onlaýn-ýüzlenme"
-                  : "Онлайн-заявка для получения кредита"}
+                {locale === 'TKM'
+                  ? 'Karz almak üçin onlaýn-ýüzlenme'
+                  : 'Онлайн-заявка для получения кредита'}
              </h2>
              <button
                type="button"
                className="exit-btn"
                onClick={() => {
                  setModalOpen(false);
-                }}
-              >
+                }}>
                <div>
                  <img src={exit} alt="exit" />
                </div>
@ -64,93 +61,93 @@ const CreditModal = ({
              <div className="icon-block active">
                <Img1 className="modal-icon" />
                <h3 className="icon-title">
-                  {locale === "TKM"
-                    ? "Karzyň görnüşini saýlaň"
-                    : locale === "РУС"
-                    ? "Выберите вид кредита"
-                    : locale === "ENG"
-                    ? "Choose the type of loan"
-                    : "Karzyň görnüşini saýlaň"}
+                  {locale === 'TKM'
+                    ? 'Karzyň görnüşini saýlaň'
+                    : locale === 'РУС'
+                    ? 'Выберите вид кредита'
+                    : locale === 'ENG'
+                    ? 'Choose the type of loan'
+                    : 'Karzyň görnüşini saýlaň'}
                </h3>
              </div>
-              <div className={stage > 1 ? "line-block active" : "line-block"}>
+              <div className={stage > 1 ? 'line-block active' : 'line-block'}>
                <Lines className="lines" />
                <Lines className="lines" />
              </div>
-              <div className={stage > 1 ? "icon-block active" : "icon-block"}>
+              <div className={stage > 1 ? 'icon-block active' : 'icon-block'}>
                <Img2 className="modal-icon" />
                <h3 className="icon-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'}
                </h3>
              </div>
-              <div className={stage > 2 ? "line-block active" : "line-block"}>
+              <div className={stage > 2 ? 'line-block active' : 'line-block'}>
                <Lines className="lines" />
                <Lines className="lines" />
              </div>
-              <div className={stage > 2 ? "icon-block active" : "icon-block"}>
+              <div className={stage > 2 ? 'icon-block active' : 'icon-block'}>
                <Img3 className="modal-icon" />
                <h3 className="icon-title">
-                  {locale === "TKM"
-                    ? "Şahsy maglumatlar"
-                    : locale === "РУС"
-                    ? "Личные данные"
-                    : locale === "ENG"
-                    ? "Personal data"
-                    : "Şahsy maglumatlar"}
+                  {locale === 'TKM'
+                    ? 'Şahsy maglumatlar'
+                    : locale === 'РУС'
+                    ? 'Личные данные'
+                    : locale === 'ENG'
+                    ? 'Personal data'
+                    : 'Şahsy maglumatlar'}
                </h3>
              </div>
-              <div className={stage > 3 ? "line-block active" : "line-block"}>
+              <div className={stage > 3 ? 'line-block active' : 'line-block'}>
                <Lines className="lines" />
                <Lines className="lines" />
              </div>
-              <div className={stage > 3 ? "icon-block active" : "icon-block"}>
+              <div className={stage > 3 ? 'icon-block active' : 'icon-block'}>
                <Img4 className="modal-icon" />
                <h3 className="icon-title">
-                  {locale === "TKM"
-                    ? "Karz üçin maglumat"
-                    : locale === "РУС"
-                    ? "Данные для кредита"
-                    : locale === "ENG"
-                    ? "Loan details"
-                    : "Karz üçin maglumat"}
+                  {locale === 'TKM'
+                    ? 'Karz üçin maglumat'
+                    : locale === 'РУС'
+                    ? 'Данные для кредита'
+                    : locale === 'ENG'
+                    ? 'Loan details'
+                    : 'Karz üçin maglumat'}
                </h3>
              </div>
-              <div className={stage > 4 ? "line-block active" : "line-block"}>
+              <div className={stage > 4 ? 'line-block active' : 'line-block'}>
                <Lines className="lines" />
                <Lines className="lines" />
              </div>
-              <div className={stage > 4 ? "icon-block active" : "icon-block"}>
+              <div className={stage > 4 ? 'icon-block active' : 'icon-block'}>
                <Img5 className="modal-icon" />
                <h3 className="icon-title">
-                  {locale === "TKM"
-                    ? "Talaplar we resminamalar"
-                    : locale === "РУС"
-                    ? "Требования и документы"
-                    : locale === "ENG"
-                    ? "Requirements and documents"
-                    : "Talaplar we resminamalar"}
+                  {locale === 'TKM'
+                    ? 'Talaplar we resminamalar'
+                    : locale === 'РУС'
+                    ? 'Требования и документы'
+                    : locale === 'ENG'
+                    ? 'Requirements and documents'
+                    : 'Talaplar we resminamalar'}
                </h3>
              </div>
-              <div className={stage > 5 ? "line-block active" : "line-block"}>
+              <div className={stage > 5 ? 'line-block active' : 'line-block'}>
                <Lines className="lines" />
                <Lines className="lines" />
              </div>
-              <div className={stage > 5 ? "icon-block active" : "icon-block"}>
+              <div className={stage > 5 ? 'icon-block active' : 'icon-block'}>
                <Img6 className="modal-icon" />
                <h3 className="icon-title">
-                  {locale === "TKM"
-                    ? "Ugratmak"
-                    : locale === "РУС"
-                    ? "Отправка"
-                    : locale === "ENG"
-                    ? "Sending"
-                    : "Ugratmak"}
+                  {locale === 'TKM'
+                    ? 'Ugratmak'
+                    : locale === 'РУС'
+                    ? 'Отправка'
+                    : locale === 'ENG'
+                    ? 'Sending'
+                    : 'Ugratmak'}
                </h3>
              </div>
            </div>
@ -159,82 +156,82 @@ const CreditModal = ({
                <div className="icon-block active">
                  <Img1 className="modal-icon" />
                  <h3 className="icon-title">
-                    {locale === "TKM"
-                      ? "Karzyň görnüşini saýlaň"
-                      : locale === "РУС"
-                      ? "Выберите вид кредита"
-                      : locale === "ENG"
-                      ? "Choose the type of loan"
-                      : "Karzyň görnüşini saýlaň"}
+                    {locale === 'TKM'
+                      ? 'Karzyň görnüşini saýlaň'
+                      : locale === 'РУС'
+                      ? 'Выберите вид кредита'
+                      : locale === 'ENG'
+                      ? 'Choose the type of loan'
+                      : 'Karzyň görnüşini saýlaň'}
                  </h3>
                </div>
              ) : stage === 2 ? (
                <div className="icon-block active">
                  <Img2 className="modal-icon" />
                  <h3 className="icon-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'}
                  </h3>
                </div>
              ) : stage === 3 ? (
                <div className="icon-block active">
                  <Img3 className="modal-icon" />
                  <h3 className="icon-title">
-                    {locale === "TKM"
-                      ? "Şahsy maglumatlar"
-                      : locale === "РУС"
-                      ? "Личные данные"
-                      : locale === "ENG"
-                      ? "Personal data"
-                      : "Şahsy maglumatlar"}
+                    {locale === 'TKM'
+                      ? 'Şahsy maglumatlar'
+                      : locale === 'РУС'
+                      ? 'Личные данные'
+                      : locale === 'ENG'
+                      ? 'Personal data'
+                      : 'Şahsy maglumatlar'}
                  </h3>
                </div>
              ) : stage === 4 ? (
                <div className="icon-block active">
                  <Img4 className="modal-icon" />
                  <h3 className="icon-title">
-                    {locale === "TKM"
-                      ? "Karz üçin maglumat"
-                      : locale === "РУС"
-                      ? "Данные для кредита"
-                      : locale === "ENG"
-                      ? "Loan details"
-                      : "Karz üçin maglumat"}
+                    {locale === 'TKM'
+                      ? 'Karz üçin maglumat'
+                      : locale === 'РУС'
+                      ? 'Данные для кредита'
+                      : locale === 'ENG'
+                      ? 'Loan details'
+                      : 'Karz üçin maglumat'}
                  </h3>
                </div>
              ) : stage === 5 ? (
                <div className="icon-block active">
                  <Img5 className="modal-icon" />
                  <h3 className="icon-title">
-                    {locale === "TKM"
-                      ? "Talaplar we resminamalar"
-                      : locale === "РУС"
-                      ? "Требования и документы"
-                      : locale === "ENG"
-                      ? "Requirements and documents"
-                      : "Talaplar we resminamalar"}
+                    {locale === 'TKM'
+                      ? 'Talaplar we resminamalar'
+                      : locale === 'РУС'
+                      ? 'Требования и документы'
+                      : locale === 'ENG'
+                      ? 'Requirements and documents'
+                      : 'Talaplar we resminamalar'}
                  </h3>
                </div>
              ) : stage === 6 ? (
                <div className="icon-block active">
                  <Img6 className="modal-icon" />
                  <h3 className="icon-title">
-                    {locale === "TKM"
-                      ? "Ugratmak"
-                      : locale === "РУС"
-                      ? "Отправка"
-                      : locale === "ENG"
-                      ? "Sending"
-                      : "Ugratmak"}
+                    {locale === 'TKM'
+                      ? 'Ugratmak'
+                      : locale === 'РУС'
+                      ? 'Отправка'
+                      : locale === 'ENG'
+                      ? 'Sending'
+                      : 'Ugratmak'}
                  </h3>
                </div>
              ) : (
-                ""
+                ''
              )}
            </div>
            <div className="modal-bottom">
@ -256,17 +253,9 @@ const CreditModal = ({
                  id={id}
                />
              ) : stage === 3 ? (
-                <CreditStage3
-                  setStage={setStage}
-                  data={data}
-                  setData={setData}
-                />
+                <CreditStage3 setStage={setStage} data={data} setData={setData} />
              ) : stage === 4 ? (
-                <CreditStage4
-                  setStage={setStage}
-                  data={data}
-                  setData={setData}
-                />
+                <CreditStage4 setStage={setStage} data={data} setData={setData} />
              ) : stage === 5 ? (
                <CreditStage5
                  setStage={setStage}
@ -287,7 +276,7 @@ const CreditModal = ({
                  setProgress={setProgress}
                />
              ) : (
-                ""
+                ''
              )}
            </div>
          </div>
--- a/src/components/global/CustomSelect.js
+++ b/src/components/global/CustomSelect.js
@ -1,8 +1,8 @@
 // IMPORT MODULES
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect } from 'react';

 // IMPORT IMAGES
-import arrow from "../../icons/arrow-gray.svg";
+import arrow from '../../icons/arrow-gray.svg';

 const CustomSelect = ({
  placeholder,
@ -16,7 +16,7 @@ const CustomSelect = ({
  defaultValue,
 }) => {
  const [isOpen, setIsOpen] = useState(false);
-  const [input, setInput] = useState("");
+  const [input, setInput] = useState('');
  const inner1 = useRef();
  const inner2 = useRef();

@ -27,10 +27,10 @@ const CustomSelect = ({
  };

  useEffect(() => {
-    window.addEventListener("click", handleOpen);
+    window.addEventListener('click', handleOpen);

    return () => {
-      window.removeEventListener("click", handleOpen);
+      window.removeEventListener('click', handleOpen);
    };
  }, []);

@ -51,12 +51,12 @@ const CustomSelect = ({
  return (
    <div className="custom-select">
      <input
-        placeholder={placeholder ? placeholder : ""}
-        name={name ? name : ""}
+        placeholder={placeholder ? placeholder : ''}
+        name={name ? name : ''}
        required
        ref={inner1}
        type="text"
-        id={customId ? customId : ""}
+        id={customId ? customId : ''}
        value={input}
        readOnly
        onClick={() => {
@ -68,23 +68,15 @@ const CustomSelect = ({
      </div>
      <ul
        ref={inner2}
-        className={
-          isOpen
-            ? `${blockName ? blockName : ""} active`
-            : blockName
-            ? blockName
-            : ""
-        }
-      >
+        className={isOpen ? `${blockName ? blockName : ''} active` : blockName ? blockName : ''}>
        {items.map((item, i) => {
          return (
            <li
-              className={elName ? elName : ""}
+              className={elName ? elName : ''}
              key={i}
              onClick={() => {
                setInput(item);
-              }}
-            >
+              }}>
              {item}
            </li>
          );
--- a/src/components/global/Select.js
+++ b/src/components/global/Select.js
@ -0,0 +1,94 @@
+// IMPORT MODULES
+import React, { useState, useRef, useEffect } from 'react';
+
+// IMPORT IMAGES
+import arrow from '../../icons/arrow-gray.svg';
+
+const Select = ({
+  placeholder,
+  blockName,
+  elName,
+  customId,
+  items,
+  name,
+  stateSetter,
+  eTarget,
+  label,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [input, setInput] = useState('');
+  const inner1 = useRef();
+  const inner2 = useRef();
+
+  const handleOpen = (e) => {
+    if (e.target !== inner1.current && e.target !== inner2.current) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('click', handleOpen);
+
+    return () => {
+      window.removeEventListener('click', handleOpen);
+    };
+  }, []);
+
+  useEffect(() => {
+    setInput(items[0]);
+  }, []);
+
+  useEffect(() => {
+    if (!eTarget) {
+      stateSetter(true);
+    } else {
+      stateSetter(input);
+    }
+
+    return () => null;
+  }, [input, eTarget]);
+
+  return (
+    <div className="custom-select">
+      <div className="input-block">
+        <label className="input-block">{label}</label>
+        <div className="select-block">
+          <input
+            placeholder={placeholder ? placeholder : ''}
+            name={name ? name : ''}
+            required
+            ref={inner1}
+            type="text"
+            id={customId ? customId : ''}
+            value={input}
+            readOnly
+            onClick={() => {
+              setIsOpen(!isOpen);
+            }}
+          />
+          <div className="input-img">
+            <img src={arrow} alt="arrow" />
+          </div>
+        </div>
+      </div>
+      <ul
+        ref={inner2}
+        className={isOpen ? `${blockName ? blockName : ''} active` : blockName ? blockName : ''}>
+        {items.map((item, i) => {
+          return (
+            <li
+              className={elName ? elName : ''}
+              key={i}
+              onClick={() => {
+                setInput(item);
+              }}>
+              {item}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default Select;
--- a/src/components/global/Side.js
+++ b/src/components/global/Side.js
@ -1,23 +1,23 @@
 // IMPORT MODULES
-import React, { useState, useEffect, useContext, useRef } from "react";
-import { Link } from "react-router-dom";
-import { UserContext } from "../../backend/UserContext";
-import { deleteUser } from "../../backend/deleteUser";
-import { LanguageContext } from "../../backend/LanguageContext";
+import React, { useState, useEffect, useContext, useRef } from 'react';
+import { Link } from 'react-router-dom';
+import { UserContext } from '../../backend/UserContext';
+import { deleteUser } from '../../backend/deleteUser';
+import { LanguageContext } from '../../backend/LanguageContext';

 // IMPORT IMAGES
-import card from "../../icons/card.svg";
-import credit from "../../icons/credit.svg";
-import mail from "../../icons/mail.svg";
-import password from "../../icons/password.svg";
-import quit from "../../icons/quit.svg";
-import user from "../../icons/user-square.svg";
-import arrow from "../../icons/arrow-back.svg";
-import close from "../../icons/close.svg";
-import topup from "../../icons/topup.svg";
+import card from '../../icons/card.svg';
+import credit from '../../icons/credit.svg';
+import mail from '../../icons/mail.svg';
+import password from '../../icons/password.svg';
+import quit from '../../icons/quit.svg';
+import user from '../../icons/user-square.svg';
+import arrow from '../../icons/arrow-back.svg';
+import close from '../../icons/close.svg';
+import topup from '../../icons/topup.svg';

 // HOOKS
-import useMediaQuery from "../../hooks/useMediaQuery";
+import useMediaQuery from '../../hooks/useMediaQuery';

 const Side = ({ sideOpen, setSideOpen }) => {
  const inner = useRef();
@ -26,118 +26,141 @@ const Side = ({ sideOpen, setSideOpen }) => {
  const [linkStage, setLinkStage] = useState(0);
  const [closeOnInteract, setCloseOnInteract] = useState(false);
  const location = window.location.href;
-  const viewPortWidth = useMediaQuery("(max-width: 1300px)");
+  const viewPortWidth = useMediaQuery('(max-width: 1300px)');

  useEffect(() => {
    setCloseOnInteract(viewPortWidth);
  }, [viewPortWidth]);

  useEffect(() => {
-    if (location.includes("cards")) {
+    if (location.includes('home/cards')) {
      setLinkStage(1);
-    } else if (location.includes("credits")) {
+    } else if (location.includes('home/credits')) {
      setLinkStage(2);
-    } else if (location.includes("contact-us")) {
+    } else if (location.includes('home/immediate-credits')) {
      setLinkStage(3);
-    } else if (location.includes("profile")) {
+    } else if (location.includes('home/contact-us')) {
      setLinkStage(4);
-    } else if (location.includes("recovery")) {
+    } else if (location.includes('home/profile')) {
      setLinkStage(5);
-    } else if (location.includes("topup")) {
+    } else if (location.includes('home/recovery')) {
      setLinkStage(6);
+    } else if (location.includes('home/topup')) {
+      setLinkStage(7);
    } else {
      setLinkStage(0);
    }
  }, [location]);
+
  return (
    <section
-      className={sideOpen ? "side active" : "side"}
+      className={sideOpen ? 'side active' : 'side'}
      onClick={(e) => {
        if (e.target.contains(inner.current)) {
          setSideOpen(false);
        }
-      }}
-    >
+      }}>
      <div className="side-wrapper">
        <div className="side-inner" ref={inner}>
-          {" "}
          <div className="list-wrapper">
            <ul>
              <li className="side-top-li">
                <h2 className="side-title">
-                  {locale === "TKM"
-                    ? "Bölümler"
-                    : locale === "РУС"
-                    ? "Разделы"
-                    : locale === "ENG"
-                    ? "Sections"
-                    : "Bölümler"}
+                  {locale === 'TKM'
+                    ? 'Bölümler'
+                    : locale === 'РУС'
+                    ? 'Разделы'
+                    : locale === 'ENG'
+                    ? 'Sections'
+                    : 'Bölümler'}
                </h2>
                <div
                  className="side-quit"
                  onClick={() => {
                    setSideOpen(!sideOpen);
-                  }}
-                >
+                  }}>
                  <img src={close} alt="close" />
                </div>
              </li>
+
              <li
-                className={linkStage === 1 ? "active" : ""}
+                className={linkStage === 1 ? 'active' : ''}
                onClick={() => {
                  setLinkStage(1);
-                }}
-              >
+                }}>
                <Link
                  to="/home/cards"
                  onClick={() => {
                    if (closeOnInteract) {
                      setSideOpen(true);
                    }
-                  }}
-                >
+                  }}>
                  <div className="link-img">
                    <img src={card} alt="link" />
                  </div>
                  <span>
-                    {locale === "TKM"
-                      ? "Plastik kartlar"
-                      : locale === "РУС"
-                      ? "Пластиковые карты"
-                      : locale === "ENG"
-                      ? "Plastic cards"
-                      : "Plastik kartlar"}
+                    {locale === 'TKM'
+                      ? 'Plastik kartlar'
+                      : locale === 'РУС'
+                      ? 'Пластиковые карты'
+                      : locale === 'ENG'
+                      ? 'Plastic cards'
+                      : 'Plastik kartlar'}
                  </span>
                </Link>
              </li>
              <li
-                className={linkStage === 2 ? "active" : ""}
+                className={linkStage === 2 ? 'active' : ''}
                onClick={() => {
                  setLinkStage(2);
-                }}
-              >
+                }}>
                <Link
                  to="/home/credits"
                  onClick={() => {
                    if (closeOnInteract) {
                      setSideOpen(true);
                    }
-                  }}
-                >
+                  }}>
                  <div className="link-img">
                    <img src={credit} alt="link" />
                  </div>
                  <span>
-                    {locale === "TKM"
-                      ? "Karzlar"
-                      : locale === "РУС"
-                      ? "Кредиты"
-                      : locale === "ENG"
-                      ? "Loans"
-                      : "Karzlar"}
+                    {locale === 'TKM'
+                      ? 'Karzlar'
+                      : locale === 'РУС'
+                      ? 'Кредиты'
+                      : locale === 'ENG'
+                      ? 'Loans'
+                      : 'Karzlar'}
                  </span>
                </Link>
              </li>
+              {/* <li
+                className={linkStage === 3 ? 'active' : ''}
+                onClick={() => {
+                  setLinkStage(3);
+                }}>
+                <Link
+                  to="/home/immediate-credits"
+                  onClick={() => {
+                    if (closeOnInteract) {
+                      setSideOpen(true);
+                    }
+                  }}>
+                  <div className="link-img">
+                    <img src={credit} alt="link" />
+                  </div>
+                  <span>
+                    {locale === 'TKM'
+                      ? 'Sanly karz'
+                      : locale === 'РУС'
+                      ? 'Цифровой кредит'
+                      : locale === 'ENG'
+                      ? 'Digital loan'
+                      : 'Çalt Karzlar'}
+                  </span>
+                </Link>
+              </li> */}
              {/* <li
                className={linkStage === 6 ? "active" : ""}
                onClick={() => {
@ -167,30 +190,28 @@ const Side = ({ sideOpen, setSideOpen }) => {
                </Link>
              </li> */}
              <li
-                className={linkStage === 3 ? "active" : ""}
+                className={linkStage === 4 ? 'active' : ''}
                onClick={() => {
-                  setLinkStage(3);
-                }}
-              >
+                  setLinkStage(4);
+                }}>
                <Link
                  to="/home/contact-us"
                  onClick={() => {
                    if (closeOnInteract) {
                      setSideOpen(true);
                    }
-                  }}
-                >
+                  }}>
                  <div className="link-img">
                    <img src={mail} alt="link" />
                  </div>
                  <span>
-                    {locale === "TKM"
-                      ? "Hat ýazmak"
-                      : locale === "РУС"
-                      ? "Написать письмо"
-                      : locale === "ENG"
-                      ? "Write a letter"
-                      : "Hat ýazmak"}
+                    {locale === 'TKM'
+                      ? 'Hat ýazmak'
+                      : locale === 'РУС'
+                      ? 'Написать письмо'
+                      : locale === 'ENG'
+                      ? 'Write a letter'
+                      : 'Hat ýazmak'}
                  </span>
                </Link>
              </li>
@ -198,68 +219,64 @@ const Side = ({ sideOpen, setSideOpen }) => {
            <ul>
              <li>
                <h2 className="side-title">
-                  {locale === "TKM"
-                    ? "Profil"
-                    : locale === "РУС"
-                    ? "Профиль"
-                    : locale === "ENG"
-                    ? "Profile"
-                    : "Profil"}
+                  {locale === 'TKM'
+                    ? 'Profil'
+                    : locale === 'РУС'
+                    ? 'Профиль'
+                    : locale === 'ENG'
+                    ? 'Profile'
+                    : 'Profil'}
                </h2>
              </li>
              <li
-                className={linkStage === 4 ? "active" : ""}
+                className={linkStage === 5 ? 'active' : ''}
                onClick={() => {
-                  setLinkStage(4);
-                }}
-              >
+                  setLinkStage(5);
+                }}>
                <Link
                  to="/home/profile"
                  onClick={() => {
                    if (closeOnInteract) {
                      setSideOpen(true);
                    }
-                  }}
-                >
+                  }}>
                  <div className="link-img">
                    <img src={user} alt="link" />
                  </div>
                  <span>
-                    {locale === "TKM"
-                      ? "Profiliň maglumaty"
-                      : locale === "РУС"
-                      ? "Данные профиля"
-                      : locale === "ENG"
-                      ? "Profile information"
-                      : "Profiliň maglumaty"}
+                    {locale === 'TKM'
+                      ? 'Profiliň maglumaty'
+                      : locale === 'РУС'
+                      ? 'Данные профиля'
+                      : locale === 'ENG'
+                      ? 'Profile information'
+                      : 'Profiliň maglumaty'}
                  </span>
                </Link>
              </li>
              <li
-                className={linkStage === 5 ? "active" : ""}
+                className={linkStage === 6 ? 'active' : ''}
                onClick={() => {
-                  setLinkStage(5);
-                }}
-              >
+                  setLinkStage(6);
+                }}>
                <Link
                  to="/home/recovery"
                  onClick={() => {
                    if (closeOnInteract) {
                      setSideOpen(true);
                    }
-                  }}
-                >
+                  }}>
                  <div className="link-img">
                    <img src={password} alt="link" />
                  </div>
                  <span>
-                    {locale === "TKM"
-                      ? "Açar sözüni çalyşmak"
-                      : locale === "РУС"
-                      ? "Смена пароля"
-                      : locale === "ENG"
-                      ? "Change password"
-                      : "Açar sözüni çalyşmak"}
+                    {locale === 'TKM'
+                      ? 'Açar sözüni çalyşmak'
+                      : locale === 'РУС'
+                      ? 'Смена пароля'
+                      : locale === 'ENG'
+                      ? 'Change password'
+                      : 'Açar sözüni çalyşmak'}
                  </span>
                </Link>
              </li>
@ -269,19 +286,18 @@ const Side = ({ sideOpen, setSideOpen }) => {
                  onClick={() => {
                    deleteUser();
                    setUser(null);
-                  }}
-                >
+                  }}>
                  <div className="link-img">
                    <img src={quit} alt="link" />
                  </div>
                  <span>
-                    {locale === "TKM"
-                      ? "Çykmak"
-                      : locale === "РУС"
-                      ? "Выход"
-                      : locale === "ENG"
-                      ? "Exit"
-                      : "Çykmak"}
+                    {locale === 'TKM'
+                      ? 'Çykmak'
+                      : locale === 'РУС'
+                      ? 'Выход'
+                      : locale === 'ENG'
+                      ? 'Exit'
+                      : 'Çykmak'}
                  </span>
                </button>
              </li>
@ -295,19 +311,18 @@ const Side = ({ sideOpen, setSideOpen }) => {
              }
              deleteUser();
              setUser(null);
-            }}
-          >
+            }}>
            <div className="footer-img">
              <img src={arrow} alt="arrow" />
            </div>
            <span>
-              {locale === "TKM"
-                ? "Baş sahypa dolanmak"
-                : locale === "РУС"
-                ? "Вернутся на главный сайт"
-                : locale === "ENG"
-                ? "Return to the main page"
-                : "Baş sahypa dolanmak"}
+              {locale === 'TKM'
+                ? 'Baş sahypa dolanmak'
+                : locale === 'РУС'
+                ? 'Вернутся на главный сайт'
+                : locale === 'ENG'
+                ? 'Return to the main page'
+                : 'Baş sahypa dolanmak'}
            </span>
          </span>
        </div>
--- a/src/components/immediateCredits/ImmediateCreditModal.js
+++ b/src/components/immediateCredits/ImmediateCreditModal.js
@ -0,0 +1,615 @@
+// IMPORT MODULES
+import React, { useEffect, useRef, useState, useContext } from "react";
+import { LanguageContext } from "../../backend/LanguageContext";
+
+import axios from "axios";
+
+// IMPORT IMAGES
+import exit from "../../icons/exit.svg";
+import { ReactComponent as Lines } from "../../icons/lines.svg";
+import { ReactComponent as Img1 } from "../../icons/credit1.svg";
+import { ReactComponent as Img2 } from "../../icons/credit2.svg";
+import { ReactComponent as Img3 } from "../../icons/credit3.svg";
+import { ReactComponent as Img4 } from "../../icons/credit4.svg";
+import { ReactComponent as Img5 } from "../../icons/credit5.svg";
+import { ReactComponent as Img6 } from "../../icons/credit6.svg";
+
+// IMPORT COMPONENTS
+import BorrowerStage from "../ImmediateCreditsStages/BorrowerStage";
+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";
+import AcceptStage from "../ImmediateCreditsStages/AcceptStage";
+import PhoneAccept from "../ImmediateCreditsStages/PhoneAccept";
+import CardDetails from "../ImmediateCreditsStages/CardDetails";
+import LoanAccepted from "../ImmediateCreditsStages/LoanAccepted";
+import CardRegistration from "../ImmediateCreditsStages/CardRegistration";
+import PaymentDetails from "../ImmediateCreditsStages/PaymentDetails";
+import PaymentSuccess from "../ImmediateCreditsStages/PaymentSuccess";
+import FinalStage from "../ImmediateCreditsStages/FinalStage";
+import { UserContext } from "../../backend/UserContext";
+
+const ImmediateCreditModal = ({
+  modalOpen,
+  setModalOpen,
+  stage,
+  setStage,
+  setLoader,
+  setSuccess,
+  // setError,
+  setProgress,
+}) => {
+  const { locale } = useContext(LanguageContext);
+  const { user } = useContext(UserContext);
+
+  const window = useRef();
+  const [isGuranter, setIsGuranter] = useState(false);
+
+  const [loading, setLoading] = useState();
+  const [error, setError] = useState();
+
+  const [errMessage, setErrMessage] = useState("");
+  const [errMessageEn, setErrMessageEn] = useState("");
+  const [errMessageTkm, setErrMessageTkm] = useState("");
+
+  const [acceptedMessage, setAcceptedMessage] = useState("");
+  const [acceptedMessageEn, setAcceptedMessageEn] = useState("");
+  const [acceptedMessageTkm, setAcceptedMessageTkm] = useState("");
+
+  const [borrowerData, setBorrowerData] = useState();
+  const [guaranterData, setGuaranterData] = useState();
+
+  const [signRecipient, setSignRecipient] = useState();
+  const [sighGuaranter, setSignGuaranter] = useState();
+  const [maxAmount, setMaxAmount] = useState();
+  const [recepientAmount, setRecepientAmount] = useState(0);
+  const [creditDuration, setCreditDuration] = useState(0);
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [cardDetails, setCardDetails] = useState("");
+
+  const [userDataRes, setUserDataRes] = useState();
+  const [paymentLink, setPaymentLink] = useState("");
+
+  const [paymentDetails, setPaymentDetails] = useState();
+  const [submitCardDetails, setSumbitCardDetails] = useState();
+
+  const [recipientWorkPlace, setRecipientWorkPlace] = useState("");
+  const [recipientWorkPosition, setRecipientWorkPosition] = useState("");
+
+  const [invalidData, setInvalidData] = useState(false);
+
+  return (
+    <section
+      className={modalOpen ? "modal credit-modal active" : "modal credit-modal"}
+    >
+      <div className="modal-container">
+        <div className="modal-inner" ref={window}>
+          <div className="modal-window">
+            <div className="modal-top">
+              <h2>
+                {locale === "TKM"
+                  ? "Sanly karz almak üçin onlaýn-ýüzlenme"
+                  : locale === "ENG"
+                  ? "Online aplication for digital loan"
+                  : "Онлайн-заявка для получения цифрового кредита"}
+              </h2>
+              <button
+                type="button"
+                className="exit-btn"
+                onClick={() => {
+                  setModalOpen(false);
+                }}
+              >
+                <div>
+                  <img src={exit} alt="exit" />
+                </div>
+              </button>
+            </div>
+
+            <div className="modal-middle modal-middle-digital-loan">
+              <div className="icon-block active">
+                <Img4 className="modal-icon" />
+                <h3 className="icon-title">
+                  {locale === "TKM"
+                    ? "Maglumatlary dolduryň"
+                    : locale === "РУС"
+                    ? "Заполните данные"
+                    : locale === "ENG"
+                    ? "Fill in the details"
+                    : "Maglumatlary dolduryň"}
+                </h3>
+              </div>
+
+              <div className={stage > 1 ? "line-block active" : "line-block"}>
+                <Lines className="lines" />
+              </div>
+
+              <div className={stage > 1 ? "icon-block active" : "icon-block"}>
+                <Img3 className="modal-icon" />
+                <h3 className="icon-title">
+                  {locale === "TKM"
+                    ? "Şahsy maglumatlaryňyzy tassyklaň"
+                    : locale === "РУС"
+                    ? "Подтвердите личные данные"
+                    : locale === "ENG"
+                    ? "Confirm your Personal data"
+                    : "Şahsy maglumatlaryňyzy tassyklaň"}
+                </h3>
+              </div>
+
+              <div className={stage > 1 ? "line-block active" : "line-block"}>
+                <Lines className="lines" />
+              </div>
+
+              {isGuranter && (
+                <>
+                  <div
+                    className={stage > 3 ? "icon-block active" : "icon-block"}
+                  >
+                    <Img4 className="modal-icon" />
+                    <h3 className="icon-title">
+                      {locale === "TKM"
+                        ? "Zamunçynyň maglumatlaryny dolduryň"
+                        : locale === "РУС"
+                        ? "Заполните данные поручителя"
+                        : locale === "ENG"
+                        ? "Fill in the guarantor's details"
+                        : "Zamunçynyň maglumatlaryny dolduryň"}
+                    </h3>
+                  </div>
+
+                  <div
+                    className={stage > 3 ? "line-block active" : "line-block"}
+                  >
+                    <Lines className="lines" />
+                  </div>
+
+                  <div
+                    className={stage > 4 ? "icon-block active" : "icon-block"}
+                  >
+                    <Img3 className="modal-icon" />
+                    <h3 className="icon-title">
+                      {locale === "TKM"
+                        ? "Zamunçynyň maglumatlaryny tassyklaň"
+                        : locale === "РУС"
+                        ? "Подтвердите данные поручителя"
+                        : locale === "ENG"
+                        ? "Confirm the guarantor's details"
+                        : "Zamunçynyň maglumatlaryny tassyklaň"}
+                    </h3>
+                  </div>
+
+                  <div
+                    className={stage > 3 ? "line-block active" : "line-block"}
+                  >
+                    <Lines className="lines" />
+                  </div>
+
+                  <div
+                    className={stage > 8 ? "icon-block active" : "icon-block"}
+                  >
+                    <Img5 className="modal-icon" />
+                    <h3 className="icon-title">
+                      {locale === "TKM"
+                        ? "Karz ýüzlenmesini tassyklaň"
+                        : locale === "РУС"
+                        ? "Подтвердите кредитную заявку"
+                        : locale === "ENG"
+                        ? "Confirm your loan application"
+                        : "Karz ýüzlenmesini tassyklaň"}
+                    </h3>
+                  </div>
+
+                  <div
+                    className={stage > 8 ? "line-block active" : "line-block"}
+                  >
+                    <Lines className="lines" />
+                  </div>
+                </>
+              )}
+
+              <div className={stage > 6 ? "icon-block active" : "icon-block"}>
+                <Img2 className="modal-icon" />
+                <h3 className="icon-title">
+                  {locale === "TKM"
+                    ? "Karz kalkulýatory"
+                    : locale === "РУС"
+                    ? "Калькулятор кредита"
+                    : locale === "ENG"
+                    ? "Loan calculator"
+                    : "Karz kalkulýatory"}
+                </h3>
+              </div>
+
+              <div className={stage > 6 ? "line-block active" : "line-block"}>
+                <Lines className="lines" />
+              </div>
+
+              <div className={stage > 7 ? "icon-block active" : "icon-block"}>
+                <Img6 className="modal-icon" />
+                <h3 className="icon-title">
+                  {locale === "TKM"
+                    ? "Karz maglumatlaryňyzy tassyklaň"
+                    : locale === "РУС"
+                    ? "Подтвердите данные кредита"
+                    : locale === "ENG"
+                    ? "Confirm your loan personal data"
+                    : "Karz maglumatlaryňyzy tassyklaň"}
+                </h3>
+              </div>
+
+              <div className={stage > 7 ? "line-block active" : "line-block"}>
+                <Lines className="lines" />
+              </div>
+
+              <div className={stage > 8 ? "icon-block active" : "icon-block"}>
+                <Img5 className="modal-icon" />
+                <h3 className="icon-title">
+                  {locale === "TKM"
+                    ? "Karz ýüzlenmesini tassyklaň"
+                    : locale === "РУС"
+                    ? "Подтвердите кредитную заявку"
+                    : locale === "ENG"
+                    ? "Confirm your loan application"
+                    : "Karz ýüzlenmesini tassyklaň"}
+                </h3>
+              </div>
+            </div>
+
+            <div className="modal-middle modal-middle-mobile">
+              {stage === 1 && (
+                <div className="icon-block active">
+                  <Img4 className="modal-icon" />
+                  <h3 className="icon-title">
+                    {locale === "TKM"
+                      ? "Maglumatlary dolduryň"
+                      : locale === "РУС"
+                      ? "Заполните данные"
+                      : locale === "ENG"
+                      ? "Fill in the details"
+                      : "Maglumatlary dolduryň"}
+                  </h3>
+                </div>
+              )}
+
+              {stage === 2 && (
+                <div className="icon-block active">
+                  <Img3 className="modal-icon" />
+                  <h3 className="icon-title">
+                    {locale === "TKM"
+                      ? "Şahsy maglumatlaryňyzy tassyklaň"
+                      : locale === "РУС"
+                      ? "Подтвердите личные данные"
+                      : locale === "ENG"
+                      ? "Confirm your Personal data"
+                      : "Şahsy maglumatlaryňyzy tassyklaň"}
+                  </h3>
+                </div>
+              )}
+
+              {isGuranter && (
+                <>
+                  {stage === 4 && (
+                    <div className="icon-block active">
+                      <Img4 className="modal-icon" />
+                      <h3 className="icon-title">
+                        {locale === "TKM"
+                          ? "Zamunçynyň maglumatlaryny dolduryň"
+                          : locale === "РУС"
+                          ? "Заполните данные поручителя"
+                          : locale === "ENG"
+                          ? "Fill in the guarantor's details"
+                          : "Zamunçynyň maglumatlaryny dolduryň"}
+                      </h3>
+                    </div>
+                  )}
+                  {stage === 5 && (
+                    <div className="icon-block active">
+                      <Img3 className="modal-icon" />
+                      <h3 className="icon-title">
+                        {locale === "TKM"
+                          ? "Zamunçynyň maglumatlaryny tassyklaň"
+                          : locale === "РУС"
+                          ? "Подтвердите данные поручителя"
+                          : locale === "ENG"
+                          ? "Confirm the guarantor's details"
+                          : "Zamunçynyň maglumatlaryny tassyklaň"}
+                      </h3>
+                    </div>
+                  )}
+                </>
+              )}
+
+              {stage === 6 && (
+                <div className="icon-block active">
+                  <Img2 className="modal-icon" />
+                  <h3 className="icon-title">
+                    {locale === "TKM"
+                      ? "Karz kalkulýatory"
+                      : locale === "РУС"
+                      ? "Калькулятор кредита"
+                      : locale === "ENG"
+                      ? "Loan calculator"
+                      : "Karz kalkulýatory"}
+                  </h3>
+                </div>
+              )}
+
+              {stage === 7 && (
+                <div className="icon-block active">
+                  <Img6 className="modal-icon" />
+                  <h3 className="icon-title">
+                    {locale === "TKM"
+                      ? "Karz maglumatlaryňyzy tassyklaň"
+                      : locale === "РУС"
+                      ? "Подтвердите данные кредита"
+                      : locale === "ENG"
+                      ? "Confirm your loan details"
+                      : "Karz maglumatlaryňyzy tassyklaň"}
+                  </h3>
+                </div>
+              )}
+              {stage === 8 && (
+                <div className="icon-block active">
+                  <Img5 className="modal-icon" />
+                  <h3 className="icon-title">
+                    {locale === "TKM"
+                      ? "Karz ýüzlenmesini tassyklaň"
+                      : locale === "РУС"
+                      ? "Подтвердите кредитную заявку"
+                      : locale === "ENG"
+                      ? "Confirm your loan application"
+                      : "Karz ýüzlenmesini tassyklaň"}
+                  </h3>
+                </div>
+              )}
+
+              {/* {stage === 1 ? (
+                <>
+                  <div className="icon-block active">
+                    <Img4 className="modal-icon" />
+                    <h3 className="icon-title">
+                      {locale === 'TKM'
+                        ? 'Maglumatlary dolduryň'
+                        : locale === 'РУС'
+                        ? 'Заполните данные'
+                        : locale === 'ENG'
+                        ? 'Fill in the details'
+                        : 'Maglumatlary dolduryň'}
+                    </h3>
+                  </div>
+                </>
+              ) : stage === 2 ? (
+                <div className="icon-block active">
+                  <Img3 className="modal-icon" />
+                  <h3 className="icon-title">
+                    {locale === 'TKM'
+                      ? 'Şahsy maglumatlaryňyzy tassyklaň'
+                      : locale === 'РУС'
+                      ? 'Подтвердите личные данные'
+                      : locale === 'ENG'
+                      ? 'Confirm your Personal data'
+                      : 'Şahsy maglumatlaryňyzy tassyklaň'}
+                  </h3>
+                </div>
+              ) : stage === 4 ? (
+                <div className="icon-block active">
+                  <Img4 className="modal-icon" />
+                  <h3 className="icon-title">
+                    {locale === 'TKM'
+                      ? 'Zamunçynyň maglumatlaryny dolduryň'
+                      : locale === 'РУС'
+                      ? 'Заполните данные поручителя'
+                      : locale === 'ENG'
+                      ? "Fill in the guarantor's details"
+                      : 'Zamunçynyň maglumatlaryny dolduryň'}
+                  </h3>
+                </div>
+              ) : stage === 5 ? (
+                <div className="icon-block active">
+                  <Img3 className="modal-icon" />
+                  <h3 className="icon-title">
+                    {locale === 'TKM'
+                      ? 'Zamunçynyň maglumatlaryny tassyklaň'
+                      : locale === 'РУС'
+                      ? 'Подтвердите данные поручителя'
+                      : locale === 'ENG'
+                      ? "Confirm the guarantor's details"
+                      : 'Zamunçynyň maglumatlaryny tassyklaň'}
+                  </h3>
+                </div>
+              ) : (
+                ''
+              )} */}
+            </div>
+
+            <div className="modal-bottom">
+              {stage === 1 ? (
+                <BorrowerStage
+                  modalOpen={modalOpen}
+                  stage={stage}
+                  setStage={setStage}
+                  isGuranter={isGuranter}
+                  setIsGuranter={setIsGuranter}
+                  setBorrowerData={setBorrowerData}
+                  borrowerData={borrowerData}
+                  setSignRecipient={setSignRecipient}
+                  setMaxAmount={setMaxAmount}
+                  setRecepientAmount={setRecepientAmount}
+                  setErrMessage={setErrMessage}
+                  setErrMessageEn={setErrMessageEn}
+                  setErrMessageTkm={setErrMessageTkm}
+                />
+              ) : stage === 2 ? (
+                <BorrowerInfo
+                  setStage={setStage}
+                  isGuranter={isGuranter}
+                  borrowerData={borrowerData}
+                  setRecipientWorkPlace={setRecipientWorkPlace}
+                  setRecipientWorkPosition={setRecipientWorkPosition}
+                  recipientWorkPlace={recipientWorkPlace}
+                  recipientWorkPosition={recipientWorkPosition}
+                />
+              ) : stage === 3 ? (
+                <NotAUser
+                  setStage={setStage}
+                  stage={stage}
+                  errMessage={errMessage}
+                  errMessageEn={errMessageEn}
+                  errMessageTkm={errMessageTkm}
+                />
+              ) : stage === 4 ? (
+                <GuaranterStage
+                  setStage={setStage}
+                  isGuranter={isGuranter}
+                  setIsGuranter={setIsGuranter}
+                  guaranterData={guaranterData}
+                  setGuaranterData={setGuaranterData}
+                  signRecipient={signRecipient}
+                  setSignGuaranter={setSignGuaranter}
+                  borrowerData={borrowerData}
+                  setErrMessage={setErrMessage}
+                  setErrMessageEn={setErrMessageEn}
+                  setErrMessageTkm={setErrMessageTkm}
+                />
+              ) : stage === 5 ? (
+                <GuaranterInfo
+                  setStage={setStage}
+                  isGuranter={isGuranter}
+                  guaranterData={guaranterData}
+                />
+              ) : stage === 6 ? (
+                <NotAUser
+                  setStage={setStage}
+                  stage={stage}
+                  errMessage={errMessage}
+                  errMessageEn={errMessageEn}
+                  errMessageTkm={errMessageTkm}
+                />
+              ) : stage === 7 ? (
+                <CalculateStage
+                  isGuranter={isGuranter}
+                  setStage={setStage}
+                  recepientAmount={recepientAmount}
+                  setRecepientAmount={setRecepientAmount}
+                  creditDuration={creditDuration}
+                  setCreditDuration={setCreditDuration}
+                  maxAmount={maxAmount}
+                  modalOpen={modalOpen}
+                />
+              ) : stage === 8 ? (
+                <AcceptStage
+                  setStage={setStage}
+                  recepientAmount={recepientAmount}
+                  creditDuration={creditDuration}
+                  setPhoneNumber={setPhoneNumber}
+                  phoneNumber={phoneNumber}
+                  setCardDetails={setCardDetails}
+                  cardDetails={cardDetails}
+                  borrowerData={borrowerData}
+                  guaranterData={guaranterData}
+                  isGuranter={isGuranter}
+                  setUserDataRes={setUserDataRes}
+                  userDataRes={userDataRes}
+                  setErrMessage={setErrMessage}
+                  setErrMessageEn={setErrMessageEn}
+                  setErrMessageTkm={setErrMessageTkm}
+                  setAcceptedMessage={setAcceptedMessage}
+                  recipientWorkPlace={recipientWorkPlace}
+                  recipientWorkPosition={recipientWorkPosition}
+                />
+              ) : stage === 9 ? (
+                <PhoneAccept
+                  setStage={setStage}
+                  borrowerData={borrowerData}
+                  guaranterData={guaranterData}
+                  cardDetails={cardDetails}
+                  recepientAmount={recepientAmount}
+                  creditDuration={creditDuration}
+                  setAcceptedMessage={setAcceptedMessage}
+                  recipientWorkPlace={recipientWorkPlace}
+                  recipientWorkPosition={recipientWorkPosition}
+                />
+              ) : stage === 10 ? (
+                <NotAUser
+                  setStage={setStage}
+                  stage={stage}
+                  errMessage={errMessage}
+                  errMessageEn={errMessageEn}
+                  errMessageTkm={errMessageTkm}
+                />
+              ) : stage === 11 ? (
+                <LoanAccepted
+                  setModalOpen={setModalOpen}
+                  setStage={setStage}
+                  stage={stage}
+                  acceptedMessage={acceptedMessage}
+                />
+              ) : stage === 12 ? (
+                <CardRegistration
+                  setStage={setStage}
+                  stage={stage}
+                  borrowerData={borrowerData}
+                  setPaymentLink={setPaymentLink}
+                  paymentLink={paymentLink}
+                  setPaymentDetails={setPaymentDetails}
+                  invalidData={invalidData}
+                />
+              ) : stage === 13 ? (
+                <PaymentDetails
+                  setStage={setStage}
+                  paymentLink={paymentLink}
+                  paymentDetails={paymentDetails}
+                  borrowerData={borrowerData}
+                  setSumbitCardDetails={setSumbitCardDetails}
+                  setInvalidData={setInvalidData}
+                />
+              ) : stage === 14 ? (
+                <PhoneAccept
+                  borrowerData={borrowerData}
+                  setStage={setStage}
+                  paymentDetails={paymentDetails}
+                  submitCardDetails={submitCardDetails}
+                  paymentLink={paymentLink}
+                  creditDuration={creditDuration}
+                  setAcceptedMessage={setAcceptedMessage}
+                  setAcceptedMessageEn={setAcceptedMessageEn}
+                  setAcceptedMessageTkm={setAcceptedMessageTkm}
+                  recepientAmount={recepientAmount}
+                />
+              ) : stage === 15 ? (
+                <PaymentSuccess
+                  setStage={setStage}
+                  setModalOpen={setModalOpen}
+                  borrowerData={borrowerData}
+                  guaranterData={guaranterData}
+                  isGuranter={isGuranter}
+                  cardDetails={cardDetails}
+                  recepientAmount={recepientAmount}
+                  creditDuration={creditDuration}
+                  setErrMessage={setErrMessage}
+                  setAcceptedMessage={setAcceptedMessage}
+                  setAcceptedMessageEn={setAcceptedMessageEn}
+                  setAcceptedMessageTkm={setAcceptedMessageTkm}
+                />
+              ) : stage === 16 ? (
+                <FinalStage
+                  setModalOpen={setModalOpen}
+                  acceptedMessage={acceptedMessage}
+                  acceptedMessageEn={acceptedMessageEn}
+                  acceptedMessageTkm={acceptedMessageTkm}
+                />
+              ) : (
+                ""
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ImmediateCreditModal;
--- a/src/components/sign/RegForm.js
+++ b/src/components/sign/RegForm.js
--- a/src/components/topup/TopupModal.js
+++ b/src/components/topup/TopupModal.js
@ -10,7 +10,6 @@ import { ReactComponent as Img3 } from "../../icons/credit3.svg";
 import { ReactComponent as Img4 } from "../../icons/credit4.svg";
 import { ReactComponent as Img5 } from "../../icons/credit5.svg";
 import { ReactComponent as Img6 } from "../../icons/credit6.svg";
-import { ReactComponent as Receipt } from "../../icons/receipt.svg";

 // IMPORT COMPONENTS
 import TopupStage1 from "../TopupStages/TopupStage1";
@ -44,8 +43,12 @@ const TopupModal = ({
            <div className="modal-top">
              <h2>
                {locale === "TKM"
-                  ? "Karz almak üçin onlaýn-ýüzlenme"
-                  : "Онлайн-заявка для получения кредита"}
+                  ? "Hasaby doldurmak üçin onlaýn-ýüzlenme"
+                  : locale === "РУС"
+                  ? "Онлайн-заявка для пополнения счета"
+                  : locale === "ENG"
+                  ? "Online application for account top up"
+                  : "Hasaby doldurmak üçin onlaýn-ýüzlenme"}
              </h2>
              <button
                type="button"
@ -59,17 +62,17 @@ const TopupModal = ({
                </div>
              </button>
            </div>
-            <div className="modal-middle">
+            <div className="modal-middle topup-modal-middle">
              <div className="icon-block active">
                <Img1 className="modal-icon" />
                <h3 className="icon-title">
                  {locale === "TKM"
-                    ? "Karzyň görnüşini saýlaň"
+                    ? "Hyzmatynyň görnüşini saýlamak"
                    : locale === "РУС"
-                    ? "Выберите вид кредита"
+                    ? "Выберите вид пополнения счета"
                    : locale === "ENG"
-                    ? "Choose the type of loan"
-                    : "Karzyň görnüşini saýlaň"}
+                    ? "Choose the type of top up"
+                    : "Hyzmatynyň görnüşini saýlamak"}
                </h3>
              </div>
              <div className={stage > 1 ? "line-block active" : "line-block"}>
@ -97,12 +100,12 @@ const TopupModal = ({
                <Img4 className="modal-icon" />
                <h3 className="icon-title">
                  {locale === "TKM"
-                    ? "Hasaby doldurmak üçin maglumatlar"
+                    ? "Şahamçany saýlamak"
                    : locale === "РУС"
                    ? "Данные для пополнения счета"
                    : locale === "ENG"
                    ? "Top up data"
-                    : "Hasaby doldurmak üçin maglumatlar"}
+                    : "Şahamçany saýlamak"}
                </h3>
              </div>
              <div className={stage > 3 ? "line-block active" : "line-block"}>
@ -113,12 +116,12 @@ const TopupModal = ({
                <Img5 className="modal-icon" />
                <h3 className="icon-title">
                  {locale === "TKM"
-                    ? "Talaplar we resminamalar"
+                    ? "Gerekli resminamalary"
                    : locale === "РУС"
                    ? "Требования и документы"
                    : locale === "ENG"
                    ? "Requirements and documents"
-                    : "Talaplar we resminamalar"}
+                    : "Gerekli resminamalary"}
                </h3>
              </div>
              <div className={stage > 4 ? "line-block active" : "line-block"}>
@ -137,22 +140,6 @@ const TopupModal = ({
                    : "Ugratmak"}
                </h3>
              </div>
-              <div className={stage > 5 ? "line-block active" : "line-block"}>
-                <Lines className="lines" />
-                <Lines className="lines" />
-              </div>
-              <div className={stage > 5 ? "icon-block active" : "icon-block"}>
-                <Receipt className="modal-icon" />
-                <h3 className="icon-title">
-                  {locale === "TKM"
-                    ? "Töleg"
-                    : locale === "РУС"
-                    ? "Оплата"
-                    : locale === "ENG"
-                    ? "Payment"
-                    : "Töleg"}
-                </h3>
-              </div>
            </div>
            <div className="modal-middle modal-middle-mobile">
              {stage === 1 ? (
@ -160,12 +147,12 @@ const TopupModal = ({
                  <Img1 className="modal-icon" />
                  <h3 className="icon-title">
                    {locale === "TKM"
-                      ? "Karzyň görnüşini saýlaň"
+                      ? "Hyzmatynyň görnüşini saýlamak"
                      : locale === "РУС"
-                      ? "Выберите вид кредита"
+                      ? "Выберите вид пополнения счета"
                      : locale === "ENG"
-                      ? "Choose the type of loan"
-                      : "Karzyň görnüşini saýlaň"}
+                      ? "Choose the type of top up"
+                      : "Hyzmatynyň görnüşini saýlamak"}
                  </h3>
                </div>
              ) : stage === 2 ? (
@ -186,12 +173,12 @@ const TopupModal = ({
                  <Img4 className="modal-icon" />
                  <h3 className="icon-title">
                    {locale === "TKM"
-                      ? "Hasaby doldurmak üçin maglumatlar"
+                      ? "Şahamçany saýlamak"
                      : locale === "РУС"
                      ? "Данные для пополнения счета"
                      : locale === "ENG"
                      ? "Loan details"
-                      : "Hasaby doldurmak üçin maglumatlar"}
+                      : "Şahamçany saýlamak"}
                  </h3>
                </div>
              ) : stage === 4 ? (
@ -199,12 +186,12 @@ const TopupModal = ({
                  <Img5 className="modal-icon" />
                  <h3 className="icon-title">
                    {locale === "TKM"
-                      ? "Talaplar we resminamalar"
+                      ? "Gerekli resminamalary"
                      : locale === "РУС"
                      ? "Требования и документы"
                      : locale === "ENG"
                      ? "Requirements and documents"
-                      : "Talaplar we resminamalar"}
+                      : "Gerekli resminamalary"}
                  </h3>
                </div>
              ) : stage === 5 ? (
@ -220,19 +207,6 @@ const TopupModal = ({
                      : "Ugratmak"}
                  </h3>
                </div>
-              ) : stage === 6 ? (
-                <div className="icon-block active">
-                  <Receipt className="modal-icon" />
-                  <h3 className="icon-title">
-                    {locale === "TKM"
-                      ? "Töleg"
-                      : locale === "РУС"
-                      ? "Оплата"
-                      : locale === "ENG"
-                      ? "Payment"
-                      : "Töleg"}
-                  </h3>
-                </div>
              ) : (
                ""
              )}
@ -266,6 +240,8 @@ const TopupModal = ({
                  setStage={setStage}
                  data={data}
                  setData={setData}
+                  topupData={topupData}
+                  id={id}
                />
              ) : stage === 5 ? (
                <TopupStage5
@ -275,6 +251,7 @@ const TopupModal = ({
                  setSuccess={setSuccess}
                  setError={setError}
                  setProgress={setProgress}
+                  setStage={setStage}
                />
              ) : (
                ""
--- a/src/localization/branchData.js
+++ b/src/localization/branchData.js
@ -1,153 +1,138 @@
 export const branchData = () => {
  return {
    regions: {
-      TKM: ["Aşgabat şäheri", "Ahal", "Balkan", "Daşoguz", "Lebap", "Mary"],
+      TKM: ['Aşgabat şäheri', 'Arkadag şäheri', 'Ahal', 'Balkan', 'Daşoguz', 'Lebap', 'Mary'],
      RUS: [
-        "Город Ашхабад",
-        "Ахалский регион",
-        "Балканский регион",
-        "Дашогузский регион",
-        "Лебапский регион",
-        "Марыйский регион",
+        'Город Ашхабад',
+        'Город Аркадаг',
+        'Ахалский регион',
+        'Балканский регион',
+        'Дашогузский регион',
+        'Лебапский регион',
+        'Марыйский регион',
      ],
      ENG: [
-        "Ashgabat city",
-        "Akhal region",
-        "Balkan region",
-        "Dashoguz region",
-        "Lebap region",
-        "Mary region",
+        'Ashgabat city',
+        'Arkadag city',
+        'Akhal region',
+        'Balkan region',
+        'Dashoguz region',
+        'Lebap region',
+        'Mary region',
      ],
    },
    Ashgabat: {
      TKM: [
-        "Merkezi diwan",
-        "Bagtyýarlyk şahamça",
-        "Berkararlyk şahamça",
-        "Büzmeýin şahamça",
-        "Köpetdag şahamça",
-        "Çandybil şahamça",
-        "Paýhas şahamça",
+        'Merkezi diwan',
+        'Aşgabat şahamça',
+        'Bagtyýarlyk şahamça',
+        'Berkararlyk şahamça',
+        'Büzmeýin şahamça',
+        'Köpetdag şahamça',
+        'Çandybil şahamça',
+        'Paýhas şahamça',
      ],
      RUS: [
-        "Центральный офис",
-        "Филиал Багтыярлык",
-        "Филиал Беркарарлык",
-        "Филиал Бюзмейин",
-        "Филиал Копетдаг",
-        "Филиал Чандыбиль",
-        "Филиал Пайхас",
+        'Центральный офис',
+        'Филиал Ашхабад',
+        'Филиал Багтыярлык',
+        'Филиал Беркарарлык',
+        'Филиал Бюзмейин',
+        'Филиал Копетдаг',
+        'Филиал Чандыбиль',
+        'Филиал Пайхас',
      ],
      ENG: [
-        "Central office",
-        "Branch Bagtyyarlyk",
-        "Branch Berkararlyk",
-        "Branch Busmeyin",
-        "Branch Kopetdag",
-        "Branch Chandybil",
-        "Branch Payhas",
+        'Central office',
+        'Branch Ashgabat',
+        'Branch Bagtyyarlyk',
+        'Branch Berkararlyk',
+        'Branch Busmeyin',
+        'Branch Kopetdag',
+        'Branch Chandybil',
+        'Branch Payhas',
      ],
    },
+    Arkadag: {
+      TKM: ['Arkadag ş.'],
+      RUS: ['г.Аркадаг'],
+      ENG: ['Arkadag c.'],
+    },
    Ahal: {
-      TKM: [
-        "Ak bugdaý şahamça",
-        "Bäherden şahamça",
-        "Gökdepe şahamça",
-        "Tejen şahamça",
-      ],
-      RUS: [
-        "Филиaл Ак бугдай",
-        "Филиал Бахерден",
-        "Филиал Гекдепе",
-        "Филиал Теджен",
-      ],
+      TKM: ['Ak bugdaý şahamça', 'Bäherden şahamça', 'Gökdepe şahamça', 'Tejen şahamça'],
+      RUS: ['Филиaл Ак бугдай', 'Филиал Бахерден', 'Филиал Гекдепе', 'Филиал Теджен'],

-      ENG: [
-        "Branch Ak bugday",
-        "Branch Bakherden",
-        "Branch Geoktepe",
-        "Branch Tejen",
-      ],
+      ENG: ['Branch Ak bugday', 'Branch Bakherden', 'Branch Geoktepe', 'Branch Tejen'],
    },
    Balkan: {
-      TKM: ["Balkan şahamça", "Türkmenbaşy şahamça", "Esenguly şahamça"],
-      RUS: ["Филиал Балкан", "Филиал Туркменбаши", "Филиал Эсенгулы"],
-      ENG: ["Branch Balkan", "Branch Turkmenbashi", "Branch Esenguly"],
+      TKM: ['Balkan şahamça', 'Türkmenbaşy şahamça', 'Esenguly şahamça'],
+      RUS: ['Филиал Балкан', 'Филиал Туркменбаши', 'Филиал Эсенгулы'],
+      ENG: ['Branch Balkan', 'Branch Turkmenbashi', 'Branch Esenguly'],
    },
    Dashoguz: {
      TKM: [
-        "Daşoguz şahamça",
-        "Köneurgenç şahamça",
-        "Ruhubelent şahamça",
-        "S. Türkmenbaşy şahamça",
-      ],
-      RUS: [
-        "Филиал Дашогуз",
-        "Филиал Конеургенч",
-        "Филиал Рухубелент",
-        "Филиал С. Туркменбаши",
+        'Daşoguz şahamça',
+        'Köneurgenç şahamça',
+        'Ruhubelent şahamça',
+        'S. Türkmenbaşy şahamça',
      ],
+      RUS: ['Филиал Дашогуз', 'Филиал Конеургенч', 'Филиал Рухубелент', 'Филиал С. Туркменбаши'],

-      ENG: [
-        "Branch Dashoguz",
-        "Branch Koneurgench",
-        "Branch Ruhubelent",
-        "Branch S. Turkmenbashi",
-      ],
+      ENG: ['Branch Dashoguz', 'Branch Koneurgench', 'Branch Ruhubelent', 'Branch S. Turkmenbashi'],
    },
    Lebap: {
      TKM: [
-        "Lebap şahamça",
-        "Dostluk şahamça",
-        "Galkynyş şahamça",
-        "Kerki şahamça",
-        "Saýat şahamça",
-        "Seýdi şahamça",
-        "Darganata şahamça",
+        'Lebap şahamça',
+        'Dostluk şahamça',
+        'Galkynyş şahamça',
+        'Kerki şahamça',
+        'Saýat şahamça',
+        'Seýdi şahamça',
+        'Darganata şahamça',
      ],
      RUS: [
-        "Филиал Лебап",
-        "Филиал Достлук",
-        "Филиал Галкыныш",
-        "Филиал Керки",
-        "Филиал Саят",
-        "Филиал Сейди",
-        "Филиал Дарганата",
+        'Филиал Лебап',
+        'Филиал Достлук',
+        'Филиал Галкыныш',
+        'Филиал Керки',
+        'Филиал Саят',
+        'Филиал Сейди',
+        'Филиал Дарганата',
      ],
      ENG: [
-        "Branch Lebap",
-        "Branch Dostluk",
-        "Branch Galkynysh",
-        "Branch Kerki",
-        "Branch Sayat",
-        "Branch Seydi",
-        "Branch Darganata",
+        'Branch Lebap',
+        'Branch Dostluk',
+        'Branch Galkynysh',
+        'Branch Kerki',
+        'Branch Sayat',
+        'Branch Seydi',
+        'Branch Darganata',
      ],
    },
    Mary: {
      TKM: [
-        "Mary şahamça",
-        "Ýöleten şahamça",
-        "Murgap şahamça",
-        "Sakarçäge şahamça",
-        "Tagtabazar şahamça",
-        "Baýramaly şahamça",
+        'Mary şahamça',
+        'Ýöleten şahamça',
+        'Murgap şahamça',
+        'Sakarçäge şahamça',
+        'Tagtabazar şahamça',
+        'Baýramaly şahamça',
      ],
      RUS: [
-        "Филиал Мары",
-        "Филиал Ёлетен",
-        "Филиал Мургап",
-        "Филиал Сакарчяге",
-        "Филиал Тагтабазар",
-        "Филиал Байрамалы",
+        'Филиал Мары',
+        'Филиал Ёлетен',
+        'Филиал Мургап',
+        'Филиал Сакарчяге',
+        'Филиал Тагтабазар',
+        'Филиал Байрамалы',
      ],
      ENG: [
-        "Branch Mary",
-        "Branch Yoloten",
-        "Branch Murgap",
-        "Branch Sakarchage",
-        "Branch Tagtabazar",
-        "Branch Bayramali",
+        'Branch Mary',
+        'Branch Yoloten',
+        'Branch Murgap',
+        'Branch Sakarchage',
+        'Branch Tagtabazar',
+        'Branch Bayramali',
      ],
    },
  };
--- a/src/pages/Cards.js
+++ b/src/pages/Cards.js
@ -102,6 +102,7 @@ const Cards = () => {
              type="button"
              className="card-btn sign-btn"
              onClick={() => {
+                window.scrollTo(0, 0);
                setModalOpen(true);
                setStage(1);
              }}
--- a/src/pages/Credits.js
+++ b/src/pages/Credits.js
@ -124,6 +124,7 @@ const Credits = () => {
              type="button"
              className="card-btn sign-btn"
              onClick={() => {
+                window.scrollTo(0, 0);
                setStage(1);
                setModalOpen(true);
              }}
--- a/src/pages/ImmediateCredit.js
+++ b/src/pages/ImmediateCredit.js
@ -0,0 +1,400 @@
+// IMPORT MODULES
+import React, { useState, useEffect, useContext } from 'react';
+import { UserContext } from '../backend/UserContext';
+import { LanguageContext } from '../backend/LanguageContext';
+import axios from 'axios';
+
+// IMPORT COMPONENTS
+import Breadcrumb from '../components/global/Breadcrumb';
+import ImmediateCreditModal from '../components/immediateCredits/ImmediateCreditModal';
+import ProgressLoader from '../components/global/ProgressLoader';
+import Success from '../components/global/Success';
+import Error from '../components/global/Error';
+
+// IMPORT HELPERS
+import { dataDestination } from '../destinationUrl';
+
+// IMPORT IMAGES
+import credit from '../icons/credit-black.svg';
+import add from '../icons/add.svg';
+import allert from '../icons/info-circle.svg';
+
+const ImmediateCredit = () => {
+  const { locale } = useContext(LanguageContext);
+  const [error, setError] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const { user } = useContext(UserContext);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [stage, setStage] = useState(1);
+  const [loader, setLoader] = useState(false);
+  // const [immediateCreditData, setImmediateCreditData] = useState();
+  const [progress, setProgress] = useState(0);
+  const userToken = localStorage.getItem('userToken');
+  const [loansData, setLoansData] = useState();
+  const [loanStatus, setLoanStatus] = useState();
+
+  const [paymentDetails, setPaymentDetails] = useState();
+
+  const [paymentCardData, setPaymentCardData] = useState();
+
+  // console.log(userToken);
+
+  useEffect(() => {
+    if (modalOpen) {
+      document.body.style.overflowY = 'hidden';
+    } else {
+      document.body.style.overflowY = 'visible';
+    }
+  }, [modalOpen]);
+
+  const fetchData = async () => {
+    try {
+      const headers = {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${userToken}`,
+      };
+
+      const response = await fetch(`https://shahsyotag.halkbank.gov.tm/app/api/quick_loans`, {
+        headers,
+      });
+
+      const jsonedResponse = await response.json();
+
+      setLoansData(jsonedResponse);
+
+      if (response.ok) {
+        checkStatus(jsonedResponse.sign.sign);
+      }
+
+      // console.log('loan data', jsonedResponse);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const checkStatus = async (sign) => {
+    try {
+      const response = await fetch(
+        `https://shahsyotag.halkbank.gov.tm/onlineloan-services/api/loancheck`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            sign: sign,
+          }),
+        },
+      );
+
+      const jsonedResponse = await response.json();
+
+      setLoanStatus(jsonedResponse);
+    } catch (error) {}
+  };
+
+  const fetchCardData = async () => {
+    try {
+      const headers = {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${userToken}`,
+      };
+
+      const response = await fetch(
+        `https://shahsyotag.halkbank.gov.tm/app/api/get-credit-card-data`,
+        {
+          headers,
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error('Err');
+      }
+
+      const jsonedResponse = await response.json();
+      setPaymentCardData(jsonedResponse.data);
+
+      // setCardData(jsonedResponse);
+    } catch (error) {}
+  };
+
+  useEffect(() => {
+    fetchData();
+    fetchCardData();
+  }, []);
+
+  return (
+    <section className="cards">
+      {success ? (
+        <Success
+          message={
+            locale === 'TKM'
+              ? 'Ýüzlenme ugradyldy!'
+              : locale === 'РУС'
+              ? 'Ваш запрос успешно отправлен!'
+              : locale === 'ENG'
+              ? 'Request was successfully sent!'
+              : 'Ýüzlenme ugradyldy!'
+          }
+          setSuccess={setSuccess}
+        />
+      ) : null}
+      {error ? (
+        <Error
+          message={
+            locale === 'TKM'
+              ? 'Ýüzlenme ugradylmady'
+              : locale === 'РУС'
+              ? 'Не удалось отправить запрос'
+              : locale === 'ENG'
+              ? 'Failed to send request'
+              : 'Ýüzlenme ugradylmady'
+          }
+          setError={setError}
+        />
+      ) : null}
+      <Breadcrumb
+        image={credit}
+        link={'/home/immediate-credits'}
+        linkTitle={
+          locale === 'TKM'
+            ? 'Sanly karz'
+            : locale === 'РУС'
+            ? 'Цифровой кредит'
+            : locale === 'ENG'
+            ? 'Digital loan'
+            : 'Sanly karz'
+        }
+      />
+      <ImmediateCreditModal
+        setModalOpen={setModalOpen}
+        modalOpen={modalOpen}
+        stage={stage}
+        setStage={setStage}
+        loader={loader}
+        setLoader={setLoader}
+        setSuccess={setSuccess}
+        setError={setError}
+        // immediateCreditData={immediateCreditData}
+        setProgress={setProgress}
+      />
+      {loader ? <ProgressLoader progress={progress} /> : null}
+      <div className="container">
+        <div className="card-title">
+          <h2 className="cards-title">
+            {locale === 'TKM'
+              ? 'Sanly karz almak üçin onlaýn-ýüzlenme'
+              : locale === 'РУС'
+              ? 'Онлайн-заявка для получения цифрового кредита'
+              : locale === 'ENG'
+              ? 'Online application for digital loan '
+              : 'Çalt karz almak üçin onlaýn-ýüzlenme'}
+          </h2>
+          <button
+            type="button"
+            className="card-btn sign-btn"
+            onClick={() => {
+              window.scrollTo(0, 0);
+              setStage(1);
+              setModalOpen(true);
+            }}>
+            <div className="card-img">
+              <img src={add} alt="add" />
+            </div>
+            <h3>
+              {locale === 'TKM'
+                ? 'Ýüzlenme doldurmak'
+                : locale === 'РУС'
+                ? 'Заполнить заявку'
+                : locale === 'ENG'
+                ? 'Fill in application'
+                : 'Ýüzlenme doldurmak'}
+            </h3>
+          </button>
+        </div>
+        <div className="loans-inner">
+          <div className="home-table-wrapper">
+            <table className="home-table">
+              <tbody>
+                <tr className="table-head">
+                  <th>ID</th>
+                  <th>
+                    {locale === 'TKM'
+                      ? 'Senesi'
+                      : locale === 'РУС'
+                      ? 'Дата заявки'
+                      : locale === 'ENG'
+                      ? 'Date'
+                      : 'Senesi'}
+                  </th>
+
+                  <th>
+                    {locale === 'TKM'
+                      ? 'Ýagdaýy'
+                      : locale === 'РУС'
+                      ? 'Статус'
+                      : locale === 'ENG'
+                      ? 'Status'
+                      : 'Ýagdaýy'}
+                  </th>
+                </tr>
+                {loansData && loanStatus ? (
+                  <tr>
+                    <td>#{loansData.id}</td>
+                    <td>{loansData.created_at}</td>
+                    <td>
+                      {locale === 'TKM'
+                        ? loanStatus.message
+                        : locale === 'РУС'
+                        ? loanStatus.messageRu
+                        : locale === 'ENG'
+                        ? loanStatus.messageEn
+                        : loanStatus.message}
+                    </td>
+                  </tr>
+                ) : (
+                  <tr>
+                    <td>
+                      {locale === 'TKM'
+                        ? 'Tabşyrlan ýüzlenme ýok'
+                        : locale === 'РУС'
+                        ? 'Заявок на кредиты нет'
+                        : locale === 'ENG'
+                        ? 'There are no applications for loan issuance'
+                        : 'Tabşyrlan ýüzlenme ýok'}
+                    </td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                    <td></td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          {paymentCardData ? (
+            <div className="home-table-wrapper">
+              <h3 className="loan-card-table-title">
+                {locale === 'TKM'
+                  ? 'Kredit kart üçin ýüztutma'
+                  : locale === 'РУС'
+                  ? 'Зааявка для получения кредитной карты'
+                  : locale === 'ENG'
+                  ? 'Application for a credit card'
+                  : 'Kredit kart üçin ýüztutma'}
+              </h3>
+              <table className="home-table">
+                <tbody>
+                  <tr className="table-head">
+                    <th>ID</th>
+                    <th>
+                      {locale === 'TKM'
+                        ? 'Görnüşi'
+                        : locale === 'РУС'
+                        ? 'Тип'
+                        : locale === 'ENG'
+                        ? 'Type'
+                        : 'Görnüşi'}
+                    </th>
+                    <th>
+                      {locale === 'TKM'
+                        ? 'Senesi'
+                        : locale === 'РУС'
+                        ? 'Дата'
+                        : locale === 'ENG'
+                        ? 'Date'
+                        : 'Senesi'}
+                    </th>
+                    <th>
+                      {locale === 'TKM'
+                        ? 'Ýagdaýy'
+                        : locale === 'РУС'
+                        ? 'Статус'
+                        : locale === 'ENG'
+                        ? 'Status'
+                        : 'Ýagdaýy'}
+                    </th>
+                  </tr>
+                  {paymentCardData ? (
+                    <tr>
+                      <td>#{paymentCardData.id}</td>
+                      <td>{paymentCardData.selected_card}</td>
+                      <td>{paymentCardData.created_at}</td>
+                      <td
+                        className={
+                          paymentCardData.status !== 1
+                            ? 'red'
+                            : paymentCardData.status === 1
+                            ? 'green'
+                            : ''
+                        }>
+                        {paymentCardData.status === 'ugradyldy'
+                          ? locale === 'TKM'
+                            ? 'Ugradyldy'
+                            : locale === 'РУС'
+                            ? 'Отправлено'
+                            : locale === 'ENG'
+                            ? 'Sent'
+                            : 'Ugradyldy'
+                          : paymentCardData.status === 1
+                          ? locale === 'TKM'
+                            ? 'Kabul edildi'
+                            : locale === 'РУС'
+                            ? 'Принята'
+                            : locale === 'ENG'
+                            ? 'Accepted'
+                            : 'Kabul edildi'
+                          : paymentCardData.status === 0
+                          ? locale === 'TKM'
+                            ? 'Ret edildi'
+                            : locale === 'РУС'
+                            ? 'Отказано'
+                            : locale === 'ENG'
+                            ? 'Denied'
+                            : 'Ret edildi'
+                          : ''}
+                      </td>
+                      <td>
+                        {paymentCardData.status === 'kart_chykarylmady' ? (
+                          <div className="reject">
+                            <div className="reason">
+                              <h4>{paymentCardData.action}</h4>
+                            </div>
+                            <img src={allert} alt="reject" />
+                          </div>
+                        ) : (
+                          ''
+                        )}
+                      </td>
+                    </tr>
+                  ) : (
+                    <tr>
+                      <td>
+                        {locale === 'TKM'
+                          ? 'Tabşyrlan ýüzlenme ýok'
+                          : locale === 'РУС'
+                          ? 'Заявок на карты нет'
+                          : locale === 'ENG'
+                          ? 'There are no applications for card issuance'
+                          : 'Tabşyrlan ýüzlenme ýok'}
+                      </td>
+                      <td></td>
+                      <td></td>
+                      <td></td>
+                      <td></td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ImmediateCredit;
--- a/src/pages/Profile.js
+++ b/src/pages/Profile.js
@ -1,21 +1,22 @@
 // IMPORT MODULES
-import React, { useState, useContext } from "react";
-import { UserContext } from "../backend/UserContext";
-import { LanguageContext } from "../backend/LanguageContext";
+import React, { useState, useContext } from 'react';
+import { UserContext } from '../backend/UserContext';
+import { LanguageContext } from '../backend/LanguageContext';

 // IMPORT COMPONENTS
-import Breadcrumb from "../components/global/Breadcrumb";
+import Breadcrumb from '../components/global/Breadcrumb';

 // IMPORT VALIDATORS
-import { ValidateEmail } from "../validators/ValidateEmail";
-import { ValidatePhoneNumber } from "../validators/ValidatePhoneNumber";
+import { ValidateEmail } from '../validators/ValidateEmail';
+import { ValidatePhoneNumber } from '../validators/ValidatePhoneNumber';

 // IMPORT IMAGES
-import userImg from "../icons/user-black.svg";
+import userImg from '../icons/user-black.svg';

 const Profile = () => {
  const { locale } = useContext(LanguageContext);
  const { user } = useContext(UserContext);
+
  const [inputValid, setInputValid] = useState({
    surname: true,
    name: true,
@ -33,15 +34,15 @@ const Profile = () => {
    <section className="profile">
      <Breadcrumb
        image={userImg}
-        link={"/home/profile"}
+        link={'/home/profile'}
        linkTitle={
-          locale === "TKM"
-            ? "Profiliň maglumaty"
-            : locale === "РУС"
-            ? "Данные профиля"
-            : locale === "ENG"
-            ? "Profile information"
-            : "Profiliň maglumaty"
+          locale === 'TKM'
+            ? 'Profiliň maglumaty'
+            : locale === 'РУС'
+            ? 'Данные профиля'
+            : locale === 'ENG'
+            ? 'Profile information'
+            : 'Profiliň maglumaty'
        }
      />
      <div className="container">
@ -50,34 +51,34 @@ const Profile = () => {
            <div className="form-top">
              <div className="cu-bottom profile-title">
                <h2 className="profile-title">
-                  {locale === "TKM"
-                    ? "Profiliň maglumaty"
-                    : locale === "РУС"
-                    ? "Данные профиля"
-                    : locale === "ENG"
-                    ? "Profile information"
-                    : "Profiliň maglumaty"}
+                  {locale === 'TKM'
+                    ? 'Profiliň maglumaty'
+                    : locale === 'РУС'
+                    ? 'Данные профиля'
+                    : locale === 'ENG'
+                    ? 'Profile information'
+                    : 'Profiliň maglumaty'}
                </h2>
              </div>
            </div>
            <div className="form-bottom">
              <div className="input-block">
                <label htmlFor="surname">
-                  {locale === "TKM"
-                    ? "Hasaba almak"
-                    : locale === "РУС"
-                    ? "Регистрация"
-                    : locale === "ENG"
-                    ? "Sign up"
-                    : "Hasaba almak"}
+                  {locale === 'TKM'
+                    ? 'Hasaba almak'
+                    : locale === 'РУС'
+                    ? 'Регистрация'
+                    : locale === 'ENG'
+                    ? 'Sign up'
+                    : 'Hasaba almak'}
                </label>
                <input
                  readOnly
                  type="text"
                  id="surname"
-                  defaultValue={user ? user.surname : ""}
+                  defaultValue={user ? user.surname : ''}
                  onChange={(e) => {
-                    if (e.target.value !== "") {
+                    if (e.target.value !== '') {
                      setInputValid({ ...inputValid, surname: true });
                    } else {
                      setInputValid({ ...inputValid, surname: false });
@ -87,21 +88,21 @@ const Profile = () => {
              </div>
              <div className="input-block">
                <label htmlFor="name">
-                  {locale === "TKM"
-                    ? "Ady"
-                    : locale === "РУС"
-                    ? "Имя"
-                    : locale === "ENG"
-                    ? "First name"
-                    : "Ady"}
+                  {locale === 'TKM'
+                    ? 'Ady'
+                    : locale === 'РУС'
+                    ? 'Имя'
+                    : locale === 'ENG'
+                    ? 'First name'
+                    : 'Ady'}
                </label>
                <input
                  readOnly
                  type="text"
                  id="name"
-                  defaultValue={user ? user.name : ""}
+                  defaultValue={user ? user.name : ''}
                  onChange={(e) => {
-                    if (e.target.value !== "") {
+                    if (e.target.value !== '') {
                      setInputValid({ ...inputValid, name: true });
                    } else {
                      setInputValid({ ...inputValid, name: false });
@ -111,21 +112,21 @@ const Profile = () => {
              </div>
              <div className="input-block">
                <label htmlFor="fathers">
-                  {locale === "TKM"
-                    ? "Atasynyň ady"
-                    : locale === "РУС"
-                    ? "Отчество"
-                    : locale === "ENG"
-                    ? "Middle name"
-                    : "Atasynyň ady"}
+                  {locale === 'TKM'
+                    ? 'Atasynyň ady'
+                    : locale === 'РУС'
+                    ? 'Отчество'
+                    : locale === 'ENG'
+                    ? 'Middle name'
+                    : 'Atasynyň ady'}
                </label>
                <input
                  readOnly
                  type="text"
                  id="fathers"
-                  defaultValue={user ? user.middle_name : ""}
+                  defaultValue={user ? user.middle_name : ''}
                  onChange={(e) => {
-                    if (e.target.value !== "") {
+                    if (e.target.value !== '') {
                      setInputValid({ ...inputValid, fathers: true });
                    } else {
                      setInputValid({ ...inputValid, fathers: false });
@ -135,21 +136,21 @@ const Profile = () => {
              </div>
              <div className="input-block">
                <label htmlFor="date">
-                  {locale === "TKM"
-                    ? "Doglan senesi"
-                    : locale === "РУС"
-                    ? "Дата рождения"
-                    : locale === "ENG"
-                    ? "Date of birth"
-                    : "Doglan senesi"}
+                  {locale === 'TKM'
+                    ? 'Doglan senesi'
+                    : locale === 'РУС'
+                    ? 'Дата рождения'
+                    : locale === 'ENG'
+                    ? 'Date of birth'
+                    : 'Doglan senesi'}
                </label>
                <input
                  readOnly
                  type="date"
                  id="date"
-                  defaultValue={user ? user.date_birth : ""}
+                  defaultValue={user ? user.date_birth : ''}
                  onChange={(e) => {
-                    if (e.target.value !== "") {
+                    if (e.target.value !== '') {
                      setInputValid({ ...inputValid, date: true });
                    } else {
                      setInputValid({ ...inputValid, date: false });
@ -159,21 +160,21 @@ const Profile = () => {
              </div>
              <div className="input-block">
                <label htmlFor="passport">
-                  {locale === "TKM"
-                    ? "Pasport maglumatlary"
-                    : locale === "РУС"
-                    ? "Паспортные данные"
-                    : locale === "ENG"
-                    ? "Passport information"
-                    : "Pasport maglumatlary"}
+                  {locale === 'TKM'
+                    ? 'Pasport maglumatlary'
+                    : locale === 'РУС'
+                    ? 'Паспортные данные'
+                    : locale === 'ENG'
+                    ? 'Passport information'
+                    : 'Pasport maglumatlary'}
                </label>
                <input
                  readOnly
                  type="text"
                  id="passport"
-                  defaultValue={user ? user.passport : ""}
+                  defaultValue={user ? user.passport : ''}
                  onChange={(e) => {
-                    if (e.target.value !== "") {
+                    if (e.target.value !== '') {
                      setInputValid({ ...inputValid, passport: true });
                    } else {
                      setInputValid({ ...inputValid, passport: false });
@ -183,21 +184,21 @@ const Profile = () => {
              </div>
              <div className="input-block">
                <label htmlFor="p-address">
-                  {locale === "TKM"
-                    ? "Pasportyň berlen ýeri"
-                    : locale === "РУС"
-                    ? "Место выдачи паспорта"
-                    : locale === "ENG"
-                    ? "Place of passport issuance"
-                    : "Pasportyň berlen ýeri"}
+                  {locale === 'TKM'
+                    ? 'Pasportyň berlen ýeri'
+                    : locale === 'РУС'
+                    ? 'Место выдачи паспорта'
+                    : locale === 'ENG'
+                    ? 'Place of passport issuance'
+                    : 'Pasportyň berlen ýeri'}
                </label>
                <input
                  readOnly
                  type="text"
                  id="p-address"
-                  defaultValue={user ? user.place_passport : ""}
+                  defaultValue={user ? user.place_passport : ''}
                  onChange={(e) => {
-                    if (e.target.value !== "") {
+                    if (e.target.value !== '') {
                      setInputValid({ ...inputValid, p_address: true });
                    } else {
                      setInputValid({ ...inputValid, p_address: false });
@ -207,21 +208,21 @@ const Profile = () => {
              </div>
              <div className="input-block">
                <label htmlFor="address">
-                  {locale === "TKM"
-                    ? "Ýaşaýan salgysy"
-                    : locale === "РУС"
-                    ? "Адрес проживания"
-                    : locale === "ENG"
-                    ? "Address of residence"
-                    : "Ýaşaýan salgysy"}
+                  {locale === 'TKM'
+                    ? 'Ýaşaýan salgysy'
+                    : locale === 'РУС'
+                    ? 'Адрес проживания'
+                    : locale === 'ENG'
+                    ? 'Address of residence'
+                    : 'Ýaşaýan salgysy'}
                </label>
                <input
                  readOnly
                  type="text"
                  id="address"
-                  defaultValue={user ? user.address_residence : ""}
+                  defaultValue={user ? user.address_residence : ''}
                  onChange={(e) => {
-                    if (e.target.value !== "") {
+                    if (e.target.value !== '') {
                      setInputValid({ ...inputValid, address: true });
                    } else {
                      setInputValid({ ...inputValid, address: false });
@ -231,19 +232,19 @@ const Profile = () => {
              </div>
              <div className="input-block">
                <label htmlFor="mail">
-                  {locale === "TKM"
-                    ? "Email"
-                    : locale === "РУС"
-                    ? "Электронная почта"
-                    : locale === "ENG"
-                    ? "Email"
-                    : "Email"}
+                  {locale === 'TKM'
+                    ? 'Email'
+                    : locale === 'РУС'
+                    ? 'Электронная почта'
+                    : locale === 'ENG'
+                    ? 'Email'
+                    : 'Email'}
                </label>
                <input
                  readOnly
                  type="email"
                  id="mail"
-                  defaultValue={user ? user.email : ""}
+                  defaultValue={user ? user.email : ''}
                  onChange={(e) => {
                    if (ValidateEmail(e.target.value)) {
                      setInputValid({ ...inputValid, mail: true });
@ -255,19 +256,19 @@ const Profile = () => {
              </div>
              <div className="input-block">
                <label htmlFor="mobile">
-                  {locale === "TKM"
-                    ? "Mobil telefon"
-                    : locale === "РУС"
-                    ? "Мобильный телефон"
-                    : locale === "ENG"
-                    ? "Phone number"
-                    : "Mobil telefon"}
+                  {locale === 'TKM'
+                    ? 'Mobil telefon'
+                    : locale === 'РУС'
+                    ? 'Мобильный телефон'
+                    : locale === 'ENG'
+                    ? 'Phone number'
+                    : 'Mobil telefon'}
                </label>
                <input
                  readOnly
                  type="text"
                  id="mobile"
-                  defaultValue={user ? user.mobile_phone : ""}
+                  defaultValue={user ? user.mobile_phone : ''}
                  onChange={(e) => {
                    if (ValidatePhoneNumber(e.target.value)) {
                      setInputValid({ ...inputValid, mobile: true });
@ -279,19 +280,19 @@ const Profile = () => {
              </div>
              <div className="input-block">
                <label htmlFor="homeTel">
-                  {locale === "TKM"
-                    ? "Öý telefon"
-                    : locale === "РУС"
-                    ? "Домашний телефон"
-                    : locale === "ENG"
-                    ? "Home phone number"
-                    : "Öý telefon"}
+                  {locale === 'TKM'
+                    ? 'Öý telefon'
+                    : locale === 'РУС'
+                    ? 'Домашний телефон'
+                    : locale === 'ENG'
+                    ? 'Home phone number'
+                    : 'Öý telefon'}
                </label>
                <input
                  readOnly
                  type="text"
                  id="homeTel"
-                  defaultValue={user ? user.home_phone : ""}
+                  defaultValue={user ? user.home_phone : ''}
                  onChange={(e) => {
                    if (ValidatePhoneNumber(e.target.value)) {
                      setInputValid({ ...inputValid, home: true });
--- a/src/pages/Topup.js
+++ b/src/pages/Topup.js
@ -125,6 +125,7 @@ const Topup = () => {
              type="button"
              className="card-btn sign-btn"
              onClick={() => {
+                window.scrollTo(0, 0);
                setStage(1);
                setModalOpen(true);
              }}
@ -200,15 +201,17 @@ const Topup = () => {
                          </td>
                          <td
                            className={
-                              el.status === "kart_chykarylmady"
+                              el.status === "hasap_chykarylmady"
                                ? "red"
-                                : el.status === "kart_chykaryldy" ||
+                                : el.status === "hasap_chykaryldy" ||
                                  el.status === "kabul_edildi"
                                ? "green"
                                : ""
                            }
                          >
-                            {el.status === "ugradyldy"
+                            {el.status === "ugradyldy" ||
+                            el.status === null ||
+                            el.status === "null"
                              ? locale === "TKM"
                                ? "Ugradyldy"
                                : locale === "РУС"
@ -232,7 +235,7 @@ const Topup = () => {
                                : locale === "ENG"
                                ? "Under consideration"
                                : "Görülyar"
-                              : el.status === "kart_chykaryldy"
+                              : el.status === "hasap_chykaryldy"
                              ? locale === "TKM"
                                ? "Tassyklandy"
                                : locale === "РУС"
@ -240,7 +243,7 @@ const Topup = () => {
                                : locale === "ENG"
                                ? "Approved"
                                : "Tassyklandy"
-                              : el.status === "kart_chykarylmady"
+                              : el.status === "hasap_chykarylmady"
                              ? locale === "TKM"
                                ? "Ret edildi"
                                : locale === "РУС"
--- 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 {
@ -258,6 +269,13 @@
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
+
+  h6 {
+    font-size: 1.6rem;
+    span {
+      color: red;
+    }
+  }
 }

 .cs-2-right-middle {
@ -444,8 +462,8 @@
  .input-data {
    display: grid;
    grid-template-areas:
-      "tp tp"
-      "bt1 bt2";
+      'tp tp'
+      'bt1 bt2';
    h6 {
      grid-area: tp;
      text-align: center;
--- a/src/scss/_custom-select.scss
+++ b/src/scss/_custom-select.scss
@ -1,6 +1,7 @@
 .custom-select {
  position: relative;
  display: inline-block;
+  // height: fit-content;

  input {
    &:read-only {
@ -27,11 +28,13 @@
    overflow-x: hidden;
    background: #fff;
    transition: 0.4s all ease;
+    overflow: hidden;

    &.active {
      overflow-y: auto;
      max-height: 24.8rem;
      transition: 0.4s all ease;
+      overflow: auto;

      border: 0.1rem solid rgba(229, 229, 229, 1);
    }
@ -63,6 +66,10 @@
  }
 }

+.select-block {
+  position: relative;
+}
+
 .input-img {
  position: absolute;
  top: 50%;
--- a/src/scss/_immediate-credits.scss
+++ b/src/scss/_immediate-credits.scss
@ -0,0 +1,228 @@
+.imm-cs-1 {
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+  }
+}
+
+.imm-credit-modal {
+  min-height: 90vh;
+}
+
+.imm-credit-form-wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+}
+
+.imm-credit-checkbox-group {
+  display: flex;
+  gap: 4rem;
+}
+
+.imm-credit-checkbox-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+
+  h3 {
+    font-size: 1.6rem;
+  }
+}
+
+.imm-credit-checkbox-block {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  cursor: pointer;
+
+  label {
+    font-size: 1.4rem;
+    cursor: pointer;
+  }
+
+  input {
+    cursor: pointer;
+  }
+}
+
+.input-block {
+  span {
+    font-size: 1.6rem;
+    // font-weight: 600;
+  }
+
+  label {
+    font-size: 1.4rem;
+    span {
+      color: red;
+    }
+  }
+
+  .another-option {
+    color: $dark-green;
+    cursor: pointer;
+    width: 100%;
+    padding: 1.6rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0.8rem;
+    // font-weight: 600;
+    background: rgba(1, 129, 95, 0.151);
+  }
+}
+
+.input-block-hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.phone-starter {
+  position: relative;
+  width: 100%;
+  display: flex;
+
+  span {
+    // position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    padding: 0 1.4rem;
+    background: #e6e6e6;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.8rem;
+    color: black;
+    border-top-left-radius: 0.4rem;
+    border-bottom-left-radius: 0.4rem;
+    // border-radius: 0.4rem;
+  }
+
+  input {
+    width: 100%;
+    border-top-right-radius: 0.4rem;
+    border-bottom-right-radius: 0.4rem;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.radio-button {
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 0.4rem;
+}
+
+.calculate-header {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+
+  h3 {
+    font-size: 1.8rem;
+  }
+
+  p {
+    font-size: 1.6rem;
+  }
+}
+
+.notauser-title {
+  font-size: 3rem;
+  color: red;
+}
+
+.succes-title {
+  font-size: 3rem;
+  color: $base-green;
+}
+
+.succes-sub-title {
+  font-size: 1.8rem;
+  font-weight: 500;
+}
+
+.loan-accepted-title {
+  color: $base-green;
+  font-size: 2.4rem;
+}
+
+.payment-details {
+  display: flex;
+  gap: 2.4rem;
+
+  h2 {
+    font-weight: normal;
+    font-size: 1.8rem;
+  }
+}
+
+.loans-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 4rem;
+}
+
+.loan-card-table-title {
+  font-size: 2.4rem;
+  margin-bottom: 1.6rem;
+}
+
+.loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.credit-term {
+  label {
+    font-size: 1.6rem;
+  }
+}
+
+.calculator-hader {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: white;
+}
+
+#sum::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Override default look */
+  appearance: none;
+  background-color: white;
+  border: 2px solid $base-green;
+}
+
+.modal-middle-digital-loan {
+  grid-template-columns: repeat(13, 1fr);
+}
+
+.err-section {
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+}
+
+@media (max-width: 1300px) {
+  .modal-middle-digital-loan {
+    display: none;
+  }
+
+  .imm-credit-form-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .input-block-hidden {
+    display: none;
+  }
+}
--- a/src/scss/_modal-form.scss
+++ b/src/scss/_modal-form.scss
@ -1,6 +1,9 @@
 .modal-container {
  max-width: 85%;
-  margin: auto 0;
+  // margin: auto 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }

 .alert {
@ -18,7 +21,7 @@
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: 0.4s all ease;
-  height: 100vh;
+  height: 100%;
  padding: 5rem 0;
  overflow-y: auto;
  z-index: 10000;
@ -35,8 +38,9 @@
 }

 .modal-inner {
-  display: flex;
-  align-items: center;
+  // display: flex;
+  // align-items: center;
+  height: 100%;
 }

 .modal-window {
@ -46,6 +50,7 @@
  padding: 5rem;
  padding-top: 2.8rem;
  overflow-x: hidden;
+  // min-height: 50vh;
 }

 .modal-top {
@ -86,7 +91,7 @@

  &::before {
    position: absolute;
-    content: "";
+    content: '';
    width: calc(100% + 18rem);
    top: 0;
    height: 0.1rem;
@ -97,7 +102,7 @@

  &::after {
    position: absolute;
-    content: "";
+    content: '';
    width: calc(100% + 18rem);
    height: 0.1rem;
    bottom: 0;
--- a/src/scss/_side.scss
+++ b/src/scss/_side.scss
@ -48,7 +48,7 @@
        position: absolute;
        left: 0;
        top: 0;
-        content: "";
+        content: '';
        background: rgba(255, 255, 255, 1);
        opacity: 0;
        transition: 0.4s all ease;
@ -157,6 +157,13 @@

  .side-wrapper {
    width: 100%;
+    // height: auto;
    background: rgba(0, 0, 0, 0.5);
  }
 }
+
+@media screen and (max-height: 729px) {
+  .side-wrapper {
+    height: auto;
+  }
+}
--- a/src/scss/_topup.scss
+++ b/src/scss/_topup.scss
@ -7,7 +7,7 @@
    font-size: 2.2rem;
  }
  p {
-    font-size: 1.2rem;
+    font-size: 1.4rem;
  }
 }

@ -37,3 +37,14 @@
    width: 100%;
  }
 }
+
+.topup-modal-middle {
+  grid-template-columns: 1.5fr 1fr 1.5fr 1fr 1.5fr 1fr 1.5fr 1fr 1.5fr;
+}
+
+.text-block {
+  pre {
+    font-size: 1.6rem;
+    font-family: $font-family;
+  }
+}
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@ -23,3 +23,4 @@
@import "./credit-modal";
@import "./success.scss";
@import "./topup";
+@import "./immediate-credits";
Author	SHA1	Message	Date
Kakabay	c213ce1a37	build	2024-07-08 13:22:06 +05:00
Kakabay	0d9a8fa9c3	sidebar height media query added	2024-07-08 13:18:41 +05:00
Kakabay	dd10a0438f	build styles	2024-07-08 12:19:54 +05:00
Kakabay	cd6d77f9f8	styles	2024-07-08 12:18:45 +05:00
Kakabay	fde0e726b8	build	2024-07-08 11:57:11 +05:00
Kakabay	6ce70f2d89	hidden credits	2024-07-08 11:40:41 +05:00
Kakabay	88c9412bec	builld	2024-05-01 15:07:38 +05:00
Kakabay	5282331672	build	2024-04-30 19:50:36 +05:00
Kakabay	f9f330d7ee	checking added	2024-04-30 19:50:06 +05:00
Kakabay	27938f75da	build merdan	2024-04-30 13:38:06 +05:00
Kakabay	2c573a59c3	build merdan	2024-04-30 13:35:58 +05:00
Kakabay	986dee4a99	Merge branch 'main' of http://repo.tpsadvertising.com/TPS/halkbank_shahsyotag_frontend	2024-04-30 13:33:59 +05:00
merdan	fe809f4436	loanCreate added to stage 8 on success loanchek2	2024-04-30 11:17:48 +05:00
merdan	7b33ce75f5	loanCreate added to stage 8 on success loanchek	2024-04-30 11:04:03 +05:00
Kakabay	f2337c9530	build	2024-04-29 21:49:03 +05:00
Kakabay	20ec4ed99f	build	2024-04-29 20:17:57 +05:00
Kakabay	bd06c619aa	build	2024-04-29 20:13:04 +05:00
Kakabay	a1b8e9771a	cardmusk number	2024-04-29 20:12:38 +05:00
Kakabay	5efda315c4	build	2024-04-29 19:39:20 +05:00
Kakabay	61266f040b	last name added	2024-04-29 19:38:57 +05:00
Kakabay	d6881536c6	build	2024-04-29 19:05:01 +05:00
Kakabay	a1e55503e2	mask cardNumber	2024-04-29 19:04:22 +05:00
Kakabay	78beed4254	build	2024-04-29 15:36:42 +05:00
Kakabay	67c329019f	build	2024-04-29 15:12:32 +05:00
Kakabay	282aa3479c	translations added	2024-04-29 14:51:13 +05:00
Kakabay	74a8bc57e4	cardMaskNumber.length changed validation	2024-04-29 14:43:05 +05:00
Kakabay	dfe6fc5b46	translations added	2024-04-29 14:38:01 +05:00
Kakabay	243fad035d	expDate, cardMaskNumber added to cientinfo,loancre	2024-04-27 17:23:29 +05:00
Kakabay	7c9e759657	send code removed	2024-04-26 17:55:41 +05:00
Kakabay	bb4be10cbc	build	2024-04-25 15:32:16 +05:00
Kakabay	c6af8c1db5	code resend function added to the OTP	2024-04-25 15:30:15 +05:00
Kakabay	d3c846d0b8	build	2024-04-17 14:34:06 +05:00
Kakabay	ec27ca32ef	Merge branch 'main' of https://github.com/VividTruthKeeper/react-halkbank	2024-04-15 14:44:19 +05:00
Kakabay	4b7b0414fd	commit	2024-04-15 14:40:12 +05:00
Kakabay	54a1bdb6ec	translations fix	2024-04-14 21:27:59 +05:00
Kakabay	fd9444be71	build	2024-04-10 22:17:00 +05:00
Kakabay	badfe6d5fa	built	2024-04-10 21:24:38 +05:00
Kakabay	1a102e317e	build	2024-04-10 21:20:01 +05:00
Kakabay	18a4a6a520	err handling	2024-04-10 21:18:48 +05:00
Kakabay	60741c793a	build	2024-04-10 19:27:30 +05:00
Kakabay	f276d5ae41	build	2024-04-10 19:27:09 +05:00
Kakabay	b6d77d49e1	translations	2024-04-10 19:06:49 +05:00
Kakabay	11cea812c9	build	2024-04-10 19:00:42 +05:00
Kakabay	82615986ca	translations	2024-04-10 18:59:42 +05:00
Kakabay	dfa03b2cc2	build	2024-04-10 18:46:14 +05:00
Kakabay	f664bacafd	build	2024-04-10 18:31:55 +05:00
Kakabay	bc5a899b01	build	2024-04-10 18:25:49 +05:00
Kakabay	e8be59628d	translation fix	2024-04-10 18:13:08 +05:00
Kakabay	189d1b766d	build	2024-04-10 16:38:02 +05:00
Kakabay	d523cd28bf	translation fix	2024-04-10 16:34:41 +05:00
Kakabay	c1a59007c0	build	2024-04-10 13:30:28 +05:00
Kakabay	b5b4e5a312	translation fix	2024-04-10 13:30:00 +05:00
Kakabay	b18157b68d	build	2024-04-10 13:21:13 +05:00
Kakabay	8e313af090	translation fix	2024-04-10 13:18:59 +05:00
Kakabay	b9ce2987ee	build	2024-04-10 12:30:52 +05:00
Kakabay	97dd608f07	translations fixed	2024-04-10 12:29:49 +05:00
Kakabay	9705f996a8	build	2024-04-09 18:30:42 +05:00
Kakabay	21535f38d6	translation and resp[onsive done	2024-04-09 18:29:22 +05:00
Kakabay	65ab2ab86b	responsive made	2024-04-09 18:28:56 +05:00
Kakabay	1a4f5a54ca	build	2024-04-08 19:07:48 +05:00
Kakabay	0073346011	translation	2024-04-08 19:02:17 +05:00
Kakabay	874e93518a	build	2024-04-08 17:54:04 +05:00
Kakabay	2c159c202c	fix	2024-04-08 17:53:36 +05:00
Kakabay	9c69c87d88	build	2024-04-08 17:33:04 +05:00
Kakabay	097c6b5efa	news api integrated	2024-04-08 17:31:53 +05:00
Kakabay	4d0cf293b6	loancre_check api added before sendOTP api	2024-04-08 17:22:00 +05:00
Kakabay	569672ff03	build	2024-04-06 20:05:53 +05:00
Kakabay	0a047d2eeb	loan accepted translated	2024-04-06 20:03:07 +05:00
Kakabay	f531a9b523	borower stage translated	2024-04-06 17:37:31 +05:00
Kakabay	48e9d6fc20	guaranter by defaul is unselected	2024-04-06 17:11:24 +05:00
Kakabay	3defdd01f1	modal height increased	2024-04-06 17:11:05 +05:00
Kakabay	f23efc4a98	build	2024-04-05 13:48:08 +05:00
Kakabay	dbab970806	added new fields to quick_loans	2024-04-05 13:46:03 +05:00
Kakabay	f27f9bb42c	build	2024-04-05 10:21:27 +05:00
Kakabay	af5a1ef35a	phone changed	2024-04-05 10:19:00 +05:00
Kakabay	87d3b2c192	build	2024-04-03 18:12:05 +05:00
Kakabay	d81f004296	done	2024-04-03 18:08:52 +05:00
Kakabay	74d4075f8f	otp validation before loan create added	2024-04-03 17:15:14 +05:00
Kakabay	155a168b5d	build	2024-04-03 15:11:05 +05:00
Kakabay	1c1c6e348b	same	2024-04-03 15:09:05 +05:00
Kakabay	bd620c9045	added new pasport serials	2024-04-03 15:08:58 +05:00
Kakabay	5fe71aa130	build	2024-04-02 20:20:19 +05:00
Kakabay	2e97b6d485	modal fixed	2024-04-02 20:19:49 +05:00
Kakabay	ca72ee5091	build	2024-04-02 19:12:51 +05:00
Kakabay	8a006aaaff	commit	2024-04-02 19:11:11 +05:00
Kakabay	07bb756e45	build	2024-04-01 20:26:54 +05:00
Kakabay	88db2611ca	build	2024-04-01 20:26:25 +05:00
Kakabay	1386273490	build	2024-04-01 19:28:43 +05:00
Kakabay	7e20a57ae0	removed fields in card registration	2024-04-01 19:24:21 +05:00
Kakabay	ebb3e41a6c	build	2024-04-01 19:18:21 +05:00
Kakabay	2924eb5208	build	2024-04-01 19:13:48 +05:00
Kakabay	e1d9a56f1f	build	2024-04-01 18:57:50 +05:00
Kakabay	28b110f632	Merge branch 'main' of https://github.com/VividTruthKeeper/react-halkbank	2024-04-01 14:43:34 +05:00
Kakabay	4d74d06e90	commit	2024-04-01 14:40:11 +05:00
Kakabay	80759120ca	build	2024-04-01 00:21:42 +05:00
Kakabay	b2f3080e0e	fix	2024-04-01 00:20:14 +05:00
Kakabay	e1a88056da	fix	2024-04-01 00:19:52 +05:00
Kakabay	83f1f3fdfe	Merge branch 'main'	2024-03-31 23:41:42 +05:00
Kakabay	6b6e126bfb	commit	2024-03-31 23:40:38 +05:00
Kakabay	08b7c2e83f	build	2024-03-31 20:47:26 +05:00
Kakabay	bfd0a7eaf7	otp finished	2024-03-31 20:46:48 +05:00
Kakabay	685987a020	build	2024-03-31 18:02:32 +05:00
Kakabay	0e257315d8	build	2024-03-31 18:01:44 +05:00
Kakabay	e27d5de5a5	cardDetails stage done	2024-03-31 18:01:00 +05:00
Kakabay	60afb4f049	build	2024-03-30 21:01:18 +05:00
Kakabay	86ad94956e	payment details fetched	2024-03-30 21:00:42 +05:00
Kakabay	39c059d991	build	2024-03-30 20:57:35 +05:00
Kakabay	550028291c	build	2024-03-30 20:45:16 +05:00
Kakabay	185eb57620	commit	2024-03-30 20:44:56 +05:00
Kakabay	89dee7759c	build	2024-03-30 20:43:28 +05:00
Kakabay	44ecf16148	payment started	2024-03-30 20:41:45 +05:00
Kakabay	1794f7269c	fixes	2024-03-30 19:14:17 +05:00
Kakabay	cdbbd1464f	build	2024-03-29 23:21:30 +05:00
Kakabay	74faa75131	fetched loans for table	2024-03-29 23:21:06 +05:00
Kakabay	8e6df81d11	build	2024-03-29 22:55:26 +05:00
Kakabay	c233fdc10f	build	2024-03-29 22:13:39 +05:00
Kakabay	064baa1f3b	build	2024-03-29 22:00:04 +05:00
Kakabay	41e43685c8	sending all data	2024-03-29 21:59:43 +05:00
Kakabay	a1ff80cbc3	build	2024-03-29 21:47:21 +05:00
Kakabay	9151622ac4	Patronimic added	2024-03-29 21:44:31 +05:00
Kakabay	1d4896e7ec	build	2024-03-29 21:33:57 +05:00
Kakabay	40da5e944e	build	2024-03-29 21:19:30 +05:00
Kakabay	a6f162bae3	build	2024-03-29 20:39:47 +05:00
Kakabay	eb1556d779	validation	2024-03-29 20:38:48 +05:00
Kakabay	260dc43d4f	build	2024-03-29 20:37:51 +05:00
Kakabay	2d8b3f690e	validation	2024-03-29 20:37:27 +05:00
Kakabay	82eff27ae0	build	2024-03-29 20:36:33 +05:00
Kakabay	77bacf63ec	validation	2024-03-29 20:36:09 +05:00
Kakabay	d74a090402	build	2024-03-29 20:34:39 +05:00
Kakabay	0eb24deba4	build	2024-03-29 20:27:14 +05:00
Kakabay	b7ffc29252	build	2024-03-29 20:19:52 +05:00
Kakabay	b0e8907e3c	build	2024-03-29 20:16:44 +05:00
Kakabay	c278fae339	created new form for card registration	2024-03-29 20:14:28 +05:00
Kakabay	1fb6141569	build	2024-03-29 19:45:05 +05:00
Kakabay	2d9031b970	accept stage changed guaranter data	2024-03-29 19:44:44 +05:00
Kakabay	baf552aeb0	build	2024-03-29 19:43:09 +05:00
Kakabay	668d471fb2	api changed	2024-03-29 19:42:23 +05:00
Kakabay	6cb293ae81	build	2024-03-29 19:15:05 +05:00
Kakabay	200262e749	Accepted data send to server	2024-03-29 19:03:08 +05:00
Kakabay	058204685b	build	2024-03-29 18:04:08 +05:00
Kakabay	6c661edb84	error showing	2024-03-29 18:01:44 +05:00
Kakabay	bcfb7c803a	build	2024-03-29 17:51:38 +05:00
Kakabay	773651fdc2	acept stage refactoryng	2024-03-29 17:50:42 +05:00
Kakabay	42f2ee09b1	build	2024-03-29 17:44:21 +05:00
Kakabay	d6ffb16c44	build	2024-03-29 17:34:48 +05:00
Kakabay	69d87b5daf	build	2024-03-29 17:28:27 +05:00
Kakabay	05ab21cc1e	build	2024-03-29 17:16:20 +05:00
Kakabay	e073ae404f	build	2024-03-29 17:14:11 +05:00
Kakabay	65035e338b	meta content policy changed	2024-03-29 17:12:55 +05:00
Kakabay	f584e75432	build	2024-03-29 17:11:57 +05:00
Kakabay	48d53e8133	meta chnaged	2024-03-29 17:11:35 +05:00
Kakabay	b71b6eee8e	build	2024-03-29 17:01:41 +05:00
Kakabay	966c5aad2a	build	2024-03-29 16:56:16 +05:00
Kakabay	b68ad1e754	build	2024-03-29 16:55:23 +05:00
Kakabay	06effe6d24	meta chnged	2024-03-29 16:54:32 +05:00
Kakabay	73df0f4768	build	2024-03-29 15:47:46 +05:00
Kakabay	0c91446c41	meta changed	2024-03-29 15:46:01 +05:00
Kakabay	3f8182ae36	build	2024-03-29 15:07:20 +05:00
Kakabay	79a63f94c2	meta changed	2024-03-29 15:06:49 +05:00
Kakabay	fa44b796cf	build	2024-03-29 15:01:46 +05:00
Kakabay	d110c6f8d2	meta chnged	2024-03-29 15:00:13 +05:00
Kakabay	2be29800e6	build	2024-03-29 14:51:09 +05:00
Kakabay	4e2c386efd	fix	2024-03-29 14:50:52 +05:00
Kakabay	cf8baf09c5	build	2024-03-29 14:49:03 +05:00
Kakabay	a87181c13d	added api to the last stage	2024-03-29 14:48:14 +05:00
Kakabay	57a85471c0	build	2024-03-28 18:26:49 +05:00
Kakabay	616fdb04ea	fetch post request in AcceptStage prepared	2024-03-28 18:25:10 +05:00
Kakabay	6a08746e6f	build	2024-03-27 15:51:54 +05:00
Kakabay	9772c262d6	build	2024-03-27 15:51:24 +05:00
Kakabay	3ded1b1110	all state lifted to a higher component	2024-03-27 15:49:13 +05:00
Kakabay	0d1dcbaee4	validation done	2024-03-27 14:40:44 +05:00
Kakabay	a52364aee1	build	2024-03-25 18:57:02 +05:00
Kakabay	8325ddad28	build	2024-03-25 18:38:37 +05:00
Kakabay	6f781ec361	layout done	2024-03-25 18:37:18 +05:00
Kakabay	8e87b02727	build	2024-03-25 17:48:56 +05:00
Kakabay	307e829c40	calculator done	2024-03-25 17:47:39 +05:00
Kakabay	9ecd0d0f16	pulled	2024-03-25 15:29:01 +05:00
Kakabay	d4ed2ec8d3	Merge branch 'main' of https://github.com/VividTruthKeeper/react-halkbank	2024-03-25 15:11:40 +05:00
Kakabay	558fe5094e	commit	2024-03-25 15:09:32 +05:00
Kakabay	cc56e1161f	build	2024-03-24 19:36:50 +05:00
Kakabay	647c028553	finished	2024-03-24 19:33:24 +05:00
Kakabay	bd816f2529	build	2024-03-24 17:19:41 +05:00
Kakabay	fb0d9ae5ab	validation fixed	2024-03-24 17:18:23 +05:00
Kakabay	20c671df1a	build	2024-03-24 12:11:24 +05:00
Kakabay	89957687ee	validation changed to 23 digits at bankAcc	2024-03-24 12:10:10 +05:00
Kakabay	c1ab60c818	build	2024-03-24 00:07:26 +05:00
Kakabay	73e3f0d6f8	finished	2024-03-24 00:05:14 +05:00
Kakabay	32f9e0ac6d	build	2024-03-23 22:09:08 +05:00
Kakabay	30fc27679b	build	2024-03-23 20:54:46 +05:00
Kakabay	82870804ff	trying to add api	2024-03-23 20:50:22 +05:00
Kakabay	a3e1ee4d58	build	2024-03-23 18:03:09 +05:00
Kakabay	034448769d	build	2024-03-23 18:02:50 +05:00
Kakabay	0141fab4f4	build	2024-03-23 18:00:57 +05:00
Kakabay	81f2d7304a	build	2024-03-23 17:49:00 +05:00
Kakabay	84858d0691	cahnged url for request. testing	2024-03-23 17:48:33 +05:00
Kakabay	79147cfb84	build	2024-03-23 17:29:16 +05:00
Kakabay	c8a1eaa47c	build ImmediateCredits	2024-03-23 17:28:22 +05:00
Kakabay	8e80ff4c09	zod and react hook form installed	2024-03-22 20:36:29 +05:00
Kakabay	b1682ee4c5	ImmediateCredit	2024-03-22 20:36:20 +05:00
Kakabay	1473bfdd8b	ImmediateCreditStage3	2024-03-22 20:36:07 +05:00
Kakabay	9ee701b22a	ImmediateCreditStage2	2024-03-22 20:36:02 +05:00
Kakabay	d92c8bbe39	ImmediateCreditStage1	2024-03-22 20:35:53 +05:00
Kakabay	6efcb64953	immediateCreditModal component	2024-03-22 20:35:26 +05:00
Kakabay	2ab672afae	added instant credits to side	2024-03-20 17:00:22 +05:00
Kakabay	262e3f7ba7	build	2024-03-04 15:01:29 +05:00
Kakabay	fc4fdb42d9	minor change	2024-03-04 15:00:43 +05:00
Kakabay	1aaa2e1a8b	build	2024-03-04 14:55:49 +05:00
Kakabay	3a5843e751	card cost tetx changed	2024-03-04 14:54:58 +05:00
Kakabay	657b0e4510	build	2023-11-06 17:32:52 +05:00
Kakabay	12f23c9de2	build	2023-11-06 17:32:04 +05:00
Kakabay	06a43d2d1b	input file accept changed	2023-11-06 17:30:48 +05:00
Kakabay	71e032d181	branch data changed on Arkadag	2023-11-06 17:30:26 +05:00
Kakabay	64c76d6530	build	2023-10-30 19:41:22 +05:00
VividTruthKeeper	0508f3d3fd	FIX: Card- & Credit- stages	2023-10-30 23:36:06 +09:00
Kakabay	fac7fee3d5	tied to add new branch to Arkadag city region	2023-10-30 18:54:04 +05:00
Kakabay	86f48154f8	build	2023-10-30 17:21:02 +05:00
Kakabay	4f540b740b	changed branch value in states to "" if empty	2023-10-30 17:20:44 +05:00
Kakabay	2581672120	build	2023-10-30 17:18:32 +05:00
Kakabay	f4091b6a79	branch input removed when selected Arkadag region	2023-10-30 17:18:07 +05:00
Kakabay	97be75fd1e	build	2023-10-30 16:56:35 +05:00
Kakabay	384476ca0a	birth date start point changed to 1960	2023-10-30 16:55:43 +05:00
Kakabay	c496d606f0	build	2023-09-15 13:50:40 +05:00
Kakabay	e9911397a8	build	2023-09-15 13:49:30 +05:00
Kakabay	ec5609c0c9	build	2023-09-15 13:49:23 +05:00
Kakabay	cd91a35eab	build	2023-09-13 15:21:33 +05:00
Kakabay	d2b83013ff	added branch Ashgabat to the card and kredit third stages	2023-09-13 15:20:03 +05:00
VividTruthKeeper	ed09fecc78	build	2023-09-09 01:26:20 +05:00
VividTruthKeeper	8221884c79	new region	2023-09-09 01:25:30 +05:00
VividTruthKeeper	2a2bbb5049	build	2023-06-08 18:15:46 +05:00
VividTruthKeeper	cfb2dea1a6	reg form validations	2023-06-08 18:14:26 +05:00
VividTruthKeeper	40bab79118	build	2023-04-18 18:42:34 +05:00
VividTruthKeeper	3af266e280	3 form status & build	2022-12-22 16:37:07 +05:00
VividTruthKeeper	8b651f4ba8	build	2022-12-05 19:59:52 +05:00
VividTruthKeeper	c86836ad6e	model height vh -> %	2022-12-05 19:54:40 +05:00
VividTruthKeeper	a25187cf0c	on modal open scroll to top	2022-12-05 19:54:19 +05:00
VividTruthKeeper	b97841fe50	id bug fixed	2022-12-05 19:42:32 +05:00
VividTruthKeeper	2f806e877b	source code hid & build	2022-11-30 15:42:56 +05:00
VividTruthKeeper	9d8ace0732	build	2022-11-29 21:45:19 +05:00
VividTruthKeeper	3986f2e598	info fz	2022-11-29 21:44:44 +05:00
VividTruthKeeper	94ae5fea41	dynamic data	2022-11-29 21:44:31 +05:00
VividTruthKeeper	f765d10960	build	2022-11-29 21:29:39 +05:00
VividTruthKeeper	6babd5af5d	build	2022-11-29 21:29:27 +05:00
VividTruthKeeper	cd38ed4ba7	locale fixed	2022-11-29 21:29:07 +05:00
VividTruthKeeper	3987a603a2	build	2022-11-27 01:37:52 +05:00
VividTruthKeeper	881248ffe9	locale fixed	2022-11-27 01:37:24 +05:00
VividTruthKeeper	7a5537cae7	build	2022-11-25 23:07:49 +05:00
VividTruthKeeper	15328e4ea5	style corrections for temporary data	2022-11-25 23:06:02 +05:00
VividTruthKeeper	9378964750	temporary data added	2022-11-25 23:05:46 +05:00
VividTruthKeeper	07ebb356f6	stage names changed	2022-11-25 23:05:38 +05:00
VividTruthKeeper	b9ee507787	build	2022-11-22 22:33:22 +05:00
VividTruthKeeper	9980b8cc64	locale fixed	2022-11-22 22:31:38 +05:00
VividTruthKeeper	1628bfc740	locales fixed	2022-11-22 22:29:56 +05:00
VividTruthKeeper	62ab5053fb	build	2022-11-22 17:12:37 +05:00
VividTruthKeeper	5f09378532	build	2022-11-22 17:12:25 +05:00
VividTruthKeeper	272bb4079c	locale region fixed	2022-11-22 17:11:36 +05:00
VividTruthKeeper	2cd8b33958	wrong object key fixed	2022-11-22 15:42:49 +05:00