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" && (