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] 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;
-- 
2.34.1