Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
d2db38ba21 |
@@ -1,183 +0,0 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import { toast } from "react-toastify";
|
|
||||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
|
||||||
import ModalCom from "../../Helpers/ModalCom";
|
|
||||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
|
||||||
|
|
||||||
import usersService from "../../../services/UsersService";
|
|
||||||
|
|
||||||
function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) {
|
|
||||||
const apiURL = new usersService();
|
|
||||||
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
let [requestStatus, setRequestStatus] = useState({
|
|
||||||
message: "",
|
|
||||||
loading: false,
|
|
||||||
status: false,
|
|
||||||
});
|
|
||||||
let [pageLoading, setPageLoading] = useState(true);
|
|
||||||
|
|
||||||
//FUNCTION TO HANDLE SUBMIT
|
|
||||||
const handleSubmit = () => {
|
|
||||||
setRequestStatus({ message: "", loading: true, status: false });
|
|
||||||
let reqData = {
|
|
||||||
amount: Number(state.amount),
|
|
||||||
Fee: Number(state.fee),
|
|
||||||
recipientid: Number(state.recipientID),
|
|
||||||
};
|
|
||||||
apiURL
|
|
||||||
.sendMoney(reqData)
|
|
||||||
.then((res) => {
|
|
||||||
if (res.data.internal_return < 0) {
|
|
||||||
setRequestStatus({
|
|
||||||
message: "Could not perform transaction",
|
|
||||||
loading: false,
|
|
||||||
status: false,
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setRequestStatus({
|
|
||||||
message: "transfer successful",
|
|
||||||
loading: false,
|
|
||||||
status: true,
|
|
||||||
});
|
|
||||||
toast.success("Transfer sucessful");
|
|
||||||
setTimeout(() => {
|
|
||||||
navigate("/my-wallet", { replace: true });
|
|
||||||
window.location.reload(true);
|
|
||||||
}, 1000);
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
setRequestStatus({
|
|
||||||
message: "Opps! something went wrong! Try Again",
|
|
||||||
loading: false,
|
|
||||||
status: false,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// what happens if not state redirect user
|
|
||||||
if (!state) {
|
|
||||||
navigate("/my-wallet/withdraw-naira", { replace: true });
|
|
||||||
} else {
|
|
||||||
setPageLoading(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
return (
|
|
||||||
<ModalCom action={action} situation={situation}>
|
|
||||||
<div className="content-wrapper w-[90%] md:w-[600px]">
|
|
||||||
<div className="w-full">
|
|
||||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
|
|
||||||
<div className="px-4 md:px-8 py-4">
|
|
||||||
<h2 className="my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
|
|
||||||
{`Withdraw from ${wallet.description} Wallet : ${
|
|
||||||
wallet.symbol
|
|
||||||
}${(wallet.amount * 0.01).toFixed(2)}`}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div className="px-4 md:px-8 py-4 add-fund-info">
|
|
||||||
<h2 className="my-2 text-slate-900 dark:text-white text-sm xl:text-xl font-medium">
|
|
||||||
Confirm Withdraw to Account
|
|
||||||
</h2>
|
|
||||||
{/* AMOUNT */}
|
|
||||||
<div className="field w-full mb-3">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-6"
|
|
||||||
label="Amount:"
|
|
||||||
type="text"
|
|
||||||
name="amount"
|
|
||||||
value={state?.amount || ""}
|
|
||||||
disable={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* RECIPIENT ACC: */}
|
|
||||||
<div className="field w-full mb-3">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-6"
|
|
||||||
label="Recipient Acc:"
|
|
||||||
type="text"
|
|
||||||
name="recipient"
|
|
||||||
value={state?.details.recipient || ""}
|
|
||||||
disable={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* PROCESSING FEE: */}
|
|
||||||
<div className="field w-full mb-3">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-6"
|
|
||||||
label="Processing Fee:"
|
|
||||||
type="text"
|
|
||||||
name="processingFee"
|
|
||||||
value={state?.fee || ""}
|
|
||||||
disable={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* TOTAL */}
|
|
||||||
<div className="field w-full mb-3">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-6"
|
|
||||||
label="Total"
|
|
||||||
type="text"
|
|
||||||
name="total"
|
|
||||||
value={state?.total || ""}
|
|
||||||
disable={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* COMMENT/NOTE */}
|
|
||||||
<div className="field w-full mb-3">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-6"
|
|
||||||
label="Comment/Note:"
|
|
||||||
type="text"
|
|
||||||
name="comment"
|
|
||||||
value={state?.comment || ""}
|
|
||||||
disable={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
{requestStatus.message && (
|
|
||||||
<p
|
|
||||||
className={`text-base ${
|
|
||||||
requestStatus.status ? "text-green-500" : "text-red-500"
|
|
||||||
} px-4 md:px-8 py-4`}
|
|
||||||
>
|
|
||||||
{requestStatus.message}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
<div className="px-4 md:px-8 py-4 add-fund-btn flex justify-end items-center gap-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={action}
|
|
||||||
className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
|
|
||||||
>
|
|
||||||
<span className="text-gradient">Cancel</span>
|
|
||||||
</button>
|
|
||||||
{requestStatus.loading ? (
|
|
||||||
<LoadingSpinner size="8" color="sky-blue" />
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
onClick={handleSubmit}
|
|
||||||
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
|
|
||||||
>
|
|
||||||
Transfer
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ModalCom>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ConfirmNairaWithdraw;
|
|
||||||
@@ -1,322 +0,0 @@
|
|||||||
import React, { useEffect, useState } from "react";
|
|
||||||
import { Link, useNavigate } from "react-router-dom";
|
|
||||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
|
||||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
|
||||||
import ModalCom from "../../Helpers/ModalCom";
|
|
||||||
|
|
||||||
import usersService from "../../../services/UsersService";
|
|
||||||
|
|
||||||
import { Form, Formik } from "formik";
|
|
||||||
import * as Yup from "yup";
|
|
||||||
|
|
||||||
const validationSchema = Yup.object().shape({
|
|
||||||
amount: Yup.number()
|
|
||||||
.typeError("you must specify a number")
|
|
||||||
.min(1, "Amount must be greater than 0")
|
|
||||||
.required("Amount is required"),
|
|
||||||
recipientID: Yup.string()
|
|
||||||
.min(1, "Minimum 1 characters")
|
|
||||||
.max(50, "Maximum 50 characters")
|
|
||||||
.required("Recipient is required"),
|
|
||||||
});
|
|
||||||
|
|
||||||
const initialValues = {
|
|
||||||
amount: "",
|
|
||||||
recipientID: "",
|
|
||||||
comment: "",
|
|
||||||
};
|
|
||||||
|
|
||||||
function NairaWithdraw({ wallet, action, situation, setShowConfirmNairaWithdraw }) {
|
|
||||||
const apiCall = new usersService(); // API CLASS CALL
|
|
||||||
console.log('TESTING', wallet)
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
let [requestStatus, setRequestStatus] = useState(false);
|
|
||||||
|
|
||||||
let [recipients, setRecipients] = useState({
|
|
||||||
// FOR COUPON HISTORY
|
|
||||||
loading: true,
|
|
||||||
data: [],
|
|
||||||
error: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
let [sendMoneyFee, setSendMoneyFee] = useState({
|
|
||||||
loading: false,
|
|
||||||
fee: 0,
|
|
||||||
total: 0,
|
|
||||||
}); // HOLD THE VALUE FOR SEND MONEY FEE
|
|
||||||
|
|
||||||
//FUNCTION TO GET RECIPIENT LIST
|
|
||||||
const getRecipients = () => {
|
|
||||||
apiCall
|
|
||||||
.getRecipient()
|
|
||||||
.then((res) => {
|
|
||||||
if (res.data.internal_return < 0) {
|
|
||||||
// success but no data
|
|
||||||
setRecipients((prev) => ({ ...prev, loading: false }));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setRecipients((prev) => ({
|
|
||||||
...prev,
|
|
||||||
loading: false,
|
|
||||||
data: res.data.result_list,
|
|
||||||
}));
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
setRecipients((prev) => ({ ...prev, loading: false, error: true }));
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
//FUNCTION TO GET SEND MONEY FEE
|
|
||||||
const getSendMoneyFee = ({ target: { value } }) => {
|
|
||||||
setSendMoneyFee({ loading: true, fee: 0, total: 0 });
|
|
||||||
let amount = value;
|
|
||||||
if (Number(amount) <= 0 || amount == "" || isNaN(amount)) {
|
|
||||||
setSendMoneyFee({ loading: false, fee: 0, total: 0 });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
apiCall
|
|
||||||
.getSendMoneyFee(Number(amount))
|
|
||||||
.then((res) => {
|
|
||||||
setSendMoneyFee({
|
|
||||||
loading: false,
|
|
||||||
fee: res.data.processing_fee,
|
|
||||||
total: res.data.total_amount,
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
setSendMoneyFee({ loading: false, fee: 0, total: 0 });
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
//FUNCTION TO HANDLE SUBMIT
|
|
||||||
const handleSubmit = (values, helpers) => {
|
|
||||||
if (!values?.amount && !values.recipientID) return;
|
|
||||||
setRequestStatus(true);
|
|
||||||
let recipientDetails = recipients.data?.filter(
|
|
||||||
(item) => item.recipient_id == values.recipientID
|
|
||||||
);
|
|
||||||
let stateData = {
|
|
||||||
...values,
|
|
||||||
...sendMoneyFee,
|
|
||||||
details: { ...recipientDetails[0] },
|
|
||||||
};
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
setRequestStatus(false);
|
|
||||||
// navigate("confirm-withdraw-naira", { state: stateData });
|
|
||||||
action()
|
|
||||||
setShowConfirmNairaWithdraw({show: true, state: stateData})
|
|
||||||
}, 1000);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
getRecipients();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ModalCom action={action} situation={situation}>
|
|
||||||
<div className="content-wrapper w-[90%] md:w-[600px]">
|
|
||||||
<div className="w-full">
|
|
||||||
<div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
|
|
||||||
<Formik
|
|
||||||
initialValues={initialValues}
|
|
||||||
validationSchema={validationSchema}
|
|
||||||
onSubmit={handleSubmit}
|
|
||||||
>
|
|
||||||
{(props) => {
|
|
||||||
return (
|
|
||||||
<Form className="transfer-fund-info">
|
|
||||||
<h2 className="my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
|
|
||||||
{`Withdraw from ${wallet.description} Wallet : ${wallet.symbol}${(
|
|
||||||
wallet.amount * 0.01
|
|
||||||
).toFixed(2)}`}
|
|
||||||
</h2>
|
|
||||||
<div className=" mb-6 gap-4 flex flex-col">
|
|
||||||
<div className="field w-full">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-4"
|
|
||||||
parentClass="flex items-center gap-1 justify-between"
|
|
||||||
labelClass="flex-[0.2] mb-0"
|
|
||||||
inputClass="flex-[0.8] max-w-[12rem]"
|
|
||||||
label="Amount:"
|
|
||||||
type="number"
|
|
||||||
name="amount"
|
|
||||||
placeholder="0"
|
|
||||||
direction="rtl"
|
|
||||||
value={props.values.amount}
|
|
||||||
inputHandler={props.handleChange}
|
|
||||||
blurHandler={(e) => {
|
|
||||||
getSendMoneyFee(e);
|
|
||||||
}}
|
|
||||||
// props.handleBlur
|
|
||||||
// onMouseLeave={(e)=>{getSendMoneyFee(e)}}
|
|
||||||
/>
|
|
||||||
{props.errors.amount && props.touched.amount && (
|
|
||||||
<p className="sm:text-sm text-[12px] text-red-500 sm:text-left text-right sm:translate-y-0 translate-y-1">
|
|
||||||
{props.errors.amount}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="field w-full">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-4 transfer-field"
|
|
||||||
parentClass="flex items-center gap-1 justify-between"
|
|
||||||
labelClass="flex-[0.2] mb-0"
|
|
||||||
inputClass="flex-[0.8] transfer-field max-w-[12rem]"
|
|
||||||
label="Fee:"
|
|
||||||
type="text"
|
|
||||||
name="fee"
|
|
||||||
direction="rtl"
|
|
||||||
value={
|
|
||||||
sendMoneyFee.loading ? "loading" : sendMoneyFee.fee
|
|
||||||
}
|
|
||||||
disable={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="field w-full mb-6">
|
|
||||||
<InputCom
|
|
||||||
fieldClass="px-4 transfer-field"
|
|
||||||
parentClass="flex items-center gap-1 justify-between"
|
|
||||||
labelClass="flex-[0.2] mb-0"
|
|
||||||
inputClass="flex-[0.8] transfer-field max-w-[12rem]"
|
|
||||||
label="Total:"
|
|
||||||
type="text"
|
|
||||||
name="total"
|
|
||||||
direction="rtl"
|
|
||||||
value={
|
|
||||||
sendMoneyFee.loading ? "loading" : sendMoneyFee.total
|
|
||||||
}
|
|
||||||
disable={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full">
|
|
||||||
<div className="relative my-3 md:flex items-center">
|
|
||||||
<div className="transfer-input w-full flex items-start gap-1 justify-between">
|
|
||||||
<label className="text-[#181c32] dark:text-white text-base font-semibold block flex-[0.2] mb-0 mt-3">
|
|
||||||
Recipient:
|
|
||||||
</label>
|
|
||||||
<div className="flex flex-col gap-3 flex-[0.8] sm:items-start items-end">
|
|
||||||
<select
|
|
||||||
className="sm:w-full w-48 text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0 flex-[0.8]"
|
|
||||||
value={props.values.recipientID}
|
|
||||||
name="recipientID"
|
|
||||||
onChange={props.handleChange}
|
|
||||||
onBlur={props.handleBlur}
|
|
||||||
>
|
|
||||||
{recipients.loading ? (
|
|
||||||
<option
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value=""
|
|
||||||
>
|
|
||||||
Loading...
|
|
||||||
</option>
|
|
||||||
) : recipients.data.length ? (
|
|
||||||
<>
|
|
||||||
<option
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value=""
|
|
||||||
>
|
|
||||||
Select...
|
|
||||||
</option>
|
|
||||||
{recipients.data.map((item, index) => (
|
|
||||||
<option
|
|
||||||
key={index}
|
|
||||||
value={item.recipient_id}
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
>
|
|
||||||
{item.recipient}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
) : recipients.error ? (
|
|
||||||
<option
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value=""
|
|
||||||
>
|
|
||||||
Could'nt load, try again!
|
|
||||||
</option>
|
|
||||||
) : (
|
|
||||||
<option
|
|
||||||
className="text-slate-500 text-lg"
|
|
||||||
value=""
|
|
||||||
>
|
|
||||||
No Recipient Found!
|
|
||||||
</option>
|
|
||||||
)}
|
|
||||||
</select>
|
|
||||||
<div className="flex justify-end relative w-full">
|
|
||||||
{props.errors.recipientID &&
|
|
||||||
props.touched.recipientID && (
|
|
||||||
<p className="sm:text-sm text-[12px] text-red-500 absolute sm:top-1 -top-20 sm:left-0 left-[160px]">
|
|
||||||
{props.errors.recipientID}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
<Link
|
|
||||||
to="add-recipient"
|
|
||||||
className="mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80 max-w-[5rem]"
|
|
||||||
>
|
|
||||||
Add New
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="field w-full mb-6 flex gap-1 justify-between">
|
|
||||||
<label className="text-[#181c32] dark:text-white text-base font-semibold flex flex-[0.2] mt-2.5">
|
|
||||||
Comment:
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
style={{ resize: "none" }}
|
|
||||||
className="text-base px-4 py-2 rounded-md min-h-[100px] sm:max-w-[550px] max-w-[250px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none flex-[0.8]"
|
|
||||||
name="comment"
|
|
||||||
value={props.values.comment}
|
|
||||||
onChange={props.handleChange}
|
|
||||||
onBlur={props.handleBlur}
|
|
||||||
cols="30"
|
|
||||||
rows="2"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="transfer-fund-btn flex justify-end items-center gap-2 py-4">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={action}
|
|
||||||
className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
|
|
||||||
>
|
|
||||||
<span className="text-gradient">Cancel</span>
|
|
||||||
</button>
|
|
||||||
{requestStatus ? (
|
|
||||||
<LoadingSpinner size="8" color="sky-blue" />
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={
|
|
||||||
props.isSubmitting || sendMoneyFee.loading
|
|
||||||
? true
|
|
||||||
: false
|
|
||||||
}
|
|
||||||
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
|
|
||||||
>
|
|
||||||
Continue
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Form>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</Formik>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ModalCom>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default NairaWithdraw;
|
|
||||||
@@ -5,9 +5,8 @@ import React, {
|
|||||||
useEffect,
|
useEffect,
|
||||||
useMemo,
|
useMemo,
|
||||||
useReducer,
|
useReducer,
|
||||||
useState,
|
|
||||||
} from "react";
|
} from "react";
|
||||||
import { Navigate, Outlet, Route, Routes } from "react-router-dom";
|
import { Routes, Route, Outlet, Navigate } from "react-router-dom";
|
||||||
import usersService from "../../services/UsersService";
|
import usersService from "../../services/UsersService";
|
||||||
import Layout from "../Partials/Layout";
|
import Layout from "../Partials/Layout";
|
||||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||||
@@ -16,18 +15,16 @@ import LoadingSpinner from "../Spinners/LoadingSpinner";
|
|||||||
// const ConfirmAddFund = lazy(() => import("./ConfirmAddFund"));
|
// const ConfirmAddFund = lazy(() => import("./ConfirmAddFund"));
|
||||||
// const TransferFund = lazy(() => import("./TransferFund"));
|
// const TransferFund = lazy(() => import("./TransferFund"));
|
||||||
const WalletBox = lazy(() => import("./WalletBox"));
|
const WalletBox = lazy(() => import("./WalletBox"));
|
||||||
// const NairaWithdraw = lazy(() => import("./Popup/NairaWithdraw"));
|
|
||||||
// const ConfirmNairaWithdraw = lazy(() => import("./ConfirmNairaWithdraw"));
|
|
||||||
// const AddRecipient = lazy(() => import("./AddRecipient"));
|
// const AddRecipient = lazy(() => import("./AddRecipient"));
|
||||||
// const ConfirmTransfer = lazy(() => import("./ConfirmTransfer"));
|
// const ConfirmTransfer = lazy(() => import("./ConfirmTransfer"));
|
||||||
|
|
||||||
// function Wallet() {
|
function Wallet() {
|
||||||
// return (
|
return (
|
||||||
// <Layout>
|
<Layout>
|
||||||
// <Outlet />
|
<Outlet />
|
||||||
// </Layout>
|
</Layout>
|
||||||
// );
|
);
|
||||||
// }
|
}
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
loading: true,
|
loading: true,
|
||||||
@@ -56,52 +53,83 @@ const reducer = (state, action) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const WalletRoutes = () => {
|
const WalletRoutes = () => {
|
||||||
const apiCall = new usersService();
|
const apiCall = useMemo(() => new usersService(), []);
|
||||||
|
|
||||||
const [walletList, setWalletList] = useState({loading: true, data: []});
|
const [walletList, dispatchWalletList] = useReducer(reducer, initialState);
|
||||||
const [paymentHistory, setPaymentHistory] = useState({loading: true, data: []});
|
const [paymentHistory, dispatchPaymentHistory] = useReducer(
|
||||||
|
reducer,
|
||||||
|
initialState
|
||||||
|
);
|
||||||
|
|
||||||
const getWalletList = () => {
|
const getWalletList = useCallback(() => {
|
||||||
apiCall
|
apiCall
|
||||||
.getUserWallets()
|
.getUserWallets(null)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.data.internal_return < 0) {
|
if (res.data.internal_return < 0) {
|
||||||
setWalletList({loading: false, data: []})
|
dispatchWalletList({ type: "FETCH_SUCCESS", payload: [] });
|
||||||
} else {
|
} else {
|
||||||
setWalletList({loading: false, data: res.data?.result_list})
|
dispatchWalletList({
|
||||||
|
type: "FETCH_SUCCESS",
|
||||||
|
payload: res.data.result_list,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
setWalletList({loading: false, data: []})
|
dispatchWalletList({ type: "FETCH_ERROR" });
|
||||||
});
|
});
|
||||||
}
|
}, [apiCall]);
|
||||||
|
|
||||||
const getPaymentHistory = () => {
|
const getPaymentHistory = useCallback(() => {
|
||||||
apiCall
|
apiCall
|
||||||
.getPaymentHx()
|
.getPaymentHx()
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.data.internal_return < 0) {
|
if (res.data.internal_return < 0) {
|
||||||
setPaymentHistory({loading: false, data: []})
|
dispatchPaymentHistory({ type: "FETCH_SUCCESS", payload: [] });
|
||||||
} else {
|
} else {
|
||||||
setPaymentHistory({loading: false, data: res.data?.result_list})
|
dispatchPaymentHistory({
|
||||||
|
type: "FETCH_SUCCESS",
|
||||||
|
payload: res.data.result_list,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
setPaymentHistory({loading: false, data: []})
|
dispatchPaymentHistory({ type: "FETCH_ERROR" });
|
||||||
});
|
});
|
||||||
}
|
}, [apiCall]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getWalletList();
|
let isMounted = true;
|
||||||
getPaymentHistory();
|
|
||||||
}, []);
|
if (isMounted) {
|
||||||
|
getWalletList();
|
||||||
|
getPaymentHistory();
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
isMounted = false;
|
||||||
|
};
|
||||||
|
}, [getWalletList, getPaymentHistory]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Routes>
|
||||||
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
|
<Route
|
||||||
<WalletBox wallet={walletList} payment={paymentHistory} />
|
element={
|
||||||
</Suspense>
|
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
|
||||||
</Layout>
|
<Wallet />
|
||||||
|
</Suspense>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Route
|
||||||
|
index
|
||||||
|
element={
|
||||||
|
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
|
||||||
|
<WalletBox wallet={walletList} payment={paymentHistory} />
|
||||||
|
</Suspense>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Route path="*" element={<Navigate to="/" />} />
|
||||||
|
</Route>
|
||||||
|
</Routes>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,40 +1,30 @@
|
|||||||
import React, { useState } from "react";
|
import React from 'react'
|
||||||
import ConfirmNairaWithdraw from "./Popup/ConfirmNairaWithdraw";
|
import { Link } from 'react-router-dom';
|
||||||
import NairaWithdraw from "./Popup/NairaWithdraw";
|
|
||||||
|
|
||||||
function WalletAction({ walletItem, payment, openPopUp }) {
|
|
||||||
const [showNairaWithdraw, setShowNairaWithdraw] = useState(false); // DETERMINES WHEN NAIRA WITHDRAWAL POPS UP
|
|
||||||
|
|
||||||
const [showConfirmNairaWithdraw, setShowConfirmNairaWithdraw] = useState({
|
|
||||||
show: false,
|
|
||||||
state: {},
|
|
||||||
}); // DETERMINES WHEN CONFIRM NAIRA WITHDRAWAL POPS UP
|
|
||||||
|
|
||||||
|
function WalletAction({walletItem, payment, openPopUp}) {
|
||||||
return (
|
return (
|
||||||
<div className="counters w-full flex justify-between gap-2">
|
<div className="counters w-full flex justify-between gap-2">
|
||||||
<div className="w-1/2 flex justify-center items-center">
|
<div className='w-1/2 flex justify-center items-center'>
|
||||||
<button
|
<Link
|
||||||
onClick={() => {
|
to="transfer-fund"
|
||||||
setShowNairaWithdraw(true);
|
className={`${
|
||||||
}}
|
|
||||||
className={`${
|
|
||||||
walletItem.code != "NAIRA" && "invisible"
|
walletItem.code != "NAIRA" && "invisible"
|
||||||
} px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
|
} px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white`}
|
||||||
>
|
>
|
||||||
Spend
|
Spend
|
||||||
</button>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-1/2 flex justify-center items-center">
|
<div className='w-1/2 flex justify-center items-center'>
|
||||||
<button
|
<button
|
||||||
className="px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
className='px-4 h-10 flex justify-center items-center btn-gradient text-base rounded-full text-white'
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
openPopUp({
|
openPopUp({
|
||||||
payment: payment,
|
payment: payment,
|
||||||
currency: walletItem?.description,
|
currency: walletItem?.description,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* <span className="">
|
{/* <span className="">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="38"
|
width="38"
|
||||||
@@ -49,36 +39,11 @@ function WalletAction({ walletItem, payment, openPopUp }) {
|
|||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
</span> */}
|
</span> */}
|
||||||
<span className="">Add Credit</span>
|
<span className="">Add Credit</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{showNairaWithdraw && (
|
|
||||||
<NairaWithdraw
|
|
||||||
wallet={walletItem}
|
|
||||||
action={() => {
|
|
||||||
setShowNairaWithdraw((prev) => !prev);
|
|
||||||
}}
|
|
||||||
situation={showNairaWithdraw}
|
|
||||||
setShowConfirmNairaWithdraw={setShowConfirmNairaWithdraw}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{showConfirmNairaWithdraw.show && (
|
|
||||||
<ConfirmNairaWithdraw
|
|
||||||
wallet={walletItem}
|
|
||||||
state={showConfirmNairaWithdraw.state}
|
|
||||||
action={() => {
|
|
||||||
setShowConfirmNairaWithdraw((prev) => ({
|
|
||||||
...prev,
|
|
||||||
show: !prev.show,
|
|
||||||
}));
|
|
||||||
}}
|
|
||||||
situation={showConfirmNairaWithdraw.show}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default WalletAction;
|
export default WalletAction
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||||
import WalletItemCard from "./WalletItemCard";
|
import WalletItemCard from "./WalletItemCard";
|
||||||
|
|
||||||
export default function WalletBox({ wallet, payment }) {
|
export default function WalletBox({ wallet, coupon, payment }) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="my-wallet-wrapper w-full mb-10">
|
<div className="my-wallet-wrapper w-full mb-10">
|
||||||
|
|||||||
@@ -472,10 +472,10 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
|||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
{/* profile */}
|
{/* profile */}
|
||||||
<div className="user-profile relative lg:block hidden">
|
<div className="user-profile relative">
|
||||||
<div
|
<div
|
||||||
onClick={() => handlerProfile()}
|
onClick={() => handlerProfile()}
|
||||||
className="flex items-center space-x-3.5"
|
className="hidden lg:flex items-center space-x-3.5"
|
||||||
>
|
>
|
||||||
{/* profile-image */}
|
{/* profile-image */}
|
||||||
<div className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden">
|
<div className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden">
|
||||||
@@ -492,6 +492,17 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
|||||||
{userDetails && userDetails?.account_type !== "FAMILY" && <p className="text-sm text-thin-light-gray">@{userEmail}</p>}
|
{userDetails && userDetails?.account_type !== "FAMILY" && <p className="text-sm text-thin-light-gray">@{userEmail}</p>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="for-mobile-profile lg:hidden block">
|
||||||
|
<div
|
||||||
|
// to="/profile"
|
||||||
|
onClick={() => handlerProfile()}
|
||||||
|
className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden block"
|
||||||
|
>
|
||||||
|
<img src={profileImg} alt="profile" className="w-full h-full" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className={`profile-dropdown w-[293px] z-30 bg-white dark:bg-dark-white absolute lg:right-16 -right-[16px] rounded-lg ${
|
className={`profile-dropdown w-[293px] z-30 bg-white dark:bg-dark-white absolute lg:right-16 -right-[16px] rounded-lg ${
|
||||||
userProfileDropdown ? "active" : ""
|
userProfileDropdown ? "active" : ""
|
||||||
@@ -684,14 +695,15 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="for-mobile-profile lg:hidden block">
|
{/* <div className="for-mobile-profile lg:hidden block">
|
||||||
<Link
|
<div
|
||||||
to="/profile"
|
// to="/profile"
|
||||||
|
onClick={() => handlerProfile()}
|
||||||
className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden block"
|
className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden block"
|
||||||
>
|
>
|
||||||
<img src={profileImg} alt="profile" className="w-full h-full" />
|
<img src={profileImg} alt="profile" className="w-full h-full" />
|
||||||
</Link>
|
</div>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user