cardDetails stage done

2024-03-31 18:01:00 +05:00 · 2024-03-31 18:01:00 +05:00 · e27d5de5a5
parent 60afb4f049
commit e27d5de5a5
4 changed files with 188 additions and 44 deletions
--- 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>
--- 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'
--- 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}
                />
              ) : (
                ''
--- 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;
+  }
+}