From f63171273ec3ddc338fc41686b7164c03ef67e8b Mon Sep 17 00:00:00 2001 From: Elias Date: Tue, 7 May 2024 15:19:40 +0100 Subject: [PATCH] max input length: bvn & code --- .../LetsGetStated/LetsGetStarted.tsx | 352 ++++++++++-------- 1 file changed, 204 insertions(+), 148 deletions(-) diff --git a/src/components/LetsGetStated/LetsGetStarted.tsx b/src/components/LetsGetStated/LetsGetStarted.tsx index 6f2525f..b08495e 100644 --- a/src/components/LetsGetStated/LetsGetStarted.tsx +++ b/src/components/LetsGetStated/LetsGetStarted.tsx @@ -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,151 +52,207 @@ 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(null); - const [requestStatusBVN, setRequestStatusBVN] = React.useState({loading:false, status:undefined, message:''}); + const [requestStatusBVN, setRequestStatusBVN] = React.useState( + { loading: false, status: undefined, message: '' } + ); - const [requestStatusOTP, setRequestStatusOTP] = React.useState({loading:false, status:undefined, message:''}); + const [requestStatusOTP, setRequestStatusOTP] = React.useState( + { loading: false, status: undefined, message: '' } + ); const [bvnIsValid, setBvnIsValid] = React.useState({ verification_id: '', - valid: undefined + valid: undefined, }); - // 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}) - 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 ( - {(props:any) => ( -
-
-
-
-

- Let’s Get You Started -

-
-
-
- -

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

+ {(props: any) => ( + +
+
+
+

+ Let’s Get You Started +

- {bvnIsValid.valid && ( - - )} - - -

{requestStatusOTP.message}

+
+
+ +

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

+
+ {bvnIsValid.valid && ( + + )} + - {bvnIsValid.valid || bvnIsValid.valid == undefined ? ( -

- ***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. +

+ {requestStatusOTP.message}

- ) : ( -

- ***Did not receive OTP? Click to resend -

- )} + + {bvnIsValid.valid || bvnIsValid.valid == undefined ? ( +

+ ***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. +

+ ) : ( +

+ ***Did not receive OTP? Click to resend +

+ )} +
-
- - )} + + )} ); }; -- 2.34.1