diff --git a/src/components/MyWallet/AddFund.jsx b/src/components/MyWallet/Popup/AddFund.jsx similarity index 100% rename from src/components/MyWallet/AddFund.jsx rename to src/components/MyWallet/Popup/AddFund.jsx diff --git a/src/components/MyWallet/AddFundDollars.jsx b/src/components/MyWallet/Popup/AddFundDollars.jsx similarity index 95% rename from src/components/MyWallet/AddFundDollars.jsx rename to src/components/MyWallet/Popup/AddFundDollars.jsx index 91f8e05..f9bbfa1 100644 --- a/src/components/MyWallet/AddFundDollars.jsx +++ b/src/components/MyWallet/Popup/AddFundDollars.jsx @@ -1,13 +1,13 @@ import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; -import usersService from "../../services/UsersService"; -import InputCom from "../Helpers/Inputs/InputCom"; -import LoadingSpinner from "../Spinners/LoadingSpinner"; +import usersService from "../../../services/UsersService"; +import InputCom from "../../Helpers/Inputs/InputCom"; +import LoadingSpinner from "../../Spinners/LoadingSpinner"; import { Form, Formik } from "formik"; import { useSelector } from "react-redux"; import * as Yup from "yup"; -import Icons from "../Helpers/Icons"; +import Icons from "../../Helpers/Icons"; const validationSchema = Yup.object().shape({ name: Yup.string() @@ -65,7 +65,8 @@ function AddFundDollars(props) { const { firstname, lastname } = userDetails; const [prevCardDetails, setPrevCardDetails] = useState({}); const [payListCards, setPayListCards] = useState({ loading: true, data: [] }); - + let __awaitComponent = props.confirmCredit.show.awaitConfirm; + let __acceptComponent = props.confirmCredit.show.awaitConfirm; const handleInputChange = (event) => { const { name, value } = event.target; setPrevCardDetails((prevState) => ({ @@ -84,6 +85,7 @@ function AddFundDollars(props) { const handleSubmit = async (values, helpers) => { props.setInputError(""); + if (!props.input || props.input === "0") { props.setInputError("Please Enter Amount"); return; @@ -98,7 +100,12 @@ function AddFundDollars(props) { if (!prevCardDetails) { return; } - setLoader(true); + + props.setConfirmCredit((prev) => ({ + ...prev, + show: { awaitConfirm: { loader: true } }, + })); + let stateData = { amount: Number(props.input) * 100, currency: props.walletItem?.code, @@ -107,7 +114,10 @@ function AddFundDollars(props) { try { const res = await apiCall.getStartCredit(stateData); if (res.data.internal_return < 0) { - setLoader(false); + props.setConfirmCredit((prev) => ({ + ...prev, + show: { awaitConfirm: { loader: false } }, + })); props.setInputError("An Error Occurred"); setTimeout(() => props.setInputError(""), 5000); return; @@ -120,20 +130,21 @@ function AddFundDollars(props) { stateData = { ...stateData, ..._response }; setTimeout(() => { - setLoader(false); props.setConfirmCredit({ - show: true, + show: { + awaitConfirm: { loader: false, state: true }, + acceptConfirm: { loader: false, state: false }, + }, data: stateData, }); }, 1500); } catch (error) { + props.setConfirmCredit((prev) => ({ + ...prev, + show: { awaitConfirm: { loader: false } }, + })); console.log(error); } - - return setTimeout(() => { - props.setConfirmCredit({ show: true, data: stateData }); - setLoader(false); - }, 1500); } if (tab === "new") { @@ -142,6 +153,8 @@ function AddFundDollars(props) { currency: props.currency, ...values, }; + + // Rest of the code for tab "new" } }; @@ -501,7 +514,7 @@ function AddFundDollars(props) { type="button" className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white" > - {loader ? ( + {props.confirmCredit?.show?.awaitConfirm?.loader ? ( ) : ( Continue diff --git a/src/components/MyWallet/AddFundPop.jsx b/src/components/MyWallet/Popup/AddFundPop.jsx similarity index 78% rename from src/components/MyWallet/AddFundPop.jsx rename to src/components/MyWallet/Popup/AddFundPop.jsx index cf040ab..2e31a3f 100644 --- a/src/components/MyWallet/AddFundPop.jsx +++ b/src/components/MyWallet/Popup/AddFundPop.jsx @@ -1,9 +1,9 @@ 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 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({ @@ -11,6 +11,7 @@ function AddFundPop({ input, setInput, onClose, + confirmCredit, setConfirmCredit, walletItem, }) { @@ -20,7 +21,7 @@ function AddFundPop({ const { payment, currency } = _payment; const [inputError, setInputError] = useState(""); - const [loader, setLoader] = useState(false); + let __awaitComponent = confirmCredit.show.awaitConfirm; const handleChange = ({ target: { name, value } }) => { setInput(value); @@ -28,17 +29,26 @@ function AddFundPop({ const handleSubmit = async () => { setInputError(""); - setLoader(true); + setConfirmCredit((prev) => ({ + ...prev, + show: { awaitConfirm: { loader: true } }, + })); if (!input || input === "0") { - setLoader(false); + setConfirmCredit((prev) => ({ + ...prev, + show: { awaitConfirm: { loader: false } }, + })); setInputError("Please Enter Amount"); setTimeout(() => setInputError(""), 5000); return; } if (isNaN(input)) { - setLoader(false); + setConfirmCredit((prev) => ({ + ...prev, + show: { awaitConfirm: { loader: false } }, + })); setInputError("Amount must be a Number"); setTimeout(() => setInputError(""), 5000); return; @@ -52,7 +62,10 @@ function AddFundPop({ try { const res = await apiCall.getStartCredit(stateData); if (res.data.internal_return < 0) { - setLoader(false); + setConfirmCredit((prev) => ({ + ...prev, + show: { awaitConfirm: { loader: false } }, + })); setInputError("An Error Occurred"); setTimeout(() => setInputError(""), 5000); return; @@ -64,13 +77,20 @@ function AddFundPop({ stateData = { ...stateData, ..._response }; setTimeout(() => { - setLoader(false); - setConfirmCredit({ - show: true, + setConfirmCredit((prev) => ({ + ...prev, + show: { + awaitConfirm: { loader: false, state: true }, + acceptConfirm: { loader: false, state: false }, + }, data: stateData, - }); + })); }, 1500); } catch (error) { + setConfirmCredit((prev) => ({ + ...prev, + show: { awaitConfirm: { loader: false } }, + })); console.log(error); } }; @@ -108,6 +128,7 @@ function AddFundPop({ setInput={setInput} currency={currency} onClose={onClose} + confirmCredit={confirmCredit} setConfirmCredit={setConfirmCredit} /> @@ -128,7 +149,7 @@ function AddFundPop({ 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] w-full" > - {loader ? ( + {__awaitComponent.loader ? ( ) : ( <> diff --git a/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx b/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx new file mode 100644 index 0000000..675a1df --- /dev/null +++ b/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx @@ -0,0 +1,106 @@ +import React from "react"; + +function CompleteConfirmCredit({ onClose, confirmCredit }) { + console.log(confirmCredit); + const { data } = confirmCredit; + return ( +
+
+
+
+
+
+
+ {/* Success Icon for now */} +
+ {data?.result == "Charge success" ? ( + + + + + ) : ( + + + + + + )} +
+ +
+

+ {data?.result == "Charge success" + ? "Credit was Successful!" + : "Credit was Unsuccessful"} +

+
+ +
+

+ Amount({data?.currency || ""}) +

+ + {`${data?.symbol || ""} ${ + Number(data?.amount * 0.01).toLocaleString() || "" + }`} + +
+ +
+

+ Wallet Balance +

+ + {data?.curr_balance} + +
+ +
+

+ Confirmation Number +

+ + {data?.confirmation} + +
+
+
+
+
+ +
+
+
+
+
+ ); +} + +export default CompleteConfirmCredit; diff --git a/src/components/MyWallet/ConfirmAddFund.jsx b/src/components/MyWallet/Popup/ConfirmAddFund.jsx similarity index 80% rename from src/components/MyWallet/ConfirmAddFund.jsx rename to src/components/MyWallet/Popup/ConfirmAddFund.jsx index 860d8c0..f74ce3a 100644 --- a/src/components/MyWallet/ConfirmAddFund.jsx +++ b/src/components/MyWallet/Popup/ConfirmAddFund.jsx @@ -1,13 +1,17 @@ +import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3"; import React, { useState } from "react"; import { useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; import { toast } from "react-toastify"; +import usersService from "../../../services/UsersService"; +import LoadingSpinner from "../../Spinners/LoadingSpinner"; -import usersService from "../../services/UsersService"; - -import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3"; - -function ConfirmAddFund({ confirmCredit, onClose, walletItem }) { +function ConfirmAddFund({ + confirmCredit, + onClose, + walletItem, + setConfirmCredit, +}) { const __confirmData = confirmCredit?.data; const __confirmCountry = walletItem?.country; const __confirmCardDetails = __confirmData.card @@ -15,21 +19,26 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) { : ""; let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS - let [confirmLoading, setConfirmLoading] = useState(false); - let [requestStatus, setRequestStatus] = useState({ message: "", loading: false, status: false, }); // STATE FOR API REQUEST + // const [ConfirmCredit, setConfirmCredit] = useState({ + // show: false, + // loader: false, + // msg: "", + // data: {}, + // }); + const apiURL = new usersService(); const navigate = useNavigate(); //FUNCTION TO HANDLE SUBMIT const onSuccessPayment = () => { setRequestStatus({ message: "", loading: true, status: false }); - let reqData = { amount: confirmCredit?.data?.account, currency: "NGN" }; + let reqData = { amount: __confirmData?.account, currency: "NGN" }; apiURL .startTopUp(reqData) .then((res) => { @@ -66,7 +75,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) { const config = { public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY, tx_ref: Date.now(), - amount: confirmCredit?.data?.amount, + amount: __confirmData?.amount, currency: "NGN", payment_options: "card,mobilemoney,ussd", customer: { @@ -91,24 +100,54 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) { onClose: () => {}, }; + // Handling Previous Card const handlePrevCard = async () => { - setConfirmLoading(true); - let reqData = { - amount: __confirmData.amount * 100, - card_uid: __confirmCardDetails.card_uid, - credit_reference: __confirmData.credit_reference, - currency: __confirmData.currency, + const { amount, credit_reference, currency } = __confirmData; + const { card_uid } = __confirmCardDetails; + + const reqData = { + amount: amount * 100, + card_uid, + credit_reference, + currency, }; try { + setConfirmCredit((prev) => ({ + ...prev, + show: { + acceptConfirm: { loader: true }, + }, + })); const res = await apiURL.getPaidPrevCard(reqData); - setConfirmLoading(false); - console.log(res.data); + const _response = res.data; + if (res.data.internal_return < 0) { + setConfirmCredit((prev) => ({ + ...prev, + show: { + acceptConfirm: { loader: false }, + }, + })); + return; + } + + setConfirmCredit((prev) => ({ + ...prev, + show: { + awaitConfirm: { loader: false, state: false }, + acceptConfirm: { loader: false, state: true }, + }, + data: _response, + })); } catch (error) { - setConfirmLoading(false); + setConfirmCredit((prev) => ({ + ...prev, + show: { + acceptConfirm: { loader: false }, + }, + })); console.log(error); } - console.log("Test me"); }; const ThePaymentText = ({ value }) => ( @@ -124,15 +163,13 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) { ); - console.log(confirmCredit); - return (
- {confirmCredit?.show ? ( + {confirmCredit?.show?.awaitConfirm?.state ? (
- {/*
*/} +
console.log("Test me") } > - Proceed + {confirmCredit?.show?.acceptConfirm?.loader ? ( + + ) : ( + "Proceed" + )} )} {__confirmCountry == "NG" && ( @@ -214,20 +255,6 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
- - {/*
-
-

- Recent Activity -

-

Activity Report

- {payment.loading ? ( - - ) : ( - - )} -
-
*/}
); } diff --git a/src/components/MyWallet/ConfirmTransfer.jsx b/src/components/MyWallet/Popup/ConfirmTransfer.jsx similarity index 98% rename from src/components/MyWallet/ConfirmTransfer.jsx rename to src/components/MyWallet/Popup/ConfirmTransfer.jsx index 2aa8d4d..95a4f4c 100644 --- a/src/components/MyWallet/ConfirmTransfer.jsx +++ b/src/components/MyWallet/Popup/ConfirmTransfer.jsx @@ -1,8 +1,8 @@ import React, { useEffect, useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; import { toast } from "react-toastify"; -import InputCom from "../Helpers/Inputs/InputCom"; -import LoadingSpinner from "../Spinners/LoadingSpinner"; +import InputCom from "../../Helpers/Inputs/InputCom"; +import LoadingSpinner from "../../Spinners/LoadingSpinner"; import RecentActivityTable from "./WalletComponent/RecentActivityTable"; import usersService from "../../services/UsersService"; diff --git a/src/components/MyWallet/Popup/CreditPopup.jsx b/src/components/MyWallet/Popup/CreditPopup.jsx index c02d60c..971e39f 100644 --- a/src/components/MyWallet/Popup/CreditPopup.jsx +++ b/src/components/MyWallet/Popup/CreditPopup.jsx @@ -1,39 +1,20 @@ import { useState } from "react"; -import { useLocation } from "react-router-dom"; -import usersService from "../../../services/UsersService"; import ModalCom from "../../Helpers/ModalCom"; -import AddFundPop from "../AddFundPop"; -import ConfirmAddFund from "../ConfirmAddFund"; +import LoadingSpinner from "../../Spinners/LoadingSpinner"; +import AddFundPop from "./AddFundPop"; +import CompleteConfirmCredit from "./CompleteConfirmCredit"; +import ConfirmAddFund from "./ConfirmAddFund"; const CreditPopup = ({ details, onClose, situation, walletItem }) => { - const { pathname, state } = useLocation(); - const [submitTask, setSubmitTask] = useState({ - loading: false, - msg: "", - state: "", - }); - const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task"); let [input, setInput] = useState(""); const [confirmCredit, setConfirmCredit] = useState({ - show: false, + show: { + awaitConfirm: { loader: false, state: false }, + acceptConfirm: { loader: false, state: false }, + }, data: {}, }); - const switchNextStep = ({ target: value }) => { - setSuggestedNextStep(value); - }; - - const apiCall = new usersService(); - - const handleParentSuggestion = (values) => { - if (suggestedNextStep == "Send Task") { - let firstName = state?.firstname; - let family_uid = state?.family_uid; - // continuePopupData({ ...details, firstName, family_uid }); - } - onClose(); - }; - return ( {

- {!confirmCredit.show ? "Add Credit" : "Confirm Credit Add"} + {confirmCredit?.show?.acceptConfirm?.loader + ? "Confirming Credit..." + : confirmCredit?.show?.awaitConfirm?.state + ? "Confirm Credit Add" + : confirmCredit?.show?.acceptConfirm?.state + ? "Credit Add Completed" + : "Add Credit"}

- {confirmCredit.show ? ( - + {confirmCredit?.show?.acceptConfirm?.loader ? ( +
+ +
) : ( - + <> + {confirmCredit?.show?.awaitConfirm?.state ? ( + + ) : confirmCredit?.show?.acceptConfirm?.state ? ( + + ) : ( + + )} + )}
diff --git a/src/components/MyWallet/TransferFund.jsx b/src/components/MyWallet/Popup/TransferFund.jsx similarity index 97% rename from src/components/MyWallet/TransferFund.jsx rename to src/components/MyWallet/Popup/TransferFund.jsx index aa57df9..f302b71 100644 --- a/src/components/MyWallet/TransferFund.jsx +++ b/src/components/MyWallet/Popup/TransferFund.jsx @@ -1,10 +1,10 @@ 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 InputCom from "../../Helpers/Inputs/InputCom"; +import LoadingSpinner from "../../Spinners/LoadingSpinner"; +// import RecentActivityTable -import usersService from "../../services/UsersService"; +import usersService from "../../../services/UsersService"; import { Form, Formik } from "formik"; import * as Yup from "yup"; @@ -326,7 +326,8 @@ function TransferFund({ payment, wallet }) { {payment.loading ? ( ) : ( - + // + null )}
diff --git a/src/components/MyWallet/Wallet.jsx b/src/components/MyWallet/Wallet.jsx index a0dd621..0cb9333 100644 --- a/src/components/MyWallet/Wallet.jsx +++ b/src/components/MyWallet/Wallet.jsx @@ -11,12 +11,12 @@ import usersService from "../../services/UsersService"; import Layout from "../Partials/Layout"; import LoadingSpinner from "../Spinners/LoadingSpinner"; -const AddFund = lazy(() => import("./AddFund")); -const ConfirmAddFund = lazy(() => import("./ConfirmAddFund")); -const TransferFund = lazy(() => import("./TransferFund")); +// const AddFund = lazy(() => import("./AddFund")); +// const ConfirmAddFund = lazy(() => import("./ConfirmAddFund")); +// const TransferFund = lazy(() => import("./TransferFund")); const WalletBox = lazy(() => import("./WalletBox")); -const AddRecipient = lazy(() => import("./AddRecipient")); -const ConfirmTransfer = lazy(() => import("./ConfirmTransfer")); +// const AddRecipient = lazy(() => import("./AddRecipient")); +// const ConfirmTransfer = lazy(() => import("./ConfirmTransfer")); function Wallet() { return ( @@ -119,31 +119,6 @@ const WalletRoutes = () => { } > - {/* }> - - - } - /> - }> - - - } - /> */} - }> - - - } - /> - {/*} />*/} { } /> - }> - - - } - /> - }> - - - } - /> } /> diff --git a/src/components/MyWallet/WalletItemCard.jsx b/src/components/MyWallet/WalletItemCard.jsx index 1c22116..3d00026 100644 --- a/src/components/MyWallet/WalletItemCard.jsx +++ b/src/components/MyWallet/WalletItemCard.jsx @@ -16,7 +16,6 @@ export default function WalletItemCard({ walletItem, payment }) { // Credit popup const [creditPopup, setCreditPopup] = useState({ show: false, data: {} }); - const openPopUp = (value) => { setCreditPopup({ show: true, @@ -41,47 +40,52 @@ export default function WalletItemCard({ walletItem, payment }) { }} > {/*
*/} -
-
- curreny-icon -
-
-
-

- Current Balance -

-

- {PriceFormatter( - walletItem.amount * 0.01, - walletItem.code, - undefined, - "text-[2rem]" - )} -

-
+
+
+ curreny-icon +
+
+
+

+ Current Balance +

+

+ {PriceFormatter( + walletItem.amount * 0.01, + walletItem.code, + undefined, + "text-[2rem]" + )} +

+
-

- HOLDINGS :{" "} - - {PriceFormatter( - walletItem.escrow * 0.01, - walletItem.code, - undefined, - "text-[2rem]" - )} - -

- {/* for white underline */} -
+

+ HOLDINGS :{" "} + + {PriceFormatter( + walletItem.escrow * 0.01, + walletItem.code, + undefined, + "text-[2rem]" + )} + +

+ {/* for white underline */} +
- {!accountType ? ( - - ) - : - null - } + {!accountType ? ( + + ) : null} {/*
*/}
{creditPopup.show && (