Fixed confirmation page and added comments

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -1,13 +1,14 @@
 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 import React, { useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { toast } from "react-toastify";
 import debounce from "../../../hooks/debounce";
 import usersService from "../../../services/UsersService";
-import { tableReload } from "../../../store/TableReloads";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
-
+/**
+ * Renders a React component that displays the description and last four digits of a payment card.
+ */
 function ThePaymentText({ value, type }) {
   const { cardNum } = value;
   let description = value.description;
@@ -39,12 +40,16 @@ function ThePaymentText({ value, type }) {
   );
 }
 
+/**
+ * Renders the amount of a transaction in a specific currency.
+ * @returns {JSX.Element} - The rendered component.
+ */
 function AmountSection({ currency, amount, country }) {
-  const formattedAmount = Number(amount).toFixed(2);
+  const formattedAmount = amount?.toFixed(2);
+  const gapClassName = country === "US" ? "gap-14" : "gap-4";
+
   return (
-    <div
-      className={`flex items-center ${country == "US" ? "gap-14" : "gap-4"}`}
-    >
+    <div className={`flex items-center ${gapClassName}`}>
       <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
         Amount({currency})
       </h1>
@@ -55,14 +60,16 @@ function AmountSection({ currency, amount, country }) {
   );
 }
 
+/**
+ * Renders the transaction fee for a payment.
+ * @returns {JSX.Element} - Rendered JSX displaying the transaction fee with the label "Transaction Fee".
+ */
 function TransactionFeeSection({ currency, fee, country }) {
-  const formattedFee = Number(fee).toFixed(2);
+  const formattedFee = (+fee).toFixed(2);
+  const gapClass = country === "US" ? "gap-[2.7rem]" : "gap-4";
+
   return (
-    <div
-      className={`flex items-center border-b border-gray-600 ${
-        country == "US" ? "gap-[2.7rem]" : "gap-4"
-      }`}
-    >
+    <div className={`flex items-center border-b border-gray-600 ${gapClass}`}>
       <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
         Transaction Fee
       </h1>
@@ -73,15 +80,19 @@ function TransactionFeeSection({ currency, fee, country }) {
   );
 }
 
+/**
+ * Calculates the total amount by adding the `amount` and `fee` values together.
+ * Formats the total amount to two decimal places and displays it.
+ * @returns {JSX.Element} - The TotalSection component.
+ */
 function TotalSection({ currency, amount, fee, country }) {
   const total = Number(amount) + Number(fee);
-  const formattedTotal = total.toFixed(2);
+  const formattedTotal = total?.toFixed(2);
+
+  const gap = country === "US" ? "gap-[8rem]" : "gap-[6.3rem]";
+
   return (
-    <div
-      className={`flex items-center ${
-        country == "US" ? "gap-[8rem]" : "gap-[6.3rem]"
-      }`}
-    >
+    <div className={`flex items-center ${gap}`}>
       <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
         Total
       </h1>
@@ -109,8 +120,6 @@ function ConfirmAddFund({
 
   const { userDetails } = useSelector((state) => state?.userDetails);
 
-  const dispatch = useDispatch();
-
   const [requestStatus, setRequestStatus] = useState({
     message: "",
     loading: false,
@@ -169,8 +178,6 @@ function ConfirmAddFund({
             status: false,
           });
         }
-
-        return dispatch(tableReload({ type: "WALLETTABLE" }));
       })
       .catch((err) => {
         setRequestStatus({
@@ -248,8 +255,6 @@ function ConfirmAddFund({
           },
           data: _response,
         }));
-        // Dispatch an action to reload the wallet table
-        dispatch(tableReload({ type: "WALLETTABLE" }));
       }, 1500);
     } catch (error) {
       // Handle error and hide the loader
@@ -271,7 +276,8 @@ function ConfirmAddFund({
     try {
       // Extract necessary data from __confirmData and __confirmCardDetails
       const { amount, credit_reference, uid } = __confirmData;
-      const { address, cardNum, cvv, expirationMonth, expirationYear } = __confirmCardDetails;
+      const { address, cardNum, cvv, expirationMonth, expirationYear } =
+        __confirmCardDetails;
 
       // Set loading state to indicate payment is being processed
       setConfirmCredit((prev) => ({
@@ -320,8 +326,6 @@ function ConfirmAddFund({
             },
             data: _response,
           }));
-          console.log("Show meeeeeeeeee");
-          dispatch(tableReload({ type: "WALLETTABLE" }));
         }, 1500);
       }
     } catch (error) {