@@ -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 >
) ;
} ;
victorAnumudu