Paying using new card

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -5,11 +5,21 @@ import { toast } from "react-toastify";
 import usersService from "../../../services/UsersService";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
-function ThePaymentText({ value }) {
+function ThePaymentText({ value, type }) {
+  const cardDetails = value;
+  value.description =
+    type === "new"
+      ? cardDetails.cardNum[0] === "4"
+        ? "Visa"
+        : value[0] === "5"
+        ? "Master"
+        : "ATM"
+      : value.description;
+  value.digits = type === "new" ? cardDetails.cardNum.slice(-4) : value.digits;
   return (
     <div className="my-2 flex items-center gap-5">
       <div className="card-details flex items-center gap-3">
-        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1 space-x-1">
           {value.description} Card
         </h1>
         <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
@@ -21,7 +31,7 @@ function ThePaymentText({ value }) {
 }
 
 function AmountSection({ currency, amount, country }) {
-  const formattedAmount = (Number(amount) / 100).toFixed(2);
+  const formattedAmount = Number(amount).toFixed(2);
   return (
     <div
       className={`flex items-center ${country == "US" ? "gap-14" : "gap-4"}`}
@@ -37,7 +47,7 @@ function AmountSection({ currency, amount, country }) {
 }
 
 function TransactionFeeSection({ currency, fee, country }) {
-  const formattedFee = (Number(fee) / 100).toFixed(2);
+  const formattedFee = Number(fee).toFixed(2);
   return (
     <div
       className={`flex items-center border-b border-gray-600 ${
@@ -55,7 +65,7 @@ function TransactionFeeSection({ currency, fee, country }) {
 }
 
 function TotalSection({ currency, amount, fee, country }) {
-  const total = (Number(amount) + Number(fee)) / 100;
+  const total = Number(amount) + Number(fee);
   const formattedTotal = total.toFixed(2);
   return (
     <div
@@ -81,9 +91,10 @@ function ConfirmAddFund({
 }) {
   const __confirmData = confirmCredit?.data;
   const __confirmCountry = walletItem?.country;
-  const __confirmCardDetails = __confirmData.card
-    ? JSON.parse(__confirmData.card)
-    : "";
+  const __confirmCardDetails =
+    __confirmData.cardType === "prev"
+      ? JSON.parse(__confirmData.card)
+      : __confirmData.card;
 
   const apiURL = new usersService();
   const navigate = useNavigate();
@@ -203,6 +214,68 @@ function ConfirmAddFund({
     }
   };
 
+  const handleNewCard = async () => {
+    const { amount, credit_reference, uid } = __confirmData;
+    const { address, cardNum, cvv, expirationMonth, expirationYear } =
+      __confirmCardDetails;
+
+    const reqData = {
+      amount: amount * 100,
+      cardnumber: cardNum.replace(/\s/g, ""),
+      credit_reference,
+      cvc: cvv,
+      description: address,
+      exp_month: expirationMonth,
+      exp_year: expirationYear,
+      paymenttype: 100,
+      uid,
+    };
+
+    try {
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: {
+          acceptConfirm: { loader: true },
+        },
+      }));
+      const res = await apiURL.getPaidNewCard(reqData);
+      const _response = res.data;
+      if (res.data.internal_return < 0) {
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: {
+            awaitConfirm: { loader: false, state: false },
+            acceptConfirm: { loader: false, state: true },
+          },
+          data: _response,
+        }));
+        return;
+      }
+
+      setTimeout(() => {
+        setConfirmCredit((prev) => ({
+          ...prev,
+          show: {
+            awaitConfirm: { loader: false, state: false },
+            acceptConfirm: { loader: false, state: true },
+          },
+          data: _response,
+        }));
+      }, 1500);
+    } catch (error) {
+      setConfirmCredit((prev) => ({
+        ...prev,
+        show: {
+          acceptConfirm: { loader: false },
+        },
+      }));
+      setTimeout(() => onClose, 10000)
+      console.log(error);
+    }
+  };
+
+  console.log(confirmCredit?.data);
+
   return (
     <div className="content-wrapper w-full h-[32rem]">
       <div className="w-full mb-10">
@@ -236,9 +309,10 @@ function ConfirmAddFund({
                         Payment Method
                       </label>
                       <span className="text-[#181c32] dark:text-white">
-                        {__confirmCardDetails ? (
-                          <ThePaymentText value={__confirmCardDetails} />
-                        ) : null}
+                        <ThePaymentText
+                          value={__confirmCardDetails}
+                          type={__confirmData?.cardType}
+                        />
                       </span>
                     </div>
                   )}
@@ -246,7 +320,7 @@ function ConfirmAddFund({
                     className={`${
                       __confirmCountry === "US"
                         ? "gap-[3.7rem]"
-                        : "gap-[9.81rem]"
+                        : "gap-[1.81rem]"
                     } flex items-center`}
                   >
                     <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
@@ -263,7 +337,7 @@ function ConfirmAddFund({
 
           <div
             className={
-              __confirmCountry === "US" ? "min-h-[96px]" : "min-h-[200px]"
+              __confirmCountry === "US" ? "min-h-[96px]" : "min-h-[157px]"
             }
           ></div>
           <hr />
@@ -280,7 +354,7 @@ function ConfirmAddFund({
                 onClick={
                   __confirmData?.cardType === "prev"
                     ? handlePrevCard
-                    : () => console.log("Test me")
+                    : handleNewCard
                 }
               >
                 {confirmCredit?.show?.acceptConfirm?.loader ? (