facebook redirect page

.env

@@ -42,8 +42,18 @@ REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
 REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
 REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
 
-REACT_APP_FACEBOOK_CLIENT_ID=390204307987009
-REACT_APP_FACEBOOK_CLIENT_SECRET=19f778e312f2ab96d147bacb612910c2
+#Real Account
+REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
+REACT_APP_FACEBOOK_CLIENT_SECRET2=19f778e312f2ab96d147bacb612910c2
+
+#developenet Account
+REACT_APP_FACEBOOK_CLIENT_ID=677857427521030
+REACT_APP_FACEBOOK_CLIENT_SECRET=4801375f22072d8a75f64483fdd89829
+
+#my Account
+REACT_APP_FACEBOOK_CLIENT_ID3=1598725580610908
+
+
 REACT_APP_FACEBOOK_CLIENT_SCOPE="email,public_profile"
 REACT_APP_FACEBOOK_REDIRECT_URL="http://localhost:9082/login/auth/flogin"
 

.env.production

@@ -40,6 +40,11 @@ REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
 REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
 REACT_APP_GOOGLE_REDIRECT_URL=https://users.wrenchboard.com/login/auth/
 
+REACT_APP_FACEBOOK_CLIENT_ID2=390204307987009
+REACT_APP_FACEBOOK_CLIENT_SECRET2=19f778e312f2ab96d147bacb612910c2
+REACT_APP_FACEBOOK_CLIENT_SCOPE="email,public_profile"
+REACT_APP_FACEBOOK_REDIRECT_URL="https://users.wrenchboard.com/login/auth/flogin"
+
 DISABLE_ESLINT_PLUGIN=true
 
 REACT_APP_MAX_FILE_SIZE=1000000

package.json

@@ -17,6 +17,7 @@
     "flutterwave-react-v3": "^1.3.0",
     "formik": "^2.2.9",
     "react": "^18.2.0",
+    "react-apple-login": "^1.1.6",
     "react-chartjs-2": "^4.1.0",
     "react-countup": "^6.2.0",
     "react-dom": "^18.2.0",

src/components/AuthPages/AuthRedirect/FbookRedirect.jsx

@@ -20,10 +20,6 @@ function FbookRedirect() {
         return
       }
       console.log(codeResponse);
