diff --git a/src/components/MyWallet/Popup/AddFundDollars.jsx b/src/components/MyWallet/Popup/AddFundDollars.jsx index 40b805b..28a4190 100644 --- a/src/components/MyWallet/Popup/AddFundDollars.jsx +++ b/src/components/MyWallet/Popup/AddFundDollars.jsx @@ -95,7 +95,7 @@ function AddFundDollars(props) { return; } - if (!prevCardDetails) { + if (!prevCardDetails["payment-card"]?.card_uid) { return; } @@ -171,6 +171,8 @@ function AddFundDollars(props) { const handleClose = props.onClose; + console.log(prevCardDetails) + return ( <>
diff --git a/src/components/MyWallet/Popup/ConfirmAddFund.jsx b/src/components/MyWallet/Popup/ConfirmAddFund.jsx index 43d1fcf..2457371 100644 --- a/src/components/MyWallet/Popup/ConfirmAddFund.jsx +++ b/src/components/MyWallet/Popup/ConfirmAddFund.jsx @@ -1,11 +1,78 @@ 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"; +function ThePaymentText({ value }) { + return ( +
+
+

+ {value.description} Card +

+

+ Bank **************{value.digits} +

+
+
+ ); +} + +function AmountSection({ currency, amount, country }) { + const formattedAmount = (Number(amount) / 100).toFixed(2); + return ( +
+

+ Amount({currency}) +

+ + {formattedAmount} + +
+ ); +} + +function TransactionFeeSection({ currency, fee, country }) { + const formattedFee = (Number(fee) / 100).toFixed(2); + return ( +
+

+ Transaction Fee +

+ + {formattedFee} + +
+ ); +} + +function TotalSection({ currency, amount, fee, country }) { + const total = (Number(amount) + Number(fee)) / 100; + const formattedTotal = total.toFixed(2); + return ( +
+

+ Total +

+ + {formattedTotal} + +
+ ); +} + function ConfirmAddFund({ confirmCredit, onClose, @@ -17,65 +84,21 @@ function ConfirmAddFund({ const __confirmCardDetails = __confirmData.card ? JSON.parse(__confirmData.card) : ""; - let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS - - let [requestStatus, setRequestStatus] = useState({ - message: "", - loading: false, - status: false, - }); // STATE FOR API REQUEST const apiURL = new usersService(); const navigate = useNavigate(); - //FUNCTION TO HANDLE SUBMIT - const onSuccessPayment = () => { - setRequestStatus({ message: "", loading: true, status: false }); - let reqData = { amount: __confirmData?.account, currency: "NGN" }; - apiURL - .startTopUp(reqData) - .then((res) => { - if (res.data.internal_return < 0) { - setRequestStatus({ - message: "Could not finish transaction", - loading: false, - status: false, - }); - toast.success("Opps! something went wrong"); - } - // do something - setRequestStatus({ - message: "Topup successful", - loading: false, - status: true, - }); - toast.success("Account Topup was successful"); - setTimeout(() => { - navigate("/my-wallet", { replace: true }); - }, 1000); - }) - .catch((err) => { - // do something - setRequestStatus({ - message: "Opps! An Error Occured", - loading: false, - status: false, - }); - toast.success("Opps! something went wrong"); - }); - }; + const [requestStatus, setRequestStatus] = useState({ + message: "", + loading: false, + status: false, + }); const config = { public_key: process.env.REACT_APP_FLUTTERWAVE_APIKEY, tx_ref: Date.now(), - amount: __confirmData?.amount, currency: "NGN", payment_options: "card,mobilemoney,ussd", - customer: { - email: `${userDetails.email}`, - phone_number: userDetails.phone, - name: `${userDetails.lastname} ${userDetails.firstname}`, - }, customizations: { title: "WrenchBoard", description: "Topup Payment", @@ -88,12 +111,47 @@ function ConfirmAddFund({ text: "Proceed", callback: (response) => { onSuccessPayment(); - closePaymentModal(); // this will close the modal programmatically + closePaymentModal(); }, onClose: () => {}, }; - // Handling Previous Card + const onSuccessPayment = () => { + setRequestStatus({ message: "", loading: true, status: false }); + const reqData = { amount: __confirmData?.account, currency: "NGN" }; + + apiURL + .startTopUp(reqData) + .then((res) => { + if (res.data.internal_return < 0) { + setRequestStatus({ + message: "Could not finish transaction", + loading: false, + status: false, + }); + toast.success("Opps! something went wrong"); + } else { + setRequestStatus({ + message: "Topup successful", + loading: false, + status: true, + }); + toast.success("Account Topup was successful"); + setTimeout(() => { + navigate("/my-wallet", { replace: true }); + }, 1000); + } + }) + .catch((err) => { + setRequestStatus({ + message: "Opps! An Error Occured", + loading: false, + status: false, + }); + toast.success("Opps! something went wrong"); + }); + }; + const handlePrevCard = async () => { const { amount, credit_reference, currency } = __confirmData; const { card_uid } = __confirmCardDetails; @@ -124,18 +182,16 @@ function ConfirmAddFund({ return; } - return setTimeout( - () => - setConfirmCredit((prev) => ({ - ...prev, - show: { - awaitConfirm: { loader: false, state: false }, - acceptConfirm: { loader: false, state: true }, - }, - data: _response, - })), - 1500 - ); + setTimeout(() => { + setConfirmCredit((prev) => ({ + ...prev, + show: { + awaitConfirm: { loader: false, state: false }, + acceptConfirm: { loader: false, state: true }, + }, + data: _response, + })); + }, 1500); } catch (error) { setConfirmCredit((prev) => ({ ...prev, @@ -147,107 +203,48 @@ function ConfirmAddFund({ } }; - const ThePaymentText = ({ value }) => ( -
-
-

- {value.description} Card -

-

- Bank **************{value.digits} -

-
-
- ); - return (
- {confirmCredit?.show?.awaitConfirm?.state ? ( + {confirmCredit?.show?.awaitConfirm?.state && (
- {/* Amount */} -
-

- Amount({__confirmData?.currency}) -

- - {`${walletItem?.symbol} ${ - Number(__confirmData?.amount).toLocaleString( - undefined, - { - minimumFractionDigits: 2, - maximumFractionDigits: 2, - } - ) || "" - }`} - -
- {/* Transaction Fee */} -
-

- Transaction Fee -

- - {`${walletItem?.symbol} ${ - Number(__confirmData?.fee).toLocaleString(undefined, { - minimumFractionDigits: 2, - maximumFractionDigits: 2, - }) || "" - }`} - -
- {/* Total */} -
-

- Total -

- - {`${walletItem?.symbol} ${ - ( - Number(__confirmData?.amount) + - Number(__confirmData?.fee) - ).toLocaleString(undefined, { - minimumFractionDigits: 2, - maximumFractionDigits: 2, - }) || "" - }`} - -
- - {__confirmCountry == "US" && ( + + + + {__confirmCountry === "US" && (
- + {__confirmCardDetails ? ( ) : null}
)} -
- ) : null} + )}

@@ -277,7 +274,7 @@ function ConfirmAddFund({ > Cancel - {__confirmCountry == "US" && ( + {__confirmCountry === "US" && (