From d75b6ee26c07db6855563994eb9b90ab29dc74cf Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 17 Jul 2023 11:03:27 +0100
Subject: [PATCH 1/2] made withdrawal a pop up

---
 .../MyWallet/ConfirmNairaWithdraw.jsx         |  67 ++--
 src/components/MyWallet/NairaWithdraw.jsx     | 337 ------------------
 .../MyWallet/Popup/NairaWithdraw.jsx          | 322 +++++++++++++++++
 src/components/MyWallet/Wallet.jsx            | 112 ++----
 src/components/MyWallet/WalletAction.jsx      |  24 +-
 src/components/MyWallet/WalletBox.jsx         |   2 +-
 6 files changed, 396 insertions(+), 468 deletions(-)
 delete mode 100644 src/components/MyWallet/NairaWithdraw.jsx
 create mode 100644 src/components/MyWallet/Popup/NairaWithdraw.jsx

diff --git a/src/components/MyWallet/ConfirmNairaWithdraw.jsx b/src/components/MyWallet/ConfirmNairaWithdraw.jsx
index 30c8210..e7f8b9e 100644
--- a/src/components/MyWallet/ConfirmNairaWithdraw.jsx
+++ b/src/components/MyWallet/ConfirmNairaWithdraw.jsx
@@ -3,17 +3,15 @@ import { useLocation, 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 ModalCom from "../Helpers/ModalCom";
 
 import usersService from "../../services/UsersService";
 
-function ConfirmNairaWithdraw({ payment, wallet }) {
+function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) {
   const apiURL = new usersService();
 
   const navigate = useNavigate();
 
-  let { state } = useLocation();
-
   let [requestStatus, setRequestStatus] = useState({
     message: "",
     loading: false,
@@ -69,34 +67,16 @@ function ConfirmNairaWithdraw({ payment, wallet }) {
     }
   }, []);
   return (
-    <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="lg:w-1/2 w-full mb-10 lg:mb-0">
+    <ModalCom action={action} situation={situation}>
+      <div className="content-wrapper w-[90%] md:w-[600px]">
+        <div className="w-full">
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
             <div className="px-4 md:px-8 py-4">
-              {wallet.loading ? (
-                <LoadingSpinner size="8" color="sky-blue" />
-              ) : wallet.data.length ? (
-                <h2 className="my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium">
-                  {wallet.data.map((item) => {
-                    if (item.description == "Naira") {
-                      return `Withdraw from Naira Wallet : ${item.symbol}${(
-                        item.amount * 0.01
-                      ).toFixed(2)}`;
-                    }
-                  })}
-                </h2>
-              ) : wallet.error ? (
-                <h2 className="my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium">
-                  Opps! An Error Occured
-                </h2>
-              ) : (
-                <h2 className="my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium">
-                  No Wallet Information Found!
-                </h2>
-              )}
+              <h2 className="my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+                {`Withdraw from ${wallet.description} Wallet : ${wallet.symbol}${(
+                      wallet.amount * 0.01
+                    ).toFixed(2)}`}
+              </h2>
             </div>
             <hr />
             <div className="px-4 md:px-8 py-4 add-fund-info">
@@ -174,13 +154,20 @@ function ConfirmNairaWithdraw({ payment, wallet }) {
                 {requestStatus.message}
               </p>
             )}
-            <div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center">
+            <div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center gap-2">
+              <button
+                type="button"
+                onClick={action}
+                className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
+              >
+                <span className="text-gradient">Cancel</span>
+              </button>
               {requestStatus.loading ? (
                 <LoadingSpinner size="8" color="sky-blue" />
               ) : (
                 <button
                   onClick={handleSubmit}
-                  className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md"
+                  className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
                 >
                   Transfer
                 </button>
@@ -188,22 +175,8 @@ function ConfirmNairaWithdraw({ payment, wallet }) {
             </div>
           </div>
         </div>
-      )}
-
-      <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-        <div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto 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> */}
-          {payment.loading ? (
-            <LoadingSpinner size="16" color="sky-blue" />
-          ) : (
-            <RecentActivityTable payment={payment} />
-          )}
-        </div>
       </div>
-    </div>
+    </ModalCom>
   );
 }
 
diff --git a/src/components/MyWallet/NairaWithdraw.jsx b/src/components/MyWallet/NairaWithdraw.jsx
deleted file mode 100644
index b9b768c..0000000
--- a/src/components/MyWallet/NairaWithdraw.jsx
+++ /dev/null
@@ -1,337 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import InputCom from "../Helpers/Inputs/InputCom";
-import LoadingSpinner from "../Spinners/LoadingSpinner";
-import RecentActivityTable from "./WalletComponent/RecentActivityTable";
-
-import usersService from "../../services/UsersService";
-
-import { Form, Formik } from "formik";
-import * as Yup from "yup";
-
-const validationSchema = Yup.object().shape({
-  amount: Yup.number()
-    .typeError("you must specify a number")
-    .min(1, "Amount must be greater than 0")
-    .required("Amount is required"),
-  recipientID: Yup.string()
-    .min(1, "Minimum 1 characters")
-    .max(50, "Maximum 50 characters")
-    .required("Recipient is required"),
-});
-
-const initialValues = {
-  amount: "",
-  recipientID: "",
-  comment: "",
-};
-
-function NairaWithdraw({ payment, wallet }) {
-  const apiCall = new usersService(); // API CLASS CALL
-
-  const navigate = useNavigate();
-
-  let [requestStatus, setRequestStatus] = useState(false);
-
-  let [recipients, setRecipients] = useState({
-    // FOR COUPON HISTORY
-    loading: true,
-    data: [],
-    error: false,
-  });
-
-  let [sendMoneyFee, setSendMoneyFee] = useState({
-    loading: false,
-    fee: 0,
-    total: 0,
-  }); // HOLD THE VALUE FOR SEND MONEY FEE
-
-  //FUNCTION TO GET RECIPIENT LIST
-  const getRecipients = () => {
-    apiCall
-      .getRecipient()
-      .then((res) => {
-        if (res.data.internal_return < 0) {
-          // success but no data
-          setRecipients((prev) => ({ ...prev, loading: false }));
-          return;
-        }
-        setRecipients((prev) => ({
-          ...prev,
-          loading: false,
-          data: res.data.result_list,
-        }));
-      })
-      .catch((error) => {
-        setRecipients((prev) => ({ ...prev, loading: false, error: true }));
-      });
-  };
-
-  //FUNCTION TO GET SEND MONEY FEE
-  const getSendMoneyFee = ({ target: { value } }) => {
-    setSendMoneyFee({ loading: true, fee: 0, total: 0 });
-    let amount = value;
-    if (Number(amount) <= 0 || amount == "" || isNaN(amount)) {
-      setSendMoneyFee({ loading: false, fee: 0, total: 0 });
-      return;
-    }
-    apiCall
-      .getSendMoneyFee(Number(amount))
-      .then((res) => {
-        setSendMoneyFee({
-          loading: false,
-          fee: res.data.processing_fee,
-          total: res.data.total_amount,
-        });
-      })
-      .catch((error) => {
-        setSendMoneyFee({ loading: false, fee: 0, total: 0 });
-      });
-  };
-
-  //FUNCTION TO HANDLE SUBMIT
-  const handleSubmit = (values, helpers) => {
-    if(!values?.amount && !values.recipientID) return
-    setRequestStatus(true);
-    let recipientDetails = recipients.data?.filter(
-      (item) => item.recipient_id == values.recipientID
-    );
-    let stateData = {
-      ...values,
-      ...sendMoneyFee,
-      details: { ...recipientDetails[0] },
-    };
-
-    setTimeout(() => {
-      setRequestStatus(false);
-      navigate("confirm-withdraw-naira", { state: stateData });
-    }, 1000);
-  };
-
-  useEffect(() => {
-    getRecipients();
-  }, []);
-  
-  return (
-    <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-      <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-        <div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
-          <Formik
-            initialValues={initialValues}
-            validationSchema={validationSchema}
-            onSubmit={handleSubmit}
-          >
-            {(props) => {
-              return (
-                <Form className="transfer-fund-info">
-                  {wallet.loading ? (
-                    <LoadingSpinner size="8" color="sky-blue" />
-                  ) : wallet.data.length ? (
-                    <h2 className="my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
-                      {wallet.data.map((item) => {
-                        if (item.description == "Naira") {
-                          return `Withdraw from Naira Wallet : ${item.symbol}${(
-                            item.amount * 0.01
-                          ).toFixed(2)}`;
-                        }
-                      })}
-                    </h2>
-                  ) : wallet.error ? (
-                    <h2 className="my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
-                      Opps! An Error Occurred
-                    </h2>
-                  ) : (
-                    <h2 className="my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
-                      No Wallet Information Found!
-                    </h2>
-                  )}
-                  <div className=" mb-6 gap-4 flex flex-col">
-                    <div className="field w-full">
-                      <InputCom
-                        fieldClass="px-4"
-                        parentClass="flex items-center gap-1 justify-between"
-                        labelClass="flex-[0.2] mb-0"
-                        inputClass="flex-[0.8] max-w-[12rem]"
-                        label="Amount:"
-                        type="number"
-                        name="amount"
-                        placeholder="0"
-                        direction="rtl"
-                        value={props.values.amount}
-                        inputHandler={props.handleChange}
-                        blurHandler={(e) => {
-                          getSendMoneyFee(e);
-                        }}
-                        // props.handleBlur
-                        // onMouseLeave={(e)=>{getSendMoneyFee(e)}}
-                      />
-                      {props.errors.amount && props.touched.amount && (
-                        <p className="sm:text-sm text-[12px] text-red-500 sm:text-left text-right sm:translate-y-0 translate-y-1">
-                          {props.errors.amount}
-                        </p>
-                      )}
-                    </div>
-
-                    <div className="field w-full">
-                      <InputCom
-                        fieldClass="px-4 transfer-field"
-                        parentClass="flex items-center gap-1 justify-between"
-                        labelClass="flex-[0.2] mb-0"
-                        inputClass="flex-[0.8] transfer-field max-w-[12rem]"
-                        label="Fee:"
-                        type="text"
-                        name="fee"
-                        direction="rtl"
-                        value={
-                          sendMoneyFee.loading ? "loading" : sendMoneyFee.fee
-                        }
-                        disable={true}
-                      />
-                    </div>
-
-                    <div className="field w-full mb-6">
-                      <InputCom
-                        fieldClass="px-4 transfer-field"
-                        parentClass="flex items-center gap-1 justify-between"
-                        labelClass="flex-[0.2] mb-0"
-                        inputClass="flex-[0.8] transfer-field max-w-[12rem]"
-                        label="Total:"
-                        type="text"
-                        name="total"
-                        direction="rtl"
-                        value={
-                          sendMoneyFee.loading ? "loading" : sendMoneyFee.total
-                        }
-                        disable={true}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="w-full">
-                    <div className="relative my-3 md:flex items-center">
-                      <div className="transfer-input w-full flex items-start gap-1 justify-between">
-                        <label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3">
-                          Recipient:
-                        </label>
-                        <div className="flex flex-col gap-3 flex-[0.8] sm:items-start items-end">
-                          <select
-                            className="sm:w-full w-48 text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0 flex-[0.8]"
-                            value={props.values.recipientID}
-                            name="recipientID"
-                            onChange={props.handleChange}
-                            onBlur={props.handleBlur}
-                          >
-                            {recipients.loading ? (
-                              <option
-                                className="text-slate-500 text-lg"
-                                value=""
-                              >
-                                Loading...
-                              </option>
-                            ) : recipients.data.length ? (
-                              <>
-                                <option
-                                  className="text-slate-500 text-lg"
-                                  value=""
-                                >
-                                  Select...
-                                </option>
-                                {recipients.data.map((item, index) => (
-                                  <option
-                                    key={index}
-                                    value={item.recipient_id}
-                                    className="text-slate-500 text-lg"
-                                  >
-                                    {item.recipient}
-                                  </option>
-                                ))}
-                              </>
-                            ) : recipients.error ? (
-                              <option
-                                className="text-slate-500 text-lg"
-                                value=""
-                              >
-                                Could'nt load, try again!
-                              </option>
-                            ) : (
-                              <option
-                                className="text-slate-500 text-lg"
-                                value=""
-                              >
-                                No Recipient Found!
-                              </option>
-                            )}
-                          </select>
-                          <div className="flex justify-end relative w-full">
-                            {props.errors.recipientID &&
-                              props.touched.recipientID && (
-                                <p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]">
-                                  {props.errors.recipientID}
-                                </p>
-                              )}
-                            <Link
-                              to="add-recipient"
-                              className="mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80 max-w-[5rem]"
-                            >
-                              Add New
-                            </Link>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="field w-full mb-6 flex gap-1 justify-between">
-                    <label className="text-[#181c32] dark:text-white text-base font-semibold flex flex-[0.2] mt-2.5">
-                      Comment:
-                    </label>
-                    <textarea
-                      style={{ resize: "none" }}
-                      className="text-base px-4 py-2 rounded-md min-h-[100px] sm:max-w-[550px] max-w-[250px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F]  focus:ring-0 focus:outline-none flex-[0.8]"
-                      name="comment"
-                      value={props.values.comment}
-                      onChange={props.handleChange}
-                      onBlur={props.handleBlur}
-                      cols="30"
-                      rows="2"
-                    />
-                  </div>
-
-                  <div className="transfer-fund-btn flex justify-end items-center py-4">
-                    {requestStatus ? (
-                      <LoadingSpinner size="8" color="sky-blue" />
-                    ) : (
-                      <button
-                        type="submit"
-                        disabled={(props.isSubmitting || sendMoneyFee.loading) ? true : false}
-                        className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md"
-                      >
-                        Continue
-                      </button>
-                    )}
-                  </div>
-                </Form>
-              );
-            }}
-          </Formik>
-        </div>
-      </div>
-
-      <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 max-h-[650px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
-          <h2 className="text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
-            Recent Activity
-          </h2>
-          {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
-          {payment.loading ? (
-            <LoadingSpinner size="16" color="sky-blue" />
-          ) : (
-            <RecentActivityTable payment={payment} />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default NairaWithdraw;
diff --git a/src/components/MyWallet/Popup/NairaWithdraw.jsx b/src/components/MyWallet/Popup/NairaWithdraw.jsx
new file mode 100644
index 0000000..e4a5bd2
--- /dev/null
+++ b/src/components/MyWallet/Popup/NairaWithdraw.jsx
@@ -0,0 +1,322 @@
+import React, { useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import ModalCom from "../../Helpers/ModalCom";
+
+import usersService from "../../../services/UsersService";
+
+import { Form, Formik } from "formik";
+import * as Yup from "yup";
+
+const validationSchema = Yup.object().shape({
+  amount: Yup.number()
+    .typeError("you must specify a number")
+    .min(1, "Amount must be greater than 0")
+    .required("Amount is required"),
+  recipientID: Yup.string()
+    .min(1, "Minimum 1 characters")
+    .max(50, "Maximum 50 characters")
+    .required("Recipient is required"),
+});
+
+const initialValues = {
+  amount: "",
+  recipientID: "",
+  comment: "",
+};
+
+function NairaWithdraw({ wallet, action, situation, setShowConfirmNairaWithdraw }) {
+  const apiCall = new usersService(); // API CLASS CALL
+console.log('TESTING', wallet)
+  const navigate = useNavigate();
+
+  let [requestStatus, setRequestStatus] = useState(false);
+
+  let [recipients, setRecipients] = useState({
+    // FOR COUPON HISTORY
+    loading: true,
+    data: [],
+    error: false,
+  });
+
+  let [sendMoneyFee, setSendMoneyFee] = useState({
+    loading: false,
+    fee: 0,
+    total: 0,
+  }); // HOLD THE VALUE FOR SEND MONEY FEE
+
+  //FUNCTION TO GET RECIPIENT LIST
+  const getRecipients = () => {
+    apiCall
+      .getRecipient()
+      .then((res) => {
+        if (res.data.internal_return < 0) {
+          // success but no data
+          setRecipients((prev) => ({ ...prev, loading: false }));
+          return;
+        }
+        setRecipients((prev) => ({
+          ...prev,
+          loading: false,
+          data: res.data.result_list,
+        }));
+      })
+      .catch((error) => {
+        setRecipients((prev) => ({ ...prev, loading: false, error: true }));
+      });
+  };
+
+  //FUNCTION TO GET SEND MONEY FEE
+  const getSendMoneyFee = ({ target: { value } }) => {
+    setSendMoneyFee({ loading: true, fee: 0, total: 0 });
+    let amount = value;
+    if (Number(amount) <= 0 || amount == "" || isNaN(amount)) {
+      setSendMoneyFee({ loading: false, fee: 0, total: 0 });
+      return;
+    }
+    apiCall
+      .getSendMoneyFee(Number(amount))
+      .then((res) => {
+        setSendMoneyFee({
+          loading: false,
+          fee: res.data.processing_fee,
+          total: res.data.total_amount,
+        });
+      })
+      .catch((error) => {
+        setSendMoneyFee({ loading: false, fee: 0, total: 0 });
+      });
+  };
+
+  //FUNCTION TO HANDLE SUBMIT
+  const handleSubmit = (values, helpers) => {
+    if (!values?.amount && !values.recipientID) return;
+    setRequestStatus(true);
+    let recipientDetails = recipients.data?.filter(
+      (item) => item.recipient_id == values.recipientID
+    );
+    let stateData = {
+      ...values,
+      ...sendMoneyFee,
+      details: { ...recipientDetails[0] },
+    };
+
+    setTimeout(() => {
+      setRequestStatus(false);
+      // navigate("confirm-withdraw-naira", { state: stateData });
+      action()
+      setShowConfirmNairaWithdraw({show: true, state: stateData})
+    }, 1000);
+  };
+
+  useEffect(() => {
+    getRecipients();
+  }, []);
+
+  return (
+    <ModalCom action={action} situation={situation}>
+      <div className="content-wrapper w-[90%] md:w-[600px]">
+        <div className="w-full">
+          <div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
+            <Formik
+              initialValues={initialValues}
+              validationSchema={validationSchema}
+              onSubmit={handleSubmit}
+            >
+              {(props) => {
+                return (
+                  <Form className="transfer-fund-info">
+                    <h2 className="my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+                      {`Withdraw from ${wallet.description} Wallet : ${wallet.symbol}${(
+                            wallet.amount * 0.01
+                          ).toFixed(2)}`}
+                    </h2>
+                    <div className=" mb-6 gap-4 flex flex-col">
+                      <div className="field w-full">
+                        <InputCom
+                          fieldClass="px-4"
+                          parentClass="flex items-center gap-1 justify-between"
+                          labelClass="flex-[0.2] mb-0"
+                          inputClass="flex-[0.8] max-w-[12rem]"
+                          label="Amount:"
+                          type="number"
+                          name="amount"
+                          placeholder="0"
+                          direction="rtl"
+                          value={props.values.amount}
+                          inputHandler={props.handleChange}
+                          blurHandler={(e) => {
+                            getSendMoneyFee(e);
+                          }}
+                          // props.handleBlur
+                          // onMouseLeave={(e)=>{getSendMoneyFee(e)}}
+                        />
+                        {props.errors.amount && props.touched.amount && (
+                          <p className="sm:text-sm text-[12px] text-red-500 sm:text-left text-right sm:translate-y-0 translate-y-1">
+                            {props.errors.amount}
+                          </p>
+                        )}
+                      </div>
+
+                      <div className="field w-full">
+                        <InputCom
+                          fieldClass="px-4 transfer-field"
+                          parentClass="flex items-center gap-1 justify-between"
+                          labelClass="flex-[0.2] mb-0"
+                          inputClass="flex-[0.8] transfer-field max-w-[12rem]"
+                          label="Fee:"
+                          type="text"
+                          name="fee"
+                          direction="rtl"
+                          value={
+                            sendMoneyFee.loading ? "loading" : sendMoneyFee.fee
+                          }
+                          disable={true}
+                        />
+                      </div>
+
+                      <div className="field w-full mb-6">
+                        <InputCom
+                          fieldClass="px-4 transfer-field"
+                          parentClass="flex items-center gap-1 justify-between"
+                          labelClass="flex-[0.2] mb-0"
+                          inputClass="flex-[0.8] transfer-field max-w-[12rem]"
+                          label="Total:"
+                          type="text"
+                          name="total"
+                          direction="rtl"
+                          value={
+                            sendMoneyFee.loading ? "loading" : sendMoneyFee.total
+                          }
+                          disable={true}
+                        />
+                      </div>
+                    </div>
+
+                    <div className="w-full">
+                      <div className="relative my-3 md:flex items-center">
+                        <div className="transfer-input w-full flex items-start gap-1 justify-between">
+                          <label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3">
+                            Recipient:
+                          </label>
+                          <div className="flex flex-col gap-3 flex-[0.8] sm:items-start items-end">
+                            <select
+                              className="sm:w-full w-48 text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0 flex-[0.8]"
+                              value={props.values.recipientID}
+                              name="recipientID"
+                              onChange={props.handleChange}
+                              onBlur={props.handleBlur}
+                            >
+                              {recipients.loading ? (
+                                <option
+                                  className="text-slate-500 text-lg"
+                                  value=""
+                                >
+                                  Loading...
+                                </option>
+                              ) : recipients.data.length ? (
+                                <>
+                                  <option
+                                    className="text-slate-500 text-lg"
+                                    value=""
+                                  >
+                                    Select...
+                                  </option>
+                                  {recipients.data.map((item, index) => (
+                                    <option
+                                      key={index}
+                                      value={item.recipient_id}
+                                      className="text-slate-500 text-lg"
+                                    >
+                                      {item.recipient}
+                                    </option>
+                                  ))}
+                                </>
+                              ) : recipients.error ? (
+                                <option
+                                  className="text-slate-500 text-lg"
+                                  value=""
+                                >
+                                  Could'nt load, try again!
+                                </option>
+                              ) : (
+                                <option
+                                  className="text-slate-500 text-lg"
+                                  value=""
+                                >
+                                  No Recipient Found!
+                                </option>
+                              )}
+                            </select>
+                            <div className="flex justify-end relative w-full">
+                              {props.errors.recipientID &&
+                                props.touched.recipientID && (
+                                  <p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]">
+                                    {props.errors.recipientID}
+                                  </p>
+                                )}
+                              <Link
+                                to="add-recipient"
+                                className="mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80 max-w-[5rem]"
+                              >
+                                Add New
+                              </Link>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="field w-full mb-6 flex gap-1 justify-between">
+                      <label className="text-[#181c32] dark:text-white text-base font-semibold flex flex-[0.2] mt-2.5">
+                        Comment:
+                      </label>
+                      <textarea
+                        style={{ resize: "none" }}
+                        className="text-base px-4 py-2 rounded-md min-h-[100px] sm:max-w-[550px] max-w-[250px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F]  focus:ring-0 focus:outline-none flex-[0.8]"
+                        name="comment"
+                        value={props.values.comment}
+                        onChange={props.handleChange}
+                        onBlur={props.handleBlur}
+                        cols="30"
+                        rows="2"
+                      />
+                    </div>
+
+                    <div className="transfer-fund-btn flex justify-end items-center gap-2 py-4">
+                      <button
+                        type="button"
+                        onClick={action}
+                        className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
+                      >
+                        <span className="text-gradient">Cancel</span>
+                      </button>
+                      {requestStatus ? (
+                        <LoadingSpinner size="8" color="sky-blue" />
+                      ) : (
+                        <button
+                          type="submit"
+                          disabled={
+                            props.isSubmitting || sendMoneyFee.loading
+                              ? true
+                              : false
+                          }
+                          className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
+                        >
+                          Continue
+                        </button>
+                      )}
+                    </div>
+                  </Form>
+                );
+              }}
+            </Formik>
+          </div>
+        </div>
+      </div>
+    </ModalCom>
+  );
+}
+
+export default NairaWithdraw;
diff --git a/src/components/MyWallet/Wallet.jsx b/src/components/MyWallet/Wallet.jsx
index d6eb262..1c4c0cd 100644
--- a/src/components/MyWallet/Wallet.jsx
+++ b/src/components/MyWallet/Wallet.jsx
@@ -5,8 +5,9 @@ import React, {
   useEffect,
   useMemo,
   useReducer,
+  useState,
 } from "react";
-import { Routes, Route, Outlet, Navigate } from "react-router-dom";
+import { Navigate, Outlet, Route, Routes } from "react-router-dom";
 import usersService from "../../services/UsersService";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
@@ -15,18 +16,18 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
 // const ConfirmAddFund = lazy(() => import("./ConfirmAddFund"));
 // const TransferFund = lazy(() => import("./TransferFund"));
 const WalletBox = lazy(() => import("./WalletBox"));
-const NairaWithdraw = lazy(() => import("./NairaWithdraw"));
-const ConfirmNairaWithdraw = lazy(() => import("./ConfirmNairaWithdraw"));
+// const NairaWithdraw = lazy(() => import("./Popup/NairaWithdraw"));
+// const ConfirmNairaWithdraw = lazy(() => import("./ConfirmNairaWithdraw"));
 // const AddRecipient = lazy(() => import("./AddRecipient"));
 // const ConfirmTransfer = lazy(() => import("./ConfirmTransfer"));
 
-function Wallet() {
-  return (
-    <Layout>
-      <Outlet />
-    </Layout>
-  );
-}
+// function Wallet() {
+//   return (
+//     <Layout>
+//       <Outlet />
+//     </Layout>
+//   );
+// }
 
 const initialState = {
   loading: true,
@@ -55,99 +56,52 @@ const reducer = (state, action) => {
 };
 
 const WalletRoutes = () => {
-  const apiCall = useMemo(() => new usersService(), []);
+  const apiCall = new usersService();
 
-  const [walletList, dispatchWalletList] = useReducer(reducer, initialState);
-  const [paymentHistory, dispatchPaymentHistory] = useReducer(
-    reducer,
-    initialState
-  );
+  const [walletList, setWalletList] = useState({loading: true, data: []});
+  const [paymentHistory, setPaymentHistory] = useState({loading: true, data: []});
 
-  const getWalletList = useCallback(() => {
+  const getWalletList = () => {
     apiCall
-      .getUserWallets(null)
+      .getUserWallets()
       .then((res) => {
         if (res.data.internal_return < 0) {
-          dispatchWalletList({ type: "FETCH_SUCCESS", payload: [] });
+          setWalletList({loading: false, data: []})
         } else {
-          dispatchWalletList({
-            type: "FETCH_SUCCESS",
-            payload: res.data.result_list,
-          });
+          setWalletList({loading: false, data: res.data?.result_list})
         }
       })
       .catch(() => {
-        dispatchWalletList({ type: "FETCH_ERROR" });
+        setWalletList({loading: false, data: []})
       });
-  }, [apiCall]);
+  }
 
-  const getPaymentHistory = useCallback(() => {
+  const getPaymentHistory = () => {
     apiCall
       .getPaymentHx()
       .then((res) => {
         if (res.data.internal_return < 0) {
-          dispatchPaymentHistory({ type: "FETCH_SUCCESS", payload: [] });
+          setPaymentHistory({loading: false, data: []})
         } else {
-          dispatchPaymentHistory({
-            type: "FETCH_SUCCESS",
-            payload: res.data.result_list,
-          });
+          setPaymentHistory({loading: false, data: res.data?.result_list})
         }
       })
       .catch(() => {
-        dispatchPaymentHistory({ type: "FETCH_ERROR" });
+        setPaymentHistory({loading: false, data: []})
       });
-  }, [apiCall]);
+  }
 
   useEffect(() => {
-    let isMounted = true;
-
-    if (isMounted) {
-      getWalletList();
-      getPaymentHistory();
-    }
-
-    return () => {
-      isMounted = false;
-    };
-  }, [getWalletList, getPaymentHistory]);
+    getWalletList();
+    getPaymentHistory();
+  }, []);
 
   return (
-    <Routes>
-      <Route
-        element={
-          <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-            <Wallet />
-          </Suspense>
-        }
-      >
-        <Route
-          index
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <WalletBox wallet={walletList} payment={paymentHistory} />
-            </Suspense>
-          }
-        />
-        <Route
-          path="withdraw-naira"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <NairaWithdraw wallet={walletList} payment={paymentHistory} />
-            </Suspense>
-          }
-        />
-        <Route
-          path="withdraw-naira/confirm-withdraw-naira"
-          element={
-            <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
-              <ConfirmNairaWithdraw wallet={walletList} payment={paymentHistory} />
-            </Suspense>
-          }
-        />
-        <Route path="*" element={<Navigate to="/" />} />
-      </Route>
-    </Routes>
+    <Layout>
+      <Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
+        <WalletBox wallet={walletList} payment={paymentHistory} />
+      </Suspense>
+    </Layout>
   );
 };
 
diff --git a/src/components/MyWallet/WalletAction.jsx b/src/components/MyWallet/WalletAction.jsx
index c558499..d16b361 100644
--- a/src/components/MyWallet/WalletAction.jsx
+++ b/src/components/MyWallet/WalletAction.jsx
@@ -1,18 +1,25 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Link } from 'react-router-dom';
+import NairaWithdraw from './Popup/NairaWithdraw';
+import ConfirmNairaWithdraw from './ConfirmNairaWithdraw';
 
 function WalletAction({walletItem, payment, openPopUp}) {
+    const [showNairaWithdraw, setShowNairaWithdraw] = useState(false) // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP
+
+    const [showConfirmNairaWithdraw, setShowConfirmNairaWithdraw] = useState({show: false, state: {}}) // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP
+    
+
   return (
     <div className="counters w-full flex justify-between gap-2">
         <div className='w-1/2 flex justify-center items-center'>
-        <Link
-            to="withdraw-naira"
+        <button
+            onClick={()=>{setShowNairaWithdraw(true)}}
             className={`${
             walletItem.code != "NAIRA" && "invisible"
             } px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
         >
             Spend
-        </Link>
+        </button>
         </div>
         <div className='w-1/2 flex justify-center items-center'>
         <button
@@ -42,6 +49,15 @@ function WalletAction({walletItem, payment, openPopUp}) {
             <span className="">Add Credit</span>
         </button>
         </div>
+        
+        {showNairaWithdraw &&
+            <NairaWithdraw wallet={walletItem} action={()=>{setShowNairaWithdraw(prev => !prev)}} situation={showNairaWithdraw} setShowConfirmNairaWithdraw={setShowConfirmNairaWithdraw} />
+        }
+
+        {showConfirmNairaWithdraw.show &&
+            <ConfirmNairaWithdraw wallet={walletItem} state={showConfirmNairaWithdraw.state} action={()=>{setShowConfirmNairaWithdraw(prev => ({...prev, show: !prev.show}))}} situation={showConfirmNairaWithdraw.show} />
+        }
+
     </div>
   )
 }
