From e27d5de5a53949447f95861e2816f46dc5bad624 Mon Sep 17 00:00:00 2001
From: Kakabay <2kakabayashyrberdyew@gmail.com>
Date: Sun, 31 Mar 2024 18:01:00 +0500
Subject: [PATCH] cardDetails stage done

---
 .../CardRegistration.js                       |   6 +-
 .../ImmediateCreditsStages/PaymentDetails.js  | 202 +++++++++++++++---
 .../immediateCredits/ImmediateCreditModal.js  |  14 +-
 src/scss/_immediate-credits.scss              |  10 +
 4 files changed, 188 insertions(+), 44 deletions(-)

diff --git a/src/components/ImmediateCreditsStages/CardRegistration.js b/src/components/ImmediateCreditsStages/CardRegistration.js
index 3846be1..9543f7c 100644
--- a/src/components/ImmediateCreditsStages/CardRegistration.js
+++ b/src/components/ImmediateCreditsStages/CardRegistration.js
@@ -113,7 +113,7 @@ const CardRegistration = ({ borrowerData, setStage, setPaymentLink, setPaymentDe
 
       setPaymentDetails(jsonedResponse);
 
-      // setStage(13);
+      setStage(13);
 
       setIsLoading(false);
     } catch (error) {
@@ -327,7 +327,9 @@ const CardRegistration = ({ borrowerData, setStage, setPaymentLink, setPaymentDe
             type="submit"
             className="sign-btn cu-btn"
             disabled={
-              workPlace.length < 3 || workPosition.length < 3 || address.length < 3 ? true : false
+              workPlace.length < 3 || workPosition.length < 3 || address.length < 3 || isLoading
+                ? true
+                : false
             }
             onClick={onSubmit}>
             <div>
diff --git a/src/components/ImmediateCreditsStages/PaymentDetails.js b/src/components/ImmediateCreditsStages/PaymentDetails.js
index fd71947..27333cd 100644
--- a/src/components/ImmediateCreditsStages/PaymentDetails.js
+++ b/src/components/ImmediateCreditsStages/PaymentDetails.js
@@ -1,5 +1,5 @@
 // IMPORT MODULES
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import { LanguageContext } from '../../backend/LanguageContext';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -7,6 +7,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 // IMPORT IMAGES
 import next from '../../icons/next.svg';
 import next_reverse from '../../icons/next-reverse.svg';
+import CardDetails from './CardDetails';
 // import arrow from "../../icons/arrow.svg";
 
 const schema = z.object({
@@ -14,25 +15,92 @@ const schema = z.object({
   // surname: z.string().min(1),
 });
 
-const PaymentDetails = ({
-  setStage,
-  setPaymentCard,
-  paymentCard,
-  setPaymentCv,
-  paymentCv,
-  setPaymentCardDuration,
-  paymentCardDuration,
-}) => {
+const PaymentDetails = ({ setStage, paymentDetails, borrowerData, setSumbitCardDetails }) => {
   const { locale } = useContext(LanguageContext);
 
+  const [invalidData, setInvalidData] = useState(false);
+  const [timeLeft, setTimeLeft] = useState(paymentDetails['remaining-time']);
+
+  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 handlePaymentCardDuration = (e) => {
-    setPaymentCardDuration(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 () => {
+    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 === 'other-error') {
+        setInvalidData(true);
+      } else if (jsonedResponse.status === 'ok') {
+        setSumbitCardDetails(jsonedResponse);
+        setInvalidData(false);
+      } else {
+        setInvalidData(false);
+      }
+
+      console.log(jsonedResponse);
+
+      // setStage(13);
+
+      // setIsLoading(false);
+    } catch (error) {
+      console.error(error.toString());
+      // setError(true);
+    }
   };
 
   const {
@@ -44,9 +112,13 @@ const PaymentDetails = ({
   });
 
   const onSubmit = (data) => {
-    console.log(data);
+    sendPaymentRequest();
   };
 
+  if (timeLeft <= 0) {
+    setStage(12);
+  }
+
   return (
     <section className="imm-cs-1">
       <form onSubmit={handleSubmit(onSubmit)}>
@@ -59,7 +131,32 @@ const PaymentDetails = ({
             ? 'Loan calculator'
             : 'Karzyň kalkulýatory'}
         </h2>
+        <div className="payment-details">
+          <h2>Сумма к оплате: {paymentDetails['amount-info']}</h2>
+          <h2>
+            Оставшееся время: {Math.floor((timeLeft % 3600) / 60)}:{timeLeft % 60}
+          </h2>
+        </div>
         <div className="imm-credit-form-wrapper">
+          <div className="input-block">
+            <label htmlFor="card">
+              {locale === 'TKM'
+                ? 'At'
+                : locale === 'РУС'
+                ? 'Имя на карте'
+                : locale === 'ENG'
+                ? 'amount'
+                : 'At'}
+            </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'
@@ -73,53 +170,82 @@ const PaymentDetails = ({
             <input
               value={paymentCard}
               onChange={handlePaymentCard}
-              type="text"
+              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'
+                  ? 'At'
+                  : locale === 'РУС'
+                  ? 'CVC карты'
+                  : locale === 'ENG'
+                  ? 'amount'
+                  : 'At'}
+              </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="cv">
+            <label htmlFor="duration-month">
               {locale === 'TKM'
                 ? 'At'
                 : locale === 'РУС'
-                ? 'CV карты'
+                ? 'Срок годности карты (месяц)'
                 : locale === 'ENG'
                 ? 'amount'
                 : 'At'}
             </label>
             <input
-              value={paymentCv}
-              onChange={handlePaymentCv}
-              type="text"
-              id="cv"
-              placeholder="6435980023168745"
+              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">
+            <label htmlFor="duration-year">
               {locale === 'TKM'
                 ? 'At'
                 : locale === 'РУС'
-                ? 'Срок годности карты'
+                ? 'Срок годности карты (год)'
                 : locale === 'ENG'
                 ? 'amount'
                 : 'At'}
             </label>
             <input
-              value={paymentCardDuration}
-              onChange={handlePaymentCardDuration}
-              type="text"
-              id="duration"
-              placeholder="6435980023168745"
+              value={paymentCardDurationYear}
+              onChange={handlePaymentCardDurationYear}
+              type="number"
+              id="duration-year"
+              placeholder="2024"
             />
             {/* {errors.code && <span>{errors.code.message}</span>} */}
           </div>
         </div>
+        {invalidData && (
+          <section className="imm-cs-1">
+            <h1 className="cs-2-title">Ошибкаб проверьте данные</h1>
+          </section>
+        )}
         <div className="cu-bottom cd-2-title">
-          <button type="button" className="sign-btn reg-btn" onClick={() => setStage(9)}>
+          <button type="button" className="sign-btn reg-btn" onClick={() => setStage(12)}>
             <div>
               <div className="btn-img">
                 <img src={next_reverse} alt="logout" />
@@ -136,11 +262,21 @@ const PaymentDetails = ({
             </div>
           </button>
           <button
-            // disabled={cardDetails.length !== 16 ? true : false}
-            type="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={() => setStage(10)}
-          >
+            onClick={() => onSubmit()}>
             <div>
               <h3>
                 {locale === 'TKM'
diff --git a/src/components/immediateCredits/ImmediateCreditModal.js b/src/components/immediateCredits/ImmediateCreditModal.js
index 8c1ea18..b1a38c9 100644
--- a/src/components/immediateCredits/ImmediateCreditModal.js
+++ b/src/components/immediateCredits/ImmediateCreditModal.js
@@ -59,14 +59,11 @@ const ImmediateCreditModal = ({
   const [phoneNumber, setPhoneNumber] = useState('');
   const [cardDetails, setCardDetails] = useState('');
 
-  const userToken = localStorage.getItem('userToken');
   const [userDataRes, setUserDataRes] = useState();
   const [paymentLink, setPaymentLink] = useState('');
-  const [paymentCard, setPaymentCard] = useState('');
-  const [paymentCv, setPaymentCv] = useState('');
-  const [paymentCardDuration, setPaymentCardDuration] = useState('');
 
   const [paymentDetails, setPaymentDetails] = useState();
+  const [submitCardDetails, setSumbitCardDetails] = useState();
 
   return (
     <section className={modalOpen ? 'modal credit-modal active' : 'modal credit-modal'}>
@@ -373,12 +370,11 @@ const ImmediateCreditModal = ({
                 />
               ) : stage === 13 ? (
                 <PaymentDetails
+                  setStage={setStage}
                   paymentLink={paymentLink}
-                  setPaymentCard={setPaymentCard}
-                  paymentCard={paymentCard}
-                  setPaymentCv={setPaymentCv}
-                  setPaymentCardDuration={setPaymentCardDuration}
-                  paymentCardDuration={paymentCardDuration}
+                  paymentDetails={paymentDetails}
+                  borrowerData={borrowerData}
+                  setSumbitCardDetails={setSumbitCardDetails}
                 />
               ) : (
                 ''
diff --git a/src/scss/_immediate-credits.scss b/src/scss/_immediate-credits.scss
index 7257068..2742867 100644
--- a/src/scss/_immediate-credits.scss
+++ b/src/scss/_immediate-credits.scss
@@ -91,3 +91,13 @@
 .loan-accepted-title {
   color: $base-green;
 }
+
+.payment-details {
+  display: flex;
+  gap: 2.4rem;
+
+  h2 {
+    font-weight: normal;
+    font-size: 1.8rem;
+  }
+}