added verify pin API

src/components/GetLoan.jsx

@@ -27,7 +27,8 @@ export default function GetLoan() {
 
   const [step, setStep] = useState({
     details: {},
-    screen: []
+    screen: [],
+    activeUser: state.user
   })
 
   const handleStep = (details, screen) => {

src/components/HomeCom.jsx

@@ -49,9 +49,9 @@ export default function HomeCom() {
                 let hasSalaryAcct = user.salary_account === 0 ? false : true                  
                 return (
                     <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-[70%] mx-auto">
-                        <h1 className="mb-[1px] text-2xl font-bold">{user.name}</h1>
-                        {/* <span className={` ${color} text-sm font-bold p-1 rounded`}>{user.place}</span> */}
+                      <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`}>BVN: {user.bvn}</span>
                       </div>
                       <div className="card-body flex flex-col gap-2">
                         <div className="contact text-slate-700 flex gap-2 items-center">

src/components/loan_screen/Pin.jsx

@@ -3,6 +3,7 @@ import { useMutation } from '@tanstack/react-query'
 
 import Label from '../Label'
 import InputText from '../InputText'
+import { verifyPin } from '../../services/siteServices'
 
 export default function Pin({step, handleStep, screens}) {
 
@@ -17,11 +18,11 @@ export default function Pin({step, handleStep, screens}) {
 
     const proceed = useMutation({
         mutationFn: () => {
-            let fields = {pin, ...step.details}
+            let fields = {pin, bvn:step.activeUser.bvn}
             if(!fields.pin){
                 throw new Error('Please enter pin *')
             }
-            // return loginUser(fields)
+            return verifyPin(fields)
         },
         onError: (error) => {
             console.log(error)
@@ -46,8 +47,8 @@ export default function Pin({step, handleStep, screens}) {
             <div className='text-input font-semibold w-[70%] mx-auto flex flex-col gap-4 justify-center items-center'>
                 <Label name='Enter your pin' htmlfor='pin' error={error} />
                 <InputText id='pin' name='pin' type='text' value={pin} handleChange={handlePinChange} />
-                {/* <button onClick={()=>{proceed.mutate()}} disabled={proceed.isPending} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>{proceed.isPending ? 'loading...' : 'Continue'}</button> */}
-                <button onClick={handleContinue} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>Continue</button>
+                <button onClick={()=>{proceed.mutate()}} disabled={proceed.isPending} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>{proceed.isPending ? 'loading...' : 'Continue'}</button>
+                {/* <button onClick={handleContinue} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>Continue</button> */}
             </div>
 
             {proceed.error &&

src/services/siteServices.js

@@ -50,6 +50,14 @@ export const loginUser = (reqData) => {
     return postAuxEnd('/salary/login', postData, false)
 }
 
+// FUNCTION TO LOGIN USER IN
+export const verifyPin = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/salary/verifypin', postData, false)
+}
+
 // FUNCTION TO GET DEMO USERS
 export const demoUsersList = (reqData) => {
     const postData = { ...reqData }