employee name added to employer verify page

src/components/GetStarted/EmployerValidation.tsx

@@ -1,44 +1,49 @@
-import React from "react";
+import React, {useState} from "react";
+import { useSelector } from "react-redux";
+import { useLocation } from "react-router-dom";
 
-import { Button, InputCompOne } from "..";
+import { Button, CustomSpinner, InputCompOne } from "..";
 
 import {Formik, Form} from 'formik'
 import * as Yup from "yup";
+import { RequestStatus, StoreState } from "../../core/models";
+import ErrorMsg from "../shared/ErrorMsg";
+import { verifyEmployee } from "../../core/apiRequest";
 
 const initialValues = {
-    salary_acct: "",
+    // salary_acct: "",
     confirm_salary_acct: false,
-    qualification: "",
+    education: "",
-    doe: "",
+    applicant_date: "",
-    gl: "",
+    grade: "",
-    ippis: "",
+    ippis_number: "",
-    employer_name: "",
+    employers_name: "",
     designation: "",
     checked: false
 };
 
 // To get the validation schema
 const validationSchema = Yup.object().shape({
-  salary_acct: Yup.string()
+  // salary_acct: Yup.string()
-    .required("Required")
+  //   .required("Required")
-    .test("no-e", "Invalid number", (value:any) => {
+  //   .test("no-e", "Invalid number", (value:any) => {
-      if (value && /^[0-9]*$/.test(value) == false) {
+  //     if (value && /^[0-9]*$/.test(value) == false) {
-        return false;
+  //       return false;
-      }
+  //     }
-      return true;
+  //     return true;
-    })
+  //   })
-    .min(10, "must be 10 digits")
+  //   .min(10, "must be 10 digits")
-    .max(10, "must be 10 digits"),
+  //   .max(10, "must be 10 digits"),
   confirm_salary_acct: Yup.bool() // use bool instead of boolean
   .oneOf([true], "You must check the box"),
-  qualification: Yup.string()
+  education: Yup.string()
     .required("Required"),
-  doe: Yup.string()
+  applicant_date: Yup.string()
     .required("BVN is required"),
-  gl: Yup.string()
+  grade: Yup.string()
     .required("Required"),
-  ippis: Yup.string(),
+  ippis_number: Yup.string(),
-  employer_name: Yup.string()
+  employers_name: Yup.string()
     .required("Required"),
   designation: Yup.string()
     .required("Required"),
@@ -48,33 +53,45 @@ const validationSchema = Yup.object().shape({
 
 
 const EmployerValidation: React.FC= () => {
-  // const inputRef = useRef<HTMLInputElement>(null);
 
-  // const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+  const { userDetails } = useSelector((state:StoreState) => state.userDetails);
-  //   const { name, value } = e.target as HTMLInputElement;
 
-  //   if (name === "bvn") {
+  const [requestStatus, setRequestStatus] = useState<RequestStatus>({loading:false, status:null, message:'', data:{}})
-  //     const isNumeric = /^[0-9]+$/.test(value);
 
-  //     if (isNumeric) {
+  const { state:{application_uid, verify_uid} } = useLocation();
-  //       if (value.length === 10) {
-  //         setHideOTPComponent(false);
-  //       } else {
-  //         setHideOTPComponent(true);
-  //       }
-  //     } else {
-  //       console.log("Invalid BVN");
-  //     }
-  //   }
-  // };
 
+  const initialValuesNew = {...initialValues, application_uid, verify_uid}
 
   //FUNCTION TO HANDLE SUBMIT
   const handleSubmit = (values:any) => {
-    console.log(values)
+    delete values.checked
+    delete values.confirm_salary_acct
+    
+    setRequestStatus({loading:true, status:null, message:'', data:{}})
+    verifyEmployee(values).then(res => {
+      console.log('RES', res)
+      // if(res.status != '200'){
+      //   setRequestStatus({loading:false, status:false, message:'verification failed', data:{}})
+      //   return setTimeout(()=>{
+      //     setRequestStatus({loading:false, status:false, message:'', data:{}})
+      //   },2000)
+      // }
+      setRequestStatus({loading:false, status:true, message:'verification sucessful', data:{}})
+    }).catch(() => {
+      setRequestStatus({loading:false, status:false, message:'Something went wrong, try again!', data:{}})
+      setTimeout(()=>{
+        setRequestStatus({loading:false, status:false, message:'', data:{}})
+      },2000)
+    })
   };
 
   return (
+    <>
+    {requestStatus.status ?
+      <p className="text-xl mb-4 text-center font-medium text-red-500 dark:text-black">
+        Thank you for completing the process, we will continue further processing with the information provided
+      </p>
+    :
       <>
         {/* Header */}
         <div className="w-full mb-10">
@@ -84,33 +101,30 @@ const EmployerValidation: React.FC= () => {
           <p className="text-[10px]">(This is to be filled and validated by the employer of the applicant)</p>
         </div>
         <Formik
-            initialValues={initialValues}
+              initialValues={initialValuesNew}
               validationSchema={validationSchema}
               onSubmit={handleSubmit}
             >
               {(props)=>(
                 <Form>
                   <div className="w-full">
-                  <p className="my-10 tracking-wide leading-relaxed">We hereby confirm that <span className="font-bold">Mr Victor Badmus (The Applicant)</span> who applied for our loan    facility is a permanent and confirmed (Non-contract) staff of <span className="font-bold">Globalcom Nigeria limited</span> and that he is actively on the company's payroll
+                    <p className="my-10 tracking-wide leading-relaxed">We hereby confirm that <span className="font-bold">Mr {userDetails.firstname} {userDetails.lastname} (The Applicant)</span> who applied for our loan facility is a permanent and confirmed (Non-contract) staff of <span className="font-bold">{userDetails.employer_name}</span> and that he is actively on the company's payroll
                     </p>
                     <p className="my-10 tracking-wide leading-relaxed">We hereby irrevocably and unconditionally undertake to domicile his/her salaries to First City Monument Bank Ltd (FCMB) Accounts number.
                     </p>
                   </div>
                   <div className="w-full my-10">
-                  <p className="mb-1 text-[12px] font-bold flex items-center gap-4">Confirms Employee's salary account number
-                    {(props.errors.salary_acct && props.touched.salary_acct) && <span className='text-[10px] text-red-500'>{props.errors.salary_acct}</span> }
-                  </p>
                     <div className="w-full flex items-center gap-8">
                       <InputCompOne
                         parentClass="w-full max-w-[25rem]"
-                      // label="First Name"
                         name="salary_acct"
                         parentInputClass="w-full"
                         labelClass="font-bold text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
                         input
                         inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
-                      value={props.values.first_name}
+                        value='0011223344'
                         onChange={props.handleChange}
+                        disabled={true}
                         // error={(props.errors.first_name && props.touched.first_name) ? props.errors.first_name : ''}
                       />
                       <input 
@@ -143,7 +157,7 @@ const EmployerValidation: React.FC= () => {
                     <InputCompOne
                       parentInputClass="w-full"
                       parentClass="w-full md:max-w-[25rem]"
-                    name="qualification"
+                      name="education"
                       label="Applicant's Educational Qualification"
                       labelClass="font-bold text-base md:text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
                       labelSpan={`(Please select the emplyee's highest qualification)`}
@@ -151,22 +165,22 @@ const EmployerValidation: React.FC= () => {
                       select={true}
                       selectClass="w-full h-[36px] rounded-[6px]"
                       selectOptions={titleOptions}
-                    selectValue={props.values.qualification}
+                      selectValue={props.values.education}
                       onChange={props.handleChange}
-                    error={(props.errors.qualification && props.touched.qualification) ? props.errors.qualification : ''}
+                      error={(props.errors.education && props.touched.education) ? props.errors.education : ''}
                     />
                     <InputCompOne
                       parentClass="w-full md:max-w-[25rem]"
                       label="Applicant's Date of Employment"
-                    name="doe"
+                      name="applicant_date"
                       parentInputClass="w-full"
                       labelClass="font-bold text-base md:text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
                       input
                       inputType='date'
                       inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem] px-3"
-                    value={props.values.doe}
+                      value={props.values.applicant_date}
                       onChange={props.handleChange}
-                    error={(props.errors.doe && props.touched.doe) ? props.errors.doe : ''}
+                      error={(props.errors.applicant_date && props.touched.applicant_date) ? props.errors.applicant_date : ''}
                     />
                   </div>
 
@@ -175,26 +189,26 @@ const EmployerValidation: React.FC= () => {
                     <InputCompOne
                       parentClass="w-full md:max-w-[25rem]"
                       label="Applicant's Grade Level"
-                    name="gl"
+                      name="grade"
                       parentInputClass="w-full"
                       labelClass="font-bold text-base md:text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
                       input
                       inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
-                    value={props.values.gl}
+                      value={props.values.grade}
                       onChange={props.handleChange}
-                    error={(props.errors.gl && props.touched.gl) ? props.errors.gl : ''}
+                      error={(props.errors.grade && props.touched.grade) ? props.errors.grade : ''}
                     />
                     <InputCompOne
                       parentClass="w-full md:max-w-[25rem]"
                       label="Applicant's IPPIS Number (optional)"
-                    name="ippis"
+                      name="ippis_number"
                       parentInputClass="w-full"
                       labelClass="font-bold text-base md:text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
                       input
                       inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
-                    value={props.values.ippis}
+                      value={props.values.ippis_number}
                       onChange={props.handleChange}
-                    error={(props.errors.ippis && props.touched.ippis) ? props.errors.ippis : ''}
+                      error={(props.errors.ippis_number && props.touched.ippis_number) ? props.errors.ippis_number : ''}
                     />
                   </div>
 
@@ -216,16 +230,16 @@ const EmployerValidation: React.FC= () => {
                     <InputCompOne
                       parentClass="w-full md:max-w-[25rem]"
                       label="Employer's Name"
-                    name="employer_name"
+                      name="employers_name"
                       parentInputClass="w-full"
                       labelClass="font-bold text-base md:text-[1.125rem] leading-[1.3613rem] tracking-[2%] text-[#5C2684] mb-[.125rem]"
                       labelSpan={`(your full name)`}
                       labelSpanClass='text-[10px]'
                       input
                       inputClass="w-full h-[2.25rem] bg-[#EFEFEF] rounded-[.375rem]"
-                    value={props.values.employer_name}
+                      value={props.values.employers_name}
                       onChange={props.handleChange}
-                    error={(props.errors.employer_name && props.touched.employer_name) ? props.errors.employer_name : ''}
+                      error={(props.errors.employers_name && props.touched.employers_name) ? props.errors.employers_name : ''}
                     />
                     <InputCompOne
                       parentClass="w-full md:max-w-[25rem]"
@@ -245,17 +259,28 @@ const EmployerValidation: React.FC= () => {
 
 
                   {/* submit button */}
-                <div className="mt-24">
+                  <div className="mt-24 flex items-center gap-2">
                     <Button
-                    className="mt-8 btn-R bg-[#5A2C82]"
+                      className="btn-R bg-[#5A2C82]"
                       text="Submit"
                       type="submit"
                     />
+                    {requestStatus.loading &&
+                      <CustomSpinner />
+                    }
+                  </div>
+                  <div className='w-full'>
+                    <ErrorMsg 
+                      message={requestStatus.message}
+                      status={requestStatus.status} 
+                    />
                   </div>
                 </Form>
               )}
         </Formik>
       </>
+    }
+    </>
   );
 };
 

src/components/auth/OTP.tsx

@@ -72,9 +72,9 @@ export default function Login() {
       }
       setRequestStatus({loading:false, status:true, message:'OTP Verified', data:res?.data})
       localStorage.setItem('token', state?.verify_uid)
-      let data = {firstname:'firstname', lastname:'lastname', uid:'28273737646466464'}
+      // let data = {firstname:'firstname', lastname:'lastname', uid:'28273737646466464'}
-      dispatch(updateUserDetails(data));
+      dispatch(updateUserDetails(res?.data?.records));
-      navigate(`/${state?.application_uid}`, {replace:true})
+      navigate(`/${state?.application_uid}`, {state:{'application_uid':state?.application_uid, 'verify_uid':state?.verify_uid}, replace:true})
     }).catch(err =>{
       setRequestStatus({loading:false, status:false, message:'something went wrong', data:{}})
       console.log(err)

src/core/apiRequest.ts

@@ -16,3 +16,11 @@ export const verifyOTP = (postData:any) => {
     }
     return postAuxEnd('/otp', reqData)
 }
+
+// FUNCTION TO VERIFY OTP AND LOGIN
+export const verifyEmployee = (postData:any) => {
+    let reqData = {
+        ...postData
+    }
+    return postAuxEnd('/verify', reqData)
+}

src/core/models.ts

@@ -15,3 +15,7 @@ export interface APIResponse {
         username: string
     }
 }
+
+export interface StoreState {
+    [index:string]: string
+}

src/layouts/DashboardLayout/DashboardAuth.tsx

@@ -8,6 +8,7 @@ import { updateUserDetails } from '../../store/UserDetails';
 import { RouteHandler } from '../../router/routes';
 
 import Logo from '../../assets/images/logo.png'
+import { StoreState } from '../../core/models';
 
 export default function DashboardAuth() {
 
@@ -15,7 +16,7 @@ export default function DashboardAuth() {
   const dispatch = useDispatch()
   const {application_uid} = useParams()
 
-  const { userDetails } = useSelector((state:any) => state?.userDetails); // CHECKS IF USER Details are avaliable
+  const { userDetails } = useSelector((state:StoreState) => state?.userDetails); // CHECKS IF USER Details are avaliable
 
   const [loading, setLoading] = useState(true)
 
@@ -45,7 +46,7 @@ export default function DashboardAuth() {
       navigate(RouteHandler.loginpage, {state:{application_uid}, replace:true})
       return
     }
-    if(!application_uid){ // IF NO TOKEN || UID RETURN TO LOGIN PAGE
+    if(!application_uid){ // APPLICATION UID RETURN TO LOGIN PAGE
       navigate(RouteHandler.loginpage, {replace:true})
       return
     }