Convert ConfirmAddFund to Popup

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>