diff --git a/src/components/LetsGetStated/LetsGetStarted.tsx b/src/components/LetsGetStated/LetsGetStarted.tsx index 9c4f31c..9319378 100644 --- a/src/components/LetsGetStated/LetsGetStarted.tsx +++ b/src/components/LetsGetStated/LetsGetStarted.tsx @@ -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(null); - const secondInputRef = React.useRef(null); + // const otpInputRef = React.useRef(null); const [requestStatusBVN, setRequestStatusBVN] = React.useState({loading:false, status:undefined, message:''}); @@ -67,29 +68,29 @@ const LetsGetStarted: React.FC = () => { valid: undefined }); - const handleInput = (e: React.FormEvent) => { - 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 + // 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 = () => { {(props:any) => (
@@ -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} />

{requestStatusBVN.loading ? 'verifying...' : requestStatusBVN.message}

@@ -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} /> )} + {bvnIsValid.valid || bvnIsValid.valid == undefined ? (