added bank name in env variable

.env

@@ -10,4 +10,8 @@ VITE_USERS_ENDPOINT='https://digifi-apidev.chiefsoft.net/digiusers/v1'
 
 # ENQUIRIES CONTACTS
 VITE_CALL_ENDPOINT='09099000000'
-VITE_EMAIL_ENDPOINT='fcmbloan@support.com'
+VITE_EMAIL_ENDPOINT='fcmbloan@support.com'
+
+#BANK NAME
+VITE_BANK_NAME='First City Monument Bank'
+VITE_BANK_NAME_SHORT='FCMB'

.env.development

@@ -6,4 +6,8 @@ VITE_TWITTER_URL=https://twitter.com
 VITE_INSTAGRAM_URL=https://www.instagram.com
 
 # BACKEND END POINTS
-VITE_USERS_ENDPOINT='https://digifi-apidev.chiefsoft.net/digiusers/v1'
+VITE_USERS_ENDPOINT='https://digifi-apidev.chiefsoft.net/digiusers/v1'
+
+#BANK NAME
+VITE_BANK_NAME='First City Monument Bank'
+VITE_BANK_NAME_SHORT='FCMB'

.env.production

@@ -6,4 +6,8 @@ TWITTER_URL=https://twitter.com
 INSTAGRAM_URL=https://www.instagram.com
 
 # BACKEND END POINTS
-VITE_USERS_ENDPOINT='https://digifi-apidev.chiefsoft.net/digiusers/v1'
+VITE_USERS_ENDPOINT='https://digifi-apidev.chiefsoft.net/digiusers/v1'
+
+#BANK NAME
+VITE_BANK_NAME='First City Monument Bank'
+VITE_BANK_NAME_SHORT='FCMB'

src/components/Dashboard/home/DashboardHomeAttestation.tsx

