From e899e5eb2a0c85a69e6be8a02c385b083880134a Mon Sep 17 00:00:00 2001 From: Ebube Date: Tue, 11 Jul 2023 19:47:04 +0100 Subject: [PATCH] Convert ConfirmAddFund to Popup --- .../FamilyAcc/Tabs/FamilyWaitlist.jsx | 264 +++++++++--------- src/components/MyWallet/AddFundDollars.jsx | 41 ++- src/components/MyWallet/AddFundPop.jsx | 38 ++- src/components/MyWallet/ConfirmAddFund.jsx | 136 +++++---- src/components/MyWallet/Popup/CreditPopup.jsx | 47 +++- src/components/MyWallet/Wallet.jsx | 4 +- src/components/MyWallet/WalletItemCard.jsx | 1 + 7 files changed, 321 insertions(+), 210 deletions(-) diff --git a/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx b/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx index e146ba2..996654c 100644 --- a/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx +++ b/src/components/FamilyAcc/Tabs/FamilyWaitlist.jsx @@ -1,148 +1,152 @@ -import { useState, useMemo, memo } from "react"; -import { handlePagingFunc, PaginatedList } from "../../Pagination"; -import LoadingSpinner from "../../Spinners/LoadingSpinner"; +import { memo, useMemo, useState } from "react"; import SuggestTask from "../../FamilyPopup/SuggestTask"; +import { PaginatedList, handlePagingFunc } from "../../Pagination"; +import LoadingSpinner from "../../Spinners/LoadingSpinner"; import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout"; -const FamilyWaitlist = memo(({ familyData, className, accountDetails, loader }) => { - const [popUp, setPopUp] = useState({ show: false, data: {} }); - const [continueTaskPopup, setContinueTaskPopup] = useState({ - show: false, - data: {}, - }); - const filteredFamilyData = useMemo( - () => - familyData?.result_list?.filter( - (data) => data?.family_uid === accountDetails?.family_uid - ), - [familyData, accountDetails] - ); +const FamilyWaitlist = memo( + ({ familyData, className, accountDetails, loader }) => { + const [popUp, setPopUp] = useState({ show: false, data: {} }); + const [continueTaskPopup, setContinueTaskPopup] = useState({ + show: false, + data: {}, + }); + const filteredFamilyData = useMemo( + () => + familyData?.result_list?.filter( + (data) => data?.family_uid === accountDetails?.family_uid + ), + [familyData, accountDetails] + ); - const [currentPage, setCurrentPage] = useState(0); - const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE); - const indexOfFirstItem = currentPage; - const indexOfLastItem = currentPage + itemsPerPage; - const currentTask = useMemo( - () => filteredFamilyData?.slice(indexOfFirstItem, indexOfLastItem), - [filteredFamilyData, indexOfFirstItem, indexOfLastItem] - ); + const [currentPage, setCurrentPage] = useState(0); + const itemsPerPage = Number(process.env.REACT_APP_ITEM_PER_PAGE); + const indexOfFirstItem = currentPage; + const indexOfLastItem = currentPage + itemsPerPage; + const currentTask = useMemo( + () => filteredFamilyData?.slice(indexOfFirstItem, indexOfLastItem), + [filteredFamilyData, indexOfFirstItem, indexOfLastItem] + ); - const handlePagination = (e) => handlePagingFunc(e, setCurrentPage); + const handlePagination = (e) => handlePagingFunc(e, setCurrentPage); - const openPopUp = (value) => { - setPopUp({ show: true, data: { ...value } }); - }; + const openPopUp = (value) => { + setPopUp({ show: true, data: { ...value } }); + }; - const closePopUp = () => { - setPopUp({ show: false, data: {} }); - }; + const closePopUp = () => { + setPopUp({ show: false, data: {} }); + }; - const openContinueTaskPopup = (value) => { - setContinueTaskPopup({ show: true, data: { ...value } }); - }; + const openContinueTaskPopup = (value) => { + setContinueTaskPopup({ show: true, data: { ...value } }); + }; - const closeContinueTaskPopup = () => { - setContinueTaskPopup({ show: false, data: {} }); - }; + const closeContinueTaskPopup = () => { + setContinueTaskPopup({ show: false, data: {} }); + }; - return ( -
- {loader ? ( -
- -
- ) : ( - <> - {filteredFamilyData && ( -
- - - {currentTask.map((value) => { - const addedDate = value?.added.split(" ")[0]; - const selectedImage = require(`../../../assets/images/family/${ - value?.banner || "default.jpg" - }`); - return ( - - + + + ); + })} + +
-
-
-
- task_img + return ( +
+ {loader ? ( +
+ +
+ ) : ( + <> + {filteredFamilyData && ( +
+ + + {currentTask.map((value) => { + const addedDate = value?.added.split(" ")[0]; + const selectedImage = require(`../../../assets/images/family/${ + value?.banner || "default.jpg" + }`); + return ( + + - - - ); - })} - -
+
+
+
+ task_img +
+
+

+ {value.title} +

+

+ {value.description} +

+
-
-

- {value.title} +

+

+ {addedDate}

-

- {value.description} +

+ {value.status_text}

-
-

- {addedDate} -

-

- {value.status_text} -

-
-
- 		- -
- = filteredFamilyData?.length} - data={filteredFamilyData} - start={indexOfFirstItem} - stop={indexOfLastItem} - /> -
- )} - - )} - {popUp.show && ( - - )} +
+ +
+ = filteredFamilyData?.length + } + data={filteredFamilyData} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> +
+ )} + + )} + {popUp.show && ( + + )} - {continueTaskPopup.show && ( - - )} -
- ); -}); + {continueTaskPopup.show && ( + + )} + + ); + } +); export default FamilyWaitlist; diff --git a/src/components/MyWallet/AddFundDollars.jsx b/src/components/MyWallet/AddFundDollars.jsx index b463d8a..9033972 100644 --- a/src/components/MyWallet/AddFundDollars.jsx +++ b/src/components/MyWallet/AddFundDollars.jsx @@ -59,6 +59,7 @@ function AddFundDollars(props) { let apiCall = new usersService(); let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS + const [loader, setLoader] = useState(false); let [prevCardDetails, setPrevCardDetails] = useState(null); // STATE TO HOLD PREVIOUS CARD SELECTED @@ -94,18 +95,26 @@ function AddFundDollars(props) { }, 5000); } if (tab == "previous") { - const stateData = { amount: Number(props.input), currency: "dollars" }; - navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now + setLoader(true); + const stateData = { + amount: Number(props.input), + currency: props.currency, + }; + + setTimeout(() => { + props.setConfirmCredit({ show: true, data: stateData }); + setLoader(false); + }, 1500); + // navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now } if (tab == "new") { const stateData = { amount: Number(props.input), - currency: "dollars", + currency: props.currency, ...values, }; - navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now + // navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now } - props.setInput(""); }; useEffect(() => { @@ -169,7 +178,11 @@ function AddFundDollars(props) { {tab == "previous" && ( -
+
+
)} diff --git a/src/components/MyWallet/AddFundPop.jsx b/src/components/MyWallet/AddFundPop.jsx index 174feb3..fa257a5 100644 --- a/src/components/MyWallet/AddFundPop.jsx +++ b/src/components/MyWallet/AddFundPop.jsx @@ -1,20 +1,16 @@ import React, { useState } from "react"; -import RecentActivityTable from "./WalletComponent/RecentActivityTable"; -import LoadingSpinner from "../Spinners/LoadingSpinner"; import { useNavigate } from "react-router-dom"; import InputCom from "../Helpers/Inputs/InputCom"; import AddFundDollars from "./AddFundDollars"; -function AddFundPop({ _payment }) { +function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) { const navigate = useNavigate(); // const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND let { payment, currency } = _payment; //STATE FOR CONTROLLED INPUT - let [input, setInput] = useState(""); - let [inputError, setInputError] = useState(""); // FUNCTION TO HANDLE INPUT CHANGE @@ -23,7 +19,8 @@ function AddFundPop({ _payment }) { }; //FUNCTION TO HANDLE SUBMIT - const handleSubmit = () => { + const handleSubmit = (e) => { + e.preventDefault() setInputError(""); if (!input || input == "0") { setInputError("Please Enter Amount"); @@ -39,14 +36,22 @@ function AddFundPop({ _payment }) { }, 5000); } - const stateData = { amount: Number(input), currency: "naira" }; - navigate("confirm-add-fund", { state: stateData }); + if(input) return; + // setTimeout( + // () => + // setConfirmCredit({ + // show: true, + // data: { amount: Number(input), currency: "naira" }, + // }), + // 1500 + // ); - setInput(""); + // const stateData = { amount: Number(input), currency: "naira" }; + // navigate("confirm-add-fund", { state: stateData }); + + // setInput(""); }; - console.log("walletItem details >>", payment, currency); - return (
@@ -84,13 +89,22 @@ function AddFundPop({ _payment }) { setInputError={setInputError} input={input} setInput={setInput} + currency={currency} + onClose={onClose} + setConfirmCredit={setConfirmCredit} />
)} {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */} {currency != "US Dollars" && ( -
+
+ + {confirmCredit?.data?.currency == "naira" ? ( + console.log('WORKING')} + /> + ) : ( + - } -
+ )}
- )} +
-
-
+ {/*
+

Recent Activity

- {/*

Activity Report

*/} +

