From 243fad035dfff959624aea9bfb071ac4e875bc03 Mon Sep 17 00:00:00 2001
From: Kakabay <2kakabayashyrberdyew@gmail.com>
Date: Sat, 27 Apr 2024 17:23:29 +0500
Subject: [PATCH] expDate, cardMaskNumber added to cientinfo,loancre

---
 .../ImmediateCreditsStages/AcceptStage.js     |   6 +-
 .../ImmediateCreditsStages/BorrowerStage.js   | 295 ++++++++++--------
 .../ImmediateCreditsStages/GuaranterStage.js  | 240 ++++++++------
 .../ImmediateCreditsStages/PaymentSuccess.js  | 153 +++++----
 .../ImmediateCreditsStages/PhoneAccept.js     |  12 +-
 5 files changed, 390 insertions(+), 316 deletions(-)

diff --git a/src/components/ImmediateCreditsStages/AcceptStage.js b/src/components/ImmediateCreditsStages/AcceptStage.js
index 21bfd65..4204544 100644
--- a/src/components/ImmediateCreditsStages/AcceptStage.js
+++ b/src/components/ImmediateCreditsStages/AcceptStage.js
@@ -69,23 +69,25 @@ const AcceptStage = ({
             clientRecipient: {
               idSeria: borrowerData.idSeria,
               idNo: borrowerData.idNo,
-              accountNo: borrowerData.accountNo,
+              cardMaskNumber: borrowerData.cardMaskNumber,
               name: borrowerData.name,
               surname: borrowerData.surname,
               availableAmount: borrowerData.availableAmount,
               clientType: 'recipient',
               signRecipient: borrowerData.signRecipient,
+              expDate: borrowerData.expDate,
             },
             clientGuarantor: isGuranter
               ? {
                   idSeria: guaranterData.idSeria,
                   idNo: guaranterData.idNo,
-                  accountNo: guaranterData.accountNo,
+                  cardMaskNumber: guaranterData.cardMaskNumber,
                   name: guaranterData.name,
                   surname: guaranterData.surname,
                   availableAmount: guaranterData.availableAmount,
                   clientType: 'guarantor',
                   signGuarantor: guaranterData.signGuarantor,
+                  expDate: guaranterData.expDate,
                 }
               : null,
             availableAmount: recepientAmount,
diff --git a/src/components/ImmediateCreditsStages/BorrowerStage.js b/src/components/ImmediateCreditsStages/BorrowerStage.js
index 01f8c9d..ed26fec 100644
--- a/src/components/ImmediateCreditsStages/BorrowerStage.js
+++ b/src/components/ImmediateCreditsStages/BorrowerStage.js
@@ -1,38 +1,29 @@
 // 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 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 next from '../../icons/next.svg';
+import next_reverse from '../../icons/next-reverse.svg';
 
-import Select from "../global/Select";
+import Select from '../global/Select';
 // import arrow from "../../icons/arrow.svg";
 
-// const schema = z.object({
-//   passportNumber: z.string().refine((value) => value.length === 6, {
-//     message: "Passport number must be a 6-digit value",
-//   }),
-//   bankAccount: z.string().refine((value) => /^\d{9,18}$/.test(value), {
-//     message: "Invalid bank account number",
-//   }),
-// });
-
 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",
+  '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
@@ -57,15 +48,25 @@ const BorrowerStage = ({
   const [errCode, setErrCode] = useState();
   const [isGuranterSelected, setIsGuranterSelected] = useState(false);
 
-  const [idSerial, setIdSerial] = useState("I-AS");
-  const [passportNumber, setPassportNumber] = useState("");
-  const [accNumber, setAccNumber] = useState("");
+  const [idSerial, setIdSerial] = useState('I-AS');
+  const [passportNumber, setPassportNumber] = useState('');
+  const [cardMaskNumber, setCardMaskNumber] = useState('');
+
+  const [paymentCardDurationYear, setPaymentCardDurationYear] = useState('');
+  const [paymentCardDurationMonth, setPaymentCardDurationMonth] = useState('');
 
   const handlePassportNumber = (e) => {
     setPassportNumber(e.target.value);
   };
-  const handleAcctNumber = (e) => {
-    setAccNumber(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) => {
@@ -74,7 +75,7 @@ const BorrowerStage = ({
   };
 
   const checkboxHandleChange = (e) => {
-    e.target.value === "guaranter" ? setIsGuranter(true) : setIsGuranter(false);
+    e.target.value === 'guaranter' ? setIsGuranter(true) : setIsGuranter(false);
   };
 
   const {
@@ -85,23 +86,24 @@ const BorrowerStage = ({
     // resolver: zodResolver(schema),
   });
 
-  const fetchData = async (idSeria, idNo, accountNo, clientType, stage) => {
+  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",
+          method: 'POST',
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
           body: JSON.stringify({
             idSeria: idSeria,
             idNo: idNo,
-            accountNo: accountNo,
-            clientType: "recipient",
+            cardMaskNumber: cardMaskNumber,
+            clientType: 'recipient',
+            expDate: `${paymentCardDurationMonth}/${paymentCardDurationYear}`,
           }),
-        }
+        },
       );
 
       if (!response.ok) {
@@ -137,7 +139,7 @@ const BorrowerStage = ({
   };
 
   const onSubmit = (data) => {
-    fetchData(idSerial, passportNumber, accNumber, isGuranter);
+    clientInfoRequest(idSerial, passportNumber, cardMaskNumber, isGuranter);
   };
 
   useEffect(() => {
@@ -148,14 +150,14 @@ const BorrowerStage = ({
     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 ..."}
+          {' '}
+          {locale === 'TKM'
+            ? 'Garaşmagyňyzy haýyş edýäris ...'
+            : locale === 'РУС'
+            ? 'Пожалуйста, подождите...'
+            : locale === 'ENG'
+            ? 'Please wait...'
+            : 'Garaşmagyňyzy haýyş edýäris ...'}
         </h1>
       </section>
     );
@@ -191,44 +193,44 @@ const BorrowerStage = ({
     <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ň"}
+          {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"}
+            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"
+              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"}
+              {locale === 'TKM'
+                ? 'Pasportyň belgisi'
+                : locale === 'РУС'
+                ? 'Номер паспорта'
+                : locale === 'ENG'
+                ? 'Passport number'
+                : 'Pasportyň belgisi'}
             </label>
             <input
               // {...register("passportNumber", { valueAsNumber: true })}
@@ -242,18 +244,18 @@ const BorrowerStage = ({
           </div>
           <div className="input-block">
             <label htmlFor="bank-acc">
-              {locale === "TKM"
-                ? "Aýlyk kartyň hasaby"
-                : locale === "РУС"
-                ? "Счет зарплатной карты"
-                : locale === "ENG"
-                ? "Salary card account"
-                : "Aýlyk kartyň hasaby"}
+              {locale === 'TKM'
+                ? 'Aýlyk kartyň hasaby'
+                : locale === 'РУС'
+                ? 'Счет зарплатной карты'
+                : locale === 'ENG'
+                ? 'Salary card account'
+                : 'Aýlyk kartyň hasaby'}
             </label>
             <input
               // {...register("bankAccount", { valueAsNumber: true })}
-              value={accNumber}
-              onChange={handleAcctNumber}
+              value={cardMaskNumber}
+              onChange={handleAccMaskNumber}
               type="number"
               id="bank-acc"
               required
@@ -262,70 +264,98 @@ const BorrowerStage = ({
 
             {/* {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"}
+            {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)}
-            >
+            <div className="imm-credit-checkbox-block" onClick={() => isGuranterHandler(false)}>
               <input
                 type="radio"
                 id="borrower"
-                value={"recepient"}
+                value={'recepient'}
                 name="client-type"
-                checked={
-                  isGuranterSelected ? (isGuranter ? false : true) : false
-                }
+                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"}
+                {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)}
-            >
+            <div className="imm-credit-checkbox-block" onClick={() => isGuranterHandler(true)}>
               <input
                 type="radio"
                 id="isGuranter"
-                value={"guaranter"}
+                value={'guaranter'}
                 name="client-type"
-                checked={
-                  isGuranterSelected ? (isGuranter ? true : false) : false
-                }
+                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"}
+                {locale === 'TKM'
+                  ? 'Zamunçy'
+                  : locale === 'РУС'
+                  ? 'Поручитель'
+                  : locale === 'ENG'
+                  ? 'The guarantor'
+                  : 'Zamunçy'}
               </label>
             </div>
           </div>
@@ -335,8 +365,10 @@ const BorrowerStage = ({
           <button
             disabled={
               passportNumber.length === 6 &&
-              accNumber.length === 23 &&
-              isGuranterSelected
+              cardMaskNumber.length === 23 &&
+              isGuranterSelected &&
+              paymentCardDurationMonth.length === 2 &&
+              paymentCardDurationYear.length === 2
                 ? false
                 : true
             }
@@ -344,17 +376,16 @@ const BorrowerStage = ({
             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"}
+                {locale === 'TKM'
+                  ? 'Dowam et'
+                  : locale === 'РУС'
+                  ? 'Продолжить'
+                  : locale === 'ENG'
+                  ? 'Proceed'
+                  : 'Dowam et'}
               </h3>
               <div className="btn-img">
                 <img src={next} alt="logout" />
diff --git a/src/components/ImmediateCreditsStages/GuaranterStage.js b/src/components/ImmediateCreditsStages/GuaranterStage.js
index 1ff2788..c0a629e 100644
--- a/src/components/ImmediateCreditsStages/GuaranterStage.js
+++ b/src/components/ImmediateCreditsStages/GuaranterStage.js
@@ -1,13 +1,13 @@
 // IMPORT MODULES
-import React, { useState, useContext } from "react";
-import { LanguageContext } from "../../backend/LanguageContext";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useState, useContext } from 'react';
+import { LanguageContext } from '../../backend/LanguageContext';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
 // IMPORT IMAGES
-import next from "../../icons/next.svg";
-import next_reverse from "../../icons/next-reverse.svg";
-import Select from "../global/Select";
+import next from '../../icons/next.svg';
+import next_reverse from '../../icons/next-reverse.svg';
+import Select from '../global/Select';
 
 // const schema = z.object({
 //   passportNumber: z
@@ -24,18 +24,18 @@ import Select from "../global/Select";
 // });
 
 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",
+  '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 = ({
@@ -54,15 +54,18 @@ const GuaranterStage = ({
   const [err, setErr] = useState(false);
   const [errCode, setErrCode] = useState();
 
-  const [idSerial, setIdSerial] = useState("I-AS");
-  const [passportNumber, setPassportNumber] = useState("");
-  const [accNumber, setAccNumber] = useState("");
+  const [idSerial, setIdSerial] = useState('I-AS');
+  const [passportNumber, setPassportNumber] = useState('');
+  const [cardMaskNumber, setCardMaskNumber] = useState('');
+
+  const [paymentCardDurationYear, setPaymentCardDurationYear] = useState('');
+  const [paymentCardDurationMonth, setPaymentCardDurationMonth] = useState('');
 
   const handlePassportNumber = (e) => {
     setPassportNumber(e.target.value);
   };
-  const handleAcctNumber = (e) => {
-    setAccNumber(e.target.value);
+  const handleAccMaskNumber = (e) => {
+    setCardMaskNumber(e.target.value);
   };
 
   const {
@@ -73,25 +76,26 @@ const GuaranterStage = ({
     // resolver: zodResolver(schema),
   });
 
-  const fetchData = async (idSeria, idNo, accountNo, setErrMessage) => {
+  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",
+          method: 'POST',
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
           body: JSON.stringify({
             idSeria: idSeria,
             idNo: idNo,
-            accountNo: accountNo,
-            clientType: "guarantor",
+            cardMaskNumber: cardMaskNumber,
+            clientType: 'guarantor',
             signRecipient: signRecipient,
             availableAmount: borrowerData.availableAmount,
+            expDate: `${paymentCardDurationMonth}/${paymentCardDurationYear}`,
           }),
-        }
+        },
       );
 
       if (!response.ok) {
@@ -127,22 +131,29 @@ const GuaranterStage = ({
     }
   };
 
+  const handlePaymentCardDurationYear = (e) => {
+    setPaymentCardDurationYear(e.target.value);
+  };
+  const handlePaymentCardDurationMonth = (e) => {
+    setPaymentCardDurationMonth(e.target.value);
+  };
+
   const onSubmit = (data) => {
-    fetchData(idSerial, passportNumber, accNumber, setErrMessage);
+    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 ..."}
+          {' '}
+          {locale === 'TKM'
+            ? 'Garaşmagyňyzy haýyş edýäris ...'
+            : locale === 'РУС'
+            ? 'Пожалуйста, подождите...'
+            : locale === 'ENG'
+            ? 'Please wait...'
+            : 'Garaşmagyňyzy haýyş edýäris ...'}
         </h1>
       </section>
     );
@@ -152,44 +163,44 @@ const GuaranterStage = ({
     <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ň"}
+          {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"}
+            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"
+              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"}
+              {locale === 'TKM'
+                ? 'Pasportyň belgisi'
+                : locale === 'РУС'
+                ? 'Номер паспорта'
+                : locale === 'ENG'
+                ? 'Passport number'
+                : 'Pasportyň belgisi'}
             </label>
             <input
               // {...register("passportNumber", { valueAsNumber: true })}
@@ -204,64 +215,101 @@ const GuaranterStage = ({
           </div>
           <div className="input-block">
             <label htmlFor="bank-acc">
-              {locale === "TKM"
-                ? "Aýlyk kartyň hasaby"
-                : locale === "РУС"
-                ? "Счет зарплатной карты"
-                : locale === "ENG"
-                ? "Salary card account"
-                : "Aýlyk kartyň hasaby"}
+              {locale === 'TKM'
+                ? 'Aýlyk kartyň hasaby'
+                : locale === 'РУС'
+                ? 'Счет зарплатной карты'
+                : locale === 'ENG'
+                ? 'Salary card account'
+                : 'Aýlyk kartyň hasaby'}
             </label>
             <input
               // {...register("bankAccount", { valueAsNumber: true })}
-              value={accNumber}
-              onChange={handleAcctNumber}
+              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)}
-          >
+          <button type="button" className="sign-btn reg-btn" onClick={() => setStage(2)}>
             <div>
               <div className="btn-img">
                 <img src={next_reverse} alt="logout" />
               </div>
               <h3>
-                {locale === "TKM"
-                  ? "Yza"
-                  : locale === "РУС"
-                  ? "Назад"
-                  : locale === "ENG"
-                  ? "Back"
-                  : "Yza"}
+                {locale === 'TKM'
+                  ? 'Yza'
+                  : locale === 'РУС'
+                  ? 'Назад'
+                  : locale === 'ENG'
+                  ? 'Back'
+                  : 'Yza'}
               </h3>
             </div>
           </button>
           <button
             type="submit"
             disabled={
-              passportNumber.length === 6 && accNumber.length === 23
+              passportNumber.length === 6 &&
+              cardMaskNumber.length === 23 &&
+              paymentCardDurationMonth.length === 2 &&
+              paymentCardDurationYear.length === 2
                 ? false
                 : true
             }
-            className="sign-btn cu-btn"
-          >
+            className="sign-btn cu-btn">
             <div>
               <h3>
-                {locale === "TKM"
-                  ? "Dowam et"
-                  : locale === "РУС"
-                  ? "Подтвердить  "
-                  : locale === "ENG"
-                  ? "Proceed"
-                  : "Dowam et"}
+                {locale === 'TKM'
+                  ? 'Dowam et'
+                  : locale === 'РУС'
+                  ? 'Подтвердить  '
+                  : locale === 'ENG'
+                  ? 'Proceed'
+                  : 'Dowam et'}
               </h3>
               <div className="btn-img">
                 <img src={next} alt="logout" />
diff --git a/src/components/ImmediateCreditsStages/PaymentSuccess.js b/src/components/ImmediateCreditsStages/PaymentSuccess.js
index 5b2176c..a285dbf 100644
--- a/src/components/ImmediateCreditsStages/PaymentSuccess.js
+++ b/src/components/ImmediateCreditsStages/PaymentSuccess.js
@@ -1,9 +1,9 @@
-import React, { useContext, useState } from "react";
-import { LanguageContext } from "../../backend/LanguageContext";
+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";
+import next from '../../icons/next.svg';
+import next_reverse from '../../icons/next-reverse.svg';
+import { UserContext } from '../../backend/UserContext';
 
 const PaymentSuccess = ({
   setStage,
@@ -21,7 +21,7 @@ const PaymentSuccess = ({
   const { locale } = useContext(LanguageContext);
   const { user } = useContext(UserContext);
 
-  const [codeValue, setPhoneValue] = useState("");
+  const [codeValue, setPhoneValue] = useState('');
 
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(false);
@@ -33,18 +33,15 @@ const PaymentSuccess = ({
   const confirmCode = async () => {
     try {
       setIsLoading(true);
-      const response = await fetch(
-        "https://shahsyotag.halkbank.gov.tm/validateOTP",
-        {
-          headers: { "Content-Type": "aplication/json" },
-          method: "POST",
+      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,
-          }),
-        }
-      );
+        body: JSON.stringify({
+          phone_number: user.mobile_phone,
+          otp: codeValue,
+        }),
+      });
 
       if (!response.ok) {
         throw new Error(`HTTP error! Status: ${response.status}`);
@@ -52,7 +49,7 @@ const PaymentSuccess = ({
 
       const jsonedResponse = await response.json();
 
-      if (jsonedResponse === "OTP validated successfully") {
+      if (jsonedResponse === 'OTP validated successfully') {
         fetchData();
         setIsLoading(false);
       }
@@ -64,39 +61,41 @@ const PaymentSuccess = ({
       const response = await fetch(
         `https://shahsyotag.halkbank.gov.tm/onlineloancre-services/api/loancre`,
         {
-          method: "POST",
+          method: 'POST',
           headers: {
-            "Content-Type": "application/json",
+            'Content-Type': 'application/json',
           },
           body: JSON.stringify({
             clientRecipient: {
               idSeria: borrowerData.idSeria,
               idNo: borrowerData.idNo,
-              accountNo: borrowerData.accountNo,
+              cardMaskNumber: borrowerData.cardMaskNumber,
               name: borrowerData.name,
               surname: borrowerData.surname,
               availableAmount: borrowerData.availableAmount,
-              clientType: "recipient",
+              clientType: 'recipient',
               signRecipient: borrowerData.signRecipient,
+              expDate: borrowerData.expDate,
             },
             clientGuarantor: isGuranter
               ? {
                   idSeria: guaranterData.idSeria,
                   idNo: guaranterData.idNo,
-                  accountNo: guaranterData.accountNo,
+                  cardMaskNumber: guaranterData.cardMaskNumber,
                   name: guaranterData.name,
                   surname: guaranterData.surname,
                   availableAmount: guaranterData.availableAmount,
-                  clientType: "guarantor",
+                  clientType: 'guarantor',
                   signGuarantor: guaranterData.signGuarantor,
+                  expDate: guaranterData.expDate,
                 }
               : null,
             availableAmount: recepientAmount,
-            creditCardAccountNumber: null,
+            creditCardAccountNumber: cardDetails,
             mrtIsInsuarance: isGuranter ? 0 : 1,
             termInYears: creditDuration,
           }),
-        }
+        },
       );
 
       if (!response.ok) {
@@ -129,14 +128,14 @@ const PaymentSuccess = ({
     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 ..."}
+          {' '}
+          {locale === 'TKM'
+            ? 'Garaşmagyňyzy haýyş edýäris ...'
+            : locale === 'РУС'
+            ? 'Пожалуйста, подождите...'
+            : locale === 'ENG'
+            ? 'Please wait...'
+            : 'Garaşmagyňyzy haýyş edýäris ...'}
         </h1>
       </section>
     );
@@ -146,40 +145,35 @@ const PaymentSuccess = ({
     <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 "}
+          {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ň"}
+          {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"}
+              {locale === 'TKM'
+                ? 'Kod'
+                : locale === 'РУС'
+                ? 'Код'
+                : locale === 'ENG'
+                ? 'Code'
+                : 'Kod'}
             </label>
-            <input
-              value={codeValue}
-              onChange={handleCodeChange}
-              type="text"
-              id="code"
-            />
+            <input value={codeValue} onChange={handleCodeChange} type="text" id="code" />
             {/* <span className="another-option" onClick={codeResend}>
               Отправить код снова
             </span> */}
@@ -187,23 +181,19 @@ const PaymentSuccess = ({
           </div>
         </div>
         <div className="cu-bottom cd-2-title">
-          <button
-            type="button"
-            className="sign-btn reg-btn"
-            onClick={() => setStage(14)}
-          >
+          <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"}
+                {locale === 'TKM'
+                  ? 'Yza'
+                  : locale === 'РУС'
+                  ? 'Назад'
+                  : locale === 'ENG'
+                  ? 'Back'
+                  : 'Yza'}
               </h3>
             </div>
           </button>
@@ -211,17 +201,16 @@ const PaymentSuccess = ({
             disabled={codeValue.length !== 6 && !isLoading ? true : false}
             type="submit"
             onClick={onSubmit}
-            className="sign-btn cu-btn"
-          >
+            className="sign-btn cu-btn">
             <div>
               <h3>
-                {locale === "TKM"
-                  ? "Dowam et"
-                  : locale === "РУС"
-                  ? "Подтвердить  "
-                  : locale === "ENG"
-                  ? "Proceed"
-                  : "Dowam et"}
+                {locale === 'TKM'
+                  ? 'Dowam et'
+                  : locale === 'РУС'
+                  ? 'Подтвердить  '
+                  : locale === 'ENG'
+                  ? 'Proceed'
+                  : 'Dowam et'}
               </h3>
               <div className="btn-img">
                 <img src={next} alt="logout" />
diff --git a/src/components/ImmediateCreditsStages/PhoneAccept.js b/src/components/ImmediateCreditsStages/PhoneAccept.js
index bee6062..89c022a 100644
--- a/src/components/ImmediateCreditsStages/PhoneAccept.js
+++ b/src/components/ImmediateCreditsStages/PhoneAccept.js
@@ -135,23 +135,25 @@ const PhoneAccept = ({
             clientRecipient: {
               idSeria: borrowerData.idSeria,
               idNo: borrowerData.idNo,
-              accountNo: borrowerData.accountNo,
+              cardMaskNumber: borrowerData.cardMaskNumber,
               name: borrowerData.name,
               surname: borrowerData.surname,
               availableAmount: borrowerData.availableAmount,
               clientType: 'recipient',
               signRecipient: borrowerData.signRecipient,
+              expDate: borrowerData.expDate,
             },
             clientGuarantor: isGuranter
               ? {
                   idSeria: guaranterData.idSeria,
                   idNo: guaranterData.idNo,
-                  accountNo: guaranterData.accountNo,
+                  cardMaskNumber: guaranterData.cardMaskNumber,
                   name: guaranterData.name,
                   surname: guaranterData.surname,
                   availableAmount: guaranterData.availableAmount,
                   clientType: 'guarantor',
                   signGuarantor: guaranterData.signGuarantor,
+                  expDate: guaranterData.expDate,
                 }
               : null,
             availableAmount: recepientAmount,
@@ -236,23 +238,25 @@ const PhoneAccept = ({
             clientRecipient: {
               idSeria: borrowerData.idSeria,
               idNo: borrowerData.idNo,
-              accountNo: borrowerData.accountNo,
+              cardMaskNumber: borrowerData.cardMaskNumber,
               name: borrowerData.name,
               surname: borrowerData.surname,
               availableAmount: borrowerData.availableAmount,
               clientType: 'recipient',
               signRecipient: borrowerData.signRecipient,
+              expDate: borrowerData.expDate,
             },
             clientGuarantor: isGuranter
               ? {
                   idSeria: guaranterData.idSeria,
                   idNo: guaranterData.idNo,
-                  accountNo: guaranterData.accountNo,
+                  cardMaskNumber: guaranterData.cardMaskNumber,
                   name: guaranterData.name,
                   surname: guaranterData.surname,
                   availableAmount: guaranterData.availableAmount,
                   clientType: 'guarantor',
                   signGuarantor: guaranterData.signGuarantor,
+                  expDate: guaranterData.expDate,
                 }
               : null,
             availableAmount: recepientAmount,