@@ -53,7 +53,7 @@ export default function DashboardHomeAttestation({handleNextStep, applicationDet
         <Stepper step={4} />
       </div>
       <p className='my-10 text-red-500 text-lg md:text-2xl'>Applicant's Attestation and Debit Instruction</p>
-      <p className='text-red-500 text-base'>NB: Must be your FCMB account number</p>
+      <p className='text-red-500 text-base'>NB: Must be your {import.meta.env.VITE_BANK_NAME_SHORT} account number</p>
       <Formik
             initialValues={initialValues}
             validationSchema={validationSchema}
@@ -84,7 +84,7 @@ export default function DashboardHomeAttestation({handleNextStep, applicationDet
                         className='w-4 h-4 p-2 accent-purple-600 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500' 
                         onChange={props.handleChange}
                       />
-                      <p className='text-[12px] text-justify'>By pressing, you agree that you have read, understood and accept the <span className='text-blue-600'>applicatant's attestation</span> and <span className='text-blue-600'>terms and conditions</span> for FCMB
+                      <p className='text-[12px] text-justify'>By pressing, you agree that you have read, understood and accept the <span className='text-blue-600'>applicatant's attestation</span> and <span className='text-blue-600'>terms and conditions</span> for {import.meta.env.VITE_BANK_NAME_SHORT}
                           premium salary loan. You also give us permission to collect financial information and run credit checks on the account provided through our partners
                       </p>
                     </div>

src/components/Dashboard/home/DashboardHomeEmploymentInfo.tsx

@@ -1,12 +1,20 @@
+import {useState, useEffect} from 'react'
 import { Button, InputCompOne, Stepper } from '../../shared/index';
 
 import {Formik, Form} from 'formik'
 import * as Yup from "yup";
 
+import { getEmployersList } from '../../../core/apiRequest';
+
 type Props = {
   handleNextStep:(value:{})=>any
 }
 
+// type EmployerProps = {
+//   loading?: boolean,
+//   data?: Array<{[index:string]: string}> | {[index:string]: Array<{[index:string]: string}> }
+// }
+
 const initialValues = {
   job_title: "",
   name: "",
@@ -18,24 +26,37 @@ const initialValues = {
   monthly_salary: "",
   salary_payment_date: "",
   employment_id: "",
-  highest_eductaion: ""
+  highest_eductaion: "",
+  employer_uid: "",
+  isChecked: false
 };
 
 // To get the validation schema
 const validationSchema = Yup.object().shape({
+  isChecked: Yup.bool(), // use bool instead of boolean
+  // .oneOf([true, false], "You must accept the terms and conditions"),
   job_title: Yup.string()
     .required("Required"),
-  name: Yup.string()
-    .required("Required"),
-  sector: Yup.string()
-    .required("Required"),
-  industry: Yup.string()
-    .required("Required"),
+  name: Yup.string().when('isChecked', {
+      is: true, 
+      then: () => Yup.string().required('required'),
+      otherwise: () => Yup.string(),
+    }),
+  sector: Yup.string().when('isChecked', {
+      is: true, 
+      then: () => Yup.string().required('required'),
+    }),
+  industry: Yup.string().when('isChecked', {
+      is: true, 
+      then: () => Yup.string().required('required'),
+    }),
   resumption_date: Yup.string()
     .required("Required"),
-  email: Yup.string()
-    .email("Invalid")
-    .required("Required"),
+  email: Yup.string().when('isChecked', {
+      is: true, 
+      then: () => Yup.string().required('required'),
+    })
+    .email("Invalid"),
   annual_income: Yup.string()
     .required("Required")
     .test("no-e", "Invalid", (value:any) => {
@@ -58,16 +79,41 @@ const validationSchema = Yup.object().shape({
     .required("Required"),
   highest_eductaion: Yup.string()
     .required("Required"),
+  employer_uid: Yup.string().when('isChecked', {
+      is: false, 
+      then: () => Yup.string().required('required'),
+    }),
 });
 
 export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
 
+  const [employersList, setEmployersList] = useState<any>({
+    loading: true,
+    data: []
+  })
+
 
   //FUNCTION TO HANDLE SUBMIT
   const handleSubmit = (values:any) => {
-    handleNextStep({employment: values})
+    // Remember to changed the checked value's name
+    if(values.employer_uid){
+      let employer_uid = values.employer_uid
+      delete values.employer_uid
+      handleNextStep({employer_uid, employment: values})
+    }else{
+      handleNextStep({employment: values})
+    }
   };
 
+  useEffect(()=>{
+    getEmployersList().then(res => {
+      setEmployersList({loading:false, data:res?.data})
+    }).catch(err => {
+      console.log(err)
+      setEmployersList({loading:false, data:[]})
+    })
+  },[])
+
 
   return (
     <div className="w-full">
@@ -83,155 +129,188 @@ export default function DashboardHomeEmploymentInfo({handleNextStep}:Props) {
               <Form>          
                 <div className="mt-[3.25rem] flex flex-col gap-9">
                   <p className='text-red-500 text-lg md:text-2xl'>Employment Informaton</p>
-                  <div className="flex items-center gap-[4.125rem]">
-                    <InputCompOne
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="job_title"
-                      floatLabel="Job Title"
-                      // labelClass="font-bold text-[1.125rem]"
-                      input
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      placeholder="Software Engineer"
-                      value={props.values.job_title}
-                      onChange={props.handleChange}
-                      error={(props.errors.job_title && props.touched.job_title) ? props.errors.job_title : ''}
-                    />
-                    <InputCompOne
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="name"
-                      floatLabel="Employer name"
-                      // labelClass="font-bold text-[1.125rem]"
-                      input
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      placeholder="Mr. Mark John"
-                      value={props.values.name}
-                      onChange={props.handleChange}
-                      error={(props.errors.name && props.touched.name) ? props.errors.name : ''}
-                    />
+                  <div className="flex flex-col lg:flex-row items-start gap-[2rem]">
+                    <div className='w-full lg:max-w-[30rem] flex flex-col'>
+                      <div className='w-full gap-[2rem]'>
+                        <InputCompOne
+                          parentClass="w-full"
+                          name="employer_uid"
+                          floatLabel="Employer Name"
+                          // labelClass="font-bold text-[1.125rem]"
+                          select={true}
+                          selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                          selectOptions={{loading:employersList?.loading, data: employersList?.data?.records}}
+                          selectValue={props.values.employer_uid}
+                          onChange={props.handleChange}
+                          error={(props.errors.employer_uid && props.touched.employer_uid) ? props.errors.employer_uid : ''}
+                          disabled={props.values.isChecked}
+                        />
+                        <div className='flex gap-4 items-start my-2'>
+                          <input 
+                            type='checkbox' 
+                            name="isChecked"
+                            className='w-4 h-4 p-2 accent-purple-600 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500' 
+                            onChange={props.handleChange}
+                            checked={props.values.isChecked}
+                          />
+                          <p className='text-[12px] text-justify'>Check here if employer is not on the list</p>
+                        </div>
+                        <div className={`hidden p-4 ${props.values.isChecked && 'hidden'}`}>
+                          Name: {'Name'}
+                        </div>
+                      </div>
+                      <div className={`w-full flex flex-col gap-[2rem] ${!props.values.isChecked && 'hidden'}`}>
+                        <InputCompOne
+                          parentClass="w-full"
+                          name="name"
+                          floatLabel="Employer name"
+                          // labelClass="font-bold text-[1.125rem]"
+                          input
+                          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                          placeholder="Mr. Mark John"
+                          value={props.values.name}
+                          onChange={props.handleChange}
+                          error={(props.errors.name && props.touched.name) ? props.errors.name : ''}
+                        />
+                        <InputCompOne
+                          parentClass="w-full"
+                          name="email"
+                          floatLabel="Employers official email"
+                          // labelClass="font-bold text-[1.125rem]"
+                          input
+                          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                          placeholder="example@gmail.com"
+                          value={props.values.email}
+                          onChange={props.handleChange}
+                          error={(props.errors.email && props.touched.email) ? props.errors.email : ''}
+                        />
+                        <InputCompOne
+                          parentClass="w-full"
+                          name="industry"
+                          floatLabel="Select your industry"
+                          // labelClass="font-bold text-[1.125rem]"
+                          select={true}
+                          selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                          selectOptions={industry}
+                          selectValue={props.values.industry}
+                          onChange={props.handleChange}
+                          error={(props.errors.industry && props.touched.industry) ? props.errors.industry : ''}
+                        />
+                        <InputCompOne
+                          parentClass="w-full"
+                          name="sector"
+                          floatLabel="Job Sector"
+                          // labelClass="font-bold text-[1.125rem]"
+                          select={true}
+                          selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                          selectOptions={jobSector}
+                          selectValue={props.values.sector}
+                          onChange={props.handleChange}
+                          error={(props.errors.sector && props.touched.sector) ? props.errors.sector : ''}
+                        />
+                      </div>
+                    </div>
+
+                    <div className='w-full lg:max-w-[30rem] flex flex-col gap-[2rem]'>  
+                      <InputCompOne
+                        parentClass="w-full"
+                        name="job_title"
+                        floatLabel="Job Title"
+                        // labelClass="font-bold text-[1.125rem]"
+                        input
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        placeholder="Software Engineer"
+                        value={props.values.job_title}
+                        onChange={props.handleChange}
+                        error={(props.errors.job_title && props.touched.job_title) ? props.errors.job_title : ''}
+                      />
+                      <InputCompOne
+                        parentClass="w-full"
+                        name="highest_eductaion"
+                        floatLabel="Highest level of education"
+                        // labelClass="font-bold text-[1.125rem]"
+                        select={true}
+                        selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        selectOptions={highestEductaion}
+                        selectValue={props.values.highest_eductaion}
+                        onChange={props.handleChange}
+                        error={(props.errors.highest_eductaion && props.touched.highest_eductaion) ? props.errors.highest_eductaion : ''}
+                      />
+                      <div className="w-full flex flex-col sm:flex-row items-center gap-4">
+                          <InputCompOne
+                          parentClass="w-full"
+                          name="resumption_date"
+                          floatLabel="Date of resumption"
+                          // labelClass="font-bold text-[1.125rem]"
+                          input
+                          inputType='date'
+                          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                          placeholder="12/12/2015"
+                          value={props.values.resumption_date}
+                          onChange={props.handleChange}
+                          error={(props.errors.resumption_date && props.touched.resumption_date) ? props.errors.resumption_date : ''}
+                        />
+                        <InputCompOne
+                          parentClass="w-full"
+                          name="salary_payment_date"
+                          floatLabel="Salary payment date"
+                          // labelClass="font-bold text-[1.125rem]"
+                          input
+                          inputType='date'
+                          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                          placeholder="30th of every month"
+                          value={props.values.salary_payment_date}
+                          onChange={props.handleChange}
+                          error={(props.errors.salary_payment_date && props.touched.salary_payment_date) ? props.errors.salary_payment_date : ''}
+                        />
+                      </div>
+                      <div className="w-full flex flex-col sm:flex-row items-center gap-4">
+                        <InputCompOne
+                          parentClass="w-full"
+                          name="annual_income"
+                          floatLabel="Annual Income"
+                          // labelClass="font-bold text-[1.125rem]"
+                          input
+                          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
+                          placeholder="1,200,000"
+                          value={props.values.annual_income}
+                          onChange={props.handleChange}
+                          error={(props.errors.annual_income && props.touched.annual_income) ? props.errors.annual_income : ''}
+                        />
+                        <InputCompOne
+                          parentClass="w-full"
+                          name="monthly_salary"
+                          floatLabel="Net monthly salary"
+                          // labelClass="font-bold text-[1.125rem]"
+                          input
+                          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
+                          placeholder="100,000"
+                          value={props.values.monthly_salary}
+                          onChange={props.handleChange}
+                          error={(props.errors.monthly_salary && props.touched.monthly_salary) ? props.errors.monthly_salary : ''}
+                        />
+                      </div>
+                      <InputCompOne
+                        parentClass="w-full"
+                        name="employment_id"
+                        floatLabel="Employee ID"
+                        // labelClass="font-bold text-[1.125rem]"
+                        input
+                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
+                        placeholder="LS/001/005"
+                        value={props.values.employment_id}
+                        onChange={props.handleChange}
+                        error={(props.errors.employment_id && props.touched.employment_id) ? props.errors.employment_id : ''}
+                      />
+                      <div className="w-full">
+                        <Button
+                          className="my-4 btn-Y text-black w-full h-11"
+                          text="Next"
+                          type="submit"
+                        />
+                      </div>
+                    </div>
                   </div>
-                  <div className="flex items-center gap-[4.125rem]">
-                    <InputCompOne
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="sector"
-                      floatLabel="Job Sector"
-                      // labelClass="font-bold text-[1.125rem]"
-                      select={true}
-                      selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      selectOptions={jobSector}
-                      selectValue={props.values.sector}
-                      onChange={props.handleChange}
-                      error={(props.errors.sector && props.touched.sector) ? props.errors.sector : ''}
-                    />
-                    <InputCompOne
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="industry"
-                      floatLabel="Select your industry"
-                      // labelClass="font-bold text-[1.125rem]"
-                      select={true}
-                      selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      selectOptions={industry}
-                      selectValue={props.values.industry}
-                      onChange={props.handleChange}
-                      error={(props.errors.industry && props.touched.industry) ? props.errors.industry : ''}
-                    />
-                  </div>
-                  <div className="flex items-center gap-[4.125rem]">
-                    <InputCompOne
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="resumption_date"
-                      floatLabel="Date of resumption"
-                      // labelClass="font-bold text-[1.125rem]"
-                      input
-                      inputType='date'
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      placeholder="12/12/2015"
-                      value={props.values.resumption_date}
-                      onChange={props.handleChange}
-                      error={(props.errors.resumption_date && props.touched.resumption_date) ? props.errors.resumption_date : ''}
-                    />
-                    <InputCompOne
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="email"
-                      floatLabel="Employers official email"
-                      // labelClass="font-bold text-[1.125rem]"
-                      input
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      placeholder="example@gmail.com"
-                      value={props.values.email}
-                      onChange={props.handleChange}
-                      error={(props.errors.email && props.touched.email) ? props.errors.email : ''}
-                    />
-                  </div>
-                  <div className="flex items-center gap-[4.125rem]">
-                    <InputCompOne
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="annual_income"
-                      floatLabel="Annual Income"
-                      // labelClass="font-bold text-[1.125rem]"
-                      input
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
-                      placeholder="1,200,000"
-                      value={props.values.annual_income}
-                      onChange={props.handleChange}
-                      error={(props.errors.annual_income && props.touched.annual_income) ? props.errors.annual_income : ''}
-                    />
-                    <InputCompOne
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="monthly_salary"
-                      floatLabel="Net monthly salary"
-                      // labelClass="font-bold text-[1.125rem]"
-                      input
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
-                      placeholder="100,000"
-                      value={props.values.monthly_salary}
-                      onChange={props.handleChange}
-                      error={(props.errors.monthly_salary && props.touched.monthly_salary) ? props.errors.monthly_salary : ''}
-                    />
-                  </div>
-                  <div className="flex items-center gap-[4.125rem]">
-                    <InputCompOne
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="salary_payment_date"
-                      floatLabel="Salary payment date"
-                      // labelClass="font-bold text-[1.125rem]"
-                      input
-                      inputType='date'
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      placeholder="30th of every month"
-                      value={props.values.salary_payment_date}
-                      onChange={props.handleChange}
-                      error={(props.errors.salary_payment_date && props.touched.salary_payment_date) ? props.errors.salary_payment_date : ''}
-                    />
-                    <InputCompOne
-                      parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                      name="employment_id"
-                      floatLabel="Employee ID"
-                      // labelClass="font-bold text-[1.125rem]"
-                      input
-                      inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                      placeholder="LS/001/005"
-                      value={props.values.employment_id}
-                      onChange={props.handleChange}
-                      error={(props.errors.employment_id && props.touched.employment_id) ? props.errors.employment_id : ''}
-                    />
-                  </div>
-                  <InputCompOne
-                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
-                    name="highest_eductaion"
-                    floatLabel="Highest level of education"
-                    // labelClass="font-bold text-[1.125rem]"
-                    select={true}
-                    selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
-                    selectOptions={highestEductaion}
-                    selectValue={props.values.highest_eductaion}
-                    onChange={props.handleChange}
-                    error={(props.errors.highest_eductaion && props.touched.highest_eductaion) ? props.errors.highest_eductaion : ''}
-                  />
-                  <Button
-                    className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
-                    text="Next"
-                    type="submit"
-                  />
                 </div>
               </Form>
             )}

src/components/Footer/BottomFooterOne.tsx

@@ -17,7 +17,7 @@ const BottomFooterOne = () => {
           <CustomerLinks />
         </div>
         <p className="text-[.8125rem] text-[#333] leading-[1.42857]">
-          © <span>{date}</span> First City Monument Bank (Licensed by the
+          © <span>{date}</span> {import.meta.env.VITE_BANK_NAME} (Licensed by the
           Central Bank of Nigeria)
         </p>
       </div>

src/components/Footer/Footer.tsx

@@ -8,7 +8,7 @@ export default function Footer() {
     <div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center">
       <div className="containerMode flex justify-center md:justify-between items-center flex-wrap gap-2">
         <p className="text-[.9375rem] tracking-[2%] font-semibold text-[#969696]">
-          {date} @ First City Monument Bank Limited
+          {date} @ {import.meta.env.VITE_BANK_NAME} Limited
         </p>
         <div className="footer-social-icons flex justify-end items-center gap-2">
           {renderSocialLinks()}

src/components/Home/Requirements/EligiblityBox.tsx

@@ -12,7 +12,7 @@ const EligiblityBox = () => {
           You must have a valid BVN
         </li>
         <li className="text-base leading-[1.5625rem]">
-          Must have a salary or current bank account with FCMB
+          Must have a salary or current bank account with {import.meta.env.VITE_BANK_NAME_SHORT}
         </li>
       </ul>
     </div>

src/components/shared/InputCompOne.tsx

@@ -17,7 +17,7 @@ export interface InputCompOneProps {
   selectValue?: string;
   input?: boolean;
   select?: boolean;
-  selectOptions?: {loading:boolean, data:{ value: string; label: string }[]};
+  selectOptions?: {loading:boolean, data:{ [index: string]: string; }[]};
   inputType?: string;
   inputClass?: string;
   parentInputClass?: string;
@@ -25,6 +25,7 @@ export interface InputCompOneProps {
   parentClass?: string;
   maxLength?: number;
   error?: string;
+  disabled?: boolean
 }
 
 const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
@@ -52,6 +53,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
       parentClass,
       maxLength,
       error,
+      disabled=false
     },
     forwardedRef
   ) => {
@@ -78,6 +80,7 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
               className={`px-4 ${floatLabel && 'peer pt-4 placeholder:text-transparent'} ${inputClass}`}
               maxLength={maxLength}
               id={label ? label : floatLabel}
+              disabled={disabled}
             />
             {floatLabel &&
               <label
@@ -96,17 +99,27 @@ const InputCompOne = forwardRef<HTMLInputElement, InputCompOneProps>(
               name={name}
               id={label ? label : floatLabel}
               value={selectValue}
-              className={`px-4 appearance-none ${floatLabel && 'peer pt-4'} ${selectClass}`}
+              className={`px-4 appearance-none ${floatLabel && 'peer pt-4'} ${selectClass} ${disabled && 'opacity-50'}`}
               onChange={onChange}
+              disabled={disabled}
             >
               {selectOptions.loading ?
-              <option value=''>Loading</option>
-              : selectOptions.data.length ?
-                selectOptions.data.map(({ value, label }) => (
-                  <option key={value} value={value}>
-                    {label}
-                  </option>
-                ))
+              <option value=''>Loading...</option>
+              : selectOptions.data.length && name == 'employer_uid' ?
+                <>
+                  <option value=''>Please Select</option>
+                  {selectOptions.data.map(({ uid, name }) => (
+                    <option key={uid} value={uid}>
+                      {name}
+                    </option>
+                  ))}
+                </>
+              : selectOptions.data.length && name != 'employer_uid' ?
+                  selectOptions.data.map(({ value, label }) => (
+                    <option key={value} value={value}>
+                      {label}
+                    </option>
+                  ))
               :
               <option value=''>Not Found</option>
               }

src/core/apiRequest.ts

@@ -40,4 +40,12 @@ export const getUserPendingLoanList = (uid:string) => {
         // customer_uid: localStorage.getItem('uid'),
     }
     return getAuxEnd(`/dash?uid=${uid}`, reqData)
+}
+
+// FUNCTION TO GET LIST OF EMPLOYERS
+export const getEmployersList = () => {
+    let reqData = {
+        // customer_uid: localStorage.getItem('uid'),
+    }
+    return getAuxEnd(`/employers`, reqData)
 }

src/utils/data.tsx

@@ -82,7 +82,7 @@ export const _lowerMenuItems = [
         name: 'SAVINGS ACCOUNTS',
         linkPath: '/savings-accounts',
         subItems: [
-          { name: 'FCMB EASY ACCOUNT', linkPath: '/easy-account' },
+          { name: `${import.meta.env.VITE_BANK_NAME_SHORT} EASY ACCOUNT`, linkPath: '/easy-account' },
           { name: 'KIDS (0-17 YRS)', linkPath: '/kids' },
           { name: 'FLEXX (18-30 YRS)', linkPath: '/flexx-account' },
           {
@@ -94,7 +94,7 @@ export const _lowerMenuItems = [
             linkPath: '/fcmb-premium-savings-account',
           },
           {
-            name: 'FCMB SALARY SAVINGS ACCOUNT',
+            name: `${import.meta.env.VITE_BANK_NAME_SHORT} SALARY SAVINGS ACCOUNT`,
             linkPath: '/fcmb-salary-savings-account',
           },
           {
@@ -150,7 +150,7 @@ export const _lowerMenuItems = [
         name: 'WAYS TO BANK',
         linkPath: '/ways-to-bank',
         subItems: [
-          { name: 'FCMB MOBILE', linkPath: '/fcmb-mobile' },
+          { name: `${import.meta.env.VITE_BANK_NAME_SHORT} MOBILE`, linkPath: '/fcmb-mobile' },
           {
             name: 'RETAIL INTERNET BANKING',
             linkPath: 'https://ibank.fcmb.com/',
@@ -160,10 +160,10 @@ export const _lowerMenuItems = [
           { name: 'OUR ATM NETWORK', linkPath: '/atm-network' },
           { name: 'FLASHMECASH', linkPath: '/flashme-cash' },
           { name: 'OUR CARDS', linkPath: '/our-cards' },
-          { name: 'FCMB ELECTRONIC CHANNELS', linkPath: '/e-channels' },
+          { name: `${import.meta.env.VITE_BANK_NAME_SHORT} ELECTRONIC CHANNELS`, linkPath: '/e-channels' },
           { name: 'AGENT BANKING', linkPath: '/agent-banking' },
           {
-            name: 'FCMB SECURE COMMUNICATION',
+            name: `${import.meta.env.VITE_BANK_NAME_SHORT} SECURE COMMUNICATION`,
             linkPath: '/secure-communication',
           },
           { name: 'TEMI', linkPath: '/temi' },
@@ -197,7 +197,7 @@ export const _lowerMenuItems = [
             name: 'CORPORATE CURRENT ACCOUNT',
             linkPath: '/corporate-current-account',
           },
-          { name: 'FCMB BUSINESS ACCOUNT', linkPath: '/fcmb-business-account' },
+          { name: `${import.meta.env.VITE_BANK_NAME_SHORT} BUSINESS ACCOUNT`, linkPath: '/fcmb-business-account' },
           {
             name: 'DOMICILIARY CURRENT ACCOUNT',
             linkPath: '/business-domiciliary-current-account',
@@ -265,12 +265,12 @@ export const _lowerMenuItems = [
             linkPath: 'https://www.fcmbonline.com/',
           },
           { name: 'OUR ATM NETWORK', linkPath: '/atm-network2' },
-          { name: 'FCMB ONLINE', linkPath: '/fcmb-online-business' },
+          { name: `${import.meta.env.VITE_BANK_NAME_SHORT} ONLINE`, linkPath: '/fcmb-online-business' },
           {
-            name: 'FCMB ELECTRONIC CHANNELS',
+            name: `${import.meta.env.VITE_BANK_NAME_SHORT} ELECTRONIC CHANNELS`,
             linkPath: 'https://www.fcmb.com/e-channels',
           },
-          { name: 'FCMB BUSINESS APP', linkPath: '/FCMB-business-app' },
+          { name: `${import.meta.env.VITE_BANK_NAME_SHORT} BUSINESS APP`, linkPath: '/FCMB-business-app' },
         ],
       },
     ],
@@ -292,33 +292,33 @@ export const _lowerMenuItems = [
     name: 'GROUP & SUBSIDIARIES',
     linkPath: '',
     subItems: [
-      { name: 'FCMB GROUP PLC', linkPath: 'https://www.fcmbgroup.com/' },
+      { name: `${import.meta.env.VITE_BANK_NAME_SHORT} GROUP PLC`, linkPath: 'https://www.fcmbgroup.com/' },
       {
         name: 'CSL STOCKBROKERS',
         linkPath: 'https://www.cslstockbrokers.com/',
       },
       {
-        name: 'FCMB CAPITAL MARKETS',
+        name: `${import.meta.env.VITE_BANK_NAME_SHORT} CAPITAL MARKETS`,
         linkPath: 'https://www.fcmbcapitalmarketsng.com/',
       },
       {
-        name: 'FCMB ASSET MANAGEMENT',
+        name: `${import.meta.env.VITE_BANK_NAME_SHORT} ASSET MANAGEMENT`,
         linkPath: 'https://www.fcmbassetmanagement.com/index/',
       },
       {
-        name: 'FCMB MICROFINANCE BANK',
+        name: `${import.meta.env.VITE_BANK_NAME_SHORT} MICROFINANCE BANK`,
         linkPath: '/fcmb-microfinance-initiative',
       },
-      { name: 'FCMB UK', linkPath: 'http://www.fcmbuk.com/' },
+      { name: `${import.meta.env.VITE_BANK_NAME_SHORT} UK`, linkPath: 'http://www.fcmbuk.com/' },
       {
-        name: 'FCMB PENSIONS LIMITED',
+        name: `${import.meta.env.VITE_BANK_NAME_SHORT} PENSIONS LIMITED`,
         linkPath: 'https://www.fcmbpensions.com/',
       },
       {
         name: 'CREDIT DIRECT LIMITED',
         linkPath: 'https://www.creditdirect.ng',
       },
-      { name: 'FCMB TRUSTEES', linkPath: 'http://fcmbtrustees.com/' },
+      { name: `${import.meta.env.VITE_BANK_NAME_SHORT} TRUSTEES`, linkPath: 'http://fcmbtrustees.com/' },
     ],
   },
   {
@@ -372,7 +372,7 @@ export const _lowerMenuItems = [
         linkPath: '/current-campaigns-promos',
         subItems: [
           {
-            name: 'BOOK YOUR FLIGHTS AND PAY IN INSTALMENTS WITH FCMB',
+            name: `BOOK YOUR FLIGHTS AND PAY IN INSTALMENTS WITH ${import.meta.env.VITE_BANK_NAME_SHORT}`,
             linkPath: '/247travels',
           },
           { name: 'REFER AND WIN', linkPath: '/refer-and-win' },
@@ -447,21 +447,21 @@ export const footerItems = [
   {
     category: 'GROUP & SUBSIDIARIES',
     subItems: [
-      { text: 'FCMB GROUP PLC', href: 'https://www.fcmbgroup.com/' },
+      { text: `${import.meta.env.VITE_BANK_NAME_SHORT} GROUP PLC`, href: 'https://www.fcmbgroup.com/' },
       { text: 'CSL STOCKBROKERS', href: 'https://www.cslstockbrokers.com/' },
       {
-        text: 'FCMB CAPITAL MARKETS',
+        text: `${import.meta.env.VITE_BANK_NAME_SHORT} CAPITAL MARKETS`,
         href: 'https://www.fcmbcapitalmarketsng.com/',
       },
       {
-        text: 'FCMB ASSET MANAGEMENT',
+        text: `${import.meta.env.VITE_BANK_NAME_SHORT} ASSET MANAGEMENT`,
         href: 'https://www.fcmbassetmanagement.com/index/',
       },
-      { text: 'FCMB MICROFINANCE BANK', href: '/fcmb-microfinance-initiative' },
-      { text: 'FCMB UK', href: 'http://www.fcmbuk.com/' },
-      { text: 'FCMB PENSIONS LIMITED', href: 'https://www.fcmbpensions.com/' },
+      { text: `${import.meta.env.VITE_BANK_NAME_SHORT} MICROFINANCE BANK`, href: '/fcmb-microfinance-initiative' },
+      { text: `${import.meta.env.VITE_BANK_NAME_SHORT} UK`, href: 'http://www.fcmbuk.com/' },
+      { text: `${import.meta.env.VITE_BANK_NAME_SHORT} PENSIONS LIMITED`, href: 'https://www.fcmbpensions.com/' },
       { text: 'CREDIT DIRECT LIMITED', href: 'https://www.creditdirect.ng' },
-      { text: 'FCMB TRUSTEES', href: 'http://fcmbtrustees.com/' },
+      { text: `${import.meta.env.VITE_BANK_NAME_SHORT} TRUSTEES`, href: 'http://fcmbtrustees.com/' },
     ],
   },
   {