diff --git a/src/components/MyWallet/WalletBox.jsx b/src/components/MyWallet/WalletBox.jsx
index 6651d67..dedd910 100644
--- a/src/components/MyWallet/WalletBox.jsx
+++ b/src/components/MyWallet/WalletBox.jsx
@@ -1,7 +1,7 @@
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletItemCard from "./WalletItemCard";
 
-export default function WalletBox({ wallet, coupon, payment }) {
+export default function WalletBox({ wallet, payment }) {
   return (
     <>
       <div className="my-wallet-wrapper w-full mb-10">

From 7bedf76945b2bb43ccd7ec7f142aad323543d04b Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 17 Jul 2023 11:07:11 +0100
Subject: [PATCH 2/2] made confirm withdrawal a pop up

---
 .../{ => Popup}/ConfirmNairaWithdraw.jsx      | 16 ++--
 src/components/MyWallet/WalletAction.jsx      | 83 ++++++++++++-------
 2 files changed, 59 insertions(+), 40 deletions(-)
 rename src/components/MyWallet/{ => Popup}/ConfirmNairaWithdraw.jsx (93%)

diff --git a/src/components/MyWallet/ConfirmNairaWithdraw.jsx b/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx
similarity index 93%
rename from src/components/MyWallet/ConfirmNairaWithdraw.jsx
rename to src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx
index e7f8b9e..28eba23 100644
--- a/src/components/MyWallet/ConfirmNairaWithdraw.jsx
+++ b/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
-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 ModalCom from "../Helpers/ModalCom";
+import InputCom from "../../Helpers/Inputs/InputCom";
+import ModalCom from "../../Helpers/ModalCom";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
-import usersService from "../../services/UsersService";
+import usersService from "../../../services/UsersService";
 
 function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) {
   const apiURL = new usersService();
@@ -73,9 +73,9 @@ function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) {
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
             <div className="px-4 md:px-8 py-4">
               <h2 className="my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
-                {`Withdraw from ${wallet.description} Wallet : ${wallet.symbol}${(
-                      wallet.amount * 0.01
-                    ).toFixed(2)}`}
+                {`Withdraw from ${wallet.description} Wallet : ${
+                  wallet.symbol
+                }${(wallet.amount * 0.01).toFixed(2)}`}
               </h2>
             </div>
             <hr />
diff --git a/src/components/MyWallet/WalletAction.jsx b/src/components/MyWallet/WalletAction.jsx
index d16b361..310367e 100644
--- a/src/components/MyWallet/WalletAction.jsx
+++ b/src/components/MyWallet/WalletAction.jsx
@@ -1,37 +1,40 @@
-import React, { useState } from 'react'
-import { Link } from 'react-router-dom';
-import NairaWithdraw from './Popup/NairaWithdraw';
-import ConfirmNairaWithdraw from './ConfirmNairaWithdraw';
+import React, { useState } from "react";
+import ConfirmNairaWithdraw from "./Popup/ConfirmNairaWithdraw";
+import NairaWithdraw from "./Popup/NairaWithdraw";
 
-function WalletAction({walletItem, payment, openPopUp}) {
-    const [showNairaWithdraw, setShowNairaWithdraw] = useState(false) // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP
+function WalletAction({ walletItem, payment, openPopUp }) {
+  const [showNairaWithdraw, setShowNairaWithdraw] = useState(false); // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP
 
-    const [showConfirmNairaWithdraw, setShowConfirmNairaWithdraw] = useState({show: false, state: {}}) // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP
-    
+  const [showConfirmNairaWithdraw, setShowConfirmNairaWithdraw] = useState({
+    show: false,
+    state: {},
+  }); // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP
 
   return (
     <div className="counters w-full flex justify-between gap-2">
-        <div className='w-1/2 flex justify-center items-center'>
+      <div className="w-1/2 flex justify-center items-center">
         <button
-            onClick={()=>{setShowNairaWithdraw(true)}}
-            className={`${
+          onClick={() => {
+            setShowNairaWithdraw(true);
+          }}
+          className={`${
             walletItem.code != "NAIRA" && "invisible"
-            } px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
+          } px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
         >
-            Spend
+          Spend
         </button>
-        </div>
-        <div className='w-1/2 flex justify-center items-center'>
+      </div>
+      <div className="w-1/2 flex justify-center items-center">
         <button
-            className='px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white'
-            onClick={() => {
+          className="px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+          onClick={() => {
             openPopUp({
-                payment: payment,
-                currency: walletItem?.description,
+              payment: payment,
+              currency: walletItem?.description,
             });
-            }}
+          }}
         >
-            {/* <span className="">
+          {/* <span className="">
             <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="38"
@@ -46,20 +49,36 @@ function WalletAction({walletItem, payment, openPopUp}) {
                 ></path>
             </svg>
             </span> */}
-            <span className="">Add Credit</span>
+          <span className="">Add Credit</span>
         </button>
-        </div>
-        
-        {showNairaWithdraw &&
-            <NairaWithdraw wallet={walletItem} action={()=>{setShowNairaWithdraw(prev => !prev)}} situation={showNairaWithdraw} setShowConfirmNairaWithdraw={setShowConfirmNairaWithdraw} />
-        }
+      </div>
 
-        {showConfirmNairaWithdraw.show &&
-            <ConfirmNairaWithdraw wallet={walletItem} state={showConfirmNairaWithdraw.state} action={()=>{setShowConfirmNairaWithdraw(prev => ({...prev, show: !prev.show}))}} situation={showConfirmNairaWithdraw.show} />
-        }
+      {showNairaWithdraw && (
+        <NairaWithdraw
+          wallet={walletItem}
+          action={() => {
+            setShowNairaWithdraw((prev) => !prev);
+          }}
+          situation={showNairaWithdraw}
+          setShowConfirmNairaWithdraw={setShowConfirmNairaWithdraw}
+        />
+      )}
 
+      {showConfirmNairaWithdraw.show && (
+        <ConfirmNairaWithdraw
+          wallet={walletItem}
+          state={showConfirmNairaWithdraw.state}
+          action={() => {
+            setShowConfirmNairaWithdraw((prev) => ({
+              ...prev,
+              show: !prev.show,
+            }));
+          }}
+          situation={showConfirmNairaWithdraw.show}
+        />
+      )}
     </div>
-  )
+  );
 }
 
-export default WalletAction
\ No newline at end of file
+export default WalletAction;