From ec9d793d6b9feb4044b66558171d63b01259e4b7 Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Thu, 13 Jul 2023 18:07:05 +0100
Subject: [PATCH] .

---
 .../MarketPlace/PopUp/MarketPopUp.jsx         |  34 ++-
 src/components/MyWallet/AddFund.jsx           | 208 ++++++++++--------
 src/components/MyWallet/AddFundDollars.jsx    |   2 -
 src/components/MyWallet/ConfirmAddFund.jsx    |  45 ++--
 src/components/MyWallet/WalletBox.jsx         |  13 +-
 src/components/MyWallet/WalletItemCard.jsx    |  32 +--
 6 files changed, 170 insertions(+), 164 deletions(-)

diff --git a/src/components/MarketPlace/PopUp/MarketPopUp.jsx b/src/components/MarketPlace/PopUp/MarketPopUp.jsx
index d04912a..7871915 100644
--- a/src/components/MarketPlace/PopUp/MarketPopUp.jsx
+++ b/src/components/MarketPlace/PopUp/MarketPopUp.jsx
@@ -1,11 +1,18 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import ModalCom from "../../Helpers/ModalCom";
+import { useMemo, useState } from "react";
 import { toast } from "react-toastify";
 import usersService from "../../../services/UsersService";
-import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import ModalCom from "../../Helpers/ModalCom";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
+  const [textValue, setTextValue] = useState("");
+  const apiCall = useMemo(() => new usersService(), []);
+
+  const handleInputChange = ({ target: { value } }) => {
+    setTextValue(value);
+  };
+
   const MarketCalls = (details) => {
     const [marketMsg, setMarketMsg] = useState({
       loading: false,
@@ -24,8 +31,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
 
     const MarketDetail = async () => {
       try {
-        setMarketMsg({ loading: true });
         if (!textValue) return;
+        setMarketMsg({ loading: true });
 
         reqData.yourmessage = textValue;
 
@@ -87,22 +94,11 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
       }
     };
 
-    // useEffect(() => {
-    //   ManageInterest();
-    // }, []);
-
     return { MarketDetail, ManageInterest, manageInt, marketMsg };
   };
 
-  const [textValue, setTextValue] = useState("");
-
-  const handleInputChange = ({ target: { value } }) => {
-    setTextValue(value);
-  };
-
-  const apiCall = useMemo(() => new usersService(), []);
-
-  let { manageInt, ManageInterest, MarketDetail, marketMsg } = MarketCalls(details);
+  let { manageInt, ManageInterest, MarketDetail, marketMsg } =
+    MarketCalls(details);
 
   let thePrice = PriceFormatter(
     details?.price * 0.01,
@@ -270,9 +266,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   Interest: <b className="ml-1">{details.interest_count}</b>
                 </p>
                 <hr />
-                <p className="my-1">
-                  Expire: {details.expire}
-                </p>
+                <p className="my-1">Expire: {details.expire}</p>
               </div>
             </div>
             <button
diff --git a/src/components/MyWallet/AddFund.jsx b/src/components/MyWallet/AddFund.jsx
index cb5e464..f5b6bc7 100644
--- a/src/components/MyWallet/AddFund.jsx
+++ b/src/components/MyWallet/AddFund.jsx
@@ -1,48 +1,52 @@
-import React, {useState} from 'react'
-import RecentActivityTable from './WalletComponent/RecentActivityTable'
-import LoadingSpinner from '../Spinners/LoadingSpinner'
-import { useNavigate, useLocation } from 'react-router-dom'
-import InputCom from '../Helpers/Inputs/InputCom'
+import React, { useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import InputCom from "../Helpers/Inputs/InputCom";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import RecentActivityTable from "./WalletComponent/RecentActivityTable";
 
-import AddFundDollars from './AddFundDollars'
+import AddFundDollars from "./AddFundDollars";
 
-function AddFund({payment}) {
-   
-    const navigate = useNavigate()
-    const {currency} = useLocation()?.state //GETS THE USER CURRENCY FOR ADD FUND
+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('')
+  //STATE FOR CONTROLLED INPUT
+  let [input, setInput] = useState("");
 
-    let [inputError, setInputError] = useState('')
+  let [inputError, setInputError] = useState("");
 
-    // FUNCTION TO HANDLE INPUT CHANGE
-    const handleChange = ({target:{name, value}}) => {
-        setInput(value)
+  // FUNCTION TO HANDLE INPUT CHANGE
+  const handleChange = ({ target: { name, value } }) => {
+    setInput(value);
+  };
+
+  //FUNCTION TO HANDLE SUBMIT
+  const handleSubmit = () => {
+    setInputError("");
+    if (!input || input == "0") {
+      setInputError("Please Enter Amount");
+      return setTimeout(() => {
+        setInputError("");
+      }, 5000);
     }
 
-    //FUNCTION TO HANDLE SUBMIT
-    const handleSubmit = () => {
-        setInputError('')
-        if(!input || input == '0'){
-            setInputError('Please Enter Amount')
-            return setTimeout(()=>{setInputError('')}, 5000)
-        }
-
-        if(isNaN(input)){
-            setInputError('Amount must be a Number')
-            return setTimeout(()=>{setInputError('')}, 5000)
-        }
-
-        const stateData = {amount: Number(input), currency: 'naira'}
-        navigate('confirm-add-fund', {state: stateData})
-     
-        setInput('')
+    if (isNaN(input)) {
+      setInputError("Amount must be a Number");
+      return setTimeout(() => {
+        setInputError("");
+      }, 5000);
     }
-    return (
-        <div>
-            {/* heading */}
-            {/* <div className="sm:flex justify-between items-center mb-6">
+
+    const stateData = { amount: Number(input), currency: "naira" };
+    navigate("confirm-add-fund", { state: stateData });
+
+    setInput("");
+  };
+  
+  return (
+    <div>
+      {/* heading */}
+      {/* <div className="sm:flex justify-between items-center mb-6">
                 <div className="w-full flex justify-start space-x-3 items-center">
                     <button
                     type="button"
@@ -73,68 +77,78 @@ function AddFund({payment}) {
                 </div>
             </div> */}
 
-            <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="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'>Add Credit with Account Deposit</h2>*/}
-                        {/*<hr />*/}
-                        <form className='md:p-8 p-4 add-fund-info'>
-                            <div className="field w-full mb-6">
-                                <InputCom
-                                    fieldClass="px-6"
-                                    label={currency == 'US Dollars' ? "Amount (USD)" : "Amount (Naira)"}
-                                    type="text"
-                                    name="amount"
-                                    placeholder="0"
-                                    value={input}
-                                    inputHandler={handleChange}
-                                />
-                                {inputError && <p className='text-base text-red-500'>{inputError}</p>}
-                            </div>
-                        </form>
-                        <hr />
+      <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="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'>Add Credit with Account Deposit</h2>*/}
+            {/*<hr />*/}
+            <form className="md:p-8 p-4 add-fund-info">
+              <div className="field w-full mb-6">
+                <InputCom
+                  fieldClass="px-6"
+                  label={
+                    currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"
+                  }
+                  type="text"
+                  name="amount"
+                  placeholder="0"
+                  value={input}
+                  inputHandler={handleChange}
+                />
+                {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>
-                        }
+            {/* 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}
-                                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>
-                        }
-                    </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">
-                        <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>
-            }          
+            {/* 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}
+                  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>
+            )}
+          </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">
+              <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>
+      )}
+    </div>
+  );
 }
 
-export default AddFund
\ No newline at end of file
+export default AddFund;
diff --git a/src/components/MyWallet/AddFundDollars.jsx b/src/components/MyWallet/AddFundDollars.jsx
index 881f39d..6705d25 100644
--- a/src/components/MyWallet/AddFundDollars.jsx
+++ b/src/components/MyWallet/AddFundDollars.jsx
@@ -132,8 +132,6 @@ function AddFundDollars(props) {
       });
   }, []);
 
-  console.log(props)
-
   const handleClose = props.onClose
 
   return (
diff --git a/src/components/MyWallet/ConfirmAddFund.jsx b/src/components/MyWallet/ConfirmAddFund.jsx
index 7047b66..452a6e5 100644
--- a/src/components/MyWallet/ConfirmAddFund.jsx
+++ b/src/components/MyWallet/ConfirmAddFund.jsx
@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import InputCom from "../Helpers/Inputs/InputCom";
 
 import usersService from "../../services/UsersService";
 
@@ -113,14 +112,12 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
     </div>
   );
 
+  console.log(confirmCredit);
+
   return (
     <div className="content-wrapper w-full h-[32rem]">
       <div className="w-full mb-10">
         <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
-          {/* <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:p-8 py-4 add-fund-info">
             <div className="field w-full mb-3 min-h-[45px]">
               {confirmCredit?.show ? (
@@ -136,13 +133,12 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
                       }`}
                     </span>
                   </div>
-                  <div className="flex items-center gap-4">
-                    {/* <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"> */}
+                  <div className="flex items-center gap-8">
                     <label
                       htmlFor="payment"
                       className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
                     >
-                      {confirmCredit?.data?.currency && "Payment Method:"}
+                      {confirmCredit?.data?.currency && "Payment Method"}
                     </label>
                     <span className="text-[#181c32] dark:text-white ">
                       {__confirmCard ? (
@@ -150,24 +146,20 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
                       ) : null}
                     </span>
                   </div>
+                  <div className="flex items-center gap-12">
+                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      Reference No
+                    </h1>
+                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      {__confirmCard?.card_uid}
+                    </span>
+                  </div>
                 </div>
-              ) : (
-                <InputCom
-                  fieldClass="px-6"
-                  label={` Amount${confirmCredit?.data?.currency}`}
-                  type="text"
-                  name="amount"
-                  value={confirmCredit?.data?.amount || ""}
-                  disable={true}
-                />
-              )}
+              ) : null}
             </div>
           </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-[220px]"></div>
+          <div className="min-h-[180px]"></div>
           <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
             <button
               className="px-4 h-11 flex justify-center items-center border-gradient text-base rounded-full"
@@ -175,7 +167,14 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
             >
               Cancel
             </button>
-
+            {confirmCredit?.data?.currency == "US Dollars" && (
+              <button
+                className="px-4 h-11 flex justify-center items-center border-gradient text-base rounded-full"
+                onClick={() => console.log("Test me")}
+              >
+                Proceed
+              </button>
+            )}
             {confirmCredit?.data?.currency == "Naira" && (
               <FlutterWaveButton
                 {...fwConfig}
diff --git a/src/components/MyWallet/WalletBox.jsx b/src/components/MyWallet/WalletBox.jsx
index a77e37d..c2235ac 100644
--- a/src/components/MyWallet/WalletBox.jsx
+++ b/src/components/MyWallet/WalletBox.jsx
@@ -1,7 +1,3 @@
-import CurrencyStaticsSection from "./CurrencyStaticsSection";
-import CurrentBalanceWidget from "./CurrentBalanceWidget";
-import InvestmentSection from "./InvestmentSection";
-import RecentTransactionWidget from "./RecentTransactionWidget";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletItemCard from "./WalletItemCard";
 
@@ -10,18 +6,19 @@ export default function WalletBox({ wallet, coupon, payment }) {
     <>
       <div className="my-wallet-wrapper w-full mb-10">
         <div className="main-wrapper w-full">
-          <div className="balance-inquery w-full lg:flex lg:space-x-11 mb-11">
+          <div className="balance-inquery w-full lg:grid grid-cols-[repeat(auto-fill,_minmax(325px,_1fr))] gap-5 mb-11 h-[22rem]">
             {wallet.loading ? (
               <div className="w-full h-full flex items-center justify-center">
                 <LoadingSpinner size="16" color="sky-blue" />
               </div>
-            ) : wallet.data.length ? (
+            ) : (
+              wallet.data.length &&
               wallet.data.map((item, index) => (
-                <div className="lg:w-1/2 h-full mb-10 lg:mb-0">
+                <div className="lg:w-full h-full mb-10 lg:mb-0">
                   <WalletItemCard walletItem={item} payment={payment} />
                 </div>
               ))
-            ) : null}
+            )}
 
             {/*<div className="flex-1">*/}
             {/*    <CurrentBalanceWidget />*/}
diff --git a/src/components/MyWallet/WalletItemCard.jsx b/src/components/MyWallet/WalletItemCard.jsx
index f3c43a1..9bdd588 100644
--- a/src/components/MyWallet/WalletItemCard.jsx
+++ b/src/components/MyWallet/WalletItemCard.jsx
@@ -1,10 +1,9 @@
 import React, { useState } from "react";
-import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
-import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
-import CreditPopup from "./Popup/CreditPopup";
+import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
 import localImgLoad from "../../lib/localImgLoad";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+import CreditPopup from "./Popup/CreditPopup";
 import WalletAction from "./WalletAction";
 
 export default function WalletItemCard({ walletItem, payment }) {
@@ -29,9 +28,9 @@ export default function WalletItemCard({ walletItem, payment }) {
     setCreditPopup({ show: false, data: {} });
   };
 
-  console.log("walletItem >>", walletItem, payment);
-
-  let image = walletItem.code ? `${walletItem.code.toLocaleLowerCase()}.svg` : 'default.png' // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON
+  let image = walletItem.code
+    ? `${walletItem.code.toLocaleLowerCase()}.svg`
+    : "default.png"; // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON
 
   return (
     <>
@@ -43,7 +42,11 @@ export default function WalletItemCard({ walletItem, payment }) {
       >
         <div className="wallet xxs:flex justify-around items-start gap-3">
           <div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
-            <img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
+            <img
+              src={localImgLoad(`images/currency/${image}`)}
+              className="w-full h-full"
+              alt="curreny-icon"
+            />
           </div>
           <div className="balance w-full">
             <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
@@ -98,14 +101,15 @@ export default function WalletItemCard({ walletItem, payment }) {
         </div> */}
 
         {/* for white underline */}
-        <div className="my-2 w-full h-[1px] bg-white"></div> 
+        <div className="my-2 w-full h-[1px] bg-white"></div>
 
         {!accountType ? (
-          <WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
-        )
-        :
-        null
-      }
+          <WalletAction
+            walletItem={walletItem}
+            payment={payment}
+            openPopUp={openPopUp}
+          />
+        ) : null}
       </div>
       {creditPopup.show && (
         <CreditPopup