140 lines
6.1 KiB
React
140 lines
6.1 KiB
React
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'
|
|
|
|
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('')
|
|
|
|
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)
|
|
}
|
|
|
|
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('')
|
|
}
|
|
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"
|
|
className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
|
|
onClick={() =>
|
|
navigate('/my-wallet', { replace: true })
|
|
}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="35"
|
|
height="35"
|
|
viewBox="0 0 24 24"
|
|
fill="skyblue"
|
|
>
|
|
<path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
|
|
</svg>
|
|
</button>
|
|
<h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
|
|
Add Credit
|
|
</h1>
|
|
</div>
|
|
<div className="slider-btns flex space-x-4">
|
|
<div
|
|
onClick={() => filterHandler("today")}
|
|
className="relative"
|
|
></div>
|
|
</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 />
|
|
|
|
{/* 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>
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AddFund |