Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Elias
|
f63171273e |
@@ -1,42 +1,42 @@
|
|||||||
import React from "react";
|
import React from 'react';
|
||||||
import * as Yup from "yup";
|
import * as Yup from 'yup';
|
||||||
import { Form, Formik } from "formik";
|
import { Form, Formik } from 'formik';
|
||||||
import { InputCompOne } from "..";
|
import { InputCompOne } from '..';
|
||||||
import {useNavigate} from 'react-router-dom'
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { RouteHandler } from "../../router/routes";
|
import { RouteHandler } from '../../router/routes';
|
||||||
|
|
||||||
import { useDispatch } from "react-redux";
|
import { useDispatch } from 'react-redux';
|
||||||
import { updateUserDetails } from "../../store/UserDetails";
|
import { updateUserDetails } from '../../store/UserDetails';
|
||||||
|
|
||||||
import { validateBVN, verifyOTP } from "../../core/apiRequest";
|
import { validateBVN, verifyOTP } from '../../core/apiRequest';
|
||||||
import { RequestStatus } from "../../core/models";
|
import { RequestStatus } from '../../core/models';
|
||||||
|
|
||||||
// To get the validation schema
|
// To get the validation schema
|
||||||
const validationSchema = Yup.object().shape({
|
const validationSchema = Yup.object().shape({
|
||||||
bvn: Yup.string()
|
bvn: Yup.string()
|
||||||
.required("BVN is required")
|
.required('BVN is required')
|
||||||
.test("no-e", "Invalid number", (value:any) => {
|
.test('no-e', 'Invalid number', (value: any) => {
|
||||||
if (value && /^[0-9]*$/.test(value) == false) {
|
if (value && /^[0-9]*$/.test(value) == false) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
})
|
})
|
||||||
.min(11, "must be 11 digits")
|
.min(11, 'must be 11 digits')
|
||||||
.max(11, "must be 11 digits"),
|
.max(11, 'must be 11 digits'),
|
||||||
otp: Yup.string()
|
otp: Yup.string()
|
||||||
// .when('require_otp', {
|
// .when('require_otp', {
|
||||||
// is: true,
|
// is: true,
|
||||||
// then: Yup.string().required("OTP is required")
|
// then: Yup.string().required("OTP is required")
|
||||||
// })
|
// })
|
||||||
// .required("OTP is required")
|
// .required("OTP is required")
|
||||||
.test("no-e", "Invalid number", (value:any) => {
|
.test('no-e', 'Invalid number', (value: any) => {
|
||||||
if (value && /^[0-9]*$/.test(value) == false) {
|
if (value && /^[0-9]*$/.test(value) == false) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
})
|
})
|
||||||
.min(5, "must be 5 digits")
|
.min(5, 'must be 5 digits')
|
||||||
.max(5, "must be 5 digits"),
|
.max(5, 'must be 5 digits'),
|
||||||
// .test("no-e", "must be 11 characters", (value:any) => {
|
// .test("no-e", "must be 11 characters", (value:any) => {
|
||||||
// if (value.length < 11) {
|
// if (value.length < 11) {
|
||||||
// return false;
|
// return false;
|
||||||
@@ -52,151 +52,207 @@ let initialValues = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
type ValidBVN = {
|
type ValidBVN = {
|
||||||
verification_id:string
|
verification_id: string;
|
||||||
valid: undefined | boolean
|
valid: undefined | boolean;
|
||||||
}
|
};
|
||||||
|
|
||||||
const LetsGetStarted: React.FC = () => {
|
const LetsGetStarted: React.FC = () => {
|
||||||
const dispatch = useDispatch()
|
const dispatch = useDispatch();
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate();
|
||||||
// const [pinValues, setPinValues] = React.useState({
|
// const [pinValues, setPinValues] = React.useState({
|
||||||
// bvn: "",
|
// bvn: "",
|
||||||
// otp: "",
|
// otp: "",
|
||||||
// });
|
// });
|
||||||
// const otpInputRef = React.useRef<HTMLInputElement>(null);
|
// 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>({
|
const [bvnIsValid, setBvnIsValid] = React.useState<ValidBVN>({
|
||||||
verification_id: '',
|
verification_id: '',
|
||||||
valid: undefined
|
valid: undefined,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// e: React.FormEvent<HTMLInputElement>
|
// e: React.FormEvent<HTMLInputElement>
|
||||||
// let { value } = e.target as HTMLInputElement;
|
// let { value } = e.target as HTMLInputElement;
|
||||||
const bvnValidation = (values:any) => { // Function to Validate BVN
|
const bvnValidation = (values: any) => {
|
||||||
let bvn = values.bvn
|
// Function to Validate BVN
|
||||||
setRequestStatusBVN({loading:true, status:false, message:''})
|
let bvn = values.bvn;
|
||||||
validateBVN({bvn}).then(res => {
|
setRequestStatusBVN({ loading: true, status: false, message: '' });
|
||||||
if(!res || !res.data.call_return){
|
validateBVN({ bvn })
|
||||||
setBvnIsValid({verification_id:'', valid: false})
|
.then((res) => {
|
||||||
setRequestStatusBVN({loading:false, status:false, message:'unable to verify BVN'})
|
if (!res || !res.data.call_return) {
|
||||||
return setTimeout(()=>{
|
setBvnIsValid({ verification_id: '', valid: false });
|
||||||
setRequestStatusBVN({loading:false, status:false, message:''})
|
setRequestStatusBVN({
|
||||||
}, 4000)
|
loading: false,
|
||||||
}
|
status: false,
|
||||||
setBvnIsValid({verification_id:res.data.verification_id, valid: true})
|
message: 'unable to verify BVN',
|
||||||
setRequestStatusBVN({loading:false, status:true, message:'verified'})
|
});
|
||||||
}).catch(err => {
|
return setTimeout(() => {
|
||||||
setBvnIsValid({verification_id:'', valid: false})
|
setRequestStatusBVN({ loading: false, status: false, message: '' });
|
||||||
console.log(err)
|
}, 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
|
const handleSubmit = (values: any) => {
|
||||||
setRequestStatusOTP({loading:true, status:false, message:''})
|
// Function to VERIFY OTP AND LOGIN USER
|
||||||
|
setRequestStatusOTP({ loading: true, status: false, message: '' });
|
||||||
// console.log('values', values)
|
// console.log('values', values)
|
||||||
verifyOTP({...values, verification_id:bvnIsValid.verification_id}).then(res=>{
|
verifyOTP({ ...values, verification_id: bvnIsValid.verification_id })
|
||||||
if(!res || !res.data.call_return){
|
.then((res) => {
|
||||||
setRequestStatusOTP({loading:false, status:false, message:'wrong otp'})
|
if (!res || !res.data.call_return) {
|
||||||
return setTimeout(()=>{
|
setRequestStatusOTP({
|
||||||
setRequestStatusOTP({loading:false, status:false, message:''})
|
loading: false,
|
||||||
},4000)
|
status: false,
|
||||||
}
|
message: 'wrong otp',
|
||||||
// console.log(res.data)
|
});
|
||||||
localStorage.setItem('token', res.data?.token)
|
return setTimeout(() => {
|
||||||
localStorage.setItem('uid', res?.data?.customer[0]?.uid)
|
setRequestStatusOTP({ loading: false, status: false, message: '' });
|
||||||
dispatch(updateUserDetails({ ...res?.data?.customer[0] }));
|
}, 4000);
|
||||||
navigate(RouteHandler.dashboardHome, {replace:true})
|
}
|
||||||
}).catch(err => {
|
// console.log(res.data)
|
||||||
setRequestStatusOTP({loading:false, status:false, message:'something went wrong, try again'})
|
localStorage.setItem('token', res.data?.token);
|
||||||
console.log(err)
|
localStorage.setItem('uid', res?.data?.customer[0]?.uid);
|
||||||
return setTimeout(()=>{
|
dispatch(updateUserDetails({ ...res?.data?.customer[0] }));
|
||||||
setRequestStatusOTP({loading:false, status:false, message:''})
|
navigate(RouteHandler.dashboardHome, { replace: true });
|
||||||
},4000)
|
})
|
||||||
})
|
.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 (
|
return (
|
||||||
<Formik
|
<Formik
|
||||||
initialValues={initialValues}
|
initialValues={initialValues}
|
||||||
validationSchema={validationSchema}
|
validationSchema={validationSchema}
|
||||||
onSubmit={bvnIsValid.valid ? handleSubmit : bvnValidation}
|
onSubmit={bvnIsValid.valid ? handleSubmit : bvnValidation}
|
||||||
>
|
>
|
||||||
{(props:any) => (
|
{(props: any) => (
|
||||||
<Form className="">
|
<Form className="">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
|
<div className="containerMode flex justify-between gap-1 xl:gap-8 flex-col">
|
||||||
<div className="my-[4rem] flex items-center justify-center w-full">
|
<div className="my-[4rem] flex items-center justify-center w-full">
|
||||||
<h1 className="font-bold text-[2.375rem] text-[#5C2684] my-[.5rem] text-center">
|
<h1 className="font-bold text-[2.375rem] text-[#5C2684] my-[.5rem] text-center">
|
||||||
Let’s Get You Started
|
Let’s Get You Started
|
||||||
</h1>
|
</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>
|
||||||
{bvnIsValid.valid && (
|
<div className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
|
||||||
<InputCompOne
|
<div className="w-full">
|
||||||
parentClass="flex flex-col gap-2"
|
<InputCompOne
|
||||||
label="Enter OTP "
|
parentClass="flex flex-col gap-2"
|
||||||
name="otp"
|
label="Enter Your BVN "
|
||||||
parentInputClass="w-full"
|
name="bvn"
|
||||||
labelSpan="( Please check your BVN phone number for verification pin )"
|
parentInputClass="w-full"
|
||||||
labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
|
labelSpan="( To get your BVN, dial *565*0# )"
|
||||||
placeholder="Enter your OTP"
|
labelSpanClass="text-[13px] text-[#5a5a5a] font-semibold"
|
||||||
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
|
placeholder="Enter your BVN"
|
||||||
input
|
labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#282828] mb-[2px] flex item-center gap-[4px]"
|
||||||
inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
|
input
|
||||||
value={props.values.otp}
|
inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
|
||||||
onChange={props.handleChange}
|
value={props.values.bvn}
|
||||||
error={(props.errors.otp && props.touched.otp) && props.errors.otp}
|
onChange={props.handleChange}
|
||||||
/>
|
error={
|
||||||
)}
|
props.errors.bvn && props.touched.bvn && props.errors.bvn
|
||||||
<button
|
}
|
||||||
type='submit'
|
maxLength={11}
|
||||||
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)}
|
<p
|
||||||
>
|
className={`p-2 ${
|
||||||
Enter
|
!requestStatusBVN.status
|
||||||
</button>
|
? 'text-red-500'
|
||||||
|
: 'text-emerald-500'
|
||||||
<p className={`p-2 ${!requestStatusOTP.status ? 'text-red-500' : 'text-emerald-500'}`}>{requestStatusOTP.message}</p>
|
}`}
|
||||||
|
>
|
||||||
|
{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 || bvnIsValid.valid == undefined ? (
|
<p
|
||||||
<p className="text-[#5C2684] mt-[1.5625rem] w-fit">
|
className={`p-2 ${
|
||||||
***Every personal information attached to your BVN is safe and
|
!requestStatusOTP.status
|
||||||
secure. It is only important for us to verify your information and
|
? 'text-red-500'
|
||||||
also give you access to your application profile/account.
|
: 'text-emerald-500'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{requestStatusOTP.message}
|
||||||
</p>
|
</p>
|
||||||
) : (
|
|
||||||
<p className="text-[#5C2684] mt-[1.5625rem] w-fit">
|
{bvnIsValid.valid || bvnIsValid.valid == undefined ? (
|
||||||
***Did not receive OTP? Click to resend
|
<p className="text-[#5C2684] mt-[1.5625rem] w-fit">
|
||||||
</p>
|
***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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Form>
|
||||||
</Form>
|
)}
|
||||||
)}
|
|
||||||
</Formik>
|
</Formik>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user