Compare commits
21 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 804a9cf692 | |||
| b911f65535 | |||
| ebedcdafcf | |||
| ddfbba02e4 | |||
| 158fe344f6 | |||
| bd3aaa6c44 | |||
| 30f3662772 | |||
| bc3a77aa8e | |||
| 6c8a087196 | |||
| 80a3a4578b | |||
| 775607b619 | |||
| aa9482bb95 | |||
| 67b639c64f | |||
| 0bac836eb8 | |||
| 76621a87c5 | |||
| e94655a2a7 | |||
| 94ced78c82 | |||
| b3582be38c | |||
| 73cc1ef485 | |||
| 39b3218545 | |||
| e26330af9a |
@@ -0,0 +1,15 @@
|
|||||||
|
# Set the default behavior, in case people don't have core.autocrlf set.
|
||||||
|
* text=auto
|
||||||
|
|
||||||
|
# Explicitly declare text files you want to always be normalized and converted
|
||||||
|
# to native line endings on checkout.
|
||||||
|
*.jsx text
|
||||||
|
*.js text
|
||||||
|
*.css text
|
||||||
|
|
||||||
|
# Declare files that will always have CRLF line endings on checkout.
|
||||||
|
*.md text eol=crlf
|
||||||
|
|
||||||
|
# Denote all files that are truly binary and should not be modified.
|
||||||
|
*.sh binary
|
||||||
|
|
||||||
@@ -6,12 +6,15 @@ export NODE_ENV="${NODE_ENV:-development}"
|
|||||||
|
|
||||||
if [ $NODE_ENV == "development" ]; then
|
if [ $NODE_ENV == "development" ]; then
|
||||||
# this runs webpack-dev-server with hot reloading
|
# this runs webpack-dev-server with hot reloading
|
||||||
|
echo "Development build"
|
||||||
npm install --legacy-peer-deps
|
npm install --legacy-peer-deps
|
||||||
npm start
|
npm start
|
||||||
else
|
else
|
||||||
# build the app and serve it via nginx
|
# build the app and serve it via nginx
|
||||||
|
echo "Production build"
|
||||||
npm install --legacy-peer-deps
|
npm install --legacy-peer-deps
|
||||||
npm run build
|
npm run build
|
||||||
nginx -g 'daemon off;' -c /usr/src/app/nginx.conf
|
nginx -g 'daemon off;' -c /usr/src/app/nginx.conf
|
||||||
nginx -c /usr/src/app/nginx.conf
|
nginx -c /usr/src/app/nginx.conf
|
||||||
fi
|
fi
|
||||||
|
|
||||||
|
|||||||
@@ -72,6 +72,7 @@ export default function Routers() {
|
|||||||
<Route exact path="/notification" element={<Notification />} />
|
<Route exact path="/notification" element={<Notification />} />
|
||||||
<Route exact path="/mytask" element={<MyTaskPage />} />
|
<Route exact path="/mytask" element={<MyTaskPage />} />
|
||||||
<Route exact path="/myjobs" element={<MyJobsPage />} />
|
<Route exact path="/myjobs" element={<MyJobsPage />} />
|
||||||
|
<Route exact path="/my-active-jobs" element={<MyJobsPage />} />
|
||||||
<Route
|
<Route
|
||||||
exact
|
exact
|
||||||
path="/my-collection/collection-item"
|
path="/my-collection/collection-item"
|
||||||
|
|||||||
@@ -1,24 +1,35 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import loginThumb from "../../assets/images/auth-thumb.svg";
|
import { Link } from "react-router-dom";
|
||||||
import logo from "../../assets/images/wrenchboard.png"; //logo-1.svg";
|
|
||||||
|
|
||||||
export default function LoginLayout({ slogan, children }) {
|
export default function LoginLayout({ slogan, children }) {
|
||||||
const checkScreenHeight = window.screen.height;
|
|
||||||
let screen = "";
|
|
||||||
if (checkScreenHeight <= 950) {
|
|
||||||
screen = "h-screen";
|
|
||||||
// screen = "h-[950px]";
|
|
||||||
} else {
|
|
||||||
screen = "h-screen";
|
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
<div className="layout-wrapper login">
|
<div className={`layout-wrapper login`}>
|
||||||
<div className={`main-wrapper login-wrapper w-full ${screen}`}>
|
<div className={`main-wrapper login-wrapper w-full h-screen overflow-y-auto sm:p-20 p-10`}>
|
||||||
<div className="flex w-full h-full">
|
<div className="w-full h-full">
|
||||||
|
|
||||||
<div className="flex-1 flex justify-center items-center">
|
<div className="flex-1 flex justify-center items-center">
|
||||||
{children && children}
|
{children && children}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex-1 flex justify-center items-center p-10">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
|
||||||
|
About
|
||||||
|
</Link>
|
||||||
|
<Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
|
||||||
|
Services
|
||||||
|
</Link>
|
||||||
|
<Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
|
||||||
|
Contact Us
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 flex justify-center items-center p-10">
|
||||||
|
<p className="text-black text-[15px] px-2 font-medium flex items-center">
|
||||||
|
<span className="text-3xl mt-2 mr-1">©</span> 2023 - {" "}
|
||||||
|
<Link to="/" className="text-[#009ef7] ml-1">
|
||||||
|
WrenchBoard
|
||||||
|
</Link>{" "}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -106,7 +106,7 @@ export default function SignUp() {
|
|||||||
setMsgError(null);
|
setMsgError(null);
|
||||||
}, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
|
}, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getCountryList();
|
getCountryList();
|
||||||
@@ -277,6 +277,27 @@ export default function SignUp() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex-1 flex justify-center items-center p-10">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
|
||||||
|
About
|
||||||
|
</Link>
|
||||||
|
<Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
|
||||||
|
Services
|
||||||
|
</Link>
|
||||||
|
<Link to="#" className="text-[#a1a5b7] text-[15px] px-2 font-medium hover:text-[#009ef7]">
|
||||||
|
Contact Us
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 flex justify-center items-center p-10">
|
||||||
|
<p className="text-black text-[15px] px-2 font-medium flex items-center">
|
||||||
|
<span className="text-3xl mt-2 mr-1">©</span> 2023 - {" "}
|
||||||
|
<Link to="/" className="text-[#009ef7] ml-1">
|
||||||
|
WrenchBoard
|
||||||
|
</Link>{" "}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ export default function InputCom({
|
|||||||
forgotPassword,
|
forgotPassword,
|
||||||
onClick,
|
onClick,
|
||||||
disable,
|
disable,
|
||||||
blurHandler,
|
blurHandler
|
||||||
}) {
|
}) {
|
||||||
const inputRef = useRef(null)
|
const inputRef = useRef(null)
|
||||||
// Entry Validation
|
// Entry Validation
|
||||||
|
|||||||
@@ -57,6 +57,7 @@ export default function MyJobTable({MyJobList, className }) {
|
|||||||
</h1>
|
</h1>
|
||||||
<span className="text-sm text-thin-light-gray">
|
<span className="text-sm text-thin-light-gray">
|
||||||
Price <span className="text-purple">{value.price*0.01}</span>
|
Price <span className="text-purple">{value.price*0.01}</span>
|
||||||
|
{value.timeline_days} day(s)
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,9 +1,12 @@
|
|||||||
import React, {useEffect, useState} from 'react'
|
import React, {useEffect, useState} from 'react'
|
||||||
import { Link } from 'react-router-dom'
|
import { Link, useNavigate } from 'react-router-dom'
|
||||||
import Icons from '../Helpers/Icons'
|
import Icons from '../Helpers/Icons'
|
||||||
import usersService from '../../services/UsersService'
|
import usersService from '../../services/UsersService'
|
||||||
import InputCom from '../Helpers/Inputs/InputCom'
|
import InputCom from '../Helpers/Inputs/InputCom'
|
||||||
|
|
||||||
|
import LoadingSpinner from '../Spinners/LoadingSpinner'
|
||||||
|
import {toast} from 'react-toastify'
|
||||||
|
|
||||||
import {Formik, Form} from 'formik'
|
import {Formik, Form} from 'formik'
|
||||||
import * as Yup from 'yup'
|
import * as Yup from 'yup'
|
||||||
|
|
||||||
@@ -18,7 +21,7 @@ const validationSchema = Yup.object().shape({
|
|||||||
.max(25, 'Maximum 25 characters')
|
.max(25, 'Maximum 25 characters')
|
||||||
.required('Lastname is required'),
|
.required('Lastname is required'),
|
||||||
country: Yup.string()
|
country: Yup.string()
|
||||||
.min(1, 'Minimum 3 characters')
|
.min(1, 'Minimum 1 characters')
|
||||||
.max(25, 'Maximum 25 characters')
|
.max(25, 'Maximum 25 characters')
|
||||||
.required('Country is required'),
|
.required('Country is required'),
|
||||||
bank: Yup.string()
|
bank: Yup.string()
|
||||||
@@ -34,7 +37,7 @@ const validationSchema = Yup.object().shape({
|
|||||||
.required('Repeat Account Number is required')
|
.required('Repeat Account Number is required')
|
||||||
.oneOf([Yup.ref('accountNumber'), null], 'Must match Account Number'),
|
.oneOf([Yup.ref('accountNumber'), null], 'Must match Account Number'),
|
||||||
accountType: Yup.string()
|
accountType: Yup.string()
|
||||||
.min(3, 'Minimum 3 characters')
|
.min(1, 'Minimum 3 characters')
|
||||||
.max(25, 'Maximum 25 characters')
|
.max(25, 'Maximum 25 characters')
|
||||||
.required('Account Type is required'),
|
.required('Account Type is required'),
|
||||||
city: Yup.string()
|
city: Yup.string()
|
||||||
@@ -63,6 +66,10 @@ function AddRecipient() {
|
|||||||
|
|
||||||
const apiURL = new usersService()
|
const apiURL = new usersService()
|
||||||
|
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
let [requestStatus, setRequestStatus] = useState({message: '', loading: false, status: false})
|
||||||
|
|
||||||
let [allCountries, setAllCountries] = useState({ // STATE TO HOLD LIST OF COUNTRIES
|
let [allCountries, setAllCountries] = useState({ // STATE TO HOLD LIST OF COUNTRIES
|
||||||
loading: true,
|
loading: true,
|
||||||
data: []
|
data: []
|
||||||
@@ -78,14 +85,36 @@ function AddRecipient() {
|
|||||||
data: []
|
data: []
|
||||||
})
|
})
|
||||||
|
|
||||||
//FUNCTION TO HANDLE SUBMIT
|
//FUNCTION TO HANDLE ADD RECIPIENT SUBMIT
|
||||||
const handleSubmit = (values, helpers) => {
|
const handleSubmit = (values, helpers) => {
|
||||||
// setRequestState({message: '', loading: true, status: false})
|
setRequestStatus({message: '', loading: true, status: false})
|
||||||
console.log('working')
|
|
||||||
|
|
||||||
//valid inputs before submitting. Just for texting remove later
|
let reqData = { //REQUEST DATA FOR API CALL
|
||||||
|
firstname: values.firstname,
|
||||||
|
lastname: values.lastname,
|
||||||
|
bank_code: values.bank,
|
||||||
|
account_no: values.accountNumber,
|
||||||
|
account_type: values.accountType,
|
||||||
|
country: values.country,
|
||||||
|
state: values.state,
|
||||||
|
city: values.city
|
||||||
|
}
|
||||||
|
|
||||||
|
//CALL TO ADD RECIPIENT API
|
||||||
|
apiURL.addRecipient(reqData).then((res)=>{
|
||||||
|
if(res.data.internal_return < 0){
|
||||||
|
setRequestStatus({message: 'could not add recipient, try again!', loading: false, status: true})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// setRequestStatus({message: 'Recipient Added Successfully!', loading: false, status: true})
|
||||||
|
toast.success("Recipient Added Successfully!");
|
||||||
|
setTimeout(()=>{navigate('../transfer-fund',{replace:true})},1000)
|
||||||
|
}).catch((error)=>{
|
||||||
|
setRequestStatus({message: 'Opps! an error occured! Try again later', loading: false, status: false})
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// FUNCTION TO GET COUNTRIES
|
// FUNCTION TO GET COUNTRIES
|
||||||
const getCountry = ()=> {
|
const getCountry = ()=> {
|
||||||
apiURL.getSignupCountryData().then((res)=>{
|
apiURL.getSignupCountryData().then((res)=>{
|
||||||
@@ -205,7 +234,7 @@ function AddRecipient() {
|
|||||||
<div className='add-recipient w-full'>
|
<div className='add-recipient w-full'>
|
||||||
<label className='input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Bank Name <span className='text-red-500'>*</span></label>
|
<label className='input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Bank Name <span className='text-red-500'>*</span></label>
|
||||||
<select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' name='bank'
|
<select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' name='bank'
|
||||||
ovalue={props.values.bank}
|
value={props.values.bank}
|
||||||
onChange={props.handleChange}
|
onChange={props.handleChange}
|
||||||
onBlur={props.handleBlur}
|
onBlur={props.handleBlur}
|
||||||
>
|
>
|
||||||
@@ -216,7 +245,7 @@ function AddRecipient() {
|
|||||||
<>
|
<>
|
||||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
<option className='text-slate-500 text-lg' value="">Select...</option>
|
||||||
{bankName.data.map((item, index)=>(
|
{bankName.data.map((item, index)=>(
|
||||||
<option key={index} className='text-slate-500 text-lg' value={item.name}>{item.name}</option>
|
<option key={index} className='text-slate-500 text-lg' value={item.code}>{item.name}</option>
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
:
|
:
|
||||||
@@ -273,7 +302,7 @@ function AddRecipient() {
|
|||||||
<>
|
<>
|
||||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
<option className='text-slate-500 text-lg' value="">Select...</option>
|
||||||
{accType.data.map((item, index)=>(
|
{accType.data.map((item, index)=>(
|
||||||
<option key={index} className='text-slate-500 text-lg' value={item.name}>{item.name}</option>
|
<option key={index} className='text-slate-500 text-lg' value={item.value}>{item.name}</option>
|
||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
:
|
:
|
||||||
@@ -313,14 +342,20 @@ function AddRecipient() {
|
|||||||
{(props.errors.city && props.touched.city) && <p className="text-sm text-red-500">{props.errors.city}</p>}
|
{(props.errors.city && props.touched.city) && <p className="text-sm text-red-500">{props.errors.city}</p>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* end of inputs starts here */}
|
{/* end of inputs starts here */}
|
||||||
|
|
||||||
|
{/* REQUEST ERROR DISPLAY */}
|
||||||
|
{requestStatus.message && <p className='text-sm text-red-500'>{requestStatus.message}</p>}
|
||||||
|
|
||||||
<div className='add-recipient-btn flex justify-end items-center py-4'>
|
<div className='add-recipient-btn flex justify-end items-center py-4'>
|
||||||
|
{requestStatus.loading ?
|
||||||
|
<LoadingSpinner size={6} color='sky-blue' />
|
||||||
|
:
|
||||||
<button type='submit' className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md flex items-center space-x-1'>
|
<button type='submit' 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>
|
<span className='pr-2'>ADD RECIPIENT</span>
|
||||||
<Icons name="arrows" />
|
<Icons name="arrows" />
|
||||||
</button>
|
</button>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -31,11 +31,11 @@ function Balance({wallet, payment, coupon, purchase}) {
|
|||||||
</div>
|
</div>
|
||||||
<div className='balance-info'>
|
<div className='balance-info'>
|
||||||
<p className='py-2'>balance</p>
|
<p className='py-2'>balance</p>
|
||||||
<span className='text-sm py-1 px-2 bg-green-100 text-green-500 rounded-lg'>{item.symbol}{(item.amount*1).toFixed(2)}</span>
|
<span className='text-sm py-1 px-2 bg-green-100 text-green-500 rounded-lg'>{item.symbol}{(item.amount*0.01).toFixed(2)}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className='balance-info'>
|
<div className='balance-info'>
|
||||||
<p className='py-2'>Escrow</p>
|
<p className='py-2'>Escrow</p>
|
||||||
<span className='text-sm py-1 px-2 bg-red-100 text-red-500 rounded-lg'>{item.symbol}{(item.escrow*1).toFixed(2)}</span>
|
<span className='text-sm py-1 px-2 bg-red-100 text-red-500 rounded-lg'>{item.symbol}{(item.escrow*0.01).toFixed(2)}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,165 @@
|
|||||||
|
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 usersService from '../../services/UsersService'
|
||||||
|
|
||||||
|
function ConfirmTransfer({payment, wallet}) {
|
||||||
|
const apiURL = new usersService()
|
||||||
|
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
let {state} = useLocation()
|
||||||
|
// what happens if not state redirect user
|
||||||
|
if(!state){
|
||||||
|
navigate('../transfer-fund',{replace: true})
|
||||||
|
}
|
||||||
|
|
||||||
|
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('/', {replace: true})
|
||||||
|
}, 1000)
|
||||||
|
}).catch(error=>{
|
||||||
|
setRequestStatus({message: 'Opps! something went wrong! Try Again', loading: false, status: false})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
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-[800px] 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
|
||||||
@@ -1,29 +1,48 @@
|
|||||||
import React, {useEffect, useState} from 'react'
|
import React, {useEffect, useState} from 'react'
|
||||||
import { Link } from 'react-router-dom'
|
import { Link, useNavigate } from 'react-router-dom'
|
||||||
import RecentActivityTable from './WalletComponent/RecentActivityTable'
|
import RecentActivityTable from './WalletComponent/RecentActivityTable'
|
||||||
import LoadingSpinner from '../Spinners/LoadingSpinner'
|
import LoadingSpinner from '../Spinners/LoadingSpinner'
|
||||||
|
import InputCom from '../Helpers/Inputs/InputCom'
|
||||||
|
|
||||||
import usersService from '../../services/UsersService'
|
import usersService from '../../services/UsersService'
|
||||||
|
|
||||||
|
import {toast} from 'react-toastify'
|
||||||
|
|
||||||
|
import {Formik, Form} 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 TransferFund({payment, wallet}) {
|
function TransferFund({payment, wallet}) {
|
||||||
const apiCall = new usersService()
|
const apiCall = new usersService() // API CLASS CALL
|
||||||
|
|
||||||
let [newFee, setNewFee] = useState(false)
|
const navigate = useNavigate()
|
||||||
|
|
||||||
let [recepients, setRecipients] = useState({ // FOR COUPON HISTORY
|
let [requestStatus, setRequestStatus] = useState(false)
|
||||||
|
|
||||||
|
let [recipients, setRecipients] = useState({ // FOR COUPON HISTORY
|
||||||
loading: true,
|
loading: true,
|
||||||
data: [],
|
data: [],
|
||||||
error: false
|
error: false
|
||||||
})
|
})
|
||||||
|
|
||||||
let [sendMoneyFee, setSendMoneyFee] = useState({fee: 0, total: 0}) // HOLD THE VALUE FOR SEND MONEY FEE
|
let [sendMoneyFee, setSendMoneyFee] = useState({loading: false, fee: 0, total: 0}) // HOLD THE VALUE FOR SEND MONEY FEE
|
||||||
|
|
||||||
//STATE FOR CONTROLLED INPUTS
|
|
||||||
let [inputs, setInputs] = useState({
|
|
||||||
amount: '0',
|
|
||||||
recipient: '',
|
|
||||||
comment: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
//FUNCTION TO GET RECIPIENT LIST
|
//FUNCTION TO GET RECIPIENT LIST
|
||||||
const getRecipients = ()=>{
|
const getRecipients = ()=>{
|
||||||
@@ -39,158 +58,172 @@ function TransferFund({payment, wallet}) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
//FUNCTION TO GET SEND MONEY FEE
|
//FUNCTION TO GET SEND MONEY FEE
|
||||||
const getSendMoneyFee = ()=>{
|
const getSendMoneyFee = ({target:{value}})=>{
|
||||||
let {amount} = inputs
|
setSendMoneyFee({loading: true, fee: 0, total: 0})
|
||||||
|
let amount = value
|
||||||
if(Number(amount) <= 0 || amount=='' || isNaN(amount)){
|
if(Number(amount) <= 0 || amount=='' || isNaN(amount)){
|
||||||
setSendMoneyFee({fee: 0, total: 0})
|
setSendMoneyFee({loading: false, fee: 0, total: 0})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
apiCall.getSendMoneyFee(Number(amount)).then((res)=>{
|
apiCall.getSendMoneyFee(Number(amount)).then((res)=>{
|
||||||
setSendMoneyFee({fee: res.data.processing_fee, total: res.data.total_amount})
|
setSendMoneyFee({loading: false, fee: res.data.processing_fee, total: res.data.total_amount})
|
||||||
}).catch((error)=>{
|
}).catch((error)=>{
|
||||||
setSendMoneyFee({fee: 0, total: 0})
|
setSendMoneyFee({loading: false, fee: 0, total: 0})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// FUNCTION TO HANDLE INPUT CHANGE
|
|
||||||
const handleChange = ({target:{name, value}}) => {
|
|
||||||
setInputs(prev => ({...prev, [name]:value}))
|
|
||||||
}
|
|
||||||
|
|
||||||
//FUNCTION TO HANDLE SUBMIT
|
//FUNCTION TO HANDLE SUBMIT
|
||||||
const handleSubmit = (e) => {
|
const handleSubmit = (values, helpers) => {
|
||||||
e.preventDefault();
|
setRequestStatus(true)
|
||||||
|
let recipientDetails = recipients.data?.filter(item => item.recipient_id == values.recipientID)
|
||||||
|
let stateData = {...values, ...sendMoneyFee, details:{...recipientDetails[0]}}
|
||||||
|
|
||||||
//valid inputs before submitting. Just for texting remove later. check amoutn to be number
|
setTimeout(()=>{
|
||||||
|
setRequestStatus(false)
|
||||||
setInputs({
|
navigate('confirm-transfer', {state: stateData})
|
||||||
amount: '0',
|
}, 1000)
|
||||||
recipient: '',
|
|
||||||
comment: ''
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(()=>{
|
useEffect(()=>{
|
||||||
getRecipients()
|
getRecipients()
|
||||||
getSendMoneyFee()
|
},[])
|
||||||
},[newFee])
|
|
||||||
return (
|
return (
|
||||||
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
<div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
|
||||||
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
|
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
|
||||||
<div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
|
<div className="add-fund w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
|
||||||
<form className='transfer-fund-info' onSubmit={handleSubmit}>
|
<Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
|
||||||
{wallet.loading ?
|
{(props)=>{
|
||||||
<LoadingSpinner size='8' color='sky-blue' />
|
return (
|
||||||
:
|
<Form className='transfer-fund-info'>
|
||||||
wallet.data.length ?
|
{wallet.loading ?
|
||||||
<h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>
|
<LoadingSpinner size='8' color='sky-blue' />
|
||||||
{wallet.data.map(item => {
|
:
|
||||||
if(item.description == 'Naira'){
|
wallet.data.length ?
|
||||||
return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*1).toFixed(2)}`
|
<h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>
|
||||||
}
|
{wallet.data.map(item => {
|
||||||
})}
|
if(item.description == 'Naira'){
|
||||||
</h2>
|
return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*0.01).toFixed(2)}`
|
||||||
:
|
}
|
||||||
wallet.error ?
|
})}
|
||||||
<h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Opps! An Error Occured</h2>
|
</h2>
|
||||||
:
|
:
|
||||||
<h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>No Wallet Information Found!</h2>
|
wallet.error ?
|
||||||
}
|
<h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Opps! An Error Occured</h2>
|
||||||
<div className='my-3 md:flex items-center justify-between space-x-2'>
|
:
|
||||||
<div className='transfer-input w-full md:w-1/2'>
|
<h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>No Wallet Information Found!</h2>
|
||||||
<label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
|
|
||||||
<input className='w-full p-3 text-lg text-right bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
|
||||||
value={inputs.amount}
|
|
||||||
name='amount'
|
|
||||||
type="text"
|
|
||||||
placeholder='Amount'
|
|
||||||
required
|
|
||||||
onChange={handleChange}
|
|
||||||
onMouseEnter={()=>{setNewFee(false)}}
|
|
||||||
onMouseLeave={()=>{setNewFee(true)}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className='transfer-input w-full md:w-1/2'>
|
|
||||||
<label className='w-full text-slate-600 text-lg'>Fee <span className='text-red-500'>*</span></label>
|
|
||||||
<input className='w-full p-3 text-lg text-right bg-slate-100 opacity-50 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
|
||||||
value={sendMoneyFee.fee}
|
|
||||||
name='fee'
|
|
||||||
type="text"
|
|
||||||
placeholder='Fee'
|
|
||||||
required
|
|
||||||
disabled
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='my-3 md:flex items-center justify-end space-x-2'>
|
|
||||||
<div className='transfer-input w-full md:w-1/2'>
|
|
||||||
<label className='w-full text-slate-600 text-lg'>Total <span className='text-red-500'>*</span></label>
|
|
||||||
<input className='w-full p-3 text-lg text-right bg-slate-100 opacity-50 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
|
||||||
value={sendMoneyFee.total}
|
|
||||||
name='total'
|
|
||||||
type="text"
|
|
||||||
placeholder='Total'
|
|
||||||
required
|
|
||||||
disabled
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='relative my-3 md:flex items-center'>
|
|
||||||
<div className='transfer-input w-full'>
|
|
||||||
<div className='flex items-center justify-start'>
|
|
||||||
<label className='text-slate-600 text-lg'>Recipient
|
|
||||||
<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='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' value={inputs.recipient} name='recipient' onChange={handleChange}>
|
|
||||||
{recepients.loading ?
|
|
||||||
<option className='text-slate-500 text-lg' value="">Loading...</option>
|
|
||||||
:
|
|
||||||
recepients.data.length ?
|
|
||||||
<>
|
|
||||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
|
||||||
{recepients.data.map((item, index)=>(
|
|
||||||
<option key={index} value={item.account_no} className='text-slate-500 text-lg'>{item.recipient}</option>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
:
|
|
||||||
recepients.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! Click Add to Add</option>
|
|
||||||
}
|
}
|
||||||
</select>
|
<div className="xl:flex xl:space-x-7 mb-6">
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='my-3 md:flex items-center'>
|
<div className="field w-full mb-6 xl:mb-0">
|
||||||
<div className='transfer-input w-full'>
|
<InputCom
|
||||||
<label className='w-full text-slate-600 text-lg'>Comment <span className='text-red-500'>*</span></label>
|
label="Amount"
|
||||||
<input className='w-full p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
type="text"
|
||||||
value={inputs.comment}
|
name="amount"
|
||||||
name='comment'
|
placeholder='0'
|
||||||
type="text"
|
value={props.values.amount}
|
||||||
placeholder='Comment'
|
inputHandler={props.handleChange}
|
||||||
required
|
blurHandler={(e)=>{
|
||||||
onChange={handleChange}
|
getSendMoneyFee(e)
|
||||||
/>
|
}}
|
||||||
</div>
|
// props.handleBlur
|
||||||
</div>
|
// onMouseLeave={(e)=>{getSendMoneyFee(e)}}
|
||||||
|
/>
|
||||||
|
{(props.errors.amount && props.touched.amount) && <p className="text-sm text-red-500">{props.errors.amount}</p>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="field w-full">
|
||||||
|
<InputCom
|
||||||
|
label="Fee"
|
||||||
|
type="text"
|
||||||
|
name="fee"
|
||||||
|
value={sendMoneyFee.loading ? 'loading' : sendMoneyFee.fee}
|
||||||
|
disable={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className='transfer-fund-btn flex justify-end items-center py-4'>
|
<div className='md:flex items-center justify-end'>
|
||||||
<button className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
|
<div className="field w-full lg:w-1/2 mb-6">
|
||||||
</div>
|
<InputCom
|
||||||
</form>
|
label="Total"
|
||||||
|
type="text"
|
||||||
|
name="total"
|
||||||
|
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'>
|
||||||
|
<div className='flex items-center justify-start py-2'>
|
||||||
|
<label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Recipient
|
||||||
|
<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='add-recipient' className='mx-1 text-base text-white p-2 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
|
||||||
|
</div>
|
||||||
|
<select className='w-full text-base p-2 text-dark-gray dark:text-white rounded-md border border-slate-300 outline-0' 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! Click Add to Add</option>
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{(props.errors.recipientID && props.touched.recipientID) && <p className="text-sm text-red-500">{props.errors.recipientID}</p>}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="field w-full mb-6">
|
||||||
|
{/* <InputCom
|
||||||
|
label="Comment"
|
||||||
|
type="text"
|
||||||
|
name="comment"
|
||||||
|
value={inputs.comment}
|
||||||
|
inputHandler={handleChange}
|
||||||
|
/> */}
|
||||||
|
<label className='text-[#181c32] dark:text-white text-base font-semibold block mb-2.5'>Comment</label>
|
||||||
|
<textarea style={{resize: 'none'}}
|
||||||
|
className='text-base px-6 text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none'
|
||||||
|
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 py-4'>
|
||||||
|
{requestStatus ?
|
||||||
|
<LoadingSpinner size='8' color='sky-blue' />
|
||||||
|
:
|
||||||
|
<button type='submit' className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
</Formik>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
|
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
|
||||||
<div className="wallet w-full md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
|
<div className="wallet w-full md:p-8 p-4 h-full max-h-[800px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
|
||||||
<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
|
<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
|
||||||
<p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
|
<p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
|
||||||
{payment.loading ?
|
{payment.loading ?
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import Balance from './Balance'
|
|||||||
import TransferFund from './TransferFund'
|
import TransferFund from './TransferFund'
|
||||||
import AddFund from './AddFund'
|
import AddFund from './AddFund'
|
||||||
import AddRecipient from './AddRecipient'
|
import AddRecipient from './AddRecipient'
|
||||||
|
import ConfirmTransfer from './ConfirmTransfer'
|
||||||
|
|
||||||
function Wallet() {
|
function Wallet() {
|
||||||
return (
|
return (
|
||||||
@@ -113,8 +114,9 @@ const WalletRoutes = () => {
|
|||||||
<Route path='add-fund' element={<AddFund payment={paymentHistory} />} />
|
<Route path='add-fund' element={<AddFund payment={paymentHistory} />} />
|
||||||
<Route path='transfer-fund' element={<TransferFund payment={paymentHistory} wallet={walletList} />} />
|
<Route path='transfer-fund' element={<TransferFund payment={paymentHistory} wallet={walletList} />} />
|
||||||
<Route index element={<Balance payment={paymentHistory} purchase={purchaseHistory} coupon={couponHistory} wallet={walletList} />} />
|
<Route index element={<Balance payment={paymentHistory} purchase={purchaseHistory} coupon={couponHistory} wallet={walletList} />} />
|
||||||
<Route path='*' element={<Navigate to='/' />} />
|
|
||||||
<Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
|
<Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
|
||||||
|
<Route path='transfer-fund/confirm-transfer' element={<ConfirmTransfer payment={paymentHistory} wallet={walletList} />} />
|
||||||
|
<Route path='*' element={<Navigate to='/' />} />
|
||||||
</Route>
|
</Route>
|
||||||
</Routes>
|
</Routes>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -58,7 +58,7 @@ export default function WalletHeader(props) {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="eth text-xl font-bold text-purple">
|
<p className="eth text-xl font-bold text-purple">
|
||||||
{(value.amount*1).toFixed(2)} {value.code}
|
{(value.amount*0.01).toFixed(2)} {value.code}
|
||||||
</p>
|
</p>
|
||||||
<p className="usd text-base text-thin-light-gray text-right">
|
<p className="usd text-base text-thin-light-gray text-right">
|
||||||
{/*(773.69 USD)*/}
|
{/*(773.69 USD)*/}
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ import EthIco from "../Helpers/Icons/EthIco";
|
|||||||
import LtcIco from "../Helpers/Icons/LtcIco";
|
import LtcIco from "../Helpers/Icons/LtcIco";
|
||||||
import Usdt from "../Helpers/Icons/Usdt";
|
import Usdt from "../Helpers/Icons/Usdt";
|
||||||
import SelectBox from "../Helpers/SelectBox";
|
import SelectBox from "../Helpers/SelectBox";
|
||||||
|
import { NavLink } from "react-router-dom";
|
||||||
|
|
||||||
export default function RightSideBar() {
|
export default function RightSideBar() {
|
||||||
const filterDatas = ["Last 15 days", "Last Month", "Last 6 month"];
|
const filterDatas = ["Last 15 days", "Last Month", "Last 6 month"];
|
||||||
@@ -108,7 +109,10 @@ export default function RightSideBar() {
|
|||||||
{/* name */}
|
{/* name */}
|
||||||
<div>
|
<div>
|
||||||
<p className="text-thin-light-gray text-base font-medium">
|
<p className="text-thin-light-gray text-base font-medium">
|
||||||
Rarible
|
<NavLink
|
||||||
|
to="/history">
|
||||||
|
History
|
||||||
|
</NavLink>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{/* action */}
|
{/* action */}
|
||||||
@@ -152,7 +156,8 @@ export default function RightSideBar() {
|
|||||||
{/* name */}
|
{/* name */}
|
||||||
<div>
|
<div>
|
||||||
<p className="text-thin-light-gray text-base font-medium">
|
<p className="text-thin-light-gray text-base font-medium">
|
||||||
Myth Market
|
<NavLink
|
||||||
|
to="/referral">Refer a Friend</NavLink>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -186,7 +191,10 @@ export default function RightSideBar() {
|
|||||||
{/* name */}
|
{/* name */}
|
||||||
<div>
|
<div>
|
||||||
<p className="text-thin-light-gray text-base font-medium">
|
<p className="text-thin-light-gray text-base font-medium">
|
||||||
KnownOrigin
|
<NavLink
|
||||||
|
to="/resources">
|
||||||
|
Resources
|
||||||
|
</NavLink>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+101
-101
@@ -156,108 +156,108 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
|||||||
</span>
|
</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</li>
|
</li>
|
||||||
<li className="item group">
|
{/*<li className="item group">*/}
|
||||||
<NavLink
|
{/* <NavLink*/}
|
||||||
to="/notification"
|
{/* to="/notification"*/}
|
||||||
className={`nav-item flex items-center ${
|
{/* className={`nav-item flex items-center ${*/}
|
||||||
((navData) => (navData.isActive ? "active" : ""),
|
{/* ((navData) => (navData.isActive ? "active" : ""),*/}
|
||||||
sidebar ? "justify-start space-x-3.5" : "justify-center")
|
{/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
|
||||||
}`}
|
{/* }`}*/}
|
||||||
>
|
{/* >*/}
|
||||||
<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">
|
{/* <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="notification-setting" />
|
{/* <Icons name="notification-setting" />*/}
|
||||||
</span>
|
{/* </span>*/}
|
||||||
<span
|
{/* <span*/}
|
||||||
className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
|
{/* className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${*/}
|
||||||
sidebar ? "active flex-1" : "w-0"
|
{/* sidebar ? "active flex-1" : "w-0"*/}
|
||||||
}`}
|
{/* }`}*/}
|
||||||
>
|
{/* >*/}
|
||||||
Messages
|
{/* Messages*/}
|
||||||
</span>
|
{/* </span>*/}
|
||||||
</NavLink>
|
{/* </NavLink>*/}
|
||||||
</li>
|
{/*</li>*/}
|
||||||
<li className="item group">
|
{/*<li className="item group">*/}
|
||||||
<NavLink
|
{/* <NavLink*/}
|
||||||
to="/my-wallet"
|
{/* to="/my-wallet"*/}
|
||||||
className={`nav-item flex items-center ${
|
{/* className={`nav-item flex items-center ${*/}
|
||||||
((navData) => (navData.isActive ? "active" : ""),
|
{/* ((navData) => (navData.isActive ? "active" : ""),*/}
|
||||||
sidebar ? "justify-start space-x-3.5" : "justify-center")
|
{/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
|
||||||
}`}
|
{/* }`}*/}
|
||||||
>
|
{/* >*/}
|
||||||
<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">
|
{/* <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="wallet-two" />
|
{/* <Icons name="wallet-two" />*/}
|
||||||
</span>
|
{/* </span>*/}
|
||||||
<span
|
{/* <span*/}
|
||||||
className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
|
{/* className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${*/}
|
||||||
sidebar ? "active flex-1" : "w-0"
|
{/* sidebar ? "active flex-1" : "w-0"*/}
|
||||||
}`}
|
{/* }`}*/}
|
||||||
>
|
{/* >*/}
|
||||||
My Wallet
|
{/* My Wallet*/}
|
||||||
</span>
|
{/* </span>*/}
|
||||||
</NavLink>
|
{/* </NavLink>*/}
|
||||||
</li>
|
{/*</li>*/}
|
||||||
<li className="item group">
|
{/*<li className="item group">*/}
|
||||||
<NavLink
|
{/* <NavLink*/}
|
||||||
to="/resources"
|
{/* to="/resources"*/}
|
||||||
className={`nav-item flex items-center ${
|
{/* className={`nav-item flex items-center ${*/}
|
||||||
((navData) => (navData.isActive ? "active" : ""),
|
{/* ((navData) => (navData.isActive ? "active" : ""),*/}
|
||||||
sidebar ? "justify-start space-x-3.5" : "justify-center")
|
{/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
|
||||||
}`}
|
{/* }`}*/}
|
||||||
>
|
{/* >*/}
|
||||||
<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">
|
{/* <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="star" />
|
{/* <Icons name="star" />*/}
|
||||||
</span>
|
{/* </span>*/}
|
||||||
<span
|
{/* <span*/}
|
||||||
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
|
{/* className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
|
||||||
sidebar ? "active flex-1" : "w-0"
|
{/* sidebar ? "active flex-1" : "w-0"*/}
|
||||||
}`}
|
{/* }`}*/}
|
||||||
>
|
{/* >*/}
|
||||||
Resources
|
{/* Resources*/}
|
||||||
</span>
|
{/* </span>*/}
|
||||||
</NavLink>
|
{/* </NavLink>*/}
|
||||||
</li>
|
{/*</li>*/}
|
||||||
|
|
||||||
<li className="item group">
|
{/*<li className="item group">*/}
|
||||||
<NavLink
|
{/* <NavLink*/}
|
||||||
to="/history"
|
{/* to="/history"*/}
|
||||||
className={`nav-item flex items-center ${
|
{/* className={`nav-item flex items-center ${*/}
|
||||||
((navData) => (navData.isActive ? "active" : ""),
|
{/* ((navData) => (navData.isActive ? "active" : ""),*/}
|
||||||
sidebar ? "justify-start space-x-3.5" : "justify-center")
|
{/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
|
||||||
}`}
|
{/* }`}*/}
|
||||||
>
|
{/* >*/}
|
||||||
<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">
|
{/* <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="history" />
|
{/* <Icons name="history" />*/}
|
||||||
</span>
|
{/* </span>*/}
|
||||||
<span
|
{/* <span*/}
|
||||||
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
|
{/* className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
|
||||||
sidebar ? "active flex-1" : "w-0"
|
{/* sidebar ? "active flex-1" : "w-0"*/}
|
||||||
}`}
|
{/* }`}*/}
|
||||||
>
|
{/* >*/}
|
||||||
History
|
{/* History*/}
|
||||||
</span>
|
{/* </span>*/}
|
||||||
</NavLink>
|
{/* </NavLink>*/}
|
||||||
</li>
|
{/*</li>*/}
|
||||||
|
|
||||||
<li className="item group">
|
{/*<li className="item group">*/}
|
||||||
<NavLink
|
{/* <NavLink*/}
|
||||||
to="/referral"
|
{/* to="/referral"*/}
|
||||||
className={`nav-item flex items-center ${
|
{/* className={`nav-item flex items-center ${*/}
|
||||||
((navData) => (navData.isActive ? "active" : ""),
|
{/* ((navData) => (navData.isActive ? "active" : ""),*/}
|
||||||
sidebar ? "justify-start space-x-3.5" : "justify-center")
|
{/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
|
||||||
}`}
|
{/* }`}*/}
|
||||||
>
|
{/* >*/}
|
||||||
<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">
|
{/* <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="history" />
|
{/* <Icons name="history" />*/}
|
||||||
</span>
|
{/* </span>*/}
|
||||||
<span
|
{/* <span*/}
|
||||||
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
|
{/* className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
|
||||||
sidebar ? "active flex-1" : "w-0"
|
{/* sidebar ? "active flex-1" : "w-0"*/}
|
||||||
}`}
|
{/* }`}*/}
|
||||||
>
|
{/* >*/}
|
||||||
Refer a Friend
|
{/* Refer a Friend*/}
|
||||||
</span>
|
{/* </span>*/}
|
||||||
</NavLink>
|
{/* </NavLink>*/}
|
||||||
</li>
|
{/*</li>*/}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -290,7 +290,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
|||||||
</li>
|
</li>
|
||||||
<li className="item group">
|
<li className="item group">
|
||||||
<NavLink
|
<NavLink
|
||||||
to="/market"
|
to="/my-active-jobs"
|
||||||
className={`nav-item flex items-center ${
|
className={`nav-item flex items-center ${
|
||||||
((navData) => (navData.isActive ? "active" : ""),
|
((navData) => (navData.isActive ? "active" : ""),
|
||||||
sidebar ? "justify-start space-x-3.5" : "justify-center")
|
sidebar ? "justify-start space-x-3.5" : "justify-center")
|
||||||
|
|||||||
@@ -40,6 +40,10 @@ export default function Settings() {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 7,
|
id: 7,
|
||||||
|
name: "privacy",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
name: "terms",
|
name: "terms",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
@@ -191,6 +195,23 @@ export default function Settings() {
|
|||||||
<p className="text-18 tracking-wide">FAQ</p>
|
<p className="text-18 tracking-wide">FAQ</p>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
<li
|
||||||
|
onClick={() => tabHandler("terms")}
|
||||||
|
className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
|
||||||
|
tab === "privacy"
|
||||||
|
? "text-purple"
|
||||||
|
: " text-thin-light-gray"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<Icons name="page-right" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-18 tracking-wide">
|
||||||
|
Privacy Policy
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
<li
|
<li
|
||||||
onClick={() => tabHandler("terms")}
|
onClick={() => tabHandler("terms")}
|
||||||
className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
|
className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
|
||||||
|
|||||||
@@ -170,6 +170,17 @@ class usersService {
|
|||||||
return this.postAuxEnd("/recipients", postData);
|
return this.postAuxEnd("/recipients", postData);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//END POINT CALL FOR UPDATE PROFILE
|
||||||
|
addRecipient(data){
|
||||||
|
var postData = {
|
||||||
|
uid: localStorage.getItem("uid"),
|
||||||
|
member_id: localStorage.getItem("member_id"),
|
||||||
|
sessionid: localStorage.getItem("session_token"),
|
||||||
|
...data
|
||||||
|
};
|
||||||
|
return this.postAuxEnd("/addrecipient", postData);
|
||||||
|
}
|
||||||
|
|
||||||
// API FUNCTION TO GET SEND MONEY FEE
|
// API FUNCTION TO GET SEND MONEY FEE
|
||||||
getSendMoneyFee(amount){
|
getSendMoneyFee(amount){
|
||||||
var postData = {
|
var postData = {
|
||||||
@@ -219,6 +230,19 @@ class usersService {
|
|||||||
};
|
};
|
||||||
return this.postAuxEnd("/paymenthx", postData);
|
return this.postAuxEnd("/paymenthx", postData);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// API FUNCTION TO GET PAYMENT HISTORY
|
||||||
|
sendMoney(reqData){
|
||||||
|
var postData = {
|
||||||
|
uid: localStorage.getItem("uid"),
|
||||||
|
member_id: localStorage.getItem("member_id"),
|
||||||
|
sessionid: localStorage.getItem("session_token"),
|
||||||
|
senderid: localStorage.getItem("member_id"),
|
||||||
|
action: 33020,
|
||||||
|
...reqData
|
||||||
|
};
|
||||||
|
return this.postAuxEnd("/sendmoney", postData);
|
||||||
|
}
|
||||||
|
|
||||||
//END POINT CALL FOR REFERRAL HISTORY
|
//END POINT CALL FOR REFERRAL HISTORY
|
||||||
getReferralHx(){
|
getReferralHx(){
|
||||||
|
|||||||
Reference in New Issue
Block a user