added verifyloan API

src/components/loan_screen/GetLoan.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export default function GetLoan({step, handleStep, screens}) {
+
+    const handleGetLoan = () => {
+        handleStep({...step.details}, screens.pin)
+    }
+
+  return (
+    <div className='mt-3 h-full flex flex-col gap-3'>
+         <div className='mt-3 flex justify-center'>
+            <button onClick={handleGetLoan} className='p-3 bg-purple-800 text-lg sm:text-2xl text-white font-bold rounded'>Get Loan</button>
+         </div>
+
+        <div className='mt-3 w-full h-full flex flex-col justify-end'>
+            <button onClick={()=>console.log('working')} className='w-full p-3 bg-orange-500 text-lg sm:text-2xl text-white font-bold rounded'>Pay Loan</button>
+        </div>
+    </div>
+  )
+}

src/components/loan_screen/LoanPin.jsx

@@ -1,38 +1,47 @@
 import React, { useState } from 'react'
+import { useMutation } from '@tanstack/react-query'
 import Label from '../Label'
 import InputText from '../InputText'
+import { verifyLoan } from '../../services/siteServices'
 
 export default function LoanPin({step, handleStep, screens}) {
 
-    const [error, SetError] = useState('')
+    const [isSuccess, setIsSuccess] = useState(false)
+
+    const [error, setError] = useState('')
 
     const [pin, setPin] = useState('')
 
     const handlePinChange = ({target:{value}}) => {
-        SetError('')
+        setError('')
         setPin(value)
     }
 
-    const [isSuccess, setIsSuccess] = useState(false)
-
-    const handleContinue = () => {
-        if(!pin){
-            SetError('enter pin')
-            return setTimeout(()=>{
-                SetError('')
-            }, 5000)
+    const proceed = useMutation({
+        mutationFn: () => {
+            let fields = {pin, bvn:step.activeUser.bvn, loan_application_id:step.details.loan_application_id}
+            if(!fields.pin){
+                throw ({message:'Please enter pin'})
+            }
+            return verifyLoan(fields)
+        },
+        onError: (error) => {
+            setError(error.message)
+            setTimeout(()=>{setError('')},3000)
+        },
+        onSuccess: (res) => {
+            setIsSuccess(true)
         }
-        setIsSuccess(prev => !prev)
-    }
+    })
 
     return (
         <>
         {!isSuccess ?
             <div className='mt-3 flex flex-col gap-4'>
                 <div className='text-input font-semibold w-full flex flex-col gap-4 justify-center items-center'>
-                    <Label name='Enter your pin' htmlfor='pin' error={error} />
+                    <Label name='Enter your pin' htmlfor='pin' />
                     <InputText id='pin' name='pin' type='text' value={pin} handleChange={handlePinChange} />
-                    <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>
                 </div>
             </div>
         :
@@ -44,6 +53,14 @@ export default function LoanPin({step, handleStep, screens}) {
             </div>
         }
 
+        {error &&
+        <>
+            <div className="w-full text-center p-2">
+            <p className='text-red-500 text-sm'>{error}</p>
+        </div>
+        </>
+        }
+
         </>
     )
 }

src/components/loan_screen/Pin.jsx

@@ -32,16 +32,6 @@ export default function Pin({step, handleStep, screens}) {
         }
     })
 
-      const handleContinue = () => {
-        if(!pin){
-            SetError('enter pin')
-            return setTimeout(()=>{
-                SetError('')
-            }, 5000)
-        }
-        handleStep(step.details, screens.offers)
-    }
-
     return (
         <div className='mt-3 flex flex-col gap-4'>
             {(!proceed.error || proceed?.error?.message == '*') &&
@@ -49,7 +39,6 @@ export default function Pin({step, handleStep, screens}) {
                     <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> */}
                 </div>
             }
 

src/components/loan_screen/SelectedOffer.jsx

@@ -34,7 +34,7 @@ export default function SelectedOffer({step, handleStep, screens}) {
         },
             onSuccess: (res) => {
             // const selectedOffer = res.data.loan[0].loan
-            handleStep(step.details, screens.loan_pin)
+            handleStep({loan_application_id:res.data.loan_application_id[0], ...step.details}, screens.loan_pin)
         }
     })