Another fix

src/components/MyWallet/Popup/AddFundDollars.jsx

@@ -95,7 +95,7 @@ function AddFundDollars(props) {
       return;
     }
 
-    if (!prevCardDetails) {
+    if (!prevCardDetails["payment-card"]?.card_uid) {
       return;
     }
 
@@ -171,6 +171,8 @@ function AddFundDollars(props) {
 
   const handleClose = props.onClose;
 
+  console.log(prevCardDetails)
+
   return (
     <>
       <div className="w-full">

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -1,11 +1,78 @@
 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 import React, { useState } from "react";
-import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import usersService from "../../../services/UsersService";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
+function ThePaymentText({ value }) {
+  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">
+          {value.description} Card
+        </h1>
+        <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
+          Bank **************{value.digits}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function AmountSection({ currency, amount, country }) {
+  const formattedAmount = (Number(amount) / 100).toFixed(2);
+  return (
+    <div
+      className={`flex items-center ${country == "US" ? "gap-14" : "gap-4"}`}
+    >
+      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        Amount({currency})
+      </h1>
+      <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        {formattedAmount}
+      </span>
+    </div>
+  );
+}
+
+function TransactionFeeSection({ currency, fee, country }) {
+  const formattedFee = (Number(fee) / 100).toFixed(2);
+  return (
+    <div
+      className={`flex items-center border-b border-gray-600 ${
+        country == "US" ? "gap-[2.7rem]" : "gap-4"
+      }`}
+    >
+      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        Transaction Fee
+      </h1>
+      <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        {formattedFee}
+      </span>
+    </div>
+  );
+}
+
+function TotalSection({ currency, amount, fee, country }) {
+  const total = (Number(amount) + Number(fee)) / 100;
+  const formattedTotal = total.toFixed(2);
+  return (
+    <div
+      className={`flex items-center ${
+        country == "US" ? "gap-[8rem]" : "gap-[6.3rem]"
+      }`}
+    >
+      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        Total
+      </h1>
+      <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+        {formattedTotal}
+      </span>
+    </div>
+  );
+}
+
 function ConfirmAddFund({
   confirmCredit,
   onClose,
@@ -17,65 +84,21 @@ function ConfirmAddFund({
   const __confirmCardDetails = __confirmData.card
     ? JSON.parse(__confirmData.card)
     : "";
-  let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS
-
-  let [requestStatus, setRequestStatus] = useState({
-    message: "",
-    loading: false,
-    status: false,
-  }); // STATE FOR API REQUEST
 
   const apiURL = new usersService();
   const navigate = useNavigate();
 
-  //FUNCTION TO HANDLE SUBMIT
+  const [requestStatus, setRequestStatus] = useState({
-  const onSuccessPayment = () => {
+    message: "",
-    setRequestStatus({ message: "", loading: true, status: false });
+    loading: false,
-    let reqData = { amount: __confirmData?.account, currency: "NGN" };
+    status: false,
-    apiURL
+  });
-      .startTopUp(reqData)
-      .then((res) => {
-        if (res.data.internal_return < 0) {
-          setRequestStatus({
-            message: "Could not finish transaction",
-            loading: false,
-            status: false,
-          });
-          toast.success("Opps! something went wrong");
-        }
-        // do something
-        setRequestStatus({
-          message: "Topup successful",
-          loading: false,
-          status: true,
-        });
-        toast.success("Account Topup was successful");
-        setTimeout(() => {
-          navigate("/my-wallet", { replace: true });
-        }, 1000);
-      })
-      .catch((err) => {
-        // do something
-        setRequestStatus({
-          message: "Opps! An Error Occured",
-          loading: false,
-          status: false,
-        });
-        toast.success("Opps! something went wrong");
-      });
-  };
 
   const config = {
     public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
     tx_ref: Date.now(),
-    amount: __confirmData?.amount,
     currency: "NGN",
     payment_options: "card,mobilemoney,ussd",
-    customer: {
-      email: `${userDetails.email}`,
-      phone_number: userDetails.phone,
-      name: `${userDetails.lastname} ${userDetails.firstname}`,
-    },
     customizations: {
       title: "WrenchBoard",
       description: "Topup Payment",
@@ -88,12 +111,47 @@ function ConfirmAddFund({
     text: "Proceed",
     callback: (response) => {
       onSuccessPayment();
-      closePaymentModal(); // this will close the modal programmatically
+      closePaymentModal();
     },
     onClose: () => {},
   };
 
-  // Handling Previous Card
+  const onSuccessPayment = () => {
+    setRequestStatus({ message: "", loading: true, status: false });
+    const reqData = { amount: __confirmData?.account, currency: "NGN" };
+
+    apiURL
+      .startTopUp(reqData)
+      .then((res) => {
+        if (res.data.internal_return < 0) {
+          setRequestStatus({
+            message: "Could not finish transaction",
+            loading: false,
+            status: false,
+          });
+          toast.success("Opps! something went wrong");
+        } else {
+          setRequestStatus({
+            message: "Topup successful",
+            loading: false,
+            status: true,
+          });
+          toast.success("Account Topup was successful");
+          setTimeout(() => {
+            navigate("/my-wallet", { replace: true });
+          }, 1000);
+        }
+      })
+      .catch((err) => {
+        setRequestStatus({
+          message: "Opps! An Error Occured",
+          loading: false,
+          status: false,
+        });
+        toast.success("Opps! something went wrong");
+      });
+  };
+
   const handlePrevCard = async () => {
     const { amount, credit_reference, currency } = __confirmData;
     const { card_uid } = __confirmCardDetails;
@@ -124,18 +182,16 @@ function ConfirmAddFund({
         return;
       }
 
-      return setTimeout(
+      setTimeout(() => {
-        () =>
+        setConfirmCredit((prev) => ({
-          setConfirmCredit((prev) => ({
+          ...prev,
-            ...prev,
+          show: {
-            show: {
+            awaitConfirm: { loader: false, state: false },
-              awaitConfirm: { loader: false, state: false },
+            acceptConfirm: { loader: false, state: true },
-              acceptConfirm: { loader: false, state: true },
+          },
-            },
+          data: _response,
-            data: _response,
+        }));
-          })),
+      }, 1500);
-        1500
-      );
     } catch (error) {
       setConfirmCredit((prev) => ({
         ...prev,
@@ -147,107 +203,48 @@ function ConfirmAddFund({
     }
   };
 
-  const ThePaymentText = ({ value }) => (
-    <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">
-          {value.description} Card
-        </h1>
-        <p className="text-base font-bold text-dark-gray dark:text-white tracking-wide">
-          Bank **************{value.digits}
-        </p>
-      </div>
-    </div>
-  );
-
   return (
     <div className="content-wrapper w-full h-[32rem]">
       <div className="w-full mb-10">
         <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
           <div className="px-4 md:p-8 py-4 add-fund-info">
             <div className="field w-full mb-3 min-h-[45px]">
-              {confirmCredit?.show?.awaitConfirm?.state ? (
+              {confirmCredit?.show?.awaitConfirm?.state && (
                 <div className="flex flex-col gap-2">
-                  {/* Amount */}
+                  <AmountSection
-                  <div
+                    currency={__confirmData?.currency}
-                    className={`flex items-center ${
+                    amount={__confirmData?.amount}
-                      __confirmCountry == "US" ? "gap-14" : "gap-4"
+                    country={__confirmCountry}
-                    }`}
+                  />
-                  >
+                  <TransactionFeeSection
-                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                    currency={__confirmData?.currency}
-                      Amount({__confirmData?.currency})
+                    fee={__confirmData?.fee}
-                    </h1>
+                    country={__confirmCountry}
-                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                  />
-                      {`${walletItem?.symbol} ${
+                  <TotalSection
-                        Number(__confirmData?.amount).toLocaleString(
+                    currency={__confirmData?.currency}
-                          undefined,
+                    amount={__confirmData?.amount}
-                          {
+                    fee={__confirmData?.fee}
-                            minimumFractionDigits: 2,
+                    country={__confirmCountry}
-                            maximumFractionDigits: 2,
+                  />
-                          }
+                  {__confirmCountry === "US" && (
-                        ) || ""
-                      }`}
-                    </span>
-                  </div>
-                  {/* Transaction Fee */}
-                  <div
-                    className={`flex items-center border-b border-gray-600 ${
-                      __confirmCountry == "US" ? "gap-[2.7rem]" : "gap-4"
-                    }`}
-                  >
-                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      Transaction Fee
-                    </h1>
-                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      {`${walletItem?.symbol} ${
-                        Number(__confirmData?.fee).toLocaleString(undefined, {
-                          minimumFractionDigits: 2,
-                          maximumFractionDigits: 2,
-                        }) || ""
-                      }`}
-                    </span>
-                  </div>
-                  {/* Total */}
-                  <div
-                    className={`flex items-center ${
-                      __confirmCountry == "US" ? "gap-[8rem]" : "gap-[6.3rem]"
-                    }`}
-                  >
-                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      Total
-                    </h1>
-                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      {`${walletItem?.symbol} ${
-                        (
-                          Number(__confirmData?.amount) +
-                          Number(__confirmData?.fee)
-                        ).toLocaleString(undefined, {
-                          minimumFractionDigits: 2,
-                          maximumFractionDigits: 2,
-                        }) || ""
-                      }`}
-                    </span>
-                  </div>
-
-                  {__confirmCountry == "US" && (
                     <div className="flex items-center gap-8">
                       <label
                         htmlFor="payment"
                         className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
                       >
-                        {__confirmCountry == "US" && "Payment Method"}
+                        Payment Method
                       </label>
-                      <span className="text-[#181c32] dark:text-white ">
+                      <span className="text-[#181c32] dark:text-white">
                         {__confirmCardDetails ? (
                           <ThePaymentText value={__confirmCardDetails} />
                         ) : null}
                       </span>
                     </div>
                   )}
-
                   <div
                     className={`${
-                      __confirmCountry == "US"
+                      __confirmCountry === "US"
                         ? "gap-[3.7rem]"
                         : "gap-[9.81rem]"
                     } flex items-center`}
@@ -260,13 +257,13 @@ function ConfirmAddFund({
                     </span>
                   </div>
                 </div>
-              ) : null}
+              )}
             </div>
           </div>
 
           <div
             className={
-              __confirmCountry == "US" ? "min-h-[96px]" : "min-h-[200px]"
+              __confirmCountry === "US" ? "min-h-[96px]" : "min-h-[200px]"
             }
           ></div>
           <hr />
@@ -277,7 +274,7 @@ function ConfirmAddFund({
             >
               Cancel
             </button>
-            {__confirmCountry == "US" && (
+            {__confirmCountry === "US" && (
               <button
                 className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full"
                 onClick={
@@ -293,7 +290,7 @@ function ConfirmAddFund({
                 )}
               </button>
             )}
-            {__confirmCountry == "NG" && (
+            {__confirmCountry === "NG" && (
               <FlutterWaveButton
                 {...fwConfig}
                 className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"