diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx index ada5f88..260548f 100644 --- a/src/components/Helpers/Inputs/InputCom/index.jsx +++ b/src/components/Helpers/Inputs/InputCom/index.jsx @@ -25,6 +25,7 @@ export default function InputCom({ maxLength = 45, minLength = 0, direction, + tabIndex, error, }) { const inputRef = useRef(null); @@ -100,6 +101,7 @@ export default function InputCom({ onInput={onInput} minLength={minLengthValidation()} maxLength={maxLengthValidation()} + tabIndex={tabIndex} // pattern={inputPatterns()} ref={inputRef} readOnly={disable} diff --git a/src/components/MyWallet/Popup/AddFundPop.jsx b/src/components/MyWallet/Popup/AddFundPop.jsx index 6d0dfe9..dddb6ed 100644 --- a/src/components/MyWallet/Popup/AddFundPop.jsx +++ b/src/components/MyWallet/Popup/AddFundPop.jsx @@ -26,46 +26,59 @@ function AddFundPop({ }; const handleSubmit = async () => { - setInputError(""); - setConfirmCredit((prev) => ({ - ...prev, - show: { awaitConfirm: { loader: true } }, - })); - - if (!input || input === "0") { - setConfirmCredit((prev) => ({ - ...prev, - show: { awaitConfirm: { loader: false } }, - })); - setInputError("Please Enter Amount"); - setTimeout(() => setInputError(""), 5000); - return; - } - - if (Number(input) * 100 > Number(walletItem?.transfer_limit)) { - setInputError("Credit limit has been exceeded"); - setTimeout(() => setInputError(""), 5000); - return; - } - - if (isNaN(input)) { - setConfirmCredit((prev) => ({ - ...prev, - show: { awaitConfirm: { loader: false } }, - })); - setInputError("Amount must be a Number"); - setTimeout(() => setInputError(""), 5000); - return; - } - - let stateData = { - amount: Number(input) * 100, - currency: walletItem?.code, - }; - try { + // Clear any previous input error and set the loading spinner to be shown + setInputError(""); + setConfirmCredit((prev) => ({ + ...prev, + show: { awaitConfirm: { loader: true } }, + })); + + // Perform validation checks on the input amount + if (!input || input === "0") { + // Handle input validation error + setConfirmCredit((prev) => ({ + ...prev, + show: { awaitConfirm: { loader: false } }, + })); + setInputError("Please Enter Amount"); + setTimeout(() => setInputError(""), 5000); + return; + } + + if (Number(input) * 100 > Number(walletItem?.transfer_limit)) { + // Handle credit limit exceeded error + setConfirmCredit((prev) => ({ + ...prev, + show: { awaitConfirm: { loader: false } }, + })); + setInputError("Credit limit has been exceeded"); + setTimeout(() => setInputError(""), 5000); + return; + } + + if (isNaN(input)) { + // Handle invalid input error + setConfirmCredit((prev) => ({ + ...prev, + show: { awaitConfirm: { loader: false } }, + })); + setInputError("Amount must be a Number"); + setTimeout(() => setInputError(""), 5000); + return; + } + + // Prepare state data for API call + let stateData = { + amount: Number(input) * 100, + currency: walletItem?.code, + }; + + // Make API call to start credit process const res = await apiCall.getStartCredit(stateData); + if (res.data.internal_return < 0) { + // Handle API error setConfirmCredit((prev) => ({ ...prev, show: { awaitConfirm: { loader: false } }, @@ -75,6 +88,7 @@ function AddFundPop({ return; } + // Update state with response data const _response = res.data; stateData.amount = Number(input); stateData.currency = currency; @@ -91,6 +105,7 @@ function AddFundPop({ })); }, 1500); } catch (error) { + // Handle API call error setConfirmCredit((prev) => ({ ...prev, show: { awaitConfirm: { loader: false } }, @@ -116,6 +131,7 @@ function AddFundPop({ placeholder="0" value={input} inputHandler={handleChange} + tabIndex={0} />

{inputError && inputError} diff --git a/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx b/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx index 883d081..cf46a45 100644 --- a/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx +++ b/src/components/MyWallet/Popup/CompleteConfirmCredit.jsx @@ -1,5 +1,12 @@ +/** + * Renders a modal with information about a credit transaction. + * @returns {JSX.Element} - The rendered modal component. + */ function CompleteConfirmCredit({ onClose, confirmCredit }) { const { data } = confirmCredit; + const isSuccess = + data?.result === "Charge success" || data?.status === "successful"; + return (

@@ -9,91 +16,80 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
- {/* Success Icon for now */}
- {data?.result == "Charge success" || - data?.status == "successful" ? ( - - - - - ) : ( - - - - - - )} + + {isSuccess ? ( + <> + + + + ) : ( + <> + + + + + )} +
-
+

- {data?.result == "Charge success" || - data?.status == "successful" + {isSuccess ? "Credit was Successful!" : "Credit was Unsuccessful"}

{data?.internal_return >= 0 && - data?.result !== "Charge failed" ? ( - <> -
-

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

- - {`${data?.symbol || ""} ${ - Number(data?.amount * 0.01).toLocaleString() || "" - }`} - -
+ data?.result !== "Charge failed" && ( + <> +
+

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

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

- Wallet Balance -

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

+ Wallet Balance +

+ + {data?.curr_balance * 0.01} + +
-
-

- Confirmation Number -

- - {data?.confirmation} - -
- - ) : null} +
+

+ Confirmation Number +

+ + {data?.confirmation} + +
+ + )}
diff --git a/src/components/MyWallet/Popup/ConfirmAddFund.jsx b/src/components/MyWallet/Popup/ConfirmAddFund.jsx index 8dfb12a..aae9b2b 100644 --- a/src/components/MyWallet/Popup/ConfirmAddFund.jsx +++ b/src/components/MyWallet/Popup/ConfirmAddFund.jsx @@ -1,13 +1,14 @@ import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3"; import React, { useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; +import { useSelector } from "react-redux"; import { toast } from "react-toastify"; import debounce from "../../../hooks/debounce"; import usersService from "../../../services/UsersService"; -import { tableReload } from "../../../store/TableReloads"; import LoadingSpinner from "../../Spinners/LoadingSpinner"; - +/** + * Renders a React component that displays the description and last four digits of a payment card. + */ function ThePaymentText({ value, type }) { const { cardNum } = value; let description = value.description; @@ -39,12 +40,16 @@ function ThePaymentText({ value, type }) { ); } +/** + * Renders the amount of a transaction in a specific currency. + * @returns {JSX.Element} - The rendered component. + */ function AmountSection({ currency, amount, country }) { - const formattedAmount = Number(amount).toFixed(2); + const formattedAmount = amount?.toFixed(2); + const gapClassName = country === "US" ? "gap-14" : "gap-4"; + return ( -
+

Amount({currency})

@@ -55,14 +60,16 @@ function AmountSection({ currency, amount, country }) { ); } +/** + * Renders the transaction fee for a payment. + * @returns {JSX.Element} - Rendered JSX displaying the transaction fee with the label "Transaction Fee". + */ function TransactionFeeSection({ currency, fee, country }) { - const formattedFee = Number(fee).toFixed(2); + const formattedFee = (+fee).toFixed(2); + const gapClass = country === "US" ? "gap-[2.7rem]" : "gap-4"; + return ( -
+

Transaction Fee

@@ -73,15 +80,19 @@ function TransactionFeeSection({ currency, fee, country }) { ); } +/** + * Calculates the total amount by adding the `amount` and `fee` values together. + * Formats the total amount to two decimal places and displays it. + * @returns {JSX.Element} - The TotalSection component. + */ function TotalSection({ currency, amount, fee, country }) { const total = Number(amount) + Number(fee); - const formattedTotal = total.toFixed(2); + const formattedTotal = total?.toFixed(2); + + const gap = country === "US" ? "gap-[8rem]" : "gap-[6.3rem]"; + return ( -
+

Total

@@ -109,8 +120,6 @@ function ConfirmAddFund({ const { userDetails } = useSelector((state) => state?.userDetails); - const dispatch = useDispatch(); - const [requestStatus, setRequestStatus] = useState({ message: "", loading: false, @@ -169,8 +178,6 @@ function ConfirmAddFund({ status: false, }); } - - return dispatch(tableReload({ type: "WALLETTABLE" })); }) .catch((err) => { setRequestStatus({ @@ -248,8 +255,6 @@ 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 @@ -271,7 +276,8 @@ function ConfirmAddFund({ try { // Extract necessary data from __confirmData and __confirmCardDetails const { amount, credit_reference, uid } = __confirmData; - const { address, cardNum, cvv, expirationMonth, expirationYear } = __confirmCardDetails; + const { address, cardNum, cvv, expirationMonth, expirationYear } = + __confirmCardDetails; // Set loading state to indicate payment is being processed setConfirmCredit((prev) => ({ @@ -320,8 +326,6 @@ function ConfirmAddFund({ }, data: _response, })); - console.log("Show meeeeeeeeee"); - dispatch(tableReload({ type: "WALLETTABLE" })); }, 1500); } } catch (error) { diff --git a/src/components/MyWallet/Popup/CreditPopup.jsx b/src/components/MyWallet/Popup/CreditPopup.jsx index 47d6e62..c02ab81 100644 --- a/src/components/MyWallet/Popup/CreditPopup.jsx +++ b/src/components/MyWallet/Popup/CreditPopup.jsx @@ -15,7 +15,19 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => { data: {}, }); - console.log(confirmCredit); + const getTitle = () => { + if (confirmCredit?.show?.acceptConfirm?.state) { + if (confirmCredit?.data?.internal_return < 0) { + return "Credit Unsuccessful"; + } else { + return "Credit Add Completed"; + } + } else if (confirmCredit?.show?.awaitConfirm?.state) { + return "Confirm Credit Add"; + } else { + return "Add Credit"; + } + }; return ( {

- {confirmCredit?.show?.acceptConfirm?.state && - (confirmCredit?.data?.internal_return < 0 - // || - // confirmCredit?.data?.status !== "successful" - ) ? ( - "Credit Unsuccessful" - ) : ( - <> - {confirmCredit?.show?.acceptConfirm?.loader - ? "Confirming Credit..." - : confirmCredit?.show?.awaitConfirm?.state - ? "Confirm Credit Add" - : confirmCredit?.show?.acceptConfirm?.state - ? "Credit Add Completed" - : "Add Credit"} - - )} + {confirmCredit?.show?.acceptConfirm?.loader + ? "Confirming Credit..." + : getTitle()}