-
-      setTimeout(()=>{ // remove LATER
-        navigate('/login', {state: {error: true}})
-      },2000)
       
       /*
       POST /token HTTP/1.1

src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx

@@ -1,148 +1,152 @@
-import { useState, useMemo, memo } from "react";
-import { handlePagingFunc, PaginatedList } from "../../Pagination";
-import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import { memo, useMemo, useState } from "react";
 import SuggestTask from "../../FamilyPopup/SuggestTask";
+import { PaginatedList, handlePagingFunc } from "../../Pagination";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
 
-const FamilyWaitlist = memo(({ familyData, className, accountDetails, loader }) => {
-  const [popUp, setPopUp] = useState({ show: false, data: {} });
-  const [continueTaskPopup, setContinueTaskPopup] = useState({
-    show: false,
-    data: {},
-  });
-  const filteredFamilyData = useMemo(
-    () =>
-      familyData?.result_list?.filter(
-        (data) => data?.family_uid === accountDetails?.family_uid
-      ),
-    [familyData, accountDetails]
-  );
+const FamilyWaitlist = memo(
+  ({ familyData, className, accountDetails, loader }) => {
+    const [popUp, setPopUp] = useState({ show: false, data: {} });
+    const [continueTaskPopup, setContinueTaskPopup] = useState({
+      show: false,
+      data: {},
+    });
+    const filteredFamilyData = useMemo(
+      () =>
+        familyData?.result_list?.filter(
+          (data) => data?.family_uid === accountDetails?.family_uid
+        ),
+      [familyData, accountDetails]
+    );
 
-  const [currentPage, setCurrentPage] = useState(0);
-  const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const indexOfFirstItem = currentPage;
-  const indexOfLastItem = currentPage + itemsPerPage;
-  const currentTask = useMemo(
-    () => filteredFamilyData?.slice(indexOfFirstItem, indexOfLastItem),
-    [filteredFamilyData, indexOfFirstItem, indexOfLastItem]
-  );
+    const [currentPage, setCurrentPage] = useState(0);
+    const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const indexOfFirstItem = currentPage;
+    const indexOfLastItem = currentPage + itemsPerPage;
+    const currentTask = useMemo(
+      () => filteredFamilyData?.slice(indexOfFirstItem, indexOfLastItem),
+      [filteredFamilyData, indexOfFirstItem, indexOfLastItem]
+    );
 
-  const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
+    const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
 
-  const openPopUp = (value) => {
-    setPopUp({ show: true, data: { ...value } });
-  };
+    const openPopUp = (value) => {
+      setPopUp({ show: true, data: { ...value } });
+    };
 
-  const closePopUp = () => {
-    setPopUp({ show: false, data: {} });
-  };
+    const closePopUp = () => {
+      setPopUp({ show: false, data: {} });
+    };
 
-  const openContinueTaskPopup = (value) => {
-    setContinueTaskPopup({ show: true, data: { ...value } });
-  };
+    const openContinueTaskPopup = (value) => {
+      setContinueTaskPopup({ show: true, data: { ...value } });
+    };
 
-  const closeContinueTaskPopup = () => {
-    setContinueTaskPopup({ show: false, data: {} });
-  };
+    const closeContinueTaskPopup = () => {
+      setContinueTaskPopup({ show: false, data: {} });
+    };
 
-  return (
-    <div
-      className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
-        className || ""
-      }`}
-    >
-      {loader ? (
-        <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
-          <LoadingSpinner size={16} color="sky-blue" />
-        </div>
-      ) : (
-        <>
-          {filteredFamilyData && (
-            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
-              <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-                <tbody>
-                  {currentTask.map((value) => {
-                    const addedDate = value?.added.split(" ")[0];
-                    const selectedImage = require(`../../../assets/images/family/${
-                      value?.banner || "default.jpg"
-                    }`);
-                    return (
-                      <tr
-                        className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
-                        key={value.uid}
-                      >
-                        <td className="py-4">
-                          <div className="w-full flex justify-between items-center">
-                            <div className="account-name flex space-x-4 items-center">
-                              <div className="icon w-14 h-14 flex justify-center items-center">
-                                <img
-                                  src={selectedImage}
-                                  alt="task_img"
-                                  className="w-full object-cover"
-                                />
+    return (
+      <div
+        className={`update-table w-full bg-white dark:bg-dark-white h-full lg:min-h-[450px] overflow-hidden rounded-2xl section-shadow ${
+          className || ""
+        }`}
+      >
+        {loader ? (
+          <div className="w-full h-full flex justify-center items-center lg:min-h-[470px]">
+            <LoadingSpinner size={16} color="sky-blue" />
+          </div>
+        ) : (
+          <>
+            {filteredFamilyData && (
+              <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
+                <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                  <tbody>
+                    {currentTask.map((value) => {
+                      const addedDate = value?.added.split(" ")[0];
+                      const selectedImage = require(`../../../assets/images/family/${
+                        value?.banner || "default.jpg"
+                      }`);
+                      return (
+                        <tr
+                          className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
+                          key={value.uid}
+                        >
+                          <td className="py-4">
+                            <div className="w-full flex justify-between items-center">
+                              <div className="account-name flex space-x-4 items-center">
+                                <div className="icon w-14 h-14 flex justify-center items-center">
+                                  <img
+                                    src={selectedImage}
+                                    alt="task_img"
+                                    className="w-full object-cover"
+                                  />
+                                </div>
+                                <div className="">
+                                  <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
+                                    {value.title}
+                                  </p>
+                                  <p className="text-sm text-thin-light-gray font-medium">
+                                    {value.description}
+                                  </p>
+                                </div>
                               </div>
-                              <div className="">
-                                <p className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
-                                  {value.title}
+                              <div className="px-2 flex flex-col items-center justify-center">
+                                <p className="text-sm font-bold text-dark-gray dark:text-white">
+                                  {addedDate}
                                 </p>
-                                <p className="text-sm text-thin-light-gray font-medium">
-                                  {value.description}
+                                <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
+                                  {value.status_text}
                                 </p>
                               </div>
                             </div>
-                            <div className="px-2 flex flex-col items-center justify-center">
-                              <p className="text-sm font-bold text-dark-gray dark:text-white">
-                                {addedDate}
-                              </p>
-                              <p className="text-xs py-1.5 w-[70px] cursor-default tracking-wide rounded-full bg-gold text-white flex justify-center items-center">
-                                {value.status_text}
-                              </p>
-                            </div>
-                          </div>
-                        </td>
-                        <td className="text-right py-4 px-2">
-                          <button
-                            onClick={() => openPopUp(value)}
-                            className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                          >
-                            View
-                          </button>
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-              <PaginatedList
-                onClick={handlePagination}
-                prev={currentPage === 0}
-                next={currentPage + itemsPerPage >= filteredFamilyData?.length}
-                data={filteredFamilyData}
-                start={indexOfFirstItem}
-                stop={indexOfLastItem}
-              />
-            </div>
-          )}
-        </>
-      )}
-      {popUp.show && (
-        <SuggestTask
-          details={popUp.data}
-          onClose={closePopUp}
-          continuePopupData={openContinueTaskPopup}
-          situation={popUp.show}
-        />
-      )}
+                          </td>
+                          <td className="text-right py-4 px-2">
+                            <button
+                              onClick={() => openPopUp(value)}
+                              className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                            >
+                              View
+                            </button>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+                <PaginatedList
+                  onClick={handlePagination}
+                  prev={currentPage === 0}
+                  next={
+                    currentPage + itemsPerPage >= filteredFamilyData?.length
+                  }
+                  data={filteredFamilyData}
+                  start={indexOfFirstItem}
+                  stop={indexOfLastItem}
+                />
+              </div>
+            )}
+          </>
+        )}
+        {popUp.show && (
+          <SuggestTask
+            details={popUp.data}
+            onClose={closePopUp}
+            continuePopupData={openContinueTaskPopup}
+            situation={popUp.show}
+          />
+        )}
 
-      {continueTaskPopup.show && (
-        <AssignTaskPopout
-          details={continueTaskPopup.data}
-          action={closeContinueTaskPopup}
-          situation={continueTaskPopup.show}
-        />
-      )}
-    </div>
-  );
-});
+        {continueTaskPopup.show && (
+          <AssignTaskPopout
+            details={continueTaskPopup.data}
+            action={closeContinueTaskPopup}
+            situation={continueTaskPopup.show}
+          />
+        )}
+      </div>
+    );
+  }
+);
 
 export default FamilyWaitlist;

src/components/MyWallet/AddFundDollars.jsx

@@ -59,6 +59,7 @@ function AddFundDollars(props) {
   let apiCall = new usersService();
 
   let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
+  const [loader, setLoader] = useState(false);
 
   let [prevCardDetails, setPrevCardDetails] = useState(null); // STATE TO HOLD PREVIOUS CARD SELECTED
 
@@ -94,18 +95,26 @@ function AddFundDollars(props) {
       }, 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
+      setLoader(true);
+      const stateData = {
+        amount: Number(props.input),
+        currency: props.currency,
+      };
+
+      setTimeout(() => {
+        props.setConfirmCredit({ show: true, data: stateData });
+        setLoader(false);
+      }, 1500);
+      // navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
     }
     if (tab == "new") {
       const stateData = {
         amount: Number(props.input),
-        currency: "dollars",
+        currency: props.currency,
         ...values,
       };
-      navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
+      // navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
     }
-    props.setInput("");
   };
 
   useEffect(() => {
@@ -169,7 +178,11 @@ function AddFundDollars(props) {
               <select className="my-3 w-full rounded-full p-4 outline-none border-none">
                 <option value="">Select a card</option>
                 {currentPreviousCards.map((item, index) => (
-                  <option key={index} className={index != 0 && "border-t-2"}>
+                  <option
+                    key={index}
+                    className={index != 0 && "border-t-2"}
+                    value={item}
+                  >
                     <div className="my-2 flex items-center gap-5">
                       {/* <input
                             type="radio"
@@ -518,13 +531,23 @@ function AddFundDollars(props) {
         )}
       </div>
       {tab == "previous" && (
-        <div className="md:py-8 px-[38px] add-fund-btn flex justify-end items-center py-4">
+        <div className="md:py-8 px-[38px] add-fund-btn flex justify-end items-center gap-4 py-4">
+          <button
+            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
+            onClick={props.onClose}
+          >
+            Cancel
+          </button>
           <button
             onClick={handleSubmit}
             type="button"
-            className="px-4 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
           >
-            <span className="text-white">Continue</span>
+            {loader ? (
+              <LoadingSpinner size="6" color="sky-blue" />
+            ) : (
+              <span className="text-white">Continue</span>
+            )}
           </button>
         </div>
       )}

src/components/MyWallet/AddFundPop.jsx

@@ -1,20 +1,16 @@
 import React, { useState } from "react";
-import RecentActivityTable from "./WalletComponent/RecentActivityTable";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
 import { useNavigate } from "react-router-dom";
 import InputCom from "../Helpers/Inputs/InputCom";
 
 import AddFundDollars from "./AddFundDollars";
 
-function AddFundPop({ _payment }) {
+function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
   const navigate = useNavigate();
   //   const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
 
   let { payment, currency } = _payment;
 
   //STATE FOR CONTROLLED INPUT
-  let [input, setInput] = useState("");
-
   let [inputError, setInputError] = useState("");
 
   // FUNCTION TO HANDLE INPUT CHANGE
@@ -23,7 +19,8 @@ function AddFundPop({ _payment }) {
   };
 
   //FUNCTION TO HANDLE SUBMIT
-  const handleSubmit = () => {
+  const handleSubmit = (e) => {
+    e.preventDefault()
     setInputError("");
     if (!input || input == "0") {
       setInputError("Please Enter Amount");
@@ -39,14 +36,22 @@ function AddFundPop({ _payment }) {
       }, 5000);
     }
 
-    const stateData = { amount: Number(input), currency: "naira" };
-    navigate("confirm-add-fund", { state: stateData });
+    if(input)   return;
+    // setTimeout(
+    //   () =>
+    //     setConfirmCredit({
+    //       show: true,
+    //       data: { amount: Number(input), currency: "naira" },
+    //     }),
+    //   1500
+    // );
 
-    setInput("");
+    // const stateData = { amount: Number(input), currency: "naira" };
+    // navigate("confirm-add-fund", { state: stateData });
+
+    // setInput("");
   };
 
-  console.log("walletItem details >>", payment, currency);
-
   return (
     <div className="h-[36rem] w-full">
       <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
@@ -84,13 +89,22 @@ function AddFundPop({ _payment }) {
                   setInputError={setInputError}
                   input={input}
                   setInput={setInput}
+                  currency={currency}
+                  onClose={onClose}
+                  setConfirmCredit={setConfirmCredit}
                 />
               </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">
+              <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
+                <button
+                  className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  onClick={onClose}
+                >
+                  Cancel
+                </button>
                 <button
                   onClick={handleSubmit}
                   type="button"

src/components/MyWallet/ConfirmAddFund.jsx

@@ -1,16 +1,14 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useSelector } from "react-redux";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import InputCom from "../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
-import RecentActivityTable from "./WalletComponent/RecentActivityTable";
 
 import usersService from "../../services/UsersService";
 
 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 
-function ConfirmAddFund({ payment }) {
+function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
   let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS
 
   let [pageLoading, setPageLoading] = useState(true);
@@ -24,12 +22,10 @@ function ConfirmAddFund({ payment }) {
   const apiURL = new usersService();
   const navigate = useNavigate();
 
-  let { state } = useLocation();
-
   //FUNCTION TO HANDLE SUBMIT
   const onSuccessPayment = () => {
     setRequestStatus({ message: "", loading: true, status: false });
-    let reqData = { amount: state?.account, currency: "NGN" };
+    let reqData = { amount: confirmCredit?.data?.account, currency: "NGN" };
     apiURL
       .startTopUp(reqData)
       .then((res) => {
@@ -66,7 +62,7 @@ function ConfirmAddFund({ payment }) {
   const config = {
     public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY,
     tx_ref: Date.now(),
-    amount: state?.amount,
+    amount: confirmCredit?.data?.amount,
     currency: "NGN",
     payment_options: "card,mobilemoney,ussd",
     customer: {
@@ -91,73 +87,115 @@ function ConfirmAddFund({ payment }) {
     onClose: () => {},
   };
 
-  useEffect(() => {
-    // what happens if not state redirect user
-    if (!state) {
-      navigate("/my-wallet/add-fund", { replace: true });
-    } else {
-      setPageLoading(false);
-    }
-  }, []);
+  // useEffect(() => {
+  //   // what happens if not data redirect user
+  //   if (!data) {
+  //     navigate("/my-wallet/add-fund", { replace: true });
+  //   } else {
+  //     setPageLoading(false);
+  //   }
+  // }, []);
+
+  console.log("data on confirm", confirmCredit);
 
   return (
-    <div className="content-wrapper w-full">
-      {pageLoading ? (
-        <LoadingSpinner size="8" color="sky-blue" />
-      ) : (
-        <div className="w-full mb-10">
-          <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">
+    <div className="content-wrapper w-full h-[36rem]">
+      <div className="w-full mb-10">
+        <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
             </h2>
-            <hr />
-            <div className="px-4 md:px-8 py-4 add-fund-info">
-              <div className="field w-full mb-3">
+            <hr /> */}
+          <div className="px-4 md:px-8 py-4 add-fund-info">
+            <div className="field w-full mb-3 min-h-[45px] flex items-center">
+              {confirmCredit?.show ? (
+                <div className="flex flex-col items-center gap-4">
+                  <div className="flex items-center gap-4">
+                    <label
+                      htmlFor="amount"
+                      className="input-label text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold flex items-center gap-1"
+                    >
+                      {confirmCredit?.data?.currency == "naira"
+                        ? "Amount (Naira):"
+                        : "Amount (Dollars):"}
+                    </label>
+                    <span className="text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold">
+                      {`${walletItem?.symbol} ${
+                        Number(confirmCredit?.data?.amount).toLocaleString() ||
+                        ""
+                      }`}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-4">
+                    <label
+                      htmlFor="payment"
+                      className="input-label text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold flex items-center gap-1"
+                    >
+                      {confirmCredit?.data?.currency && "Payment Method"}
+                    </label>
+                    <span className="text-[#181c32] dark:text-white text-xl leading-[20.9625px] font-semibold">
+                      Coming Soon...
+                    </span>
+                  </div>
+                </div>
+              ) : (
                 <InputCom
                   fieldClass="px-6"
-                  label={state.currency == 'naira' ? "Amount (Naira):" : "Amount (Dollars):"}
+                  label={
+                    confirmCredit?.data?.currency == "naira"
+                      ? "Amount (Naira):"
+                      : "Amount (Dollars):"
+                  }
                   type="text"
                   name="amount"
-                  value={state.amount || ""}
+                  value={confirmCredit?.data?.amount || ""}
                   disable={true}
                 />
-              </div>
+              )}
             </div>
