From 20ce9bf74916957bc7610442c1f44ce891198351 Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Thu, 13 Jul 2023 22:34:09 +0100
Subject: [PATCH 1/2] Consumed Start credit Api

---
 src/components/MyWallet/AddFundPop.jsx        | 105 +++++++++---------
 src/components/MyWallet/ConfirmAddFund.jsx    |  48 ++++----
 src/components/MyWallet/Popup/CreditPopup.jsx |  13 ---
 src/components/MyWallet/WalletBox.jsx         |   8 +-
 src/services/UsersService.js                  |  11 ++
 5 files changed, 93 insertions(+), 92 deletions(-)

diff --git a/src/components/MyWallet/AddFundPop.jsx b/src/components/MyWallet/AddFundPop.jsx
index a69202e..fda5714 100644
--- a/src/components/MyWallet/AddFundPop.jsx
+++ b/src/components/MyWallet/AddFundPop.jsx
@@ -1,54 +1,71 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import usersService from "../../services/UsersService";
+import Icons from "../Helpers/Icons";
 import InputCom from "../Helpers/Inputs/InputCom";
-
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 import AddFundDollars from "./AddFundDollars";
 
 function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
   const navigate = useNavigate();
-  //   const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
+  const apiCall = new usersService();
 
-  let { payment, currency } = _payment;
+  const { payment, currency } = _payment;
 
-  //STATE FOR CONTROLLED INPUT
-  let [inputError, setInputError] = useState("");
+  const [inputError, setInputError] = useState("");
+  const [loader, setLoader] = useState(false);
 
-  // FUNCTION TO HANDLE INPUT CHANGE
   const handleChange = ({ target: { name, value } }) => {
     setInput(value);
   };
 
