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

Merge branch 'add_recipient' of WrenchBoard/Users-Wrench into master

Browse Source
This commit is contained in:
Olusesan Ameye
2023-04-23 12:17:58 +00:00
committed by Gogs
parent 489f22d298 75d173e7d6
commit 1fbf3d2f90
5 changed files with 173 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/AddRecipient.jsx
+166
View File
@@ -0,0 +1,166 @@
import React, {useState} from 'react'
import { Link } from 'react-router-dom'
import Icons from '../Helpers/Icons'
function AddRecipient() {
//STATE FOR CONTROLLED INPUTS
let [inputs, setInputs] = useState({
firstname: '',
lastname: '',
country: '',
'bank-name': '',
'account-number': '',
'repeat-account-number': '',
'account-type': '',
state: '',
city: ''
})
// FUNCTION TO HANDLE INPUT CHANGE
const handleChange = ({target:{name, value}}) => {
setInputs(prev => ({...prev, [name]:value}))
}
//FUNCTION TO HANDLE SUBMIT
const handleSubmit = (e) => {
e.preventDefault();
//valid inputs before submitting. Just for texting remove later
// setInputs((prev)=>{
// for(let input in prev){
// prev[input] = ''
// }
// })
// RETURN INPUTS TO EMPTY STRING
setInputs({
firstname: '',
lastname: '',
country: '',
'bank-name': '',
'account-number': '',
'repeat-account-number': '',
'account-type': '',
state: '',
city: ''
})
}
return (
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
<div className="w-full mb-10 lg:mb-0">
<div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
<h2 className='my-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-semibold'>ADD BANK ACCOUNT</h2>
<form className='add-recipient-info px-1 md:px-[50px] lg:px-[100px]' onSubmit={handleSubmit}>
{/* inputs starts here */}
<div className='add-recipient my-3 md:flex items-center justify-between'>
<label className='w-full md:w-1/4 text-slate-600 text-lg'>First Name <span className='text-red-500'>*</span></label>
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
value={inputs.firstname}
name='firstname'
type="text"
placeholder='Account Firstname'
required
onChange={handleChange}
/>
</div>
<div className='add-recipient my-3 md:flex items-center justify-between'>
<label className='w-full md:w-1/4 text-slate-600 text-lg'>Last Name <span className='text-red-500'>*</span></label>
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
value={inputs.lastname}
name='lastname'
type="text"
placeholder='Account Lastname'
required
onChange={handleChange}
/>
</div>
<div className='add-recipient my-3 md:flex items-center justify-between'>
<label className='w-full md:w-1/4 text-slate-600 text-lg'>Country <span className='text-red-500'>*</span></label>
<select className='mt-2 w-full md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='country' onChange={handleChange}>
<option className='text-slate-500 text-lg' value="">Select...</option>
</select>
</div>
<div className='add-recipient my-3 md:flex items-center justify-between'>
<label className='w-full md:w-1/4 text-slate-600 text-lg'>Bank Name <span className='text-red-500'>*</span></label>
<select className='mt-2 w-full md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='bank-name' onChange={handleChange}>
<option className='text-slate-500 text-lg' value="">Select...</option>
</select>
</div>
<div className='add-recipient my-3 md:flex items-center justify-between'>
<label className='w-full md:w-1/4 text-slate-600 text-lg'>Account Number <span className='text-red-500'>*</span></label>
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
value={inputs['account-number']}
name='account-number'
type="text"
placeholder='Account No'
required
onChange={handleChange}
/>
</div>
<div className='add-recipient my-3 md:flex items-center justify-between'>
<label className='w-full md:w-1/4 text-slate-600 text-lg'>Repeat Account Number <span className='text-red-500'>*</span></label>
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
value={inputs['repeat-account-number']}
name='repeat-account-number'
type="text"
placeholder='Repeat Account No'
required
onChange={handleChange}
/>
</div>
<div className='add-recipient my-3 md:flex items-center justify-between'>
<label className='w-full md:w-1/4 text-slate-600 text-lg'>Account type <span className='text-red-500'>*</span></label>
<select className='mt-2 w-full md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='account-type' onChange={handleChange}>
<option className='text-slate-500 text-lg' value="">Select...</option>
</select>
</div>
<div className='add-recipient my-3 md:flex items-center justify-between'>
<label className='w-full md:w-1/4 text-slate-600 text-lg'>State/Province <span className='text-red-500'>*</span></label>
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
value={inputs.state}
name='state'
type="text"
placeholder='State'
required
onChange={handleChange}
/>
</div>
<div className='add-recipient my-3 md:flex items-center justify-between'>
<label className='w-full md:w-1/4 text-slate-600 text-lg'>City <span className='text-red-500'>*</span></label>
<input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
value={inputs.city}
name='city'
type="text"
placeholder='City'
required
onChange={handleChange}
/>
</div>
{/* end of inputs starts here */}
<div className='add-recipient-btn flex justify-end items-center py-4'>
<button className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md flex items-center space-x-1'>
<span className='pr-2'>ADD RECIPIENT</span>
<Icons name="arrows" />
</button>
</div>
</form>
</div>
</div>
</div>
)
}
export default AddRecipient
src/components/MyWallet/TransferFund.jsx
+1 -1
View File
@@ -83,7 +83,7 @@ function TransferFund() {
<span className='text-red-500 mx-2'>*</span>
<span title='Transfer Recipient' className={`text-white text-sm bg-slate-500 w-1 h-1 rounded-full px-3 py-1 cursor-pointer`}>!</span>
</label>
<Link to='#' className='mx-1 text-base text-white p-3 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
<Link to='add-recipient' className='mx-1 text-base text-white p-3 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
</div>
<select className='mt-2 w-full p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='recipient' onChange={handleChange}>
<option className='text-slate-500 text-lg' value="">Select...</option>
src/components/MyWallet/Wallet.jsx
+2
View File
@@ -6,6 +6,7 @@ import Layout from '../Partials/Layout'
import Balance from './Balance'
import TransferFund from './TransferFund'
import AddFund from './AddFund'
import AddRecipient from './AddRecipient'
function Wallet() {
return (
@@ -27,6 +28,7 @@ const WalletRoutes = () => {
<Route path='transfer-fund' element={<TransferFund />} />
<Route index element={<Balance />} />
<Route path='*' element={<Navigate to='/' />} />
<Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
</Route>
</Routes>
)
src/components/Partials/MobileSideBar.jsx
+1 -1
View File
@@ -122,7 +122,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
className="nav-item flex items-center justify-start space-x-3.5"
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white">
<Icons name="wallet-two" />
<Icons name="notification" />
</span>
<span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
Messages
src/components/Partials/Sidebar.jsx
+3 -3
View File
@@ -122,7 +122,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="active-bids" />
<Icons name="market" />
</span>
<span
className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
@@ -165,7 +165,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="active-bids" />
<Icons name="notification-setting" />
</span>
<span
className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
@@ -185,7 +185,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="active-bids" />
<Icons name="wallet-two" />
</span>
<span
className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${