+ {/* Address and CVV */}
- {/* Address and CVV */}
)}
+
{tab == "previous" && (
diff --git a/src/components/MyWallet/Popup/ConfirmAddFund.jsx b/src/components/MyWallet/Popup/ConfirmAddFund.jsx
index a157d87..4a4dd1a 100644
--- a/src/components/MyWallet/Popup/ConfirmAddFund.jsx
+++ b/src/components/MyWallet/Popup/ConfirmAddFund.jsx
@@ -1,11 +1,88 @@
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, type }) {
+ const cardDetails = value;
+ value.description =
+ type === "new"
+ ? cardDetails.cardNum[0] === "4"
+ ? "Visa"
+ : value[0] === "5"
+ ? "Master"
+ : "ATM"
+ : value.description;
+ value.digits = type === "new" ? cardDetails.cardNum.slice(-4) : value.digits;
+ return (
+
+
+
+ {value.description} Card
+
+
+ Bank **************{value.digits}
+
+
+
+ );
+}
+
+function AmountSection({ currency, amount, country }) {
+ const formattedAmount = Number(amount).toFixed(2);
+ return (
+
+
+ Amount({currency})
+
+
+ {formattedAmount}
+
+
+ );
+}
+
+function TransactionFeeSection({ currency, fee, country }) {
+ const formattedFee = Number(fee).toFixed(2);
+ return (
+
+
+ Transaction Fee
+
+
+ {formattedFee}
+
+
+ );
+}
+
+function TotalSection({ currency, amount, fee, country }) {
+ const total = Number(amount) + Number(fee);
+ const formattedTotal = total.toFixed(2);
+ return (
+
+
+ Total
+
+
+ {formattedTotal}
+
+
+ );
+}
+
function ConfirmAddFund({
confirmCredit,
onClose,
@@ -14,68 +91,25 @@ function ConfirmAddFund({
}) {
const __confirmData = confirmCredit?.data;
const __confirmCountry = walletItem?.country;
- 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 __confirmCardDetails =
+ __confirmData.cardType === "prev"
+ ? JSON.parse(__confirmData.card)
+ : __confirmData.card;
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 +122,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 +193,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,18 +214,67 @@ function ConfirmAddFund({
}
};
- const ThePaymentText = ({ value }) => (
-
-
-
- {value.description} Card
-
-
- Bank **************{value.digits}
-
-
-
- );
+ const handleNewCard = async () => {
+ const { amount, credit_reference, uid } = __confirmData;
+ const { address, cardNum, cvv, expirationMonth, expirationYear } =
+ __confirmCardDetails;
+
+ const reqData = {
+ amount: amount * 100,
+ cardnumber: cardNum.replace(/\s/g, ""),
+ credit_reference,
+ cvc: cvv,
+ description: address,
+ exp_month: expirationMonth,
+ exp_year: expirationYear,
+ paymenttype: 100,
+ uid,
+ };
+
+ try {
+ setConfirmCredit((prev) => ({
+ ...prev,
+ show: {
+ acceptConfirm: { loader: true },
+ },
+ }));
+ const res = await apiURL.getPaidNewCard(reqData);
+ const _response = res.data;
+ if (res.data.internal_return < 0) {
+ setConfirmCredit((prev) => ({
+ ...prev,
+ show: {
+ awaitConfirm: { loader: false, state: false },
+ acceptConfirm: { loader: false, state: true },
+ },
+ data: _response,
+ }));
+ return;
+ }
+
+ setTimeout(() => {
+ setConfirmCredit((prev) => ({
+ ...prev,
+ show: {
+ awaitConfirm: { loader: false, state: false },
+ acceptConfirm: { loader: false, state: true },
+ },
+ data: _response,
+ }));
+ }, 1500);
+ } catch (error) {
+ setConfirmCredit((prev) => ({
+ ...prev,
+ show: {
+ acceptConfirm: { loader: false },
+ },
+ }));
+ setTimeout(() => onClose, 10000)
+ console.log(error);
+ }
+ };
+
+ console.log(confirmCredit?.data);
return (
@@ -166,76 +282,45 @@ function ConfirmAddFund({
- {confirmCredit?.show?.awaitConfirm?.state ? (
+ {confirmCredit?.show?.awaitConfirm?.state && (
- {/* Amount */}
-
-
- Amount({__confirmData?.currency})
-
-
- {`${walletItem?.symbol} ${
- Number(__confirmData?.amount).toLocaleString() || ""
- }`}
-
-
- {/* Transaction Fee */}
-
-
- Transaction Fee
-
-
- {`${walletItem?.symbol} ${
- Number(__confirmData?.fee).toLocaleString() || ""
- }`}
-
-
- {/* Total */}
-
-
- Total
-
-
- {`${walletItem?.symbol} ${
- (
- Number(__confirmData?.amount) +
- Number(__confirmData?.fee)
- ).toLocaleString() || ""
- }`}
-
-
-
- {__confirmCountry == "US" && (
+
+
+
+ {__confirmCountry === "US" && (
-
- {__confirmCardDetails ? (
-
- ) : null}
+
+
)}
-
@@ -246,13 +331,13 @@ function ConfirmAddFund({
- ) : null}
+ )}
@@ -263,13 +348,13 @@ function ConfirmAddFund({
>
Cancel
- {__confirmCountry == "US" && (
+ {__confirmCountry === "US" && (
)}
- {__confirmCountry == "NG" && (
+ {__confirmCountry === "NG" && (
}){kind=icon}
) : name === "new-family" ? (
diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx
index 83061e6..11c9cb8 100644
--- a/src/components/Helpers/Inputs/InputCom/index.jsx
+++ b/src/components/Helpers/Inputs/InputCom/index.jsx
@@ -21,6 +21,9 @@ export default function InputCom({
blurHandler,
spanTag,
inputBg,
+ onInput,
+ maxLength = 30,
+ minLength = 0,
direction,
error,
}) {
@@ -29,13 +32,13 @@ export default function InputCom({
// for Min Length:
const minLengthValidation = () => {
const inputConfig = inputConfigs[inputRef?.current?.name]?.minLength;
- return inputConfig || 0;
+ return inputConfig || minLength;
};
// for MaxLength
const maxLengthValidation = () => {
const inputConfig = inputConfigs[inputRef?.current?.name]?.maxLength;
- return inputConfig || 30;
+ return inputConfig || maxLength;
};
// for Patterns
@@ -63,7 +66,9 @@ export default function InputCom({
)}
{/* displays error is any */}
- {error && {error}}
+ {error && (
+ {error}
+ )}
)}
{forgotPassword && (
@@ -76,7 +81,11 @@ export default function InputCom({
)}