DigiFi/digifi-www
1
0
Fork 0
Code Issues Pull Requests Releases Activity

verify bvn auto api calling bug fixed #43

Merged
ameye merged 1 commits from verify-bvn-bug into master 2024-04-27 01:41:59 +00:00
Conversation 0 Commits 1 Files Changed 1
+29 -32
1 changed files with 29 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LetsGetStated/LetsGetStarted.tsx
+29 -32
View File
@@ -21,7 +21,11 @@ const validationSchema = Yup.object().shape({
.min(11, "must be 11 digits")
.max(11, "must be 11 digits"),
otp: Yup.string()
.required("OTP is required")
// .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;
@@ -55,10 +59,7 @@ const LetsGetStarted: React.FC = () => {
// bvn: "",
// otp: "",
// });
const firstInputRef = React.useRef<HTMLInputElement>(null);
const secondInputRef = React.useRef<HTMLInputElement>(null);
// const otpInputRef = React.useRef<HTMLInputElement>(null);
const [requestStatusBVN, setRequestStatusBVN] = React.useState<RequestStatus>({loading:false, status:undefined, message:''});
@@ -67,29 +68,29 @@ const LetsGetStarted: React.FC = () => {
valid: undefined
});
const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
let { value } = e.target as HTMLInputElement;
let bvn = value
if(value.length == 11){
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 => {
// 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})
console.log(err)
})
}
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) => {
const handleSubmit = (values:any) => { // Function to VERIFY OTP AND LOGIN USER
// console.log('values', values)
verifyOTP({...values, verification_id:bvnIsValid.verification_id}).then(res=>{
console.log(res.data)
@@ -103,7 +104,7 @@ const LetsGetStarted: React.FC = () => {
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
onSubmit={bvnIsValid.valid ? handleSubmit : bvnValidation}
>
{(props:any) => (
<Form className="">
@@ -129,9 +130,6 @@ const LetsGetStarted: React.FC = () => {
inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
value={props.values.bvn}
onChange={props.handleChange}
onInput={handleInput}
ref={firstInputRef}
maxLength={11}
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>
@@ -150,18 +148,17 @@ const LetsGetStarted: React.FC = () => {
inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
value={props.values.otp}
onChange={props.handleChange}
ref={secondInputRef}
maxLength={11}
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={!props.values.otp || requestStatusBVN.loading}
disabled={requestStatusBVN.loading || (!props.values.otp && bvnIsValid.valid)}
>
Enter
</button>
{bvnIsValid.valid || bvnIsValid.valid == undefined ? (
<p className="text-[#5C2684] mt-[1.5625rem] w-fit">