-  //FUNCTION TO HANDLE SUBMIT
-  const handleSubmit = (e) => {
-    e.preventDefault();
+  const handleSubmit = async () => {
     setInputError("");
-    if (!input || input == "0") {
+    setLoader(true);
+
+    if (!input || input === "0") {
+      setLoader(false);
       setInputError("Please Enter Amount");
-      return setTimeout(() => {
-        setInputError("");
-      }, 5000);
+      setTimeout(() => setInputError(""), 5000);
+      return;
     }
 
     if (isNaN(input)) {
+      setLoader(false);
       setInputError("Amount must be a Number");
-      return setTimeout(() => {
-        setInputError("");
-      }, 5000);
+      setTimeout(() => setInputError(""), 5000);
+      return;
     }
 
-    const stateData = {
+    let stateData = {
       amount: Number(input),
-      currency: currency,
+      currency: currency.toUpperCase(),
     };
 
-    return setTimeout(
-      () =>
+    try {
+      const res = await apiCall.getStartCredit(stateData);
+      if (res.data.internal_return < 0) {
+        setLoader(false);
+        setInputError("An Error Occurred");
+        setTimeout(() => setInputError(""), 5000);
+        return;
+      }
+
+      const _response = res.data;
+      stateData.amount = Number(input);
+      stateData.currency = currency;
+      stateData = { ...stateData, ..._response };
+
+      setTimeout(() => {
+        setLoader(false);
         setConfirmCredit({
           show: true,
           data: stateData,
-        }),
-      1500
-    );
+        });
+      }, 1500);
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   return (
@@ -56,8 +73,6 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
       <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">
-            {/*<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:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
               <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                 Amount({currency})
@@ -77,8 +92,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
               </div>
             </form>
 
-            {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
-            {currency == "US Dollars" && (
+            {currency === "US Dollars" && (
               <div className="w-full md:px-8 md:pt-4 px-4 pt-2 bg-white dark:bg-dark-white rounded-2xl">
                 <AddFundDollars
                   setInputError={setInputError}
@@ -91,12 +105,12 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
               </div>
             )}
 
-            {currency != "US Dollars" && <div className="h-[18rem]"></div>}
-            {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
-            {currency != "US Dollars" && (
+            {currency !== "US Dollars" && <div className="h-[18rem]"></div>}
+
+            {currency !== "US Dollars" && (
               <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"
+                  className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                   onClick={onClose}
                 >
                   Cancel
@@ -104,33 +118,22 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
                 <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"
+                  className="px-4 py-1 h-11 flex justify-center space-x-1 items-center btn-gradient text-base rounded-full text-white max-w-[100px]"
                 >
-                  <span className="text-white">Continue</span>
+                  {loader ? (
+                    <LoadingSpinner size="6" color="sky-blue" />
+                  ) : (
+                    <>
+                      <span className="text-white">Continue</span>{" "}
+                      <Icons name="chevron-right" />
+                    </>
+                  )}
                 </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>
-        null}
     </div>
   );
 }
diff --git a/src/components/MyWallet/ConfirmAddFund.jsx b/src/components/MyWallet/ConfirmAddFund.jsx
index ba686b0..f764136 100644
--- a/src/components/MyWallet/ConfirmAddFund.jsx
+++ b/src/components/MyWallet/ConfirmAddFund.jsx
@@ -95,8 +95,9 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
   //   }
   // }, []);
 
-  const __confirmCard = confirmCredit?.data.card
-    ? JSON.parse(confirmCredit?.data.card)
+  const __confirmData = confirmCredit?.data;
+  const __confirmCardDetails = __confirmData.card
+    ? JSON.parse(__confirmData.card)
     : "";
 
   const ThePaymentText = ({ value }) => (
@@ -112,7 +113,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
     </div>
   );
 
-  console.log(confirmCredit);
+  // console.log(confirmCredit);
 
   return (
     <div className="content-wrapper w-full h-[32rem]">
@@ -124,34 +125,37 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
                 <div className="flex flex-col gap-4">
                   <div className="flex items-center gap-4">
                     <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      Amount({confirmCredit?.data?.currency})
+                      Amount({__confirmData?.currency})
                     </h1>
                     <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                       {`${walletItem?.symbol} ${
-                        Number(confirmCredit?.data?.amount).toLocaleString() ||
-                        ""
+                        Number(__confirmData?.amount).toLocaleString() || ""
                       }`}
                     </span>
                   </div>
-                  <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"}
-                    </label>
-                    <span className="text-[#181c32] dark:text-white ">
-                      {__confirmCard ? (
-                        <ThePaymentText value={__confirmCard} />
-                      ) : null}
-                    </span>
-                  </div>
+                  {__confirmData?.currency == "US Dollars" && (
+                    <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"
+                      >
+                        {__confirmData?.currency && "Payment Method"}
+                      </label>
+                      <span className="text-[#181c32] dark:text-white ">
+                        {__confirmCardDetails ? (
+                          <ThePaymentText value={__confirmCardDetails} />
+                        ) : null}
+                      </span>
+                    </div>
+                  )}
+
                   <div className="flex items-center gap-14">
                     <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}
+                      {__confirmCardDetails?.card_uid ||
+                        __confirmData?.credit_reference}
                     </span>
                   </div>
                 </div>
@@ -167,7 +171,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
             >
               Cancel
             </button>
-            {confirmCredit?.data?.currency == "US Dollars" && (
+            {__confirmData?.currency == "US Dollars" && (
               <button
                 className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full"
                 onClick={() => console.log("Test me")}
@@ -175,7 +179,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
                 Proceed
               </button>
             )}
-            {confirmCredit?.data?.currency == "Naira" && (
+            {__confirmData?.currency == "Naira" && (
               <FlutterWaveButton
                 {...fwConfig}
                 className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
diff --git a/src/components/MyWallet/Popup/CreditPopup.jsx b/src/components/MyWallet/Popup/CreditPopup.jsx
index 375321e..059887f 100644
--- a/src/components/MyWallet/Popup/CreditPopup.jsx
+++ b/src/components/MyWallet/Popup/CreditPopup.jsx
@@ -19,19 +19,6 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
     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);
   };
diff --git a/src/components/MyWallet/WalletBox.jsx b/src/components/MyWallet/WalletBox.jsx
index ab4bb25..6651d67 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,14 +6,14 @@ 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 flex flex-wrap gap-2 justify-center md:justify-start">
+          <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.map((item, index) => (
-                <div className="w-[350px] h-full">
+                <div className="lg:w-full h-full mb-10 lg:mb-0">
                   <WalletItemCard walletItem={item} payment={payment} />
                 </div>
               ))
diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index d27aca5..6cf6c54 100644
--- a/src/services/UsersService.js
+++ b/src/services/UsersService.js
@@ -216,6 +216,17 @@ class usersService {
     return this.postAuxEnd("/sendmoneyfee", postData);
   }
 
+  getStartCredit(value) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 11053,
+      ...value
+    };
+    return this.postAuxEnd("/startcredit", postData);
+  }
+
   getFamilySampleTasks() {
     var postData = {
       uid: localStorage.getItem("uid"),

From 4e2f120ab5936da958876dda7d7192661cdb5a93 Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Thu, 13 Jul 2023 23:12:29 +0100
Subject: [PATCH 2/2] Few changes

---
 src/components/MyWallet/AddFundDollars.jsx |  3 +-
 src/components/MyWallet/AddFundPop.jsx     |  2 +-
 src/components/MyWallet/ConfirmAddFund.jsx | 36 +++++++++++++---------
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/components/MyWallet/AddFundDollars.jsx b/src/components/MyWallet/AddFundDollars.jsx
index 6705d25..65343c6 100644
--- a/src/components/MyWallet/AddFundDollars.jsx
+++ b/src/components/MyWallet/AddFundDollars.jsx
@@ -103,6 +103,7 @@ function AddFundDollars(props) {
         amount: Number(props.input),
         currency: props.currency,
         card: prevCardDetails["payment-card"],
+        cardType: "prev",
       };
 
       return setTimeout(() => {
@@ -132,7 +133,7 @@ function AddFundDollars(props) {
       });
   }, []);
 
-  const handleClose = props.onClose
+  const handleClose = props.onClose;
 
   return (
     <>
diff --git a/src/components/MyWallet/AddFundPop.jsx b/src/components/MyWallet/AddFundPop.jsx
index fda5714..e8566f5 100644
--- a/src/components/MyWallet/AddFundPop.jsx
+++ b/src/components/MyWallet/AddFundPop.jsx
@@ -118,7 +118,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
                 <button
                   onClick={handleSubmit}
                   type="button"
-                  className="px-4 py-1 h-11 flex justify-center space-x-1 items-center btn-gradient text-base rounded-full text-white max-w-[100px]"
+                  className="px-4 py-1 h-11 flex justify-center space-x-1 items-center btn-gradient text-base rounded-full text-white max-w-[100px] w-full"
                 >
                   {loader ? (
                     <LoadingSpinner size="6" color="sky-blue" />
diff --git a/src/components/MyWallet/ConfirmAddFund.jsx b/src/components/MyWallet/ConfirmAddFund.jsx
index f764136..56ab033 100644
--- a/src/components/MyWallet/ConfirmAddFund.jsx
+++ b/src/components/MyWallet/ConfirmAddFund.jsx
@@ -8,6 +8,10 @@ import usersService from "../../services/UsersService";
 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 
 function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
+  const __confirmData = confirmCredit?.data;
+  const __confirmCardDetails = __confirmData.card
+    ? JSON.parse(__confirmData.card)
+    : "";
   let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS
 
   let [pageLoading, setPageLoading] = useState(true);
@@ -86,19 +90,11 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
     onClose: () => {},
   };
 
-  // useEffect(() => {
-  //   // what happens if not data redirect user
-  //   if (!data) {
-  //     navigate("/my-wallet/add-fund", { replace: true });
-  //   } else {
-  //     setPageLoading(false);
-  //   }
-  // }, []);
+  const handlePrevCard = () => {
+    console.log("Test me")
+  }
 
-  const __confirmData = confirmCredit?.data;
-  const __confirmCardDetails = __confirmData.card
-    ? JSON.parse(__confirmData.card)
-    : "";
+ 
 
   const ThePaymentText = ({ value }) => (
     <div className="my-2 flex items-center gap-5">
@@ -149,7 +145,13 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
                     </div>
                   )}
 
-                  <div className="flex items-center gap-14">
+                  <div
+                    className={`${
+                      __confirmData?.currency == "US Dollars"
+                        ? "gap-14"
+                        : "gap-6"
+                    } flex items-center`}
+                  >
                     <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                       Reference No
                     </h1>
@@ -163,7 +165,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
             </div>
           </div>
           {/* <hr /> */}
-          <div className="min-h-[160px]"></div>
+          <div className={__confirmData?.currency == "US Dollars" ? "min-h-[163px]":"min-h-[200px]"}></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"
@@ -174,7 +176,11 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
             {__confirmData?.currency == "US Dollars" && (
               <button
                 className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full"
-                onClick={() => console.log("Test me")}
+                onClick={
+                  __confirmData?.cardType === "prev"
+                    ? handlePrevCard
+                    : () => console.log("Test me")
+                }
               >
                 Proceed
               </button>