-
-            <hr />
-            <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
-              {
-                state.currency == 'naira' ?
-                <FlutterWaveButton
-                  {...fwConfig}
-                  className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                />
-              :
-              <button 
+          </div>
+          {/* <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
+            {confirmCredit?.data?.currency && "Payment Method"}
+          </h1> */}
+          {/* <hr /> */}
+          <div className="min-h-[350px]"></div>
+          <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
+            <button
+              className="px-2 h-11 flex justify-center items-center border-gradient text-base rounded-full"
+              onClick={onClose}
+            >
+              Cancel
+            </button>
+            {confirmCredit?.data?.currency == "naira" ? (
+              <FlutterWaveButton
+                {...fwConfig}
                 className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                onClick={()=>console.log('WORKING')}
+              />
+            ) : (
+              <button
+                className="px-4 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>
 
-      <div className="w-full mb-10">
-        <div className="wallet w-full  md:p-8 p-4 h-full min-h-[600px] bg-white dark:bg-dark-white rounded-2xl shadow">
+      {/* <div className="w-full mb-10">
+        <div className="wallet w-full  md:p-8 p-4 h-full 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
           </h2>
-          {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
+          <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
           {payment.loading ? (
             <LoadingSpinner size="16" color="sky-blue" />
           ) : (
             <RecentActivityTable payment={payment} />
           )}
         </div>
-      </div>
+      </div> */}
     </div>
   );
 }

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -1,15 +1,11 @@
 import { useState } from "react";
 import { useLocation } from "react-router-dom";
-// import ModalCom from "../Helpers/ModalCom";
-import { Form, Formik } from "formik";
-import InputCom from "../../Helpers/Inputs/InputCom";
 import usersService from "../../../services/UsersService";
-import Icons from "../../Helpers/Icons";
-import AddFund from "../AddFund";
 import ModalCom from "../../Helpers/ModalCom";
 import AddFundPop from "../AddFundPop";
+import ConfirmAddFund from "../ConfirmAddFund";
 
-const CreditPopup = ({ details, onClose, situation }) => {
+const CreditPopup = ({ details, onClose, situation, walletItem }) => {
   const { pathname, state } = useLocation();
   const [submitTask, setSubmitTask] = useState({
     loading: false,
@@ -17,6 +13,24 @@ const CreditPopup = ({ details, onClose, situation }) => {
     state: "",
   });
   const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task");
+  let [input, setInput] = useState("");
+  const [confirmCredit, setConfirmCredit] = useState({
+    show: false,
+    data: {},
+  });
+
+  // const openConfirmCredit = (value) => {
+  //   setConfirmCredit({ show: true, data: { ...value } });
+  // };
+
+  // const closeConfirmCredit = () => {
+  //   setConfirmCredit({ show: false, data: {} });
+  // };
+  // const handleConfirmCredit = useMemo((input) => {
+  //   if (input) {
+  //     setConfirmCredit(true);
+  //   } else setConfirmCredit(false);
+  // }, []);
 
   const switchNextStep = ({ target: value }) => {
     setSuggestedNextStep(value);
@@ -33,6 +47,8 @@ const CreditPopup = ({ details, onClose, situation }) => {
     onClose();
   };
 
+  console.log("prop drills >> ", confirmCredit);
+
   return (
     <ModalCom
       action={onClose}
@@ -42,7 +58,7 @@ const CreditPopup = ({ details, onClose, situation }) => {
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-            Add Credit
+            {!confirmCredit.show ? "Add Credit" : "Confirm Credit Add"}
           </h1>
           <button
             type="button"
@@ -71,7 +87,22 @@ const CreditPopup = ({ details, onClose, situation }) => {
           </button>
         </div>
         <div className="logout-modal-body w-full flex flex-col items-center">
-          <AddFundPop _payment={details} />
+          {confirmCredit.show ? (
+            <ConfirmAddFund
+              confirmCredit={confirmCredit}
+              walletItem={walletItem}
+              onClose={onClose}
+            />
+          ) : (
+            <AddFundPop
+              _payment={details}
+              input={input}
+              setInput={setInput}
+              onClose={onClose}
+              confirmCredit={confirmCredit}
+              setConfirmCredit={setConfirmCredit}
+            />
+          )}
         </div>
       </div>
     </ModalCom>

src/components/MyWallet/Wallet.jsx

@@ -119,7 +119,7 @@ const WalletRoutes = () => {
           </Suspense>
         }
       >
-        <Route
+        {/* <Route
           path="add-fund"
           element={
             <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
@@ -134,7 +134,7 @@ const WalletRoutes = () => {
               <ConfirmAddFund payment={paymentHistory} />
             </Suspense>
           }
-        />
+        /> */}
         <Route
           path="transfer-fund"
           element={

src/components/MyWallet/WalletItemCard.jsx

@@ -125,6 +125,7 @@ export default function WalletItemCard({ walletItem, payment }) {
       {creditPopup.show && (
         <CreditPopup
           details={creditPopup.data}
+          walletItem={walletItem}
           onClose={closePopUp}
           situation={openPopUp}
         />