Activity Report

{payment.loading ? ( ) : ( )}
-
+
*/}
); } diff --git a/src/components/MyWallet/Popup/CreditPopup.jsx b/src/components/MyWallet/Popup/CreditPopup.jsx index e846ff5..e62bc93 100644 --- a/src/components/MyWallet/Popup/CreditPopup.jsx +++ b/src/components/MyWallet/Popup/CreditPopup.jsx @@ -1,15 +1,11 @@ import { useState } from "react"; import { useLocation } from "react-router-dom"; -// import ModalCom from "../Helpers/ModalCom"; -import { Form, Formik } from "formik"; -import InputCom from "../../Helpers/Inputs/InputCom"; import usersService from "../../../services/UsersService"; -import Icons from "../../Helpers/Icons"; -import AddFund from "../AddFund"; import ModalCom from "../../Helpers/ModalCom"; import AddFundPop from "../AddFundPop"; +import ConfirmAddFund from "../ConfirmAddFund"; -const CreditPopup = ({ details, onClose, situation }) => { +const CreditPopup = ({ details, onClose, situation, walletItem }) => { const { pathname, state } = useLocation(); const [submitTask, setSubmitTask] = useState({ loading: false, @@ -17,6 +13,24 @@ const CreditPopup = ({ details, onClose, situation }) => { state: "", }); const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task"); + let [input, setInput] = useState(""); + const [confirmCredit, setConfirmCredit] = useState({ + show: false, + data: {}, + }); + + // const openConfirmCredit = (value) => { + // setConfirmCredit({ show: true, data: { ...value } }); + // }; + + // const closeConfirmCredit = () => { + // setConfirmCredit({ show: false, data: {} }); + // }; + // const handleConfirmCredit = useMemo((input) => { + // if (input) { + // setConfirmCredit(true); + // } else setConfirmCredit(false); + // }, []); const switchNextStep = ({ target: value }) => { setSuggestedNextStep(value); @@ -33,6 +47,8 @@ const CreditPopup = ({ details, onClose, situation }) => { onClose(); }; + console.log("prop drills >> ", confirmCredit); + return ( {

- Add Credit + {!confirmCredit.show ? "Add Credit" : "Confirm Credit Add"}

- + {confirmCredit.show ? ( + + ) : ( + + )}
diff --git a/src/components/MyWallet/Wallet.jsx b/src/components/MyWallet/Wallet.jsx index 9af93c6..a0dd621 100644 --- a/src/components/MyWallet/Wallet.jsx +++ b/src/components/MyWallet/Wallet.jsx @@ -119,7 +119,7 @@ const WalletRoutes = () => { } > - }> @@ -134,7 +134,7 @@ const WalletRoutes = () => { } - /> + /> */}