missed screen added

src/components/HomeCom.jsx

@@ -48,7 +48,7 @@ export default function HomeCom() {
                 {data.map((user, index) => {
                 let hasSalaryAcct = user.salary_account === 0 ? false : true                  
                 return (
-                    <div onClick={()=>getLoanPage(user)} key={user?.uid || index} className={`${hasSalaryAcct ? 'bg-white hover:cursor-pointer' : 'bg-red-50 pointer-events-none'} w-full rounded p-3 sm:p-5 shadow flex flex-col gap-5 hover:scale-105`}>
+                    <div onClick={()=>getLoanPage(user)} key={user?.uid || index} className={`${hasSalaryAcct ? 'bg-white' : 'bg-red-50'} w-full rounded p-3 sm:p-5 shadow flex flex-col gap-5 hover:scale-105 hover:cursor-pointer`}>
                       <div className="mb-5 card-title w-full md:w-4/5 mx-auto text-center">
                         <h1 className="mb-[1px] text-base md:text-xl lg:text-2xl font-bold">{user.name}</h1>
                         <span className={`text-sm font-bold p-1 rounded`}>ID: {user.bvn}</span>

src/components/LoanScreens.jsx

@@ -48,6 +48,7 @@ export default function LoanScreens() {
     offers: 'offers-screen',
     selected_offer: 'selected-offer-screen',
     loan_pin: 'loan-pin-screen',
+    not_eligible: 'not-eligible',
     finished: 'finished'
   } : showtype == typeToShow.payloan ? {
     loan_list: 'loan_list',

src/components/loan_screen/GetLoanScreens.jsx

@@ -8,9 +8,10 @@ import GetLoan from './getloan/GetLoan';
 import TermsAndConditions from './getloan/TermsAndConditions';
 import LoanDetails from './getloan/LoanDetails';
 import ProductDetails from './getloan/ProductDetails';
+import NotEligible from './getloan/NotEligible';
 
 export default function GetLoanScreens({step, screens, typeToShow, setShowType, handleStep}) {
-
+  
   return (
     <>
     {!step?.screen?.length || step?.screen[step.screen.length -1 ] == screens.products ?
@@ -19,6 +20,10 @@ export default function GetLoanScreens({step, screens, typeToShow, setShowType,
       <>
         <GetLoan step={step} handleStep={handleStep} screens={screens} typeToShow={typeToShow} setShowType={setShowType} />
       </>
+      :step?.screen[step.screen.length -1 ] == screens.not_eligible?
+      <>
+        <NotEligible step={step} handleStep={handleStep} screens={screens} />
+      </>
       :step?.screen[step.screen.length -1 ] == screens.terms_conditions ?
       <>
         <TermsAndConditions step={step} handleStep={handleStep} screens={screens} />

src/components/loan_screen/getloan/GetLoan.jsx

@@ -4,7 +4,11 @@ export default function GetLoan({step, handleStep, screens, typeToShow, setShowT
 
     const handleGetLoan = () => {
         // handleStep({...step.details}, screens.pin)
-        handleStep({...step.details}, screens.terms_conditions)
+        if(step?.activeUser?.salary_account){
+          handleStep({...step.details}, screens.terms_conditions)
+        }else{
+          handleStep({...step.details}, screens.not_eligible)
+        }
     }
 
     const handlePayLoan = () => {

src/components/loan_screen/getloan/NotEligible.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export default function NotEligible({step, handleStep, screens}) {
+
+    // const handleGetLoan = () => {
+    //     handleStep({...step.details}, screens.getloan)
+    // }
+
+  return (
+    <div className='mt-3 h-full flex flex-col gap-3'>
+        <p className='text-center text-base sm:text-lg text-red-500 font-medium'>Selected profile not qualified for this product</p>
+
+        {/* <div className='mt-3 w-full h-full flex flex-col gap-2 justify-end'>
+            <button className='w-full p-3 bg-orange-500 text-lg sm:text-2xl text-white font-bold rounded'>Pay Loan</button>
+            <button className='w-full p-3 bg-orange-500 text-lg sm:text-2xl text-white font-bold rounded'>Loan Information</button>
+        </div> */}
+
+    </div>
+  )
+}