Completed conversion to popup
This commit was merged in pull request #288.
This commit is contained in:
@@ -1,53 +1,48 @@
|
||||
import React, { useState } from "react";
|
||||
import RecentActivityTable from "./WalletComponent/RecentActivityTable";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import InputCom from "../Helpers/Inputs/InputCom";
|
||||
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 AddFundDollars from "./AddFundDollars";
|
||||
import AddFundDollars from './AddFundDollars'
|
||||
|
||||
function AddFund({ paymentHistory, currency }) {
|
||||
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 SUBMIT
|
||||
const handleSubmit = () => {
|
||||
setInputError("");
|
||||
if (!input || input == "0") {
|
||||
setInputError("Please Enter Amount");
|
||||
return setTimeout(() => {
|
||||
setInputError("");
|
||||
}, 5000);
|
||||
// FUNCTION TO HANDLE INPUT CHANGE
|
||||
const handleChange = ({target:{name, value}}) => {
|
||||
setInput(value)
|
||||
}
|
||||
|
||||
if (isNaN(input)) {
|
||||
setInputError("Amount must be a Number");
|
||||
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('')
|
||||
}
|
||||
|
||||
const stateData = { amount: Number(input), currency: "naira" };
|
||||
navigate("confirm-add-fund", { state: stateData });
|
||||
|
||||
setInput("");
|
||||
};
|
||||
console.log("walletItem >>", paymentHistory);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* heading */}
|
||||
{/* <div className="sm:flex justify-between items-center mb-6">
|
||||
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"
|
||||
@@ -78,80 +73,68 @@ function AddFund({ paymentHistory, currency }) {
|
||||
</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 */}Working in Progress
|
||||
</h2>
|
||||
<p>This popup has taking time because of the prop drilling. I have got it right now</p>
|
||||
{/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
|
||||
{paymentHistory?.loading ? (
|
||||
<LoadingSpinner size="16" color="sky-blue" />
|
||||
) : (
|
||||
// <RecentActivityTable payment={paymentHistory} />
|
||||
""
|
||||
)}
|
||||
{/* 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>
|
||||
</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>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default AddFund;
|
||||
export default AddFund
|
||||
Reference in New Issue
Block a user