Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c45815d437 | |||
| f86ac54e5c | |||
| 636651aa38 | |||
| 32cfed3394 | |||
| abd5bb07b9 | |||
| 826fff7acf | |||
| bd956cb470 | |||
| 80e6f2e3db | |||
| 425df92dba |
@@ -21,6 +21,10 @@ REACT_APP_SESSION_EXPIRE_MINUTES=300000
|
|||||||
REACT_APP_SESSION_EXPIRE_CHECKER=60000
|
REACT_APP_SESSION_EXPIRE_CHECKER=60000
|
||||||
|
|
||||||
REACT_APP_LOGIN_ERROR_TIMEOUT=7000
|
REACT_APP_LOGIN_ERROR_TIMEOUT=7000
|
||||||
|
REACT_APP_SIGNUP_ERROR_TIMEOUT=7000
|
||||||
|
|
||||||
|
# Had to change the error time to 3sec cause it took too long
|
||||||
|
REACT_APP_RESET_START_ERROR_TIMEOUT=3000
|
||||||
|
|
||||||
#apigate.lotus.g1.wrenchboard.com:76.209.103.227
|
#apigate.lotus.g1.wrenchboard.com:76.209.103.227
|
||||||
#apigate.orion.g1.wrenchboard.com:76.209.103.227
|
#apigate.orion.g1.wrenchboard.com:76.209.103.227
|
||||||
|
|||||||
@@ -1,49 +1,153 @@
|
|||||||
import React from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { Link } from 'react-router-dom';
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
import titleShape from "../../../assets/images/shape/title-shape-two.svg";
|
import WrenchBoard from "../../../assets/images/wrenchboard.png"
|
||||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
import InputCom from "../../Helpers/Inputs/InputCom";
|
||||||
import AuthLayout from "../AuthLayout";
|
import AuthLayout from "../AuthLayout";
|
||||||
|
import usersService from "../../../services/UsersService";
|
||||||
|
|
||||||
export default function ForgotPassword() {
|
export default function ForgotPassword() {
|
||||||
|
const [checked, setValue] = useState(false);
|
||||||
|
const [resetLoading, setResetLoading] = useState(false)
|
||||||
|
// email
|
||||||
|
const [email, setMail] = useState("");
|
||||||
|
const [msgError, setMsgError] = useState('');
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const userApi = new usersService();
|
||||||
|
|
||||||
|
const handleEmail = (e) => {
|
||||||
|
setMail(e?.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const humanChecker = () => {
|
||||||
|
setValue(!checked);
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetHandler = async () => {
|
||||||
|
if (email == '') {
|
||||||
|
setMsgError('An email is required')
|
||||||
|
} else if (!checked) {
|
||||||
|
setMsgError('Check if you are human')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (email != '' && checked) {
|
||||||
|
const reqData = { email }
|
||||||
|
setResetLoading(true)
|
||||||
|
try {
|
||||||
|
const res = await userApi.StartResetPassword(reqData)
|
||||||
|
if (res.status === 200) {
|
||||||
|
const { data } = res
|
||||||
|
if (data.status == -1) {
|
||||||
|
setMsgError('This is an incorrect or duplicate email')
|
||||||
|
setResetLoading(false)
|
||||||
|
} else if (data.status > 0) {
|
||||||
|
setResetLoading(false)
|
||||||
|
navigate("/verify-you", { replace: true })
|
||||||
|
} else{
|
||||||
|
setMsgError("reset was not successful")
|
||||||
|
setResetLoading(false)
|
||||||
|
}
|
||||||
|
setMail("")
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
setResetLoading(false)
|
||||||
|
setMail("")
|
||||||
|
setMsgError('An error occurred')
|
||||||
|
throw new Error(error)
|
||||||
|
} finally {
|
||||||
|
setTimeout(() => {
|
||||||
|
setMsgError(null)
|
||||||
|
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
setMsgError(null)
|
||||||
|
}, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<AuthLayout
|
<AuthLayout
|
||||||
slogan="Welcome to WrenchBoard"
|
slogan="Welcome to WrenchBoard"
|
||||||
>
|
>
|
||||||
<div className="content-wrapper xl:bg-white dark:bg-dark-white xl:px-[70px] w-full sm:w-auto 2xl:px-[100px] h-[818px] rounded-xl ">
|
<div className="w-full">
|
||||||
<div className="flex flex-col justify-center w-full h-full px-5">
|
<div className='mb-12'>
|
||||||
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
|
<Link to='#'>
|
||||||
<h1 className="sm:text-5xl text-4xl font-bold sm:leading-[74px] text-dark-gray dark:text-white">
|
<img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
|
||||||
Forget Password
|
</Link>
|
||||||
</h1>
|
</div>
|
||||||
<div className="shape sm:w-[377px] w-[270px] -mt-1 ml-0">
|
<div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
|
||||||
<img src={titleShape} alt="shape" />
|
<div className="flex flex-col justify-center w-full h-full px-5">
|
||||||
|
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
|
||||||
|
<h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
|
||||||
|
fontSize: 'calc(1rem + .6vw)'
|
||||||
|
}}>
|
||||||
|
Forget Password
|
||||||
|
</h1>
|
||||||
|
<span className="text-gray-400 font-medium text-xl">Enter your email to reset your password.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="input-area">
|
||||||
<div className="input-area">
|
<div className="input-item mb-10">
|
||||||
<div className="input-item mb-5">
|
<InputCom
|
||||||
<InputCom
|
placeholder="Your Username/Email"
|
||||||
placeholder="example@quomodosoft.com"
|
label="Email"
|
||||||
label="Email Address"
|
name="email"
|
||||||
name="email"
|
type="email"
|
||||||
type="email"
|
value={email}
|
||||||
iconName="message"
|
inputHandler={handleEmail}
|
||||||
/>
|
iconName="message"
|
||||||
</div>
|
/>
|
||||||
<div className="signin-area mb-3.5">
|
</div>
|
||||||
<a
|
{msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
|
||||||
href="/verify-you"
|
{/* hCaptha clone for the time being */}
|
||||||
className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
|
<div className="mb-10">
|
||||||
>
|
<div className="w-[303px] h-[78px] mx-auto overflow-hidden">
|
||||||
Send Code
|
<div className="w-[300px] h-[74px] bg-white bottom-[1px] rounded border-gray-100 overflow-hidden cursor-pointer">
|
||||||
</a>
|
{/* Checkbox */}
|
||||||
|
<div className="h-full relative inline-block">
|
||||||
|
<div className="relative table top-0 h-full">
|
||||||
<Link to="/"
|
<div className="table-cell align-middle">
|
||||||
className=" my-40 font-bold flex justify-center text-red-500 items-center"
|
<div className="relative w-[30px] h-[30px] mx-[15px]">
|
||||||
>
|
<input type="checkbox" name="human-checkbox" id="human-checkbox" className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white" onClick={humanChecker} />
|
||||||
Back to Home
|
</div>
|
||||||
</Link>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="h-full relative inline-block w-[170px]">
|
||||||
|
<label className="relative table top-0 h-full">
|
||||||
|
<label className="table-cell align-middle">
|
||||||
|
<label className="text-800 text-sm" htmlFor="human-checkbox">
|
||||||
|
I am human
|
||||||
|
</label>
|
||||||
|
</label>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="h-full relative inline-block w-16"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="signin-area mb-3.5">
|
||||||
|
<div className="flex justify-center items-center gap-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={resetHandler}
|
||||||
|
className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
|
||||||
|
>
|
||||||
|
{resetLoading ? (
|
||||||
|
<div className="signup btn-loader"></div>
|
||||||
|
) : (
|
||||||
|
<span>Send Code</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => navigate("/login")}
|
||||||
|
className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,8 +4,6 @@ import { toast } from "react-toastify";
|
|||||||
import googleLogo from "../../../assets/images/google-logo.svg";
|
import googleLogo from "../../../assets/images/google-logo.svg";
|
||||||
import appleLogo from "../../../assets/images/apple-black.svg";
|
import appleLogo from "../../../assets/images/apple-black.svg";
|
||||||
import facebookLogo from "../../../assets/images/facebook-4.svg";
|
import facebookLogo from "../../../assets/images/facebook-4.svg";
|
||||||
// import titleShape from "../../../assets/images/shape/title-shape.svg";
|
|
||||||
import titleShape from "../../../assets/images/shape/login_straight_underline.svg";
|
|
||||||
import WrenchBoard from "../../../assets/images/wrenchboard.png"
|
import WrenchBoard from "../../../assets/images/wrenchboard.png"
|
||||||
import usersService from "../../../services/UsersService";
|
import usersService from "../../../services/UsersService";
|
||||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
import InputCom from "../../Helpers/Inputs/InputCom";
|
||||||
@@ -24,8 +22,6 @@ export default function Login() {
|
|||||||
setValue(!checked);
|
setValue(!checked);
|
||||||
};
|
};
|
||||||
|
|
||||||
console.log(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT)
|
|
||||||
|
|
||||||
// email
|
// email
|
||||||
const [email, setMail] = useState("");
|
const [email, setMail] = useState("");
|
||||||
const handleEmail = (e) => {
|
const handleEmail = (e) => {
|
||||||
@@ -168,7 +164,7 @@ export default function Login() {
|
|||||||
Forgot Password
|
Forgot Password
|
||||||
</a>
|
</a>
|
||||||
</div> */}
|
</div> */}
|
||||||
{loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">Invalid username or password- Please <Link to='/#' className='text-[#009ef7]'>reset your password</Link> or <Link to='/signup' className='text-[#009ef7]'>create a new account</Link></div>}
|
{loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px]">Invalid username or password- Please <Link to='/#' className='text-[#009ef7]'>reset your password</Link> or <Link to='/signup' className='text-[#009ef7]'>create a new account</Link></div>}
|
||||||
{msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
|
{msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
|
||||||
<div className="signin-area mb-3.5">
|
<div className="signin-area mb-3.5">
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
|
|||||||
@@ -29,14 +29,15 @@ export default function SignUp() {
|
|||||||
// To Show and Hide Password
|
// To Show and Hide Password
|
||||||
const togglePasswordVisibility = () => {
|
const togglePasswordVisibility = () => {
|
||||||
setShowPassword(!showPassword);
|
setShowPassword(!showPassword);
|
||||||
// return console.log('showPassword')
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const rememberMe = () => {
|
const rememberMe = () => {
|
||||||
setValue(!checked);
|
setValue(!checked);
|
||||||
};
|
};
|
||||||
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const userApi = new usersService();
|
const userApi = new usersService();
|
||||||
|
|
||||||
// Get Country Api
|
// Get Country Api
|
||||||
const getCountryList = async () => {
|
const getCountryList = async () => {
|
||||||
const res = await userApi.getSignupCountryData()
|
const res = await userApi.getSignupCountryData()
|
||||||
@@ -74,27 +75,32 @@ export default function SignUp() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const res = await userApi.CreateUser(reqData)
|
const res = await userApi.CreateUser(reqData)
|
||||||
|
setSignUpLoading(true)
|
||||||
|
|
||||||
if (res.status === 200) {
|
if (res.status === 200) {
|
||||||
const { data } = res
|
const { data } = res
|
||||||
if (data.status == -1 && data.acc == 'DULPICATE') {
|
if (data.status == -1 && data.acc == 'DULPICATE') {
|
||||||
setMsgError('This account has been already created')
|
setMsgError('This account has been already created')
|
||||||
|
setSignUpLoading(false)
|
||||||
}
|
}
|
||||||
if (data.status > 0 && data.internal_return == 100 && data.session != '') {
|
if (data.status > 0 && data.internal_return == 100 && data.session != '') {
|
||||||
localStorage.setItem("email", `${data.email}`);
|
localStorage.setItem("email", `${data.email}`);
|
||||||
localStorage.setItem("country", `${data.country}`);
|
localStorage.setItem("country", `${data.country}`);
|
||||||
localStorage.setItem("firstname", `${data.firstname}`);
|
localStorage.setItem("firstname", `${data.firstname}`);
|
||||||
localStorage.setItem("lastname", `${data.lastname}`);
|
localStorage.setItem("lastname", `${data.lastname}`);
|
||||||
setSignUpLoading(true)
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
navigate("/", { replace: true });
|
navigate("/", { replace: true });
|
||||||
setSignUpLoading(false)
|
setSignUpLoading(false)
|
||||||
}, 2000)
|
}, 2000)
|
||||||
console.log('Success')
|
|
||||||
} else {
|
} else {
|
||||||
setMsgError(data.status)
|
setMsgError(data.status)
|
||||||
|
setSignUpLoading(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
setMsgError('This account does not exist')
|
||||||
|
setSignUpLoading(false)
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
throw new Error(error)
|
throw new Error(error)
|
||||||
@@ -102,7 +108,7 @@ export default function SignUp() {
|
|||||||
} finally {
|
} finally {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setMsgError(null)
|
setMsgError(null)
|
||||||
}, 7000)
|
}, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ export default function InputCom({
|
|||||||
{label}
|
{label}
|
||||||
</label>
|
</label>
|
||||||
)}
|
)}
|
||||||
{forgotPassword && <Link href="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
|
{forgotPassword && <Link to="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
|
||||||
</div>
|
</div>
|
||||||
<div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
|
<div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
|
||||||
<input
|
<input
|
||||||
|
|||||||
@@ -1,19 +1,58 @@
|
|||||||
import React, {useState} from 'react'
|
import React, {useEffect, useState} from 'react'
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
import RecentActivityTable from './WalletComponent/RecentActivityTable'
|
import RecentActivityTable from './WalletComponent/RecentActivityTable'
|
||||||
import LoadingSpinner from '../Spinners/LoadingSpinner'
|
import LoadingSpinner from '../Spinners/LoadingSpinner'
|
||||||
|
|
||||||
function TransferFund({payment}) {
|
import usersService from '../../services/UsersService'
|
||||||
|
|
||||||
|
function TransferFund({payment, wallet}) {
|
||||||
|
const apiCall = new usersService()
|
||||||
|
|
||||||
|
let [newFee, setNewFee] = useState(false)
|
||||||
|
|
||||||
|
let [recepients, setRecipients] = useState({ // FOR COUPON HISTORY
|
||||||
|
loading: true,
|
||||||
|
data: [],
|
||||||
|
error: false
|
||||||
|
})
|
||||||
|
|
||||||
|
let [sendMoneyFee, setSendMoneyFee] = useState({fee: 0, total: 0}) // HOLD THE VALUE FOR SEND MONEY FEE
|
||||||
|
|
||||||
//STATE FOR CONTROLLED INPUTS
|
//STATE FOR CONTROLLED INPUTS
|
||||||
let [inputs, setInputs] = useState({
|
let [inputs, setInputs] = useState({
|
||||||
amount: '0',
|
amount: '0',
|
||||||
fee: '0',
|
|
||||||
recipient: '',
|
recipient: '',
|
||||||
total: '0',
|
|
||||||
comment: ''
|
comment: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
|
//FUNCTION TO GET RECIPIENT LIST
|
||||||
|
const getRecipients = ()=>{
|
||||||
|
apiCall.getRecipient().then((res)=>{
|
||||||
|
if(res.data.internal_return < 0){ // success but no data
|
||||||
|
setRecipients(prev => ({...prev, loading: false}))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
setRecipients(prev => ({...prev, loading: false, data: res.data.result_list}))
|
||||||
|
}).catch((error)=>{
|
||||||
|
setRecipients(prev => ({...prev, loading: false, error: true}))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//FUNCTION TO GET SEND MONEY FEE
|
||||||
|
const getSendMoneyFee = ()=>{
|
||||||
|
let {amount} = inputs
|
||||||
|
if(Number(amount) <= 0 || amount=='' || isNaN(amount)){
|
||||||
|
setSendMoneyFee({fee: 0, total: 0})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
apiCall.getSendMoneyFee(Number(amount)).then((res)=>{
|
||||||
|
setSendMoneyFee({fee: res.data.processing_fee, total: res.data.total_amount})
|
||||||
|
}).catch((error)=>{
|
||||||
|
setSendMoneyFee({fee: 0, total: 0})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// FUNCTION TO HANDLE INPUT CHANGE
|
// FUNCTION TO HANDLE INPUT CHANGE
|
||||||
const handleChange = ({target:{name, value}}) => {
|
const handleChange = ({target:{name, value}}) => {
|
||||||
setInputs(prev => ({...prev, [name]:value}))
|
setInputs(prev => ({...prev, [name]:value}))
|
||||||
@@ -23,22 +62,41 @@ function TransferFund({payment}) {
|
|||||||
const handleSubmit = (e) => {
|
const handleSubmit = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
//valid inputs before submitting. Just for texting remove later
|
//valid inputs before submitting. Just for texting remove later. check amoutn to be number
|
||||||
|
|
||||||
setInputs({
|
setInputs({
|
||||||
amount: '0',
|
amount: '0',
|
||||||
fee: '0',
|
|
||||||
recipient: '',
|
recipient: '',
|
||||||
total: '0',
|
|
||||||
comment: ''
|
comment: ''
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
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'>
|
<form className='transfer-fund-info' onSubmit={handleSubmit}>
|
||||||
<h2 className='my-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Withdraw from Naira Wallet : ₦0.00</h2>
|
{wallet.loading ?
|
||||||
|
<LoadingSpinner size='8' color='sky-blue' />
|
||||||
|
:
|
||||||
|
wallet.data.length ?
|
||||||
|
<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'){
|
||||||
|
return `Withdraw from Naira Wallet : ${item.symbol}${(item.amount*1).toFixed(2)}`
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
</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>
|
||||||
|
:
|
||||||
|
<h2 className='my-4 py-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>No Wallet Information Found!</h2>
|
||||||
|
}
|
||||||
<div className='my-3 md:flex items-center justify-between space-x-2'>
|
<div className='my-3 md:flex items-center justify-between space-x-2'>
|
||||||
<div className='transfer-input w-full md:w-1/2'>
|
<div className='transfer-input w-full md:w-1/2'>
|
||||||
<label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
|
<label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
|
||||||
@@ -49,31 +107,33 @@ function TransferFund({payment}) {
|
|||||||
placeholder='Amount'
|
placeholder='Amount'
|
||||||
required
|
required
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
|
onMouseEnter={()=>{setNewFee(false)}}
|
||||||
|
onMouseLeave={()=>{setNewFee(true)}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='transfer-input w-full md:w-1/2'>
|
<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>
|
<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 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
<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={inputs.fee}
|
value={sendMoneyFee.fee}
|
||||||
name='fee'
|
name='fee'
|
||||||
type="text"
|
type="text"
|
||||||
placeholder='Fee'
|
placeholder='Fee'
|
||||||
required
|
required
|
||||||
onChange={handleChange}
|
disabled
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='my-3 md:flex items-center justify-end space-x-2'>
|
<div className='my-3 md:flex items-center justify-end space-x-2'>
|
||||||
<div className='transfer-input w-full md:w-1/2'>
|
<div className='transfer-input w-full md:w-1/2'>
|
||||||
<label className='w-full text-slate-600 text-lg'>Amount <span className='text-red-500'>*</span></label>
|
<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 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg'
|
<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={inputs.total}
|
value={sendMoneyFee.total}
|
||||||
name='total'
|
name='total'
|
||||||
type="text"
|
type="text"
|
||||||
placeholder='Total'
|
placeholder='Total'
|
||||||
required
|
required
|
||||||
onChange={handleChange}
|
disabled
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -87,8 +147,23 @@ function TransferFund({payment}) {
|
|||||||
</label>
|
</label>
|
||||||
<Link to='add-recipient' 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>
|
</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}>
|
<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}>
|
||||||
<option className='text-slate-500 text-lg' value="">Select...</option>
|
{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>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -108,7 +183,7 @@ function TransferFund({payment}) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='transfer-fund-btn flex justify-end items-center py-4'>
|
<div className='transfer-fund-btn flex justify-end items-center py-4'>
|
||||||
<button onClick={handleSubmit} className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
|
<button className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md'>Continue</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@@ -118,22 +193,6 @@ function TransferFund({payment}) {
|
|||||||
<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-[600px] 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>
|
||||||
{/* <table className="wallet-activity w-full table-auto border-collapse text-left">
|
|
||||||
<thead className='border-b-2'>
|
|
||||||
<tr className='text-slate-600'>
|
|
||||||
<th className="py-3">Date</th>
|
|
||||||
<th className="py-3">Recipient</th>
|
|
||||||
<th className="py-3">Amount/FeeConf/Status</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr className='text-slate-500'>
|
|
||||||
<td className="py-3">Item</td>
|
|
||||||
<td className="py-3">Item</td>
|
|
||||||
<td className="py-3">Item</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table> */}
|
|
||||||
{payment.loading ?
|
{payment.loading ?
|
||||||
<LoadingSpinner size='16' color='sky-blue' />
|
<LoadingSpinner size='16' color='sky-blue' />
|
||||||
:
|
:
|
||||||
|
|||||||
@@ -55,7 +55,6 @@ const WalletRoutes = () => {
|
|||||||
setWalletList(prev => ({...prev, loading: false}))
|
setWalletList(prev => ({...prev, loading: false}))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
console.log('wallet', res)
|
|
||||||
setWalletList(prev => ({...prev, loading: false, data: res.data.result_list}))
|
setWalletList(prev => ({...prev, loading: false, data: res.data.result_list}))
|
||||||
}).catch((error)=>{
|
}).catch((error)=>{
|
||||||
setWalletList(prev => ({...prev, loading: false, error: true}))
|
setWalletList(prev => ({...prev, loading: false, error: true}))
|
||||||
@@ -82,6 +81,7 @@ const WalletRoutes = () => {
|
|||||||
setPurchaseHistory(prev => ({...prev, loading: false}))
|
setPurchaseHistory(prev => ({...prev, loading: false}))
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
// console.log('purchase',res.data)
|
||||||
setPurchaseHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
|
setPurchaseHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
|
||||||
}).catch((error)=>{
|
}).catch((error)=>{
|
||||||
setPurchaseHistory(prev => ({...prev, loading: false, error: true}))
|
setPurchaseHistory(prev => ({...prev, loading: false, error: true}))
|
||||||
@@ -111,7 +111,7 @@ const WalletRoutes = () => {
|
|||||||
<Routes>
|
<Routes>
|
||||||
<Route element={<Wallet />}>
|
<Route element={<Wallet />}>
|
||||||
<Route path='add-fund' element={<AddFund payment={paymentHistory} />} />
|
<Route path='add-fund' element={<AddFund payment={paymentHistory} />} />
|
||||||
<Route path='transfer-fund' element={<TransferFund payment={paymentHistory} />} />
|
<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='*' element={<Navigate to='/' />} />
|
||||||
<Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
|
<Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
|
||||||
|
|||||||
@@ -16,10 +16,10 @@ function PurchasesTable({purchase}) {
|
|||||||
<tbody>
|
<tbody>
|
||||||
{purchase.data.map((item, index) => (
|
{purchase.data.map((item, index) => (
|
||||||
<tr key={index} className='text-slate-500'>
|
<tr key={index} className='text-slate-500'>
|
||||||
<td className="p-2">{item.trx_date}</td>
|
<td className="p-2">{item.added_date}</td>
|
||||||
<td className="p-2" dangerouslySetInnerHTML={{__html:item.recipient}}></td>
|
<td className="p-2">{item.confirmation}</td>
|
||||||
<td className="p-2">{item.amount}</td>
|
<td className="p-2">{item.amount}</td>
|
||||||
<td className="p-2">{item.status}</td>
|
<td className="p-2">{item.fee}</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|||||||
@@ -8,7 +8,6 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { pathname } = useLocation();
|
const { pathname } = useLocation();
|
||||||
|
|
||||||
|
|
||||||
//Removing Data stored at localStorage after session expires
|
//Removing Data stored at localStorage after session expires
|
||||||
const expireSession = () => {
|
const expireSession = () => {
|
||||||
localStorage.removeItem("email");
|
localStorage.removeItem("email");
|
||||||
|
|||||||
@@ -6,6 +6,11 @@ class usersService {
|
|||||||
console.log("WRB Service Entry");
|
console.log("WRB Service Entry");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
CreateUser(reqData){
|
||||||
|
localStorage.setItem("session_token", ``);
|
||||||
|
return this.postAuxEnd("/createuser", reqData);
|
||||||
|
}
|
||||||
|
|
||||||
getHomeDate(){
|
getHomeDate(){
|
||||||
var postData = {
|
var postData = {
|
||||||
uuid: localStorage.getItem("uuid"),
|
uuid: localStorage.getItem("uuid"),
|
||||||
@@ -48,11 +53,6 @@ class usersService {
|
|||||||
return this.postAuxEnd("/apigate", null);
|
return this.postAuxEnd("/apigate", null);
|
||||||
}
|
}
|
||||||
|
|
||||||
CreateUser(reqData){
|
|
||||||
localStorage.setItem("session_token", ``);
|
|
||||||
return this.postAuxEnd("/createuser", reqData);
|
|
||||||
}
|
|
||||||
|
|
||||||
getLoadProfile(){
|
getLoadProfile(){
|
||||||
var postData = {
|
var postData = {
|
||||||
uuid: localStorage.getItem("uid"),
|
uuid: localStorage.getItem("uid"),
|
||||||
@@ -140,6 +140,31 @@ class usersService {
|
|||||||
return this.postAuxEnd("/couponpending", postData);
|
return this.postAuxEnd("/couponpending", postData);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// API FUNCTION TO GET COUPON HISTORY
|
||||||
|
getRecipient(){
|
||||||
|
var postData = {
|
||||||
|
uid: localStorage.getItem("uid"),
|
||||||
|
member_id: localStorage.getItem("member_id"),
|
||||||
|
sessionid: localStorage.getItem("session_token"),
|
||||||
|
page:1,
|
||||||
|
limit :20,
|
||||||
|
action: 11175
|
||||||
|
};
|
||||||
|
return this.postAuxEnd("/recipients", postData);
|
||||||
|
}
|
||||||
|
|
||||||
|
// API FUNCTION TO GET SEND MONEY FEE
|
||||||
|
getSendMoneyFee(amount){
|
||||||
|
var postData = {
|
||||||
|
uid: localStorage.getItem("uid"),
|
||||||
|
member_id: localStorage.getItem("member_id"),
|
||||||
|
sessionid: localStorage.getItem("session_token"),
|
||||||
|
amount,
|
||||||
|
action: 33025
|
||||||
|
};
|
||||||
|
return this.postAuxEnd("/sendmoneyfee", postData);
|
||||||
|
}
|
||||||
|
|
||||||
// API FUNCTION TO GET COUPON HISTORY
|
// API FUNCTION TO GET COUPON HISTORY
|
||||||
getCouponHx(){
|
getCouponHx(){
|
||||||
var postData = {
|
var postData = {
|
||||||
@@ -196,6 +221,10 @@ class usersService {
|
|||||||
return this.postAuxEnd("/sendreferral", postData);
|
return this.postAuxEnd("/sendreferral", postData);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
StartResetPassword(reqData){
|
||||||
|
return this.postAuxEnd("/startresetpasword", reqData)
|
||||||
|
}
|
||||||
|
|
||||||
getCouponRedeem(){
|
getCouponRedeem(){
|
||||||
var postData = {
|
var postData = {
|
||||||
uuid: localStorage.getItem("uid"),
|
uuid: localStorage.getItem("uid"),
|
||||||
|
|||||||
Reference in New Issue
Block a user