WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master

Browse Source
This commit is contained in:
Olusesan Ameye
2023-07-13 23:09:01 +00:00
committed by Gogs
parent 04e1bcc5f1 4e2f120ab5
commit ea447a9366
6 changed files with 113 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/AddFundDollars.jsx
+2 -1
View File
@@ -103,6 +103,7 @@ function AddFundDollars(props) {
amount: Number(props.input),
currency: props.currency,
card: prevCardDetails["payment-card"],
cardType: "prev",
};
return setTimeout(() => {
@@ -132,7 +133,7 @@ function AddFundDollars(props) {
});
}, []);
const handleClose = props.onClose
const handleClose = props.onClose;
return (
<>
src/components/MyWallet/AddFundPop.jsx
+54 -51
View File
@@ -1,54 +1,71 @@
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import usersService from "../../services/UsersService";
import Icons from "../Helpers/Icons";
import InputCom from "../Helpers/Inputs/InputCom";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import AddFundDollars from "./AddFundDollars";
function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
const navigate = useNavigate();
// const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
const apiCall = new usersService();
let { payment, currency } = _payment;
const { payment, currency } = _payment;
//STATE FOR CONTROLLED INPUT
let [inputError, setInputError] = useState("");
const [inputError, setInputError] = useState("");
const [loader, setLoader] = useState(false);
// FUNCTION TO HANDLE INPUT CHANGE
const handleChange = ({ target: { name, value } }) => {
setInput(value);
};
//FUNCTION TO HANDLE SUBMIT
const handleSubmit = (e) => {
e.preventDefault();
const handleSubmit = async () => {
setInputError("");
if (!input || input == "0") {
setLoader(true);
if (!input || input === "0") {
setLoader(false);
setInputError("Please Enter Amount");
return setTimeout(() => {
setInputError("");
}, 5000);
setTimeout(() => setInputError(""), 5000);
return;
}
if (isNaN(input)) {
setLoader(false);
setInputError("Amount must be a Number");
return setTimeout(() => {
setInputError("");
}, 5000);
setTimeout(() => setInputError(""), 5000);
return;
}
const stateData = {
let stateData = {
amount: Number(input),
currency: currency,
currency: currency.toUpperCase(),
};
return setTimeout(
() =>
try {
const res = await apiCall.getStartCredit(stateData);
if (res.data.internal_return < 0) {
setLoader(false);
setInputError("An Error Occurred");
setTimeout(() => setInputError(""), 5000);
return;
}
const _response = res.data;
stateData.amount = Number(input);
stateData.currency = currency;
stateData = { ...stateData, ..._response };
setTimeout(() => {
setLoader(false);
setConfirmCredit({
show: true,
data: stateData,
}),
1500
);
});
}, 1500);
} catch (error) {
console.log(error);
}
};
return (
@@ -56,8 +73,6 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
<div className="lg:w-2/2 w-full mb-10 lg:mb-0">
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
{/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
{/*<hr />*/}
<form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
Amount({currency})
@@ -77,8 +92,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
</div>
</form>
{/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
{currency == "US Dollars" && (
{currency === "US Dollars" && (
<div className="w-full md:px-8 md:pt-4 px-4 pt-2 bg-white dark:bg-dark-white rounded-2xl">
<AddFundDollars
setInputError={setInputError}
@@ -91,12 +105,12 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
</div>
)}
{currency != "US Dollars" && <div className="h-[18rem]"></div>}
{/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
{currency != "US Dollars" && (
{currency !== "US Dollars" && <div className="h-[18rem]"></div>}
{currency !== "US Dollars" && (
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
<button
className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
onClick={onClose}
>
Cancel
@@ -104,33 +118,22 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
<button
onClick={handleSubmit}
type="button"
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
className="px-4 py-1 h-11 flex justify-center space-x-1 items-center btn-gradient text-base rounded-full text-white max-w-[100px] w-full"
>
<span className="text-white">Continue</span>
{loader ? (
<LoadingSpinner size="6" color="sky-blue" />
) : (
<>
<span className="text-white">Continue</span>{" "}
<Icons name="chevron-right" />
</>
)}
</button>
</div>
)}
</div>
</div>
</div>
{/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
{currency != "US Dollars" &&
// <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
// <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
// <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
// <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
// Recent Activity
// </h2>
// {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
// {payment?.loading ? (
// <LoadingSpinner size="16" color="sky-blue" />
// ) : (
// <RecentActivityTable payment={payment} />
// )}
// </div>
// </div>
// </div>
null}
</div>
);
}
src/components/MyWallet/ConfirmAddFund.jsx
+44 -34
View File
@@ -8,6 +8,10 @@ import usersService from "../../services/UsersService";
import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
const __confirmData = confirmCredit?.data;
const __confirmCardDetails = __confirmData.card
? JSON.parse(__confirmData.card)
: "";
let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS
let [pageLoading, setPageLoading] = useState(true);
@@ -86,18 +90,11 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
onClose: () => {},
};
// useEffect(() => {
// // what happens if not data redirect user
// if (!data) {
// navigate("/my-wallet/add-fund", { replace: true });
// } else {
// setPageLoading(false);
// }
// }, []);
const handlePrevCard = () => {
console.log("Test me")
}
const __confirmCard = confirmCredit?.data.card
? JSON.parse(confirmCredit?.data.card)
: "";
const ThePaymentText = ({ value }) => (
<div className="my-2 flex items-center gap-5">
@@ -112,7 +109,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
</div>
);
console.log(confirmCredit);
// console.log(confirmCredit);
return (
<div className="content-wrapper w-full h-[32rem]">
@@ -124,34 +121,43 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
<div className="flex flex-col gap-4">
<div className="flex items-center gap-4">
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
Amount({confirmCredit?.data?.currency})
Amount({__confirmData?.currency})
</h1>
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
{`${walletItem?.symbol} ${
Number(confirmCredit?.data?.amount).toLocaleString() ||
""
Number(__confirmData?.amount).toLocaleString() || ""
}`}
</span>
</div>
<div className="flex items-center gap-8">
<label
htmlFor="payment"
className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
>
{confirmCredit?.data?.currency && "Payment Method"}
</label>
<span className="text-[#181c32] dark:text-white ">
{__confirmCard ? (
<ThePaymentText value={__confirmCard} />
) : null}
</span>
</div>
<div className="flex items-center gap-14">
{__confirmData?.currency == "US Dollars" && (
<div className="flex items-center gap-8">
<label
htmlFor="payment"
className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
>
{__confirmData?.currency && "Payment Method"}
</label>
<span className="text-[#181c32] dark:text-white ">
{__confirmCardDetails ? (
<ThePaymentText value={__confirmCardDetails} />
) : null}
</span>
</div>
)}
<div
className={`${
__confirmData?.currency == "US Dollars"
? "gap-14"
: "gap-6"
} flex items-center`}
>
<h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
Reference No
</h1>
<span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
{__confirmCard?.card_uid}
{__confirmCardDetails?.card_uid ||
__confirmData?.credit_reference}
</span>
</div>
</div>
@@ -159,7 +165,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
</div>
</div>
{/* <hr /> */}
<div className="min-h-[160px]"></div>
<div className={__confirmData?.currency == "US Dollars" ? "min-h-[163px]":"min-h-[200px]"}></div>
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
<button
className="px-4 h-11 flex justify-center items-center border-gradient text-base rounded-full"
@@ -167,15 +173,19 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
>
Cancel
</button>
{confirmCredit?.data?.currency == "US Dollars" && (
{__confirmData?.currency == "US Dollars" && (
<button
className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full"
onClick={() => console.log("Test me")}
onClick={
__confirmData?.cardType === "prev"
? handlePrevCard
: () => console.log("Test me")
}
>
Proceed
</button>
)}
{confirmCredit?.data?.currency == "Naira" && (
{__confirmData?.currency == "Naira" && (
<FlutterWaveButton
{...fwConfig}
className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
src/components/MyWallet/Popup/CreditPopup.jsx
-13
View File
@@ -19,19 +19,6 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
data: {},
});
// const openConfirmCredit = (value) => {
// setConfirmCredit({ show: true, data: { ...value } });
// };
// const closeConfirmCredit = () => {
// setConfirmCredit({ show: false, data: {} });
// };
// const handleConfirmCredit = useMemo((input) => {
// if (input) {
// setConfirmCredit(true);
// } else setConfirmCredit(false);
// }, []);
const switchNextStep = ({ target: value }) => {
setSuggestedNextStep(value);
};
src/components/MyWallet/WalletBox.jsx
+2 -6
View File
@@ -1,7 +1,3 @@
import CurrencyStaticsSection from "./CurrencyStaticsSection";
import CurrentBalanceWidget from "./CurrentBalanceWidget";
import InvestmentSection from "./InvestmentSection";
import RecentTransactionWidget from "./RecentTransactionWidget";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import WalletItemCard from "./WalletItemCard";
@@ -10,14 +6,14 @@ export default function WalletBox({ wallet, coupon, payment }) {
<>
<div className="my-wallet-wrapper w-full mb-10">
<div className="main-wrapper w-full">
<div className="balance-inquery w-full flex flex-wrap gap-2 justify-center md:justify-start">
<div className="balance-inquery w-full lg:grid grid-cols-[repeat(auto-fill,_minmax(325px,_1fr))] gap-5 mb-11 h-[22rem]">
{wallet.loading ? (
<div className="w-full h-full flex items-center justify-center">
<LoadingSpinner size="16" color="sky-blue" />
</div>
) : wallet.data.length ? (
wallet.data.map((item, index) => (
<div className="w-[350px] h-full">
<div className="lg:w-full h-full mb-10 lg:mb-0">
<WalletItemCard walletItem={item} payment={payment} />
</div>
))
src/services/UsersService.js
+11
View File
@@ -216,6 +216,17 @@ class usersService {
return this.postAuxEnd("/sendmoneyfee", postData);
}
getStartCredit(value) {
var postData = {
uid: localStorage.getItem("uid"),
member_id: localStorage.getItem("member_id"),
sessionid: localStorage.getItem("session_token"),
action: 11053,
...value
};
return this.postAuxEnd("/startcredit", postData);
}
getFamilySampleTasks() {
var postData = {
uid: localStorage.getItem("uid"),