return to wallet added and add fund style fixed

src/Routers.jsx

@@ -89,7 +89,7 @@ export default function Routers() {
           <Route exact path="/notification" element={<Notification />} />
           <Route exact path="/mytask" element={<MyTaskPage />} />
           <Route exact path="/myjobs" element={<MyJobsPage />} />
-          {/* <Route exact path="/add-job" element={<AddJobPage />} /> */}
+          <Route exact path="/add-job" element={<AddJobPage />} />
           <Route exact path="/my-active-jobs"  element={<MyActiveJobsPage />} />
           <Route exact path="/my-pastdue-jobs"  element={<MyPastDueJobsPage />} />
           <Route exact path="/my-pending-jobs"  element={<MyPendingJobsPage />} />

src/components/AddJob/AddJob.jsx

@@ -106,7 +106,7 @@ function AddJob({ popUpHandler }) {
         });
         setTimeout(() => {
           dispatch(tableReload({ type: "JOBTABLE" }));
-          popUpHandler();
+          popUpHandler()
         }, 1000);
       })
       .catch((err) => {
@@ -141,7 +141,7 @@ function AddJob({ popUpHandler }) {
                 <div className="fields w-full">
                   {/* inputs starts here */}
                   {/* country */}
-                  <div className="xl:flex xl:space-x-7 mb-[5px]">
+                  <div className="xl:flex xl:space-x-7 mb-6">
                     <div className="field w-full mb-6 xl:mb-0">
                       <label
                         htmlFor="country"
@@ -187,13 +187,11 @@ function AddJob({ popUpHandler }) {
                           </option>
                         )}
                       </select>
-                      <div className={`${!props.errors && "invisible"} h-5`}>
+                      {props.errors.country && props.touched.country && (
-                        {props.errors.country && props.touched.country && (
+                        <p className="text-sm text-red-500">
-                          <p className="text-sm text-red-500">
+                          {props.errors.country}
-                            {props.errors.country}
+                        </p>
-                          </p>
+                      )}
-                        )}
-                      </div>
                     </div>
 
                     {/* Price */}
@@ -210,19 +208,17 @@ function AddJob({ popUpHandler }) {
                         inputHandler={props.handleChange}
                         blurHandler={props.handleBlur}
                       />
-                      <div className={`${!props.errors && "invisible"} h-5`}>
+                      {props.errors.price && props.touched.price && (
-                        {props.errors.price && props.touched.price && (
+                        <p className="text-sm text-red-500">
-                          <p className="text-sm text-red-500">
+                          {props.errors.price}
-                            {props.errors.price}
+                        </p>
-                          </p>
+                      )}
-                        )}
-                      </div>
                     </div>
                   </div>
 
                   {/* Title  */}
 
-                  <div className="field w-full mb-[5px]">
+                  <div className="field w-full mb-6">
                     <InputCom
                       fieldClass="px-6"
                       label="Title"
@@ -230,21 +226,20 @@ function AddJob({ popUpHandler }) {
                       inputBg="bg-slate-100"
                       type="text"
                       name="title"
+                      // placeholder="Enter Job Title"
                       value={props.values.title}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
                     />
-                    <div className={`${!props.errors && "invisible"} h-5`}>
+                    {props.errors.title && props.touched.title && (
-                      {props.errors.title && props.touched.title && (
+                      <p className="text-sm text-red-500">
-                        <p className="text-sm text-red-500">
+                        {props.errors.title}
-                          {props.errors.title}
+                      </p>
-                        </p>
+                    )}
-                      )}
-                    </div>
                   </div>
 
                   {/* Description  */}
-                  <div className="field w-full mb-[5px]">
+                  <div className="field w-full mb-6">
                     <InputCom
                       fieldClass="px-6"
                       label="Description"
@@ -252,22 +247,20 @@ function AddJob({ popUpHandler }) {
                       inputBg="bg-slate-100"
                       type="text"
                       name="description"
+                      // placeholder="Enter a description"
                       value={props.values.description}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
                     />
-                    <div className={`${!props.errors && "invisible"} h-5`}>
+                    {props.errors.description && props.touched.description && (
-                      {props.errors.description &&
+                      <p className="text-sm text-red-500">
-                        props.touched.description && (
+                        {props.errors.description}
-                          <p className="text-sm text-red-500">
+                      </p>
-                            {props.errors.description}
+                    )}
-                          </p>
-                        )}
-                    </div>
                   </div>
 
                   {/* Details */}
-                  <div className="field w-full mb-[5px]">
+                  <div className="field w-full mb-6">
                     <label
                       htmlFor="Job Delivery Details"
                       className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
@@ -284,16 +277,14 @@ function AddJob({ popUpHandler }) {
                       onChange={props.handleChange}
                       onBlur={props.handleBlur}
                     />
-                    <div className={`${!props.errors && "invisible"} h-5`}>
+                    {props.errors.job_detail && props.touched.job_detail && (
-                      {props.errors.job_detail && props.touched.job_detail && (
+                      <p className="text-sm text-red-500">
-                        <p className="text-sm text-red-500">
+                        {props.errors.job_detail}
-                          {props.errors.job_detail}
+                      </p>
-                        </p>
+                    )}
-                      )}
-                    </div>
                   </div>
 
-                  <div className="field w-full mb-[5px]">
+                  <div className="field w-full mb-6">
                     <div className={`flex items-center justify-between mb-2.5`}>
                       <label
                         className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
@@ -322,14 +313,12 @@ function AddJob({ popUpHandler }) {
                         </option>
                       ))}
                     </Field>
-                    <div className={`${!props.errors && "invisible"} h-5`}>
+                    {props.errors.timeline_days &&
-                      {props.errors.timeline_days &&
+                      props.touched.timeline_days && (
-                        props.touched.timeline_days && (
+                        <p className="text-sm text-red-500">
-                          <p className="text-sm text-red-500">
+                          {props.errors.timeline_days}
-                            {props.errors.timeline_days}
+                        </p>
-                          </p>
+                      )}
-                        )}
-                    </div>
                   </div>
                   {/* inputs ends here */}
                 </div>

src/components/Cards/AvailableJobsCard.jsx

@@ -1,8 +1,10 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate,  } from "react-router-dom";
+import { toast } from "react-toastify";
+import localImgLoad from "../../lib/localImgLoad";
+import Icons from "../Helpers/Icons";
 import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
 import usersService from "../../services/UsersService";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 export default function AvailableJobsCard({
   className,
@@ -10,43 +12,44 @@ export default function AvailableJobsCard({
   hidden = false,
 }) {
   //debugger;
+  const [addFavorite, setValue] = useState(datas.whishlisted);
   const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
-  const [manageInt, setManageInt] = useState(null);
+  const [manageInt, setManageInt] = useState(null)
-  const [imageUrl, setImageUrl] = useState("");
 
   const navigate = useNavigate();
   const apiCall = useMemo(() => new usersService(), []);
 
-  const marketInterestData = useCallback(async () => {
+
+  const favoriteHandler = () => {
+    if (!addFavorite) {
+      setValue(true);
+      toast.success("Added to Favorite List");
+    } else {
+      setValue(false);
+      toast.warn("Remove to Favorite List");
+    }
+  };
+
+  const marketInterestData = useCallback(async() => {
     let { offer_code } = datas;
     let reqData = { offer_code };
 
     try {
       const manageInt = await apiCall.MarketInterest(reqData);
       const manageIntRes = await manageInt?.data;
-      setManageInt(manageIntRes);
+      setManageInt(manageIntRes)
     } catch (error) {
-      throw new Error(error);
+      throw new Error(error)
     }
-  }, [apiCall, datas]);
 
-  let thePrice = PriceFormatter(  
+  }, [])
-    datas?.price * 0.01,
-    datas?.currency_code,
-    datas?.currency
-  );
 
   useEffect(() => {
     if (!datas) {
       navigate("/market", { replace: true });
     }
-    marketInterestData();
+    marketInterestData()
-  }, []);
+  }, [marketInterestData, datas])
-
-  useEffect(() => {
-    const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
-    setImageUrl(imagePath);
-  }, []);
   return (
     <>
       <div
@@ -84,9 +87,11 @@ export default function AvailableJobsCard({
           </div>
           <div className="thumbnail-area w-full">
             <div
-              className="w-full h-[236px] p-6  rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
+              className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
               style={{
-                backgroundImage: `url('${imageUrl}')`,
+                background: `url(${localImgLoad(
+                  `images/${datas.thumbnil}`
+                )}) 0% 0% / cover no-repeat`,
               }}
             >
               <div className="flex justify-center">{datas.description}</div>
@@ -119,14 +124,11 @@ export default function AvailableJobsCard({
               <div className="flex items-center space-x-2">
                 <div>
                   <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
-                    {/* {thePrice} | {datas.timeline_days} day(s) */}
+                    {datas.price * 0.01}
-                    {thePrice}
+                    {datas.currency} | {datas.timeline_days} day(s)
                   </p>
                   <p className="text-sm text-lighter-gray">
-                    ( {datas.offer_code}) |
+                    ( {datas.offer_code})
-                    <span className="italic ml-1">
-                      {datas.timeline_days} day(s) ago
-                    </span>
                   </p>
                 </div>
               </div>
@@ -135,7 +137,7 @@ export default function AvailableJobsCard({
                   type="button"
                   className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
                   onClick={() => {
-                    setMarketPopUp({ show: true, data: datas });
+                    setMarketPopUp({show: true, data: datas})
                   }}
                 >
                   View

src/components/Cards/HomeBannerOffersCard.jsx

@@ -9,6 +9,7 @@ export default function HomeBannerOffersCard(props) {
     let { banner, banner_location } = props?.itemData;
     if (banner_location === "LOCAL") {
       const imagePath = require(`../../assets/images/${banner}`); // Replace with your directory path for local images
+      console.log("This is local");
       setImageUrl(imagePath);
     } else if (banner_location === "URL") setImageUrl(banner);
     else return null;
@@ -29,6 +30,7 @@ export default function HomeBannerOffersCard(props) {
               <span className="heroSilderTitle">{props.itemData.title}</span>
             </h1>
           </div>
+          {/*<SelectBox datas={filterDatas} action={dataSetHandler} />*/}
         </div>
         <div className="h-[233px]">
           <div className="siderCardDescription">

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -51,16 +51,11 @@ export default function InputCom({
             htmlFor={name}
           >
             {label}
-            {spanTag && 
+            {spanTag && (
-              spanTag == '*' ?
-              <span className="text-red-700 text-sm tracking-wide">
-                {' '}{spanTag}
-              </span>
-              :
               <span className="text-green-700 text-sm tracking-wide">
                 {spanTag}
               </span>
-            }
+            )}
           </label>
         )}
         {forgotPassword && (

src/components/MarketPlace/MainSection.jsx

@@ -1,38 +1,26 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import DataIteration from "../Helpers/DataIteration";
 import AvailableJobsCard from "../Cards/AvailableJobsCard";
 
-export default function MainSection({
+export default function MainSection({ className, marketPlaceProduct }) {
-  className,
+  const [tab, setTab] = useState("all");
-  marketPlaceProduct,
+  const [products, setProducts] = useState(marketPlaceProduct);
-  categories,
-}) {
-  // Creating All cart..
-  let marketCategories = useMemo(
-    () => ({ All: "All", ...categories }),
-    [categories]
-  );
-  const [tab, setTab] = useState(marketCategories.All);
-
-  // Convert to array in order to map
-  const mappedArray = Object.entries(marketCategories).map(([key, value]) => {
-    return { key, value };
-  });
-
-  const [products, setProducts] = useState([]);
   const tabHandler = (value) => {
     setTab(value);
   };
   useEffect(() => {
-    if (tab === marketCategories.All) {
+    if (tab === "artist") {
-      setProducts(marketPlaceProduct);
+      setProducts(marketPlaceProduct?.slice(0, 3));
+    } else if (tab === "market") {
+      setProducts(marketPlaceProduct?.slice(0, 6));
+    } else if (tab === "shop") {
+      setProducts(marketPlaceProduct?.slice(6, 9));
+    } else if (tab === "assets") {
+      setProducts(marketPlaceProduct?.slice(3, 6));
     } else {
-      const filteredProducts = marketPlaceProduct.filter((product) =>
+      setProducts(marketPlaceProduct);
-        product.category.includes(tab)
-      );
-      setProducts(filteredProducts);
     }
-  }, [tab, marketPlaceProduct, categories, marketCategories]);
+  }, [tab, marketPlaceProduct]);
 
   return (
     <div className={`market-place-section w-full ${className || ""}`}>
@@ -40,20 +28,69 @@ export default function MainSection({
         <div className="filter-navigate-area lg:flex justify-between mb-8 items-center">
           <div className="tab-item lg:mb-0 mb-5">
             <div className="md:flex md:space-x-8 space-x-2">
-              {mappedArray.map(({ key, value }) => (
+              <span
-                <span
+                onClick={() => tabHandler("all")}
-                  onClick={() => tabHandler(key)}
+                className={`md:text-[18px] text-md  text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
-                  className={`md:text-[18px] text-md  text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
+                  tab === "all"
-                    tab === key
+                    ? "text-pink border-pink"
-                      ? "text-pink border-pink"
+                    : " border-transparent"
-                      : " border-transparent"
+                }`}
-                  }`}
+              >
-                >
+                All
-                  {value}
+              </span>
-                </span>
+
-              ))}
+
+              <span
+                onClick={() => tabHandler("artist")}
+                className={`md:text-[18px] text-md  text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
+                  tab === "artist"
+                    ? "text-pink border-pink"
+                    : " border-transparent"
+                }`}
+              >
+                Featured Artist
+              </span>
+              <span
+                onClick={() => tabHandler("market")}
+                className={`md:text-[18px] text-md  text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
+                  tab === "market"
+                    ? "text-pink border-pink"
+                    : " border-transparent"
+                }`}
+              >
+                Open Market
+              </span>
+              <span
+                onClick={() => tabHandler("shop")}
+                className={`md:text-[18px] text-md  text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
+                  tab === "shop"
+                    ? "text-pink border-pink"
+                    : " border-transparent"
+                }`}
+              >
+                Partner Shops
+              </span>
+              <span
+                onClick={() => tabHandler("assets")}
+                className={`md:text-[18px] text-md  text-dark-gray dark:text-white hover:text-pink border-b hover:border-pink font-medium cursor-pointer ${
+                  tab === "assets"
+                    ? "text-pink border-pink"
+                    : " border-transparent"
+                }`}
+              >
+                Game Assets
+              </span>
+
+
             </div>
           </div>
+
+          {/*<div className="search-item flex lg:flex-none justify-end">*/}
+          {/*  <SearchCom*/}
+          {/*    className="lg:bg-transparent"*/}
+          {/*    inputClasses="lg:bg-transparent"*/}
+          {/*  />*/}
+          {/*</div>*/}
         </div>
         <div className="filter-navigate-content w-full min-h-screen">
           <div className="grid lg:grid-cols-3 sm:grid-cols-2 gap-[30px]">

src/components/MarketPlace/index.jsx

@@ -1,23 +1,22 @@
+import React from "react";
+// import products from "../../data/marketplace_data.json";
+//import CreateNft from "../Home/CreateNft";
 import Layout from "../Partials/Layout";
 import MainSection from "./MainSection";
 import CommonHead from "../UserHeader/CommonHead";
 import { useSelector } from "react-redux";
 
-export default function MarketPlace({ commonHeadData }) {
+export default function MarketPlace({commonHeadData}) {
   let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;
-  const categories = jobLists?.categories;
 
+  // const marketProduct = products.data;
   return (
     <>
       <Layout>
-        <CommonHead commonHeadData={commonHeadData} />
+        <CommonHead  commonHeadData={commonHeadData} />
-        <MainSection
+        <MainSection marketPlaceProduct={marketData} className="mb-10" />
-          marketPlaceProduct={marketData}
-          categories={categories}
-          className="mb-10"
-        />
       </Layout>
     </>
   );
-}
+}

src/components/MyWallet/AddFund.jsx

@@ -1,18 +1,15 @@
 import React, {useState} from 'react'
 import RecentActivityTable from './WalletComponent/RecentActivityTable'
 import LoadingSpinner from '../Spinners/LoadingSpinner'
-import { useNavigate, useLocation } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import InputCom from '../Helpers/Inputs/InputCom'
 
-import AddFundDollars from './AddFundDollars'
-
 function AddFund({payment}) {
    
     const navigate = useNavigate()
-    const {currency} = useLocation()?.state //GETS THE USER CURRENCY FOR ADD FUND
 
     //STATE FOR CONTROLLED INPUT
-    let [input, setInput] = useState('')
+    let [input, setInput] = useState('0')
 
     let [inputError, setInputError] = useState('')
 
@@ -26,15 +23,15 @@ function AddFund({payment}) {
         setInputError('')
         if(!input || input == '0'){
             setInputError('Please Enter Amount')
-            return setTimeout(()=>{setInputError('')}, 5000)
+            return
         }
 
         if(isNaN(input)){
             setInputError('Amount must be a Number')
-            return setTimeout(()=>{setInputError('')}, 5000)
+            return
         }
 
-        const stateData = {amount: Number(input), currency: 'naira'}
+        const stateData = {amount: Number(input)}
         navigate('confirm-add-fund', {state: stateData})
      
         setInput('')
@@ -82,27 +79,18 @@ function AddFund({payment}) {
                             <div className="field w-full mb-6">
                                 <InputCom
                                     fieldClass="px-6"
-                                    label={currency == 'US Dollars' ? "Amount (USD)" : "Amount (Naira)"}
+                                    label="Amount(Naira)"
                                     type="text"
                                     name="amount"
-                                    placeholder="0"
+                                    placeholder="Amount"
                                     value={input}
                                     inputHandler={handleChange}
+                                    // blurHandler={props.handleBlur}
                                 />
                                 {inputError && <p className='text-base text-red-500'>{inputError}</p>}
                             </div>
                         </form>
                         <hr />
-
-                        {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
-                        {currency == 'US Dollars' &&
-                        <div className='w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow'>
-                            <AddFundDollars setInputError={setInputError} input={input} setInput={setInput} />
-                        </div>
-                        }
-
-                        {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
-                        {currency != 'US Dollars' &&
                         <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
                             <button
                                 onClick={handleSubmit}
@@ -112,13 +100,10 @@ function AddFund({payment}) {
                                 <span className="text-white">Continue</span>
                             </button>
                         </div>
-                        }
                     </div>
                 </div>
             </div>
 
-            {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
-            {currency != 'US Dollars' &&
             <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
                 <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
                     <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
@@ -132,7 +117,6 @@ function AddFund({payment}) {
                     </div>
                 </div>
             </div>
-            }          
         </div>
       )
 }

src/components/MyWallet/AddFundDollars.jsx

@@ -1,462 +0,0 @@
-import React,{useState} from 'react'
-import { useNavigate } from 'react-router-dom'
-import InputCom from '../Helpers/Inputs/InputCom';
-import PaginatedList from '../Pagination/PaginatedList';
-import { handlePagingFunc } from '../Pagination/HandlePagination';
-
-import { Form, Formik } from "formik";
-import * as Yup from "yup";
-
-const validationSchema = Yup.object().shape({
-    name: Yup.string()
-        .min(3, "Minimum 3 characters")
-        .max(50, "Maximum 50 characters")
-        .required("Name is required"),
-    cardNum: Yup.string()
-        .min(3, "Minimum 3 characters")
-        .max(25, "Maximum 25 characters")
-        .required("Card Number is required"),
-    code: Yup.string()
-        .min(3, "Minimum 3 characters")
-        .max(25, "Maximum 25 characters")
-        .required("Postal Code is required"),
-    state: Yup.string()
-        .min(3, "Minimum 3 characters")
-        .max(25, "Maximum 25 characters")
-        .required("State is required"),
-    address: Yup.string()
-        .min(3, "Minimum 3 characters")
-        .max(50, "Maximum 50 characters")
-        .required("Address is required"),
-    expirationYear: Yup.string()
-        .min(4, "Minimum 4 characters")
-        .max(4, "Maximum 4 characters")
-        .required("Expiration Year is required"),
-    expirationMonth: Yup.string()
-        .min(1, "Minimum 1 characters")
-        .max(2, "Maximum 2 characters")
-        .required("Expiration Month is required"),
-    cvv: Yup.string()
-        .min(3, "Minimum 3 characters")
-        .max(4, "Maximum 4 characters")
-        .required("CVV Year is required"),
-});
-
-const initialValues = {
-    name: '',
-    cardNum: '',
-    code: '',
-    state: '',
-    address: '',
-    expirationYear: '',
-    expirationMonth: '',
-    cvv: ''
-  };
-
-
-function AddFundDollars(props) {
-    const navigate = useNavigate()
-
-    let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
-
-    let [prevCardDetails, setPrevCardDetails] = useState(null) // STATE TO HOLD PREVIOUS CARD SELECTED
-
-    let previousCards = {data:[1,2]} //USER PREVIOUS CARDS // TO BE REPLACED LATER FROM DATA FROM API
-
-    const [currentPage, setCurrentPage] = useState(0);
-    const indexOfFirstItem = Number(currentPage);
-    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentPreviousCards = previousCards?.data?.slice(indexOfFirstItem, indexOfLastItem);
-  
-    const handlePagination = (e) => {
-      handlePagingFunc(e,setCurrentPage)
-    }
-
-    // FUNCTION TO SUBMIT
-    const handleSubmit = (values, helpers) => {
-        props.setInputError('')
-        if(!props.input || props.input == '0'){
-            props.setInputError('Please Enter Amount')
-            return setTimeout(()=>{props.setInputError('')}, 5000)
-        }
-
-        if(isNaN(props.input)){
-            props.setInputError('Amount must be a Number')
-            return setTimeout(()=>{props.setInputError('')}, 5000)
-        }
-        if(tab == 'previous'){
-            const stateData = {amount: Number(props.input), currency: 'dollars'}
-            navigate('confirm-add-fund', {state: stateData}) // State will change later dummy for now
-        }
-        if(tab == 'new'){
-            const stateData = {amount: Number(props.input), currency: 'dollars', ...values}
-            navigate('confirm-add-fund', {state: stateData}) // State will change later dummy for now
-        }
-        props.setInput('')
-    }
-
-  return (
-    <>
-        <h1 className='mb-2 text-xl font-bold text-dark-gray dark:text-white'>Payment Method</h1>
-        <div className="w-full">
-            {/* switch button */}
-            <div className="my-1 flex items-center border-b border-slate-300">
-                <button
-                name="previous"
-                onClick={(e) => setTab(e.target.name)}
-                className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
-                    tab == "previous" ? "border-sky-blue" : "border-slate-300"
-                } tracking-wide transition duration-200`}
-                >
-                Previous Cards
-                </button>
-                <button
-                name="new"
-                onClick={(e) => setTab(e.target.name)}
-                className={`p-2 text-lg font-bold text-slate-600 dark:text-white border ${
-                    tab == "new" ? "border-sky-blue" : "border-slate-300"
-                }  tracking-wide transition duration-200`}
-                >
-                Add New Card
-                </button>
-            </div>
-            {/* END OF switch button */}
-
-            {/* previous tab */}
-            {tab == 'previous' ?
-            <div className="p-4 previous-details w-full border min-h-[300px] flex flex-col justify-between items-center">
-            {previousCards?.data?.length ?
-                <table className="my-3 w-full">
-                    <tbody>
-                    {currentPreviousCards.map((item, index)=>(
-                        <tr key={index}>
-                            <td>
-                                <div className='flex items-center gap-5'>
-                                    <input type="radio" className='w-8 h-8' name='card' value='value' />
-                                    <div className='card-details'>
-                                        <h1 className='text-lg font-bold text-dark-gray dark:text-white tracking-wide'>Master Card</h1>
-                                        <p className='text-base font-bold text-dark-gray dark:text-white tracking-wide'>Bank **************3535</p>
-                                        <p className='text-sm font-bold text-green-700 dark:text-white tracking-wide'>Verified</p>
-                                    </div>
-                                </div>
-                            </td>
-                            <td>
-                                <button
-                                    // onClick={handleSubmit}
-                                    type="button"
-                                    className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                                >
-                                    <span className="text-white">Manage</span>
-                                </button>
-                            </td>
-                        </tr>
-                    )) 
-                    }
-                    </tbody>
-                </table>
-                :
-                <div className='w-full flex flex-col items-center'>
-                    <p className='my-5 text-base font-bold text-dark-gray dark:text-white tracking-wide'>No Previous Card Found!</p>
-                    <button
-                        onClick={()=> setTab('new')}
-                        type="button"
-                        className="my-5 px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                    >
-                        <span className="text-white">Add Card</span>
-                    </button>
-                </div>
-                }
-                {/* PAGINATION BUTTON */}
-                <div className='w-full'>
-                    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= previousCards?.data?.length ? true : false} data={previousCards?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
-                </div>
-                {/* END OF PAGINATION BUTTON */}
-            </div>
-            :
-            <div className="new-details w-full min-h-[300px] border-t">
-                <div className="w-full flex flex-col justify-between">
-                    <Formik
-                        initialValues={initialValues}
-                        validationSchema={validationSchema}
-                        onSubmit={handleSubmit}
-                    >
-                        {(props) => {
-                        return (
-                            <Form>
-                            <div className="flex flex-col-reverse sm:flex-row">
-                                <div className="flex-1 sm:mr-10">
-                                    <div className="fields w-full">
-                                        {/* inputs starts here */}
-                                        {/* Name */}
-                                        <div className="field w-full my-6">
-                                        <InputCom
-                                            fieldClass="px-6"
-                                            spanTag='*'
-                                            label="Name on Card"
-                                            type="text"
-                                            name="name"
-                                            placeholder="DUMMY NAME"
-                                            value={props.values.name}
-                                            inputHandler={props.handleChange}
-                                            blurHandler={props.handleBlur}
-                                        />
-                                        {props.errors.name && props.touched.name && (
-                                            <p className="text-sm text-red-500">
-                                            {props.errors.name}
-                                            </p>
-                                        )}
-                                        </div>
-
-                                        {/* CARD NUMBER */}
-                                        <div className="field w-full mb-6">
-                                        <InputCom
-                                            fieldClass="px-6"
-                                            spanTag='*'
-                                            iconName='wallet-two'
-                                            label="Card Number"
-                                            type="text"
-                                            name="cardNum"
-                                            placeholder="Enter Card Number"
-                                            value={props.values.cardNum}
-                                            inputHandler={props.handleChange}
-                                            blurHandler={props.handleBlur}
-                                        />
-                                        {props.errors.cardNum && props.touched.cardNum && (
-                                            <p className="text-sm text-red-500">
-                                            {props.errors.cardNum}
-                                            </p>
-                                        )}
-                                        </div>
-                                        {/* EXPIRE YEAR, YEAR AND CVV */}
-                                        <div className="sm:grid gap-5 grid-cols-3 mb-6">
-                                            <div className="field w-full mb-6 xl:mb-0 col-span-1">
-                                                <div className="select-option">
-                                                    <div className={`flex items-center justify-between mb-2.5`}>
-                                                        <label
-                                                            className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
-                                                            htmlFor='expiration'
-                                                        >Expiration Month <span className="text-red-700 text-sm tracking-wide">*</span></label>
-                                                    </div>
-                                                    <div
-                                                        className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
-                                                    >
-                                                        <select 
-                                                        className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#f5f8fa] focus:ring-0 focus:outline-none`}
-                                                        value={props.values.expirationMonth}
-                                                        onChange={props.handleChange}
-                                                        onBlur={props.handleBlur}
-                                                        name='expirationMonth'
-                                                        >
-                                                        <option value=''>Select...</option>
-                                                        {expireMonth?.length &&
-                                                            expireMonth.map((item, index) => (
-                                                            <option key={index} value={item.value}>{item.name}</option>
-                                                            ))
-                                                        }
-                                                        </select>
-                                                    </div>
-                                                </div>
-                                                {props.errors.expirationMonth && props.touched.expirationMonth && (
-                                                <p className="text-sm text-red-500">
-                                                    {props.errors.expirationMonth}
-                                                </p>
-                                                )}
-                                            </div>
-                                            <div className="field w-full mb-6 xl:mb-0 col-span-1">
-                                                <div className="select-option">
-                                                    <div className={`flex items-center justify-between mb-2.5`}>
-                                                        <label
-                                                            className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
-                                                            htmlFor='expiration'
-                                                        >Expiration Year <span className="text-red-700 text-sm tracking-wide">*</span>
-                                                        </label>
-                                                    </div>
-                                                    <div
-                                                        className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base`}
-                                                    >
-                                                        <select 
-                                                        className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide dark:bg-[#11131F] bg-[#f5f8fa] focus:ring-0 focus:outline-none`}
-                                                        value={props.values.expirationYear}
-                                                        onChange={props.handleChange}
-                                                        onBlur={props.handleBlur}
-                                                        name='expirationYear'
-                                                        >
-                                                        <option value=''>Select...</option>
-                                                        {expireYear?.length &&
-                                                            expireYear.map((item, index) => (
-                                                            <option key={index} value={item}>{item}</option>
-                                                            ))
-                                                        }
-                                                        </select>
-                                                    </div>
-                                                </div>
-                                                {props.errors.expirationYear && props.touched.expirationYear && (
-                                                <p className="text-sm text-red-500">
-                                                    {props.errors.expirationYear}
-                                                </p>
-                                                )}
-                                            </div>
-                                            <div className="field w-full col-span-1">
-                                                <InputCom
-                                                fieldClass="px-6"
-                                                spanTag='*'
-                                                iconName='wallet-two'
-                                                label="CVV"
-                                                type="text"
-                                                name="cvv"
-                                                placeholder="CVV"
-                                                value={props.values.cvv}
-                                                inputHandler={props.handleChange}
-                                                blurHandler={props.handleBlur}
-                                                />
-                                                {props.errors.cvv && props.touched.cvv && (
-                                                <p className="text-sm text-red-500">
-                                                    {props.errors.cvv}
-                                                </p>
-                                                )}
-                                            </div>
-                                        </div>
-                                        {/* Address */}
-                                        <div className="field w-full my-6">
-                                        <InputCom
-                                            fieldClass="px-6"
-                                            spanTag='*'
-                                            label="Billing Address"
-                                            type="text"
-                                            name="address"
-                                            placeholder="Billing Address"
-                                            value={props.values.Address}
-                                            inputHandler={props.handleChange}
-                                            blurHandler={props.handleBlur}
-                                        />
-                                        {props.errors.address && props.touched.address && (
-                                            <p className="text-sm text-red-500">
-                                            {props.errors.address}
-                                            </p>
-                                        )}
-                                        </div>
-                                        {/* postal code and state */}
-                                        <div className="sm:grid gap-5 grid-cols-3 mb-6">
-                                        <div className="field w-full mb-6 xl:mb-0 col-span-1">
-                                            <InputCom
-                                            fieldClass="px-6"
-                                            spanTag='*'
-                                            label="Postal Code"
-                                            type="text"
-                                            name="code"
-                                            placeholder="Postal Code"
-                                            value={props.values.code}
-                                            inputHandler={props.handleChange}
-                                            blurHandler={props.handleBlur}
-                                            />
-                                            {props.errors.code && props.touched.code && (
-                                            <p className="text-sm text-red-500">
-                                                {props.errors.code}
-                                            </p>
-                                            )}
-                                        </div>
-                                        <div className="field w-full col-span-1">
-                                            <InputCom
-                                            fieldClass="px-6"
-                                            spanTag='*'
-                                            label="State"
-                                            type="text"
-                                            name="state"
-                                            placeholder="State"
-                                            value={props.values.state}
-                                            inputHandler={props.handleChange}
-                                            blurHandler={props.handleBlur}
-                                            />
-                                            {props.errors.state && props.touched.state && (
-                                            <p className="text-sm text-red-500">
-                                                {props.errors.state}
-                                            </p>
-                                            )}
-                                        </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            {/* <div className="w-full">
-                                {requestStatus.message != "" && (
-                                <p
-                                    className={`text-center text-base ${
-                                    requestStatus.status ? "text-green-800" : "text-red-600"
-                                    }`}
-                                >
-                                    {requestStatus.message}
-                                </p>
-                                )}
-                                <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                                <div className="flex items-center space-x-4 mr-9">
-                                    <Link
-                                    to="/"
-                                    className="text-18 text-light-red tracking-wide "
-                                    >
-                                    <span className="border-b dark:border-[#5356fb29]  border-light-red">
-                                        {" "}
-                                        Cancel
-                                    </span>
-                                    </Link>
-
-                                    {requestStatus.loading ? (
-                                    <LoadingSpinner size="8" color="sky-blue" />
-                                    ) : (
-                                    <button
-                                        type="submit"
-                                        className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                                    >
-                                        Update Profile
-                                    </button>
-                                    )}
-                                </div>
-                                </div>
-                            </div> */}
-                             <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
-                                <button
-                                    type="submit"
-                                    className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                                >
-                                    <span className="text-white">Continue</span>
-                                </button>
-                            </div>
-                            </Form>
-                        );
-                        }}
-                    </Formik>
-                </div>
-            </div>
-            }
-        </div>
-        { tab == 'previous' &&
-        <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
-            <button
-                onClick={handleSubmit}
-                type="button"
-                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-            >
-                <span className="text-white">Continue</span>
-            </button>
-        </div>
-        }
-    </>
-  )
-}
-
-export default AddFundDollars
-
-
-// FORMS ARRAY OF EXPIRATION YEAR FOR CARD
-const expireYear = []
-let currentYear = new Date().getFullYear()
-for(let i=0; i<=6; i++){
-    expireYear.push(currentYear + i)
-}
-
-// FORMS ARRAY OF EXPIRATION MONTH FOR CARD
-let month = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-const expireMonth = []
-for(let i=0; i<month.length; i++){
-    expireMonth.push({name:month[i], value:i+1})
-}

src/components/MyWallet/Balance.jsx

@@ -55,7 +55,7 @@ function Balance({wallet, coupon}) {
                                         item.action_type != 'AC_AD_FD_ONLY' ?
                                             <Link to='transfer-fund' className='px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[48px] rounded-full relative  bg-purple lg:text-xl text-lg font-bold text-white'>Transfer</Link>:''
                                     }
-                                    <Link to='add-fund' state={{currency:item.description}} className='px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[48px] rounded-full relative  bg-green lg:text-xl text-lg font-bold text-white'>
+                                    <Link to='add-fund' className='px-2 py-1 flex items-center gap-2 user-balance cursor-pointer h-[48px] rounded-full relative  bg-green lg:text-xl text-lg font-bold text-white'>
                                         <span className="">
                                             <svg xmlns="http://www.w3.org/2000/svg" width="38"
                                                 height="38" viewBox="0 0 42 42" fill="none"><path

src/components/MyWallet/ConfirmAddFund.jsx

@@ -50,6 +50,7 @@ function ConfirmAddFund({ payment }) {
         toast.success("Account Topup was sucessful");
         setTimeout(() => {
           navigate("/my-wallet", { replace: true });
+          window.location.reload(true);
         }, 1000);
       })
       .catch((err) => {
@@ -101,11 +102,11 @@ function ConfirmAddFund({ payment }) {
   }, []);
 
   return (
-    <div className="content-wrapper w-full">
+    <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
       {pageLoading ? (
         <LoadingSpinner size="8" color="sky-blue" />
       ) : (
-        <div className="w-full mb-10">
+        <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
             <h2 className="md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
               Confirm Add Fund To Account
@@ -115,7 +116,7 @@ function ConfirmAddFund({ payment }) {
               <div className="field w-full mb-3">
                 <InputCom
                   fieldClass="px-6"
-                  label={state.currency == 'naira' ? "Amount (Naira):" : "Amount (Dollars):"}
+                  label="Amount (Naira):"
                   type="text"
                   name="amount"
                   value={state.amount || ""}
@@ -126,26 +127,16 @@ function ConfirmAddFund({ payment }) {
 
             <hr />
             <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
-              {
+              <FlutterWaveButton
-                state.currency == 'naira' ?
+                {...fwConfig}
-                <FlutterWaveButton
-                  {...fwConfig}
-                  className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                />
-              :
-              <button 
                 className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                onClick={()=>console.log('WORKING')}
+              />
-              >
-                Continue
-              </button>
-              }
             </div>
           </div>
         </div>
       )}
 
-      <div className="w-full mb-10">
+      <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
         <div className="wallet w-full  md:p-8 p-4 h-full min-h-[600px] bg-white dark:bg-dark-white rounded-2xl shadow">
           <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
             Recent Activity

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -1,24 +1,18 @@
 import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import CommonHead from "../UserHeader/CommonHead";
+import { useNavigate } from "react-router-dom";
 
-import usersService from "../../services/UsersService";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
+
 import OthersInterestedTable from "./OthersInterestedTable";
 
 export default function ManageInterestOffer(props) {
     const navigate = useNavigate()
-    const apiCall = new usersService()
-
-    let [redirectTime, setRedirectTime] = useState(5)
 
     let [tab, setTab] = useState("info"); //message STATE FOR SWITCHING BETWEEN TABS
 
-    let [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: '', processType: ''})
-
     const messageList = {data: [1,2,3,4,5,6]} // TO BE REMOVED AND REPLACE WITH REAL MESSAGE FROM API CALL
     const [currentPage, setCurrentPage] = useState(0);
     const indexOfFirstItem = Number(currentPage);
@@ -34,37 +28,6 @@ export default function ManageInterestOffer(props) {
         setValue(value);
     };
 
-    //FUNCTION TO ACCEPT/REJECT OFFER INTEREST
-    const interestOfferProcess = ({target:{name}}) => {
-        setRequestStatus(prev => ({...prev, loading: true, processType: name}))
-        let reqData = { // API PAYLOADS
-            proc: name.toUpperCase(),
-            client_uid : props.offerDetails?.client_uid,
-            offer_code : props.offerDetails?.offer_code,
-            offer_uid: props.offerDetails?.offer_uid,
-        }
-        apiCall.offersInterestProc(reqData).then(res => {
-            if(res.status != 200 || res.data.internal_return < 0){
-                setRequestStatus({loading: false, status: false, message: 'Unable to complete request', processType: ''})
-                return
-            }
-            let intervalTime = setInterval(() => {  // SETS REDIRECT COUNT DOWN
-                setRedirectTime(prev => prev - 1)
-            }, 1000);
-            setRequestStatus({loading: false, status: true, message: `Offer ${name}ed`, processType: ''})
-            setTimeout(()=>{
-                navigate('/offer-interest', {replace: true})
-                clearInterval(intervalTime)
-            },5000)
-        }).catch(err => {
-            setRequestStatus({loading: false, status: false, message: 'Opps! something went wrong. Try again', processType: ''})
-        }).finally(()=>{
-            setTimeout(()=>{
-                setRequestStatus({loading: false, status: false, message: '', processType: ''})
-            },5000)
-        })
-    }
-
     useEffect(()=>{
         // run API to get message to replace message array above, add reload variable as dependence array
     },[])
@@ -225,58 +188,19 @@ export default function ManageInterestOffer(props) {
 
                             {/* BUTTON section */}
                             <div className="p-4 w-full min-h-full bg-sky-100 dark:bg-dark-gray col-span-1">
-                                <div className="w-full h-full">
+                                <div className="w-full h-full flex flex-col justify-center items-center gap-10">
-                                    <div className="mt-0 sm:mt-10 flex sm:flex-col justify-center items-center gap-10">
+                                    <button
-                                        {requestStatus.loading && requestStatus.processType == 'accept' ?
+                                        type="button"
-                                            <LoadingSpinner color='sky-blue' size='10' />
+                                        className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                                        :    
+                                    >
-                                            <button
+                                        <span className="text-white">Accept</span>
-                                                type="button"
+                                    </button>
-                                                name='accept'
+                                    <button
-                                                disabled={requestStatus.loading}
+                                        type="button"
-                                                onClick={interestOfferProcess}
+                                        className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
-                                                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                    >
-                                            >
+                                        <span className="text-gradient">Reject</span>
-                                            Accept
+                                    </button>
-                                            </button>
-                                        }
-
-                                        {requestStatus.loading && requestStatus.processType == 'reject' ?
-                                            <LoadingSpinner color='sky-blue' size='10' />
-                                        :
-                                            <button
-                                                type="button"
-                                                name='reject'
-                                                disabled={requestStatus.loading}
-                                                onClick={interestOfferProcess}
-                                                className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-black"
-                                            >
-                                            Reject
-                                            </button>
-                                        }
-                                    </div>
-
-                                    {/* ERROR DISPLAY */}
-                                    <div className="w-full">
-                                    {/* error or success display */}
-                                    {requestStatus.message != "" && requestStatus.processType != 'sendmeassge' &&
-                                        (!requestStatus.status ? (
-                                        <div
-                                            className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                                        >
-                                            {requestStatus.message}
-                                        </div>
-                                        ) : (
-                                        requestStatus.status && (
-                                            <div
-                                            className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
-                                            >
-                                            {`${requestStatus.message} redirecting.... ${redirectTime}sec`}
-                                            </div>
-                                        )
-                                        ))}
-                                    </div>
-                                    {/* End of error or success display */}
                                 </div>
                             </div>
                             {/* END of BUTTON section */}

src/components/OffersInterest/OffersInterestTable.jsx

@@ -29,7 +29,7 @@ export default function OffersInterestTable({offerInterestList, className}) {
 
     return (
         <div
-            className={`update-table w-full my-8 p-8 bg-white dark:bg-dark-white rounded-2xl section-shadow min-h-[520px] ${
+            className={`update-table w-full p-8 bg-white dark:bg-dark-white rounded-2xl section-shadow min-h-[520px] ${
                 className || ""
             }`}
         >

src/services/UsersService.js

@@ -666,18 +666,6 @@ class usersService {
     return this.postAuxEnd("/offersinterestlist", postData);
   }
 
-    // END POINT FOR PROCESSING OFFER INTEREST
-    offersInterestProc(reqData) {
-      var postData = {
-        uid: localStorage.getItem("uid"),
-        member_id: localStorage.getItem("member_id"),
-        sessionid: localStorage.getItem("session_token"),
-        action: 13034,
-        ...reqData
-      };
-      return this.postAuxEnd("/offersinterestproc", postData);
-    }
-
    // END POINT FOR WORKER TO MARK TASK AS COMPLETED
    workerJobAction(reqData) {
     var postData = {