victorAnumudu
205 lines
7.7 KiB
TypeScript
205 lines
7.7 KiB
TypeScript
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 { 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"),
|
||
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"),
|
||
// .test("no-e", "must be 11 characters", (value:any) => {
|
||
// if (value.length < 11) {
|
||
// return false;
|
||
// }
|
||
// return true;
|
||
// })
|
||
});
|
||
|
||
// initial values for formik
|
||
let initialValues = {
|
||
bvn: '',
|
||
otp: '',
|
||
};
|
||
|
||
type ValidBVN = {
|
||
verification_id:string
|
||
valid: undefined | boolean
|
||
}
|
||
|
||
const LetsGetStarted: React.FC = () => {
|
||
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 [requestStatusOTP, setRequestStatusOTP] = React.useState<RequestStatus>({loading:false, status:undefined, message:''});
|
||
|
||
const [bvnIsValid, setBvnIsValid] = React.useState<ValidBVN>({
|
||
verification_id: '',
|
||
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 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)
|
||
})
|
||
};
|
||
|
||
return (
|
||
<Formik
|
||
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>
|
||
</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>
|
||
{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>
|
||
|
||
{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>
|
||
</div>
|
||
</div>
|
||
</Form>
|
||
)}
|
||
</Formik>
|
||
);
|
||
};
|
||
|
||
export default LetsGetStarted;
|