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

.

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-07-13 18:07:05 +01:00
parent 5f222a2d88
commit ec9d793d6b
6 changed files with 170 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MarketPlace/PopUp/MarketPopUp.jsx
+14 -20
View File
@@ -1,11 +1,18 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import ModalCom from "../../Helpers/ModalCom";
import { useMemo, useState } from "react";
import { toast } from "react-toastify";
import usersService from "../../../services/UsersService";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
import ModalCom from "../../Helpers/ModalCom";
import { PriceFormatter } from "../../Helpers/PriceFormatter";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
const [textValue, setTextValue] = useState("");
const apiCall = useMemo(() => new usersService(), []);
const handleInputChange = ({ target: { value } }) => {
setTextValue(value);
};
const MarketCalls = (details) => {
const [marketMsg, setMarketMsg] = useState({
loading: false,
@@ -24,8 +31,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
const MarketDetail = async () => {
try {
setMarketMsg({ loading: true });
if (!textValue) return;
setMarketMsg({ loading: true });
reqData.yourmessage = textValue;
@@ -87,22 +94,11 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
}
};
// useEffect(() => {
// ManageInterest();
// }, []);
return { MarketDetail, ManageInterest, manageInt, marketMsg };
};
const [textValue, setTextValue] = useState("");
const handleInputChange = ({ target: { value } }) => {
setTextValue(value);
};
const apiCall = useMemo(() => new usersService(), []);
let { manageInt, ManageInterest, MarketDetail, marketMsg } = MarketCalls(details);
let { manageInt, ManageInterest, MarketDetail, marketMsg } =
MarketCalls(details);
let thePrice = PriceFormatter(
details?.price * 0.01,
@@ -270,9 +266,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
Interest: <b className="ml-1">{details.interest_count}</b>
</p>
<hr />
<p className="my-1">
Expire: {details.expire}
</p>
<p className="my-1">Expire: {details.expire}</p>
</div>
</div>
<button
src/components/MyWallet/AddFund.jsx
+111 -97
View File
@@ -1,48 +1,52 @@
import React, {useState} from 'react'
import RecentActivityTable from './WalletComponent/RecentActivityTable'
import LoadingSpinner from '../Spinners/LoadingSpinner'
import { useNavigate, useLocation } from 'react-router-dom'
import InputCom from '../Helpers/Inputs/InputCom'
import React, { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import InputCom from "../Helpers/Inputs/InputCom";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import RecentActivityTable from "./WalletComponent/RecentActivityTable";
import AddFundDollars from './AddFundDollars'
import AddFundDollars from "./AddFundDollars";
function AddFund({payment}) {
const navigate = useNavigate()
const {currency} = useLocation()?.state //GETS THE USER CURRENCY FOR ADD FUND
function AddFund({ payment }) {
const navigate = useNavigate();
const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
//STATE FOR CONTROLLED INPUT
let [input, setInput] = useState('')
//STATE FOR CONTROLLED INPUT
let [input, setInput] = useState("");
let [inputError, setInputError] = useState('')
let [inputError, setInputError] = useState("");
// FUNCTION TO HANDLE INPUT CHANGE
const handleChange = ({target:{name, value}}) => {
setInput(value)
// FUNCTION TO HANDLE INPUT CHANGE
const handleChange = ({ target: { name, value } }) => {
setInput(value);
};
//FUNCTION TO HANDLE SUBMIT
const handleSubmit = () => {
setInputError("");
if (!input || input == "0") {
setInputError("Please Enter Amount");
return setTimeout(() => {
setInputError("");
}, 5000);
}
//FUNCTION TO HANDLE SUBMIT
const handleSubmit = () => {
setInputError('')
if(!input || input == '0'){
setInputError('Please Enter Amount')
return setTimeout(()=>{setInputError('')}, 5000)
}
if(isNaN(input)){
setInputError('Amount must be a Number')
return setTimeout(()=>{setInputError('')}, 5000)
}
const stateData = {amount: Number(input), currency: 'naira'}
navigate('confirm-add-fund', {state: stateData})
setInput('')
if (isNaN(input)) {
setInputError("Amount must be a Number");
return setTimeout(() => {
setInputError("");
}, 5000);
}
return (
<div>
{/* heading */}
{/* <div className="sm:flex justify-between items-center mb-6">
const stateData = { amount: Number(input), currency: "naira" };
navigate("confirm-add-fund", { state: stateData });
setInput("");
};
return (
<div>
{/* heading */}
{/* <div className="sm:flex justify-between items-center mb-6">
<div className="w-full flex justify-start space-x-3 items-center">
<button
type="button"
@@ -73,68 +77,78 @@ function AddFund({payment}) {
</div>
</div> */}
<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 shadow">
{/*<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:p-8 p-4 add-fund-info'>
<div className="field w-full mb-6">
<InputCom
fieldClass="px-6"
label={currency == 'US Dollars' ? "Amount (USD)" : "Amount (Naira)"}
type="text"
name="amount"
placeholder="0"
value={input}
inputHandler={handleChange}
/>
{inputError && <p className='text-base text-red-500'>{inputError}</p>}
</div>
</form>
<hr />
<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 shadow">
{/*<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:p-8 p-4 add-fund-info">
<div className="field w-full mb-6">
<InputCom
fieldClass="px-6"
label={
currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"
}
type="text"
name="amount"
placeholder="0"
value={input}
inputHandler={handleChange}
/>
{inputError && (
<p className="text-base text-red-500">{inputError}</p>
)}
</div>
</form>
<hr />
{/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
{currency == 'US Dollars' &&
<div className='w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow'>
<AddFundDollars setInputError={setInputError} input={input} setInput={setInput} />
</div>
}
{/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
{currency == "US Dollars" && (
<div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
<AddFundDollars
setInputError={setInputError}
input={input}
setInput={setInput}
/>
</div>
)}
{/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
{currency != 'US Dollars' &&
<div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
<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"
>
<span className="text-white">Continue</span>
</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>
}
{/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
{currency != "US Dollars" && (
<div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
<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"
>
<span className="text-white">Continue</span>
</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>
)}
</div>
);
}
export default AddFund
export default AddFund;
src/components/MyWallet/AddFundDollars.jsx
-2
View File
@@ -132,8 +132,6 @@ function AddFundDollars(props) {
});
}, []);
console.log(props)
const handleClose = props.onClose
return (
src/components/MyWallet/ConfirmAddFund.jsx
+22 -23
View File
@@ -2,7 +2,6 @@ import React, { useState } from "react";
import { useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import InputCom from "../Helpers/Inputs/InputCom";
import usersService from "../../services/UsersService";
@@ -113,14 +112,12 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
</div>
);
console.log(confirmCredit);
return (
<div className="content-wrapper w-full h-[32rem]">
<div className="w-full mb-10">
<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">
Confirm Add Fund To Account
</h2>
<hr /> */}
<div className="px-4 md:p-8 py-4 add-fund-info">
<div className="field w-full mb-3 min-h-[45px]">
{confirmCredit?.show ? (
@@ -136,13 +133,12 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
}`}
</span>
</div>
<div className="flex items-center gap-4">
{/* <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"> */}
<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:"}
{confirmCredit?.data?.currency && "Payment Method"}
</label>
<span className="text-[#181c32] dark:text-white ">
{__confirmCard ? (
@@ -150,24 +146,20 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
) : null}
</span>
</div>
<div className="flex items-center gap-12">
<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}
</span>
</div>
</div>
) : (
<InputCom
fieldClass="px-6"
label={` Amount${confirmCredit?.data?.currency}`}
type="text"
name="amount"
value={confirmCredit?.data?.amount || ""}
disable={true}
/>
)}
) : null}
</div>
</div>
{/* <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
{confirmCredit?.data?.currency && "Payment Method"}
</h1> */}
{/* <hr /> */}
<div className="min-h-[220px]"></div>
<div className="min-h-[180px]"></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"
@@ -175,7 +167,14 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
>
Cancel
</button>
{confirmCredit?.data?.currency == "US Dollars" && (
<button
className="px-4 h-11 flex justify-center items-center border-gradient text-base rounded-full"
onClick={() => console.log("Test me")}
>
Proceed
</button>
)}
{confirmCredit?.data?.currency == "Naira" && (
<FlutterWaveButton
{...fwConfig}
src/components/MyWallet/WalletBox.jsx
+5 -8
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,18 +6,19 @@ 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 lg:flex lg:space-x-11 mb-11">
<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.length &&
wallet.data.map((item, index) => (
<div className="lg:w-1/2 h-full mb-10 lg:mb-0">
<div className="lg:w-full h-full mb-10 lg:mb-0">
<WalletItemCard walletItem={item} payment={payment} />
</div>
))
) : null}
)}
{/*<div className="flex-1">*/}
{/* <CurrentBalanceWidget />*/}
src/components/MyWallet/WalletItemCard.jsx
+18 -14
View File
@@ -1,10 +1,9 @@
import React, { useState } from "react";
import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
import { PriceFormatter } from "../Helpers/PriceFormatter";
import { Link } from "react-router-dom";
import { useSelector } from "react-redux";
import CreditPopup from "./Popup/CreditPopup";
import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
import localImgLoad from "../../lib/localImgLoad";
import { PriceFormatter } from "../Helpers/PriceFormatter";
import CreditPopup from "./Popup/CreditPopup";
import WalletAction from "./WalletAction";
export default function WalletItemCard({ walletItem, payment }) {
@@ -29,9 +28,9 @@ export default function WalletItemCard({ walletItem, payment }) {
setCreditPopup({ show: false, data: {} });
};
console.log("walletItem >>", walletItem, payment);
let image = walletItem.code ? `${walletItem.code.toLocaleLowerCase()}.svg` : 'default.png' // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON
let image = walletItem.code
? `${walletItem.code.toLocaleLowerCase()}.svg`
: "default.png"; // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON
return (
<>
@@ -43,7 +42,11 @@ export default function WalletItemCard({ walletItem, payment }) {
>
<div className="wallet xxs:flex justify-around items-start gap-3">
<div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
<img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
<img
src={localImgLoad(`images/currency/${image}`)}
className="w-full h-full"
alt="curreny-icon"
/>
</div>
<div className="balance w-full">
<p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
@@ -98,14 +101,15 @@ export default function WalletItemCard({ walletItem, payment }) {
</div> */}
{/* for white underline */}
<div className="my-2 w-full h-[1px] bg-white"></div>
<div className="my-2 w-full h-[1px] bg-white"></div>
{!accountType ? (
<WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
)
:
null
}
<WalletAction
walletItem={walletItem}
payment={payment}
openPopUp={openPopUp}
/>
) : null}
</div>
{creditPopup.show && (
<CreditPopup