wallet header dropdown fixed

src/components/Cards/ResourceBlogCard.jsx

@@ -23,17 +23,19 @@ export default function ProductCardStyleTwo({
   
   return (
     <div
-      className={`card-style-two w-full h-[336px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+      className={`card-style-two w-full p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
         className || ""
       }`}
     >
       <div className="flex flex-col justify-between w-full h-full">
         <div className="thumbnail-area w-full">
           <div
-            className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
+            className="w-full h-[140px] p-6  rounded-lg overflow-hidden"
             style={{
               // background: `url(${`https://blog.wrenchboard.com/wp-content/uploads/${datas.meta_value}`}) 0% 0% / cover no-repeat`,
-            background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
+              // background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
+              background: `url(${`${bg}${datas.meta_value}`}) no-repeat`,
+              backgroundSize: '100%',
             }}
           >
             <div className="product-two-options flex justify-between mb-5 relative">
@@ -50,7 +52,7 @@ export default function ProductCardStyleTwo({
         </div>
         <div className="details-area">
           {/* title */}
-          <Link to={`/blog-page?blog_id=${datas.ID}`} className="mb-2.5" rel="noreferrer">
+          <Link to={`/blog-page?blog_id=${datas.ID}`} className="py-2 mb-2.5" rel="noreferrer">
             <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
               {datas.post_title || "dummy title..."}
             </h1>

src/components/MarketPlace/index.jsx

@@ -1,15 +1,27 @@
-import { useSelector } from "react-redux";
+import {useEffect} from 'react'
+import { useSelector,  useDispatch} from "react-redux";
 import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
 import MainSection from "./MainSection";
 import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { tableReload } from '../../store/TableReloads';
 
 export default function MarketPlace({ commonHeadData }) {
+
+  const dispatch = useDispatch()
+
   let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;
   const categories = jobLists?.categories;
   const image_server = jobLists?.session_image_server;
+  console.log('Lenth', marketData?.length )
+
+  useEffect(()=>{
+    if(!jobLists.loading && (marketData?.length < 1 || !marketData)){
+      dispatch(tableReload({ type: "MARKETTABLELIST" })); // reloads market page
+    }
+  },[])
 
   return (
     <>

src/components/MyWallet/Wallet.jsx

@@ -1,11 +1,14 @@
 import React, { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import usersService from "../../services/UsersService";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletBox from "./WalletBox";
+import { tableReload } from '../../store/TableReloads';
 
 const WalletRoutes = () => {
+  const dispatch = useDispatch()
+
   const apiCall = new usersService();
   const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
   const { walletTable } = useSelector((state) => state.tableReload);
@@ -60,6 +63,12 @@ const WalletRoutes = () => {
     getPaymentHistory();
   }, [walletTable]);
 
+  useEffect(()=>{
+    if(!walletDetails.loading && walletDetails?.data?.length < 1){
+      dispatch(tableReload({ type: "WALLETTABLE" })); // reloads wallet page
+    }
+  },[])
+
   return (
     <Layout>
         <WalletBox

src/components/MyWallet/WalletAction.jsx

@@ -2,8 +2,28 @@ import React, { useEffect, useState } from "react";
 import usersService from "../../services/UsersService";
 import ConfirmNairaWithdraw from "./Popup/ConfirmNairaWithdraw";
 import NairaWithdraw from "./Popup/NairaWithdraw";
+import VirtualAddCardPopout from "./walletvirtual/VirtualAddCardPopout";
+import WalletExtraActionBtn from "./WalletExtraActionBtn";
 
 function WalletAction({ walletItem, payment, openPopUp }) {
+
+  // virtual add card popout
+  const [virtualPopup, setVirtualPopup] = useState({ show: false, data: {} }); 
+
+    /*OPENS the virtual add card popout*/
+  const openVirtualPopUp = (value) => {
+    setVirtualPopup({
+      show: true,
+      data: { ...value },
+    });
+  };
+
+  /*Closes the virtual add card popout*/
+  const closeVirtualPopUp = () => {
+    setVirtualPopup({ show: false, data: {} });
+    // dispatch(tableReload({ type: "WALLETTABLE" }));
+  };
+
   const [showNairaWithdraw, setShowNairaWithdraw] = useState({
     show: false,
     state: {},
@@ -19,14 +39,27 @@ function WalletAction({ walletItem, payment, openPopUp }) {
       <div className="w-1/2 flex justify-start items-center">
         <button
           onClick={() => {
-            setShowNairaWithdraw((prev) => ({ ...prev, show: true }));
+            walletItem?.code == 'NAIRA' ? 
+            setShowNairaWithdraw((prev) => ({ ...prev, show: true })) 
+            : walletItem?.code == 'USD' ? 
+            openVirtualPopUp({walletItem})
+            :
+            ()=>{}
           }}
           className={`${
-            walletItem.code != "NAIRA" && "invisible"
+            walletItem?.code != "NAIRA" && ""
           } logout-btn btn-gradient text-white`}
         >
-          Spend
+          {/* Spend */}
+          {walletItem?.code == 'NAIRA' ? 
+            walletItem?.extra_actions?.SPEND_FROM_BALANCE[0]?.text 
+            : walletItem?.code == 'USD' ? 
+            walletItem?.extra_actions?.ADD_VIRTUAL_CARD[0]?.text
+            :
+            'View'
+          }
         </button>
+        {/* <WalletExtraActionBtn /> // TO BE USED lATER */}
       </div>
       <div className="w-1/2 flex justify-end items-center">
         <button
@@ -71,6 +104,17 @@ function WalletAction({ walletItem, payment, openPopUp }) {
           situation={showConfirmNairaWithdraw.show}
         />
       )}
+
+      {/* VIRTUAL CARD POPOUT */}
+      {virtualPopup.show && (
+        <VirtualAddCardPopout
+          details={virtualPopup.data}
+          walletItem={walletItem}
+          onClose={closeVirtualPopUp}
+          situation={virtualPopup.show}
+        />
+      )}
+
     </div>
   );
 }

src/components/MyWallet/WalletBox.jsx

@@ -9,11 +9,11 @@ import WalletItemCardVirtual from './walletvirtual/WalletItemCardVirtual'
 export default function WalletBox({ wallet, payment, countries }) {
   const { loading, data } = wallet;
 
+  // console.log('LOG', data[0]?.extra_actions?.SPEND_FROM_BALANCE[0])
+
   // const { userDetails } = useSelector((state) => state.userDetails);
   // const accountType = userDetails?.account_type === "FAMILY";
 
-  // console.log('mumu', data)
-
   return (
     <div className="my-wallet-wrapper w-full mb-10">
       <div className="main-wrapper w-full">

src/components/MyWallet/WalletExtraActionBtn.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+export default function WalletExtraActionBtn() {
+  return (
+    <>
+      {/* <button
+        onClick={() => {
+          walletItem?.code == 'NAIRA' ? setShowNairaWithdraw((prev) => ({ ...prev, show: true })) : openVirtualPopUp({walletItem})
+        }}
+        className={`${
+          walletItem?.code != "NAIRA" && ""
+        } logout-btn btn-gradient text-white`}
+      >
+        {walletItem?.code == 'NAIRA' ? walletItem?.extra_actions?.SPEND_FROM_BALANCE[0]?.text : walletItem?.extra_actions?.ADD_VIRTUAL_CARD[0]?.text}
+      </button> */}
+    </>
+  )
+}

src/components/MyWallet/WalletHeader.jsx

@@ -58,12 +58,27 @@ export default function WalletHeader(props) {
                   props.myWalletList.map((value, index) => 
                   {
                     let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
+
                     return(
                       <li
-                        key={index}
+                        key={value?.wallet_uid || index}
                         className="content-item py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
                         onClick={onWalletClick}
                       >
+                        {value?.brand && value?.card_last4 ? // FOR VIRTUAL CARD NUMBER ELSE WALLET BALANCE DISPLAY
+                        <div className="w-full">
+                          <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
+                            <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
+                              <img src={value.icon} className="w-14 h-14" alt="currency icon" />
+                            </div>
+                            <div className="name">
+                              <p className="text-2xl font-bold text-dark-gray dark:text-white">
+                                {value.brand} <span> **** **** ***** </span> {value?.card_last4}
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                        :
                         <div className="sm:flex justify-between items-center">
                           <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
                             <div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
@@ -81,6 +96,7 @@ export default function WalletHeader(props) {
                             </p>
                           </div>
                         </div>
+                        }
                       </li>
                     )
                   }

src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx

@@ -45,7 +45,7 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
 
   const { userDetails } = useSelector((state) => state.userDetails);
 
-  const countryCode = userDetails?.country
+  const countryCode = walletItem?.country
 
   const userApi = new usersService()
 

src/components/Resources/index.jsx

@@ -24,10 +24,12 @@ export default function Resources(props) {
   const ownProducts = products.datas;
   // Resource Props
   const __resources = props.MyResourceData;
+
   //debugger;
   // Collection Items
   const CreatedSell = __resources?.marketdata?.data;
-  const tab_categories = __resources?.tab_categories?.data;
+  // const tab_categories = __resources?.tab_categories?.data?.sort((a, b) => b.name.localeCompare(a.name)) // SORT REMOVED
+  const tab_categories = __resources?.tab_categories?.data
   const collectionProducts = __resources?.collectiondata?.data;
   const onSaleProducts = __resources?.marketdata?.data;
   const CreatedBits = __resources?.productdata?.datas;
@@ -77,23 +79,22 @@ export default function Resources(props) {
     }
   };
 
-  useEffect(() => {
-    getUploadedFiles();
-  }, [uploadsTable]);
-
   // const [tab, setTab] = useState(tab_categories ? tab_categories[0]?.name : "");
   const [tab, setTab] = useState(
     props.activeTab
       ? props.activeTab
-      : tab_categories
-      ? tab_categories[0]?.name
-      : ""
+      : "onsale"
   );
 
   const tabHandler = (value) => {
     setTab(value);
   };
 
+  useEffect(() => {
+    getUploadedFiles();
+  }, [uploadsTable]);
+
+
   // Category Components
   const tabComponents = {
     blog: <BlogTab blogdata={blogItems} />,

src/middleware/AuthRoute.jsx

@@ -211,6 +211,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     getMyJobList();
   }, [jobListTable, isLogin.status]);
 
+  //FUNCTION TO GET FULL USER WALLETS
   useEffect(() => {
     if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
       return
@@ -231,6 +232,8 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     getMyWalletList();
   }, [walletTable, isLogin.status]);
 
+
+  // FUNCTION TO GET MARKET JOB LIST
   useEffect(() => {
     if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
       return