verify bvn auto api calling bug fixed

docker-compose.yml

@@ -11,10 +11,13 @@ services:
     ports:
       - 6030:5173
     expose:
-      - "5173" 
+      - "5173"
+    extra_hosts:
+      - digifi-apidev.chiefsoft.net:10.10.33.15
+      - backend.wrenchboard.api.test:10.10.33.15
     environment:
       - PORT=${DIGIFI_PORT}
     tty: true
     stdin_open: true
 volumes:
-  src:
+  src:

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.1",
+    "axios": "^1.6.8",
     "clsx": "2.1.0",
     "formik": "2.4.5",
     "react": "^18.2.0",

src/components/LetsGetStated/LetsGetStarted.tsx

@@ -5,6 +5,9 @@ import { InputCompOne } from "..";
 import {useNavigate} from 'react-router-dom'
 import { RouteHandler } from "../../router/routes";
 
+import { validateBVN, verifyOTP } from "../../core/apiRequest";
+import { RequestStatus } from "../../core/models";
+
 // To get the validation schema
 const validationSchema = Yup.object().shape({
   bvn: Yup.string()
@@ -18,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;
@@ -41,50 +48,63 @@ let initialValues = {
   otp: '',
 };
 
+type ValidBVN = {
+  verification_id:string
+  valid: undefined | boolean
+}
+
 const LetsGetStarted: React.FC = () => {
   const navigate = useNavigate()
   // const [pinValues, setPinValues] = React.useState({
   //   bvn: "",
   //   otp: "",
   // });
+  // const otpInputRef = React.useRef<HTMLInputElement>(null);
 
-  const [hideOTPComponent, setHideOTPComponent] = React.useState<boolean>(true);
-  const firstInputRef = React.useRef<HTMLInputElement>(null);
-  const secondInputRef = React.useRef<HTMLInputElement>(null);
+  const [requestStatusBVN, setRequestStatusBVN] = React.useState<RequestStatus>({loading:false, status:undefined, message:''});
 
-  // const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-  //   let { name, value } = e.target as HTMLInputElement;
+  const [bvnIsValid, setBvnIsValid] = React.useState<ValidBVN>({
+    verification_id: '',
+    valid: undefined
+  });
 
-  //   setPinValues((prev) => ({ ...prev, [name]: value }));
-  // };
 
-  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
-    let { name, value } = e.target as HTMLInputElement;
-
-    if (name === "bvn") {
-      const regex = /^[0-9]+$/;
-
-      if (regex.test(value)) {
-        if (value?.length == 11) {
-          setHideOTPComponent(false);
-        //   secondInputRef.current?.focus();
-        } else setHideOTPComponent(true);
-      } else {
-        console.log("object not found");
+  // 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 handleSubmit = (values:any) => {
-    console.log('values', values)
-    navigate(RouteHandler.dashboardHome, {replace:true})
+  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)
+      navigate(RouteHandler.dashboardHome, {replace:true})
+    }).catch(err => {
+      console.log(err)
+    })
   };
 
   return (
     <Formik
     initialValues={initialValues}
     validationSchema={validationSchema}
-    onSubmit={handleSubmit}
+    onSubmit={bvnIsValid.valid ? handleSubmit : bvnValidation}
     >
     {(props:any) => (
       <Form className="">
@@ -96,25 +116,25 @@ const LetsGetStarted: React.FC = () => {
               </h1>
             </div>
             <div className="mx-auto flex flex-col gap-8 max-w-[31.625rem] ">
-              <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}
-                onInput={handleInput}
-                ref={firstInputRef}
-                maxLength={11}
-                error={(props.errors.bvn && props.touched.bvn) && props.errors.bvn}
-              />
-              {!hideOTPComponent && (
+              <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>
+              {bvnIsValid.valid && (
                 <InputCompOne
                   parentClass="flex flex-col gap-2"
                   label="Enter OTP "
@@ -128,21 +148,19 @@ const LetsGetStarted: React.FC = () => {
                   inputClass="w-full h-[3.625rem] rounded bg-[#EFEFEF] px-4"
                   value={props.values.otp}
                   onChange={props.handleChange}
-                  onInput={handleInput}
-                  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}
+                disabled={requestStatusBVN.loading || (!props.values.otp && bvnIsValid.valid)}
               >
                 Enter
               </button>
+              
 
-              {hideOTPComponent ? (
+              {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

src/core/apiRequest.ts

@@ -0,0 +1,19 @@
+import { postAuxEnd } from "./axiosCall";
+
+
+// FUNCTION TO START BVN VALIDATION
+export const validateBVN = (postData:any) => {
+    let reqData = {
+        ...postData
+    }
+    return postAuxEnd('https://digifi-apidev.chiefsoft.net/digiusers/v1/bvn', reqData)
+}
+
+
+// FUNCTION TO VERIFY OTP AND LOGIN
+export const verifyOTP = (postData:any) => {
+    let reqData = {
+        ...postData
+    }
+    return postAuxEnd('https://digifi-apidev.chiefsoft.net/digiusers/v1/bvn/verify', reqData)
+}

src/core/axiosCall.ts

@@ -0,0 +1,49 @@
+import axios from "axios";
+
+export function postAuxEnd(uri:string, reqData:any):Promise<any> {
+    // const endPoint = import.meta.env.REACT_APP_USERS_ENDPOINT + uri;
+    const formData = new FormData();
+    for (let value in reqData) {
+      formData.append(value, reqData[value]);
+    }
+    return axios.post(uri, formData)
+        .then((response:{}) => {
+        //   if (response.data.internal_return == "-9999") {
+        //     localStorage.clear();
+        //     window.location.href = `/login?sessionExpired=true`;
+        //   }
+          return response;
+        })
+        .catch((error:any) => {
+          if (error.response) {
+            //response status is an error code
+            console.log(
+                "ERROR-------------------------------------------------------"
+            );
+            console.log(error.response.status);
+            console.log(
+                "ERROR-------------------------------------------------------"
+            );
+          } else if (error.request) {
+            //response not received though the request was sent
+            console.log(
+                "ERROR2-------------------------------------------------------"
+            );
+            console.log(error?.request);
+            console.log(
+                "ERROR2-------------------------------------------------------"
+            );
+          } else {
+            //an error occurred when setting up the request
+            console.log(
+                "ERROR3-------------------------------------------------------"
+            );
+            console.log(error);
+            console.log(
+                "ERROR3-------------------------------------------------------"
+            );
+          }
+        });
+  }
+
+

src/core/models.ts

@@ -0,0 +1,7 @@
+export interface RequestStatus {
+    loading?:boolean
+    status?:boolean | undefined
+    message?:string
+    name?:string
+    data?:{}[] | [any] | {}
+  }

src/layouts/DashboardLayout/Aside.tsx

@@ -1,17 +1,16 @@
 import { useState } from "react";
-import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import Logo from "../../assets/icons/logo.svg";
 import { Icons } from "../../components";
 
 type Props = {
   asideDisplay?: () => void;
+  logoutUser: () => void
 };
 
-export default function Aside({ asideDisplay }: Props) {
+export default function Aside({ asideDisplay, logoutUser }: Props) {
   const { pathname } = useLocation();
 
-  const navigate = useNavigate();
-
   const [openNestedLink, setOpenNestedLink] = useState<{ name: string | null }>(
     { name: "" }
   );
@@ -115,7 +114,7 @@ export default function Aside({ asideDisplay }: Props) {
       <div className="w-full flex justify-center items-center flex-col gap-3">
         <button
           className="py-3 px-6 bg-red-100 text-red-500 font-medium rounded-md w-full"
-          onClick={() => navigate("/login", { replace: true })}
+          onClick={() => logoutUser()}
         >
           Log out
         </button>

src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -1,8 +1,12 @@
 import { ReactNode, useState, useEffect } from "react";
+import { RouteHandler } from "../../router/routes";
+import { useNavigate } from "react-router-dom";
 
 import Aside from "./Aside";
 
 export default function DashboardLayout({ children }: { children: ReactNode }) {
+  const navigate = useNavigate();
+
   const [showAside, setShowAside] = useState<boolean>(false);
   const asideDisplay = (): void => {
     setShowAside((prev) => !prev);
@@ -30,17 +34,21 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
   //   return child;
   // });
 
+  const logoutUser = () => {
+    navigate(RouteHandler.letsGetStarted, {replace:true})
+  }
+
   return (
     <div className="w-full max-w-[2000px] mx-auto h-screen flex bg-[#020202] text-black">
       <aside className="max-w-[18.75rem] w-full bg-white hidden md:block border-r-2 border-[#E6E6E6]">
-        <Aside />
+        <Aside logoutUser={logoutUser} />
       </aside>
       <aside
         className={`max-w-[18.75rem] w-full md:hidden bg-white border-r-2 border-[#E6E6E6] fixed top-0 bottom-0 z-50 transition-all duration-500 ${
           showAside ? "left-0" : "-left-[200%]"
         }`}
       >
-        <Aside asideDisplay={asideDisplay} />
+        <Aside logoutUser={logoutUser} asideDisplay={asideDisplay} />
       </aside>
       <main className="dash-bg-image bg-[#F9F9F9] relative w-full overflow-y-auto overflow-x-hidden">