Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Elias
|
dd8290af9a | ||
 tokslaw
|
4d258a965b | ||
|
victorAnumudu
|
e20b7e32f1 |
@@ -1,11 +1,11 @@
|
||||
import React, { FC, useState, useEffect } from "react";
|
||||
import NairaBag from "../../assets/images/dashboard/naira-bag.png";
|
||||
import { Button, Icons } from "../";
|
||||
import { useSelector } from "react-redux";
|
||||
import PendingList from "../paginated-list/PendingList";
|
||||
import { PendingTableList } from "../../core/models";
|
||||
import { NewDateTimeFormatter } from "../../lib/NewDateTimeFormatter";
|
||||
import { getUserPendingLoanList } from "../../core/apiRequest";
|
||||
import React, { FC, useState, useEffect } from 'react';
|
||||
import NairaBag from '../../assets/images/dashboard/naira-bag.png';
|
||||
import { Button, Icons } from '../';
|
||||
import { useSelector } from 'react-redux';
|
||||
import PendingList from '../paginated-list/PendingList';
|
||||
import { PendingTableList } from '../../core/models';
|
||||
import { NewDateTimeFormatter } from '../../lib/NewDateTimeFormatter';
|
||||
import { getUserPendingLoanList } from '../../core/apiRequest';
|
||||
|
||||
export interface DashBoardCardProps {
|
||||
title?: string;
|
||||
@@ -55,7 +55,7 @@ export const DashBoardCard: React.FC<DashBoardCardProps> = ({
|
||||
)}
|
||||
{desc && (
|
||||
<p className={`text-lg text-left ${descClass && descClass}`}>
|
||||
{desc}{" "}
|
||||
{desc}{' '}
|
||||
{descSpan && (
|
||||
<span className={`${descSpanClass && descSpanClass}`}>
|
||||
{descSpan}
|
||||
@@ -73,117 +73,137 @@ export const DashBoardCard: React.FC<DashBoardCardProps> = ({
|
||||
};
|
||||
|
||||
interface DashboardHomeIntroProps {
|
||||
handleNextStep:(value:{})=>any
|
||||
step?:number|string
|
||||
handleNextStep: (value: {}) => any;
|
||||
step?: number | string;
|
||||
}
|
||||
|
||||
const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step }) => {
|
||||
const { userDetails } = useSelector((state:any) => state?.userDetails); // CHECKS IF USER Details are avaliable
|
||||
const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({
|
||||
handleNextStep,
|
||||
step,
|
||||
}) => {
|
||||
const { userDetails } = useSelector((state: any) => state?.userDetails); // CHECKS IF USER Details are avaliable
|
||||
|
||||
const [userLoanList, setUserLoanList] = useState<{loading:boolean, data:PendingTableList}>({loading: true, data:[]})
|
||||
const [userLoanList, setUserLoanList] = useState<{
|
||||
loading: boolean;
|
||||
data: PendingTableList;
|
||||
}>({ loading: true, data: [] });
|
||||
|
||||
useEffect(()=>{
|
||||
let token = localStorage.getItem('token')
|
||||
let uid = localStorage.getItem('uid')
|
||||
if(!token || !uid){
|
||||
return
|
||||
useEffect(() => {
|
||||
let token = localStorage.getItem('token');
|
||||
let uid = localStorage.getItem('uid');
|
||||
if (!token || !uid) {
|
||||
return;
|
||||
}
|
||||
getUserPendingLoanList(uid).then(res => {
|
||||
console.log('RES', res)
|
||||
console.log('RES', userLoanList)
|
||||
if(!res || !res.data.loans){
|
||||
setUserLoanList({loading:false, data:[]})
|
||||
return
|
||||
}
|
||||
setUserLoanList({loading:false, data:res?.data?.loans})
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
setUserLoanList({loading:false, data:[]})
|
||||
})
|
||||
},[])
|
||||
getUserPendingLoanList(uid)
|
||||
.then((res) => {
|
||||
console.log('RES', res);
|
||||
console.log('RES', userLoanList);
|
||||
if (!res || !res.data.loans) {
|
||||
setUserLoanList({ loading: false, data: [] });
|
||||
return;
|
||||
}
|
||||
setUserLoanList({ loading: false, data: res?.data?.loans });
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
setUserLoanList({ loading: false, data: [] });
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className='w-full'>
|
||||
{step == 1 ?
|
||||
<>
|
||||
<h1 className="font-bold my-5 text-2xl">Hello, {userDetails.firstname}</h1>
|
||||
<div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
|
||||
<DashBoardCard
|
||||
cardClass="bg-[#5C2684] relative"
|
||||
desc="Begin your application and get up to "
|
||||
descSpan="5 million naira loan."
|
||||
descClass="leading-[1.5625rem] text-lg text-white"
|
||||
descSpanClass="font-bold"
|
||||
btnTitle="Apply here"
|
||||
btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
|
||||
image={NairaBag}
|
||||
imgClass="translate-y-4 -rotate-6"
|
||||
onClick={()=>handleNextStep({})}
|
||||
<div className="w-full">
|
||||
{step == 1 ? (
|
||||
<>
|
||||
<h1 className="font-bold my-5 text-2xl">
|
||||
Hello, {userDetails.firstname}
|
||||
</h1>
|
||||
<div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
|
||||
<DashBoardCard
|
||||
cardClass="bg-[#5C2684] relative"
|
||||
desc="Begin your application and get up to "
|
||||
descSpan="5 million naira loan."
|
||||
descClass="leading-[1.5625rem] text-lg text-white"
|
||||
descSpanClass="font-bold"
|
||||
btnTitle="Apply here"
|
||||
btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
|
||||
image={NairaBag}
|
||||
imgClass="translate-y-4 -rotate-6"
|
||||
onClick={() => handleNextStep({})}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
:
|
||||
<>
|
||||
<h1 className="font-bold my-5 text-2xl">Welcome Back, {userDetails.firstname}</h1>
|
||||
<div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
|
||||
<DashBoardCard
|
||||
cardClass="bg-[#5C2684] relative"
|
||||
desc="Your loan application has been reviewed and accepted, please confirm for disbursement."
|
||||
// descSpan="5 million naira loan."
|
||||
descClass="leading-[1.5625rem] text-lg text-white"
|
||||
// descSpanClass="font-bold"
|
||||
btnTitle="View and accept"
|
||||
btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
|
||||
image={NairaBag}
|
||||
imgClass="translate-y-4 -rotate-6"
|
||||
// onClick={handleNextStep}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h1 className="font-bold my-5 text-2xl">
|
||||
Welcome Back, {userDetails.firstname}
|
||||
</h1>
|
||||
<div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
|
||||
<DashBoardCard
|
||||
cardClass="bg-[#5C2684] relative"
|
||||
desc="Your loan application has been reviewed and accepted, please confirm for disbursement."
|
||||
// descSpan="5 million naira loan."
|
||||
descClass="leading-[1.5625rem] text-lg text-white"
|
||||
// descSpanClass="font-bold"
|
||||
btnTitle="View and accept"
|
||||
btnTextClass="w-[11.125rem] h-[2.8125rem] flex justify-center item-center btn-W text-[#FBB700]"
|
||||
image={NairaBag}
|
||||
imgClass="translate-y-4 -rotate-6"
|
||||
// onClick={handleNextStep}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
{userLoanList.loading ?
|
||||
null
|
||||
:
|
||||
<div className='mt-5 w-full'>
|
||||
<PendingList
|
||||
data={userLoanList.data}
|
||||
itemsPerPage={5}
|
||||
tableTitle='Current Applications'
|
||||
>
|
||||
{(data:any)=>(
|
||||
<div className="w-full p-4 rounded-lg shadow-lg bg-white overflow-x-auto min-h-[250px] max-h-[450px]">
|
||||
<table className="w-full table-auto">
|
||||
<thead>
|
||||
<tr className='text-left border-b-2'>
|
||||
<th className='px-1 py-4'>Date</th>
|
||||
<th className='px-1 py-4 text-right'>Amount</th>
|
||||
<th className='px-1 py-4 text-center'>Payment Term</th>
|
||||
<th className='px-1 py-4 text-center'>Status</th>
|
||||
<th className='px-1 py-4'>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((item:any, index:any) =>(
|
||||
<tr key={index || item} className='even:bg-slate-100'>
|
||||
<td className='px-1 py-2'>{NewDateTimeFormatter(item?.added)}</td>
|
||||
<td className='px-1 py-2 text-right'>{item?.loan_amount}</td>
|
||||
<td className='px-1 py-2 text-center'>{item?.payment_month}</td>
|
||||
<td className='px-1 py-2 text-center'>{item?.status}</td>
|
||||
<td className='px-1 py-2'>
|
||||
<button className='px-2 py-1 border-2 border-black flex gap-2 items-center'>
|
||||
View
|
||||
<Icons name='arrow-right' />
|
||||
</button>
|
||||
</td>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{userLoanList.loading ? null : (
|
||||
<div className="mt-5 w-full">
|
||||
<PendingList
|
||||
data={userLoanList.data}
|
||||
itemsPerPage={5}
|
||||
tableTitle="Current Applications"
|
||||
>
|
||||
{(data: any) => (
|
||||
<div className="w-full p-4 rounded-lg shadow-lg bg-white overflow-x-auto min-h-[250px] max-h-[450px]">
|
||||
<table className="text-[12px] sm:text-base w-full table-auto">
|
||||
<thead>
|
||||
<tr className="text-left border-b-2">
|
||||
<th className="px-1 py-4">Date</th>
|
||||
<th className="px-1 py-4 text-right">Amount</th>
|
||||
<th className="px-1 py-4 text-center min-w-[110px]">
|
||||
Payment Term
|
||||
</th>
|
||||
<th className="px-1 py-4 text-center">Status</th>
|
||||
<th className="px-1 py-4 text-right">Action</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</PendingList>
|
||||
</div>
|
||||
}
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((item: any, index: any) => (
|
||||
<tr key={index || item} className="even:bg-slate-100">
|
||||
<td className="px-1 py-2">
|
||||
{NewDateTimeFormatter(item?.added)}
|
||||
</td>
|
||||
<td className="px-1 py-2 text-right">
|
||||
{item?.loan_amount}
|
||||
</td>
|
||||
<td className="px-1 py-2 text-center">
|
||||
{item?.payment_month}
|
||||
</td>
|
||||
<td className="px-1 py-2 text-center">
|
||||
{item?.status}
|
||||
</td>
|
||||
<td className="px-1 py-2 text-right">
|
||||
<button className="px-2 py-1 border-2 border-black">
|
||||
View
|
||||
<Icons name="arrow-right" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</PendingList>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,42 +1,42 @@
|
||||
import React from 'react';
|
||||
import * as Yup from 'yup';
|
||||
import { Form, Formik } from 'formik';
|
||||
import { InputCompOne } from '..';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { RouteHandler } from '../../router/routes';
|
||||
import React from "react";
|
||||
import * as Yup from "yup";
|
||||
import { Form, Formik } from "formik";
|
||||
import { InputCompOne } from "..";
|
||||
import {useNavigate} from 'react-router-dom'
|
||||
import { RouteHandler } from "../../router/routes";
|
||||
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { updateUserDetails } from '../../store/UserDetails';
|
||||
import { useDispatch } from "react-redux";
|
||||
import { updateUserDetails } from "../../store/UserDetails";
|
||||
|
||||
import { validateBVN, verifyOTP } from '../../core/apiRequest';
|
||||
import { RequestStatus } from '../../core/models';
|
||||
import { validateBVN, verifyOTP } from "../../core/apiRequest";
|
||||
import { RequestStatus } from "../../core/models";
|
||||
|
||||
// To get the validation schema
|
||||
const validationSchema = Yup.object().shape({
|
||||
bvn: Yup.string()
|
||||
.required('BVN is required')
|
||||
.test('no-e', 'Invalid number', (value: any) => {
|
||||
if (value && /^[0-9]*$/.test(value) == false) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.min(11, 'must be 11 digits')
|
||||
.max(11, 'must be 11 digits'),
|
||||
.required("BVN is required")
|
||||
.test("no-e", "Invalid number", (value:any) => {
|
||||
if (value && /^[0-9]*$/.test(value) == false) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.min(11, "must be 11 digits")
|
||||
.max(11, "must be 11 digits"),
|
||||
otp: Yup.string()
|
||||
// .when('require_otp', {
|
||||
// is: true,
|
||||
// then: Yup.string().required("OTP is required")
|
||||
// })
|
||||
// .required("OTP is required")
|
||||
.test('no-e', 'Invalid number', (value: any) => {
|
||||
if (value && /^[0-9]*$/.test(value) == false) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.min(5, 'must be 5 digits')
|
||||
.max(5, 'must be 5 digits'),
|
||||
// .when('require_otp', {
|
||||
// is: true,
|
||||
// then: Yup.string().required("OTP is required")
|
||||
// })
|
||||
// .required("OTP is required")
|
||||
.test("no-e", "Invalid number", (value:any) => {
|
||||
if (value && /^[0-9]*$/.test(value) == false) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.min(5, "must be 5 digits")
|
||||
.max(5, "must be 5 digits"),
|
||||
// .test("no-e", "must be 11 characters", (value:any) => {
|
||||
// if (value.length < 11) {
|
||||
// return false;
|
||||
@@ -52,207 +52,151 @@ let initialValues = {
|
||||
};
|
||||
|
||||
type ValidBVN = {
|
||||
verification_id: string;
|
||||
valid: undefined | boolean;
|
||||
};
|
||||
verification_id:string
|
||||
valid: undefined | boolean
|
||||
}
|
||||
|
||||
const LetsGetStarted: React.FC = () => {
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch()
|
||||
const navigate = useNavigate()
|
||||
// const [pinValues, setPinValues] = React.useState({
|
||||
// bvn: "",
|
||||
// otp: "",
|
||||
// });
|
||||
// const otpInputRef = React.useRef<HTMLInputElement>(null);
|
||||
|
||||
const [requestStatusBVN, setRequestStatusBVN] = React.useState<RequestStatus>(
|
||||
{ loading: false, status: undefined, message: '' }
|
||||
);
|
||||
const [requestStatusBVN, setRequestStatusBVN] = React.useState<RequestStatus>({loading:false, status:undefined, message:''});
|
||||
|
||||
const [requestStatusOTP, setRequestStatusOTP] = React.useState<RequestStatus>(
|
||||
{ loading: false, status: undefined, message: '' }
|
||||
);
|
||||
const [requestStatusOTP, setRequestStatusOTP] = React.useState<RequestStatus>({loading:false, status:undefined, message:''});
|
||||
|
||||
const [bvnIsValid, setBvnIsValid] = React.useState<ValidBVN>({
|
||||
verification_id: '',
|
||||
valid: undefined,
|
||||
valid: undefined
|
||||
});
|
||||
|
||||
|
||||
// e: React.FormEvent<HTMLInputElement>
|
||||
// let { value } = e.target as HTMLInputElement;
|
||||
const bvnValidation = (values: any) => {
|
||||
// Function to Validate BVN
|
||||
let bvn = values.bvn;
|
||||
setRequestStatusBVN({ loading: true, status: false, message: '' });
|
||||
validateBVN({ bvn })
|
||||
.then((res) => {
|
||||
if (!res || !res.data.call_return) {
|
||||
setBvnIsValid({ verification_id: '', valid: false });
|
||||
setRequestStatusBVN({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: 'unable to verify BVN',
|
||||
});
|
||||
return setTimeout(() => {
|
||||
setRequestStatusBVN({ loading: false, status: false, message: '' });
|
||||
}, 4000);
|
||||
}
|
||||
setBvnIsValid({
|
||||
verification_id: res.data.verification_id,
|
||||
valid: true,
|
||||
});
|
||||
setRequestStatusBVN({
|
||||
loading: false,
|
||||
status: true,
|
||||
message: 'verified',
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
setBvnIsValid({ verification_id: '', valid: false });
|
||||
console.log(err);
|
||||
});
|
||||
const bvnValidation = (values:any) => { // Function to Validate BVN
|
||||
let bvn = values.bvn
|
||||
setRequestStatusBVN({loading:true, status:false, message:''})
|
||||
validateBVN({bvn}).then(res => {
|
||||
if(!res || !res.data.call_return){
|
||||
setBvnIsValid({verification_id:'', valid: false})
|
||||
setRequestStatusBVN({loading:false, status:false, message:'unable to verify BVN'})
|
||||
return setTimeout(()=>{
|
||||
setRequestStatusBVN({loading:false, status:false, message:''})
|
||||
}, 4000)
|
||||
}
|
||||
setBvnIsValid({verification_id:res.data.verification_id, valid: true})
|
||||
setRequestStatusBVN({loading:false, status:true, message:'verified'})
|
||||
}).catch(err => {
|
||||
setBvnIsValid({verification_id:'', valid: false})
|
||||
console.log(err)
|
||||
})
|
||||
};
|
||||
|
||||
const handleSubmit = (values: any) => {
|
||||
// Function to VERIFY OTP AND LOGIN USER
|
||||
setRequestStatusOTP({ loading: true, status: false, message: '' });
|
||||
const handleSubmit = (values:any) => { // Function to VERIFY OTP AND LOGIN USER
|
||||
setRequestStatusOTP({loading:true, status:false, message:''})
|
||||
// console.log('values', values)
|
||||
verifyOTP({ ...values, verification_id: bvnIsValid.verification_id })
|
||||
.then((res) => {
|
||||
if (!res || !res.data.call_return) {
|
||||
setRequestStatusOTP({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: 'wrong otp',
|
||||
});
|
||||
return setTimeout(() => {
|
||||
setRequestStatusOTP({ loading: false, status: false, message: '' });
|
||||
}, 4000);
|
||||
}
|
||||
// console.log(res.data)
|
||||
localStorage.setItem('token', res.data?.token);
|
||||
localStorage.setItem('uid', res?.data?.customer[0]?.uid);
|
||||
dispatch(updateUserDetails({ ...res?.data?.customer[0] }));
|
||||
navigate(RouteHandler.dashboardHome, { replace: true });
|
||||
})
|
||||
.catch((err) => {
|
||||
setRequestStatusOTP({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: 'something went wrong, try again',
|
||||
});
|
||||
console.log(err);
|
||||
return setTimeout(() => {
|
||||
setRequestStatusOTP({ loading: false, status: false, message: '' });
|
||||
}, 4000);
|
||||
});
|
||||
verifyOTP({...values, verification_id:bvnIsValid.verification_id}).then(res=>{
|
||||
if(!res || !res.data.call_return){
|
||||
setRequestStatusOTP({loading:false, status:false, message:'wrong otp'})
|
||||
return setTimeout(()=>{
|
||||
setRequestStatusOTP({loading:false, status:false, message:''})
|
||||
},4000)
|
||||
}
|
||||
// console.log(res.data)
|
||||
localStorage.setItem('token', res.data?.token)
|
||||
localStorage.setItem('uid', res?.data?.customer[0]?.uid)
|
||||
dispatch(updateUserDetails({ ...res?.data?.customer[0] }));
|
||||
navigate(RouteHandler.dashboardHome, {replace:true})
|
||||
}).catch(err => {
|
||||
setRequestStatusOTP({loading:false, status:false, message:'something went wrong, try again'})
|
||||
console.log(err)
|
||||
return setTimeout(()=>{
|
||||
setRequestStatusOTP({loading:false, status:false, message:''})
|
||||
},4000)
|
||||
})
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={bvnIsValid.valid ? handleSubmit : bvnValidation}
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={bvnIsValid.valid ? handleSubmit : bvnValidation}
|
||||
>
|
||||
{(props: any) => (
|
||||
<Form className="">
|
||||
<div className="w-full">
|
||||
<div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
|
||||
<div className="my-[4rem] flex items-center justify-center w-full">
|
||||
<h1 className="font-bold text-[2.375rem] text-[#5C2684] my-[.5rem] text-center">
|
||||
Let’s Get You Started
|
||||
</h1>
|
||||
{(props:any) => (
|
||||
<Form className="">
|
||||
<div className="w-full">
|
||||
<div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
|
||||
<div className="my-[4rem] flex items-center justify-center w-full">
|
||||
<h1 className="font-bold text-[2.375rem] text-[#5C2684] my-[.5rem] text-center">
|
||||
Let’s Get You Started
|
||||
</h1>
|
||||
</div>
|
||||
<div className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
|
||||
<div className='w-full'>
|
||||
<InputCompOne
|
||||
parentClass="flex flex-col gap-2"
|
||||
label="Enter Your BVN "
|
||||
name="bvn"
|
||||
parentInputClass="w-full"
|
||||
labelSpan="( To get your BVN, dial *565*0# )"
|
||||
labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
|
||||
placeholder="Enter your BVN"
|
||||
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
|
||||
input
|
||||
inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
|
||||
value={props.values.bvn}
|
||||
onChange={props.handleChange}
|
||||
error={(props.errors.bvn && props.touched.bvn) && props.errors.bvn}
|
||||
/>
|
||||
<p className={`p-2 ${!requestStatusBVN.status ? 'text-red-500' : 'text-emerald-500'}`}>{requestStatusBVN.loading ? 'verifying...' : requestStatusBVN.message}</p>
|
||||
</div>
|
||||
<div className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
|
||||
<div className="w-full">
|
||||
<InputCompOne
|
||||
parentClass="flex flex-col gap-2"
|
||||
label="Enter Your BVN "
|
||||
name="bvn"
|
||||
parentInputClass="w-full"
|
||||
labelSpan="( To get your BVN, dial *565*0# )"
|
||||
labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
|
||||
placeholder="Enter your BVN"
|
||||
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
|
||||
input
|
||||
inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
|
||||
value={props.values.bvn}
|
||||
onChange={props.handleChange}
|
||||
error={
|
||||
props.errors.bvn && props.touched.bvn && props.errors.bvn
|
||||
}
|
||||
maxLength={11}
|
||||
/>
|
||||
<p
|
||||
className={`p-2 ${
|
||||
!requestStatusBVN.status
|
||||
? 'text-red-500'
|
||||
: 'text-emerald-500'
|
||||
}`}
|
||||
>
|
||||
{requestStatusBVN.loading
|
||||
? 'verifying...'
|
||||
: requestStatusBVN.message}
|
||||
</p>
|
||||
</div>
|
||||
{bvnIsValid.valid && (
|
||||
<InputCompOne
|
||||
parentClass="flex flex-col gap-2"
|
||||
label="Enter OTP "
|
||||
name="otp"
|
||||
parentInputClass="w-full"
|
||||
labelSpan="( Please check your BVN phone number for verification pin )"
|
||||
labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
|
||||
placeholder="Enter your OTP"
|
||||
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
|
||||
input
|
||||
inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
|
||||
value={props.values.otp}
|
||||
onChange={props.handleChange}
|
||||
error={
|
||||
props.errors.otp && props.touched.otp && props.errors.otp
|
||||
}
|
||||
maxLength={5}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full h-[3.625rem] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50"
|
||||
disabled={
|
||||
requestStatusBVN.loading ||
|
||||
(!props.values.otp && bvnIsValid.valid)
|
||||
}
|
||||
>
|
||||
Enter
|
||||
</button>
|
||||
{bvnIsValid.valid && (
|
||||
<InputCompOne
|
||||
parentClass="flex flex-col gap-2"
|
||||
label="Enter OTP "
|
||||
name="otp"
|
||||
parentInputClass="w-full"
|
||||
labelSpan="( Please check your BVN phone number for verification pin )"
|
||||
labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
|
||||
placeholder="Enter your OTP"
|
||||
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
|
||||
input
|
||||
inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
|
||||
value={props.values.otp}
|
||||
onChange={props.handleChange}
|
||||
error={(props.errors.otp && props.touched.otp) && props.errors.otp}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
type='submit'
|
||||
className="w-full h-[3.625rem] rounded bg-[#FBB700] rounded-2 px-4 text-[18px] text-[#282828] font-semibold disabled:text-[#282828] disabled:text-opacity-50"
|
||||
disabled={requestStatusBVN.loading || (!props.values.otp && bvnIsValid.valid)}
|
||||
>
|
||||
Enter
|
||||
</button>
|
||||
|
||||
<p className={`p-2 ${!requestStatusOTP.status ? 'text-red-500' : 'text-emerald-500'}`}>{requestStatusOTP.message}</p>
|
||||
|
||||
<p
|
||||
className={`p-2 ${
|
||||
!requestStatusOTP.status
|
||||
? 'text-red-500'
|
||||
: 'text-emerald-500'
|
||||
}`}
|
||||
>
|
||||
{requestStatusOTP.message}
|
||||
{bvnIsValid.valid || bvnIsValid.valid == undefined ? (
|
||||
<p className="text-[#5C2684] mt-[1.5625rem] w-fit">
|
||||
***Every personal information attached to your BVN is safe and
|
||||
secure. It is only important for us to verify your information and
|
||||
also give you access to your application profile/account.
|
||||
</p>
|
||||
|
||||
{bvnIsValid.valid || bvnIsValid.valid == undefined ? (
|
||||
<p className="text-[#5C2684] mt-[1.5625rem] w-fit">
|
||||
***Every personal information attached to your BVN is safe
|
||||
and secure. It is only important for us to verify your
|
||||
information and also give you access to your application
|
||||
profile/account.
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-[#5C2684] mt-[1.5625rem] w-fit">
|
||||
***Did not receive OTP? Click to resend
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-[#5C2684] mt-[1.5625rem] w-fit">
|
||||
***Did not receive OTP? Click to resend
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -83,8 +83,8 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div className="flex p-5 relative">
|
||||
<div className="w-full p-5">{children}</div>
|
||||
<div className="flex p-2 md:p-5 relative">
|
||||
<div className="w-full p-2 md:p-5">{children}</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user