max input length: bvn & code

src/components/LetsGetStated/LetsGetStarted.tsx

@@ -1,42 +1,42 @@
-import React from "react";
+import React from 'react';
-import * as Yup from "yup";
+import * as Yup from 'yup';
-import { Form, Formik } from "formik";
+import { Form, Formik } from 'formik';
-import { InputCompOne } from "..";
+import { InputCompOne } from '..';
-import {useNavigate} from 'react-router-dom'
+import { useNavigate } from 'react-router-dom';
-import { RouteHandler } from "../../router/routes";
+import { RouteHandler } from '../../router/routes';
 
-import { useDispatch } from "react-redux";
+import { useDispatch } from 'react-redux';
-import { updateUserDetails } from "../../store/UserDetails";
+import { updateUserDetails } from '../../store/UserDetails';
 
-import { validateBVN, verifyOTP } from "../../core/apiRequest";
+import { validateBVN, verifyOTP } from '../../core/apiRequest';
-import { RequestStatus } from "../../core/models";
+import { RequestStatus } from '../../core/models';
 
 // To get the validation schema
 const validationSchema = Yup.object().shape({
   bvn: Yup.string()
-  .required("BVN is required")
+    .required('BVN is required')
-  .test("no-e", "Invalid number", (value:any) => {
+    .test('no-e', 'Invalid number', (value: any) => {
       if (value && /^[0-9]*$/.test(value) == false) {
         return false;
       }
       return true;
     })
-  .min(11, "must be 11 digits")
+    .min(11, 'must be 11 digits')
-  .max(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) => {
+    .test('no-e', 'Invalid number', (value: any) => {
       if (value && /^[0-9]*$/.test(value) == false) {
         return false;
       }
       return true;
     })
-  .min(5, "must be 5 digits")
+    .min(5, 'must be 5 digits')
-  .max(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,72 +52,100 @@ let initialValues = {
 };
 
 type ValidBVN = {
-  verification_id:string
+  verification_id: string;
-  valid: undefined | boolean
+  valid: undefined | boolean;
-}
+};
 
 const LetsGetStarted: React.FC = () => {
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
-  const navigate = useNavigate()
+  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
+  const bvnValidation = (values: any) => {
-    let bvn = values.bvn
+    // Function to Validate BVN
-    setRequestStatusBVN({loading:true, status:false, message:''})
+    let bvn = values.bvn;
-    validateBVN({bvn}).then(res => {
+    setRequestStatusBVN({ loading: true, status: false, message: '' });
+    validateBVN({ bvn })
+      .then((res) => {
         if (!res || !res.data.call_return) {
-        setBvnIsValid({verification_id:'', valid: false})
+          setBvnIsValid({ verification_id: '', valid: false });
-        setRequestStatusBVN({loading:false, status:false, message:'unable to verify BVN'})
+          setRequestStatusBVN({
+            loading: false,
+            status: false,
+            message: 'unable to verify BVN',
+          });
           return setTimeout(() => {
-          setRequestStatusBVN({loading:false, status:false, message:''})
+            setRequestStatusBVN({ loading: false, status: false, message: '' });
-        }, 4000)
+          }, 4000);
         }
-      setBvnIsValid({verification_id:res.data.verification_id, valid: true})
+        setBvnIsValid({
-      setRequestStatusBVN({loading:false, status:true, message:'verified'})
+          verification_id: res.data.verification_id,
-    }).catch(err => {
+          valid: true,
-      setBvnIsValid({verification_id:'', valid: false})
+        });
-      console.log(err)
+        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
+  const handleSubmit = (values: any) => {
-    setRequestStatusOTP({loading:true, status:false, message:''})
+    // 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=>{
+    verifyOTP({ ...values, verification_id: bvnIsValid.verification_id })
+      .then((res) => {
         if (!res || !res.data.call_return) {
-        setRequestStatusOTP({loading:false, status:false, message:'wrong otp'})
+          setRequestStatusOTP({
+            loading: false,
+            status: false,
+            message: 'wrong otp',
+          });
           return setTimeout(() => {
-          setRequestStatusOTP({loading:false, status:false, message:''})
+            setRequestStatusOTP({ loading: false, status: false, message: '' });
-        },4000)
+          }, 4000);
         }
         // console.log(res.data)
-      localStorage.setItem('token', res.data?.token)
+        localStorage.setItem('token', res.data?.token);
-      localStorage.setItem('uid', res?.data?.customer[0]?.uid)
+        localStorage.setItem('uid', res?.data?.customer[0]?.uid);
         dispatch(updateUserDetails({ ...res?.data?.customer[0] }));
-      navigate(RouteHandler.dashboardHome, {replace:true})
+        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)
       })
+      .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 (
@@ -136,7 +164,7 @@ const LetsGetStarted: React.FC = () => {
                 </h1>
               </div>
               <div className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
-              <div className='w-full'>
+                <div className="w-full">
                   <InputCompOne
                     parentClass="flex flex-col gap-2"
                     label="Enter Your BVN "
@@ -150,9 +178,22 @@ const LetsGetStarted: React.FC = () => {
                     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}
+                    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>
+                  <p
+                    className={`p-2 ${
+                      !requestStatusBVN.status
+                        ? 'text-red-500'
+                        : 'text-emerald-500'
+                    }`}
+                  >
+                    {requestStatusBVN.loading
+                      ? 'verifying...'
+                      : requestStatusBVN.message}
+                  </p>
                 </div>
                 {bvnIsValid.valid && (
                   <InputCompOne
@@ -168,24 +209,39 @@ const LetsGetStarted: React.FC = () => {
                     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}
+                    error={
+                      props.errors.otp && props.touched.otp && props.errors.otp
+                    }
+                    maxLength={5}
                   />
                 )}
                 <button
-                type='submit'
+                  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)}
+                  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}
+                </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
+                    ***Every personal information attached to your BVN is safe
-                  secure. It is only important for us to verify your information and
+                    and secure. It is only important for us to verify your
-                  also give you access to your application profile/account.
+                    information and also give you access to your application
+                    profile/account.
                   </p>
                 ) : (
                   <p className="text-[#5C2684] mt-[1.5625rem] w-fit">