Fixed confirmation page and added comments

src/components/MyWallet/WalletItemCard.jsx

@@ -1,17 +1,25 @@
 import React, { useState } from "react";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
 import localImgLoad from "../../lib/localImgLoad";
+import { tableReload } from "../../store/TableReloads";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import CreditPopup from "./Popup/CreditPopup";
 import WalletAction from "./WalletAction";
 
+/**
+ * Renders a card displaying information about a wallet item.
+ */
 export default function WalletItemCard({ walletItem, payment }) {
-  const { userDetails } = useSelector((state) => state?.userDetails);
-  let accountType = userDetails?.account_type == "FAMILY";
-
-  //   Credit popup
+  const { userDetails } = useSelector((state) => state.userDetails);
+  const accountType = userDetails?.account_type === 'FAMILY';
+  const dispatch = useDispatch();
   const [creditPopup, setCreditPopup] = useState({ show: false, data: {} });
+
+  /**
+   * Opens the credit popup.
+   * @param {Object} value - The value object.
+   */
   const openPopUp = (value) => {
     setCreditPopup({
       show: true,
@@ -19,29 +27,32 @@ export default function WalletItemCard({ walletItem, payment }) {
     });
   };
 
+  /**
+   * Closes the credit popup and dispatches a table reload action.
+   */
   const closePopUp = () => {
     setCreditPopup({ show: false, data: {} });
+    dispatch(tableReload({ type: 'WALLETTABLE' }));
   };
 
-  let image = walletItem.code
-    ? `${walletItem.code.toLocaleLowerCase()}.svg`
-    : "default.png"; // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON
+  const image = walletItem.code
+    ? `${walletItem.code.toLowerCase()}.svg`
+    : 'default.png';
 
   return (
     <>
       <div
-        className={`current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 px-8 pt-9 pb-20`}
+        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 px-8 pt-9 pb-20"
         style={{
           background: `url(${background}) 0% 0% / cover no-repeat`,
         }}
       >
-        {/* <div className="w-[350px]"> */}
         <div className="wallet w-full flex justify-between items-start gap-3">
           <div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
             <img
               src={localImgLoad(`images/currency/${image}`)}
               className="w-full h-full"
-              alt="curreny-icon"
+              alt="currency-icon"
             />
           </div>
           <div className="balance w-full mt-2 flex justify-center">
@@ -54,7 +65,7 @@ export default function WalletItemCard({ walletItem, payment }) {
                   walletItem.amount * 0.01,
                   walletItem.code,
                   undefined,
-                  "text-[2rem]"
+                  'text-[2rem]'
                 )}
               </p>
             </div>
@@ -62,28 +73,28 @@ export default function WalletItemCard({ walletItem, payment }) {
         </div>
 
         <p className="my-5 text-lg text-white tracking-wide flex justify-center items-center gap-2">
-          HOLDINGS :{" "}
+          HOLDINGS :{' '}
           <span className="mt-1">
             {PriceFormatter(
               walletItem.escrow * 0.01,
               walletItem.code,
               undefined,
-              "text-[2rem]"
+              'text-[2rem]'
             )}
           </span>
         </p>
-        {/* for white underline */}
+
         <div className="my-2 w-full h-[1px] bg-white"></div>
 
-        {!accountType ? (
+        {!accountType && (
           <WalletAction
             walletItem={walletItem}
             payment={payment}
             openPopUp={openPopUp}
           />
-        ) : null}
-        {/* </div> */}
+        )}
       </div>
+
       {creditPopup.show && (
         <CreditPopup
           details={creditPopup.data}