Add family acc
This commit is contained in:
Ebube
@@ -1,168 +1,210 @@
|
||||
import React, {useState, useEffect} from 'react'
|
||||
import {useLocation, useNavigate} from 'react-router-dom'
|
||||
import RecentActivityTable from './WalletComponent/RecentActivityTable'
|
||||
import LoadingSpinner from '../Spinners/LoadingSpinner'
|
||||
import InputCom from '../Helpers/Inputs/InputCom'
|
||||
import {toast} from 'react-toastify'
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { toast } from "react-toastify";
|
||||
import InputCom from "../Helpers/Inputs/InputCom";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import RecentActivityTable from "./WalletComponent/RecentActivityTable";
|
||||
|
||||
import usersService from '../../services/UsersService'
|
||||
import usersService from "../../services/UsersService";
|
||||
|
||||
function ConfirmTransfer({payment, wallet}) {
|
||||
const apiURL = new usersService()
|
||||
function ConfirmTransfer({ payment, wallet }) {
|
||||
const apiURL = new usersService();
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
let {state} = useLocation()
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
let [requestStatus, setRequestStatus] = useState({message: '', loading: false, status: false})
|
||||
let [pageLoading, setPageLoading] = useState(true)
|
||||
let { state } = useLocation();
|
||||
|
||||
//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)
|
||||
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;
|
||||
}
|
||||
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})
|
||||
})
|
||||
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/transfer-fund", { replace: true });
|
||||
} else {
|
||||
setPageLoading(false);
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
// what happens if not state redirect user
|
||||
if(!state){
|
||||
navigate('/my-wallet/transfer-fund',{replace: true})
|
||||
}else{
|
||||
setPageLoading(false)
|
||||
}
|
||||
},[])
|
||||
return (
|
||||
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
||||
{pageLoading ?
|
||||
<LoadingSpinner size='8' color='sky-blue' />
|
||||
:
|
||||
(
|
||||
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
|
||||
<div className='px-4 md:px-8 py-4'>
|
||||
{wallet.loading ?
|
||||
<LoadingSpinner size='8' color='sky-blue' />
|
||||
:
|
||||
wallet.data.length ?
|
||||
<h2 className='my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium'>
|
||||
{wallet.data.map(item => {
|
||||
if(item.description == 'Naira'){
|
||||
return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*0.01).toFixed(2)}`
|
||||
}
|
||||
})}
|
||||
</h2>
|
||||
:
|
||||
wallet.error ?
|
||||
<h2 className='my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium'>Opps! An Error Occured</h2>
|
||||
:
|
||||
<h2 className='my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium'>No Wallet Information Found!</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
|
||||
label="Amount:"
|
||||
type="text"
|
||||
name="amount"
|
||||
value={state?.amount || ''}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* RECIPIENT ACC: */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
label="Recipient Acc:"
|
||||
type="text"
|
||||
name="recipient"
|
||||
value={state?.details.recipient || ''}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* PROCESSING FEE: */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
label="Processing Fee:"
|
||||
type="text"
|
||||
name="processingFee"
|
||||
value={state?.fee || ''}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* TOTAL */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
label="Total"
|
||||
type="text"
|
||||
name="total"
|
||||
value={state?.total || ''}
|
||||
disable={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* COMMENT/NOTE */}
|
||||
<div className="field w-full mb-3">
|
||||
<InputCom
|
||||
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'>
|
||||
{requestStatus.loading ?
|
||||
<LoadingSpinner size='8' color='sky-blue' />
|
||||
:
|
||||
<button onClick={handleSubmit} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Transfer</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
|
||||
<div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto 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}/>
|
||||
}, []);
|
||||
return (
|
||||
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
||||
{pageLoading ? (
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
) : (
|
||||
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
|
||||
<div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
|
||||
<div className="px-4 md:px-8 py-4">
|
||||
{wallet.loading ? (
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
) : wallet.data.length ? (
|
||||
<h2 className="my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium">
|
||||
{wallet.data.map((item) => {
|
||||
if (item.description == "Naira") {
|
||||
return `Withdraw from Naira Wallet : ${item.symbol}${(
|
||||
item.amount * 0.01
|
||||
).toFixed(2)}`;
|
||||
}
|
||||
</div>
|
||||
})}
|
||||
</h2>
|
||||
) : wallet.error ? (
|
||||
<h2 className="my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium">
|
||||
Opps! An Error Occured
|
||||
</h2>
|
||||
) : (
|
||||
<h2 className="my-4 text-slate-500 dark:text-white text-sm xl:text-xl font-medium">
|
||||
No Wallet Information Found!
|
||||
</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">
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
) : (
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md"
|
||||
>
|
||||
Transfer
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
|
||||
<div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto 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>
|
||||
);
|
||||
}
|
||||
|
||||
export default ConfirmTransfer
|
||||
export default ConfirmTransfer;
|
||||
|
||||
Reference in New Issue
Block a user