From 4f0a6f67c30c622331cac2c5d6a1706dbadbc6bf Mon Sep 17 00:00:00 2001 From: Ebube Date: Tue, 12 Sep 2023 09:50:36 +0100 Subject: [PATCH] Fixed Layout for confirm add and added comments --- .../MyWallet/Popup/CompleteConfirmCredit.jsx | 2 - .../MyWallet/Popup/ConfirmAddFund.jsx | 156 +++++++++++------- src/components/MyWallet/Popup/CreditPopup.jsx | 4 +- src/components/MyWallet/WalletBox.jsx | 5 +- src/components/MyWallet/WalletItemCard.jsx | 4 - 5 files changed, 103 insertions(+), 68 deletions(-) diff --git a/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx b/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx index eacdde5..883d081 100644 --- a/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx +++ b/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx @@ -1,5 +1,3 @@ -import React from "react"; - function CompleteConfirmCredit({ onClose, confirmCredit }) { const { data } = confirmCredit; return ( diff --git a/src/components/MyWallet/Popup/ConfirmAddFund.jsx b/src/components/MyWallet/Popup/ConfirmAddFund.jsx index 73a0c62..8dfb12a 100644 --- a/src/components/MyWallet/Popup/ConfirmAddFund.jsx +++ b/src/components/MyWallet/Popup/ConfirmAddFund.jsx @@ -7,25 +7,32 @@ import usersService from "../../../services/UsersService"; import { tableReload } from "../../../store/TableReloads"; import LoadingSpinner from "../../Spinners/LoadingSpinner"; + function ThePaymentText({ value, type }) { - const cardDetails = value; - value.description = - type === "new" - ? cardDetails.cardNum[0] === "4" - ? "Visa" - : cardDetails.cardNum[0] == "5" - ? "Master" - : "ATM" - : value.description; - value.digits = type === "new" ? cardDetails.cardNum.slice(-4) : value.digits; + const { cardNum } = value; + let description = value.description; + let digits = value.digits; + + if (type === "new") { + const firstDigit = cardNum[0]; + if (firstDigit === "4") { + description = "Visa"; + } else if (firstDigit === "5") { + description = "Master"; + } else { + description = "ATM"; + } + digits = cardNum.slice(-4); + } + return (
-

- {value.description} Card +

+ {description} Card

-

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

+ Bank **************{digits}

@@ -41,7 +48,7 @@ function AmountSection({ currency, amount, country }) {

Amount({currency})

- + {formattedAmount} @@ -59,7 +66,7 @@ function TransactionFeeSection({ currency, fee, country }) {

Transaction Fee

- + {formattedFee} @@ -78,7 +85,7 @@ function TotalSection({ currency, amount, fee, country }) {

Total

- + {formattedTotal} @@ -127,7 +134,7 @@ function ConfirmAddFund({ logo: "https://www.wrenchboard.com/assets/images/wrench-500-500-icon.png", }, }; - //debugger; + const fwConfig = { ...config, text: "Proceed", @@ -188,27 +195,40 @@ function ConfirmAddFund({ const debouncedSuccessPayment = debounce(onSuccessPayment, 5000); + /** + * Handles the process of making a payment using a previously saved card. + * Updates the state to show a loader while the payment is being processed, + * sends a request to the server to make the payment, and updates the state with the response. + * If the payment is successful, it also dispatches an action to reload the wallet table. + */ const handlePrevCard = async () => { - const { amount, credit_reference, currency } = __confirmData; - const { card_uid } = __confirmCardDetails; - - const reqData = { - amount: amount * 100, - card_uid, - credit_reference, - currency, - }; - try { + // Show loader while the payment is being processed setConfirmCredit((prev) => ({ ...prev, show: { acceptConfirm: { loader: true }, }, })); + + // Extract necessary data from confirmCredit and confirmCardDetails objects + const { amount, credit_reference, currency } = __confirmData; + const { card_uid } = __confirmCardDetails; + + // Create request data object with required parameters for making the payment + const reqData = { + amount: amount * 100, + card_uid, + credit_reference, + currency, + }; + + // Send request to server to make the payment using getPaidPrevCard method of usersService const res = await apiURL.getPaidPrevCard(reqData); const _response = res.data; - if (res.data.internal_return < 0) { + + // If internal_return value in the response is less than 0, hide the loader and return + if (_response.internal_return < 0) { setConfirmCredit((prev) => ({ ...prev, show: { @@ -218,6 +238,7 @@ function ConfirmAddFund({ return; } + // Update state to show the acceptConfirm state and the response data setTimeout(() => { setConfirmCredit((prev) => ({ ...prev, @@ -227,9 +248,11 @@ function ConfirmAddFund({ }, data: _response, })); + // Dispatch an action to reload the wallet table dispatch(tableReload({ type: "WALLETTABLE" })); }, 1500); } catch (error) { + // Handle error and hide the loader setConfirmCredit((prev) => ({ ...prev, show: { @@ -240,45 +263,44 @@ function ConfirmAddFund({ } }; + /** + * Handles the payment process when a new card is used. + * @async + */ 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 { + // Extract necessary data from __confirmData and __confirmCardDetails + const { amount, credit_reference, uid } = __confirmData; + const { address, cardNum, cvv, expirationMonth, expirationYear } = __confirmCardDetails; + + // Set loading state to indicate payment is being processed setConfirmCredit((prev) => ({ ...prev, show: { acceptConfirm: { loader: true }, }, })); + + // Prepare request data + 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, + }; + + // Send request to server to process payment 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(() => { + // Handle response from server + if (res.data.internal_return < 0) { + // Payment could not be completed setConfirmCredit((prev) => ({ ...prev, show: { @@ -287,9 +309,23 @@ function ConfirmAddFund({ }, data: _response, })); - dispatch(tableReload({ type: "WALLETTABLE" })); - }, 1500); + } else { + // Payment was successful + setTimeout(() => { + setConfirmCredit((prev) => ({ + ...prev, + show: { + awaitConfirm: { loader: false, state: false }, + acceptConfirm: { loader: false, state: true }, + }, + data: _response, + })); + console.log("Show meeeeeeeeee"); + dispatch(tableReload({ type: "WALLETTABLE" })); + }, 1500); + } } catch (error) { + // Handle error during payment process setConfirmCredit((prev) => ({ ...prev, show: { @@ -362,7 +398,7 @@ function ConfirmAddFund({

Reference No

- + {__confirmData?.credit_reference} diff --git a/src/components/MyWallet/Popup/CreditPopup.jsx b/src/components/MyWallet/Popup/CreditPopup.jsx index 8f9cbd8..47d6e62 100644 --- a/src/components/MyWallet/Popup/CreditPopup.jsx +++ b/src/components/MyWallet/Popup/CreditPopup.jsx @@ -6,7 +6,7 @@ import CompleteConfirmCredit from "./CompleteConfirmCredit"; import ConfirmAddFund from "./ConfirmAddFund"; const CreditPopup = ({ details, onClose, situation, walletItem }) => { - let [input, setInput] = useState(""); + const [input, setInput] = useState(""); const [confirmCredit, setConfirmCredit] = useState({ show: { awaitConfirm: { loader: false, state: false }, @@ -15,6 +15,8 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => { data: {}, }); + console.log(confirmCredit); + return ( ) : wallet.data.length ? ( wallet.data.map((item, index) => ( -
+
)) diff --git a/src/components/MyWallet/WalletItemCard.jsx b/src/components/MyWallet/WalletItemCard.jsx index 3d00026..c890f4d 100644 --- a/src/components/MyWallet/WalletItemCard.jsx +++ b/src/components/MyWallet/WalletItemCard.jsx @@ -7,10 +7,6 @@ import CreditPopup from "./Popup/CreditPopup"; import WalletAction from "./WalletAction"; export default function WalletItemCard({ walletItem, payment }) { - // const [eth] = useState(90); - // const [btc] = useState(85); - // const [ltc] = useState(20); - const { userDetails } = useSelector((state) => state?.userDetails); let accountType = userDetails?.account_type == "FAMILY";