fix checks issue

src/components/GetLoanScreens.jsx

@@ -1,167 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { useLocation, useNavigate, Link } from 'react-router-dom'
-import { useQuery } from "@tanstack/react-query";
-
-import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
-
-import myLinks from '../myLinks'
-import queryKeys from '../services/queryKeys';
-import { getProducts } from '../services/siteServices';
-import Pin from './loan_screen/Pin';
-import Offers from './loan_screen/Offers';
-import LoanPin from './loan_screen/LoanPin';
-import SelectedOffer from './loan_screen/SelectedOffer';
-import GetLoan from './loan_screen/GetLoan';
-import TermsAndConditions from './loan_screen/TermsAndConditions';
-import LoanDetails from './loan_screen/LoanDetails';
-
-export default function GetLoanScreens() {
-
-  let screens = {
-    products: 'products-screen',
-    terms_conditions: 'terms_conditions',
-    getLoan: 'get-loan',
-    pin: 'pin-screen',
-    loan_details: 'loan_details',
-    offers: 'offers-screen',
-    selected_offer: 'selected-offer-screen',
-    loan_pin: 'loan-pin-screen',
-    finished: 'finished'
-  }
-  
-  const {state} = useLocation()
-  const navigate = useNavigate()
-
-  const [step, setStep] = useState({
-    details: {},
-    screen: [],
-    activeUser: state.user
-  })
-
-  const handleStep = (detailsToAdd, screen) => {
-    setStep(prev => ({...prev, details: {...prev.details, ...detailsToAdd}, screen: [...prev.screen, screen]}))
-  }
-
-  const {data, isFetching, isError, error} = useQuery({
-      queryKey: queryKeys.products,
-      queryFn: () => getProducts()
-  })
-
-  const products = data?.data?.product_data?.products // PRODUCTS LIST
-
-  const handleBackBtn = () => {
-    if(step?.screen?.length <= 0 || step?.screen[step.screen.length -1 ] == screens.finished){
-      setStep({details: {}, screen: []})
-      return navigate(myLinks.home, {state:{proceed:'true'}})
-    }
-    setStep(prev => ({...prev, screen: prev.screen.slice(0, -1)}))
-  }
-
-  useEffect(()=>{
-    if(!state?.user){
-      return navigate(myLinks.getStarted, {replace:true})
-    }
-  },[])
-
-  return (
-    <div className={`flex flex-col items-center justify-center`}>
-        <div className='relative flex flex-col gap-4 w-[80%] sm:w-[400px] h-[600px] bg-white rounded-xl p-4 sm:p-8 shadow'>
-            <div className="relative pb-3 card-title w-full border-b-2 flex gap-4 items-center">
-              <div className='absolute left-2 top-1/2 -translate-y-1/2 p-1 cursor-pointer' onClick={handleBackBtn}>
-                <IoIosArrowBack className='text-3xl sm:text-5xl font-bold text-orange-500 cursor-pointer' />
-              </div>
-              <div className='w-full text-center'>
-                <h1 className="mb-[1px] text-2xl font-bold">{state?.user.name}</h1>
-                <span className={`text-base font-bold p-1 rounded`}>ID: {state?.user.bvn}</span>
-              </div>
-            </div>
-            {!step?.screen?.length || step?.screen[step.screen.length -1 ] == screens.products ?
-              <>
-                <div className='mt-3 flex flex-col gap-3'>
-                  {isFetching ? 
-                    <>
-                        <div className="w-full py-4">
-                          <p className='text-slate-800 text-center'>Loading...</p>
-                        </div>
-                    </>
-                    : isError ?
-                    <div className="w-full py-4">
-                      <p className='text-red-500 text-center'>{error.message}</p>
-                    </div>
-                    :
-                    <>
-                      {products && products.map(product => {
-                        let isDisabled = product.active == '0' ? true : false
-                        return (
-                          <button 
-                            key={product?.cid} 
-                            disabled={isDisabled} 
-                            onClick={()=>handleStep(product, screens.getLoan)} 
-                            className={`w-full flex gap-2 justify-between items-center p-2 bg-purple-800 text-base sm:text-xl text-white font-bold rounded ${isDisabled && 'opacity-50'}`} 
-                          >
-                            <span>{product?.description}</span>
-                            <IoIosArrowForward />
-                          </button>
-                        )
-                      }
-                      )}
-                    </>
-                  }
-                  {/* <button 
-                      onClick={()=>handleStep({}, screens.getLoan)} 
-                      className={`w-full flex gap-2 justify-between items-center p-2 bg-purple-800 text-base sm:text-xl text-white font-bold rounded`} 
-                    >
-                      <span>{'product?.description'}</span>
-                      <IoIosArrowForward />
-                    </button> */}
-                </div>
-                {/* {products &&
-                <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>
-                } */}
-              </>
-              : step?.screen[step.screen.length -1 ] == screens.getLoan ?
-              <>
-                <GetLoan step={step} handleStep={handleStep} screens={screens} />
-              </>
-              :step?.screen[step.screen.length -1 ] == screens.terms_conditions ?
-              <>
-                <TermsAndConditions step={step} handleStep={handleStep} screens={screens} />
-              </>
-              :step?.screen[step.screen.length -1 ] == screens.pin ?
-              <>
-                <Pin step={step} handleStep={handleStep} screens={screens} />
-              </>
-              : step?.screen[step.screen.length -1 ] == screens.offers ?
-              <>
-                <Offers step={step} handleStep={handleStep} screens={screens} />
-              </>
-              : step?.screen[step.screen.length -1 ] == screens.selected_offer ?
-              <>
-                <SelectedOffer step={step} handleStep={handleStep} screens={screens} />
-              </>
-              :  step?.screen[step.screen.length -1 ] == screens.loan_details?
-              <>
-                <LoanDetails step={step} handleStep={handleStep} screens={screens} />
-              </>
-              :step?.screen[step.screen.length -1 ] == screens.loan_pin ?
-              <>
-                <LoanPin step={step} handleStep={handleStep} screens={screens} />
-              </>
-              :step?.screen[step.screen.length -1 ] == screens.finished ?
-              <>
-                <LoanPin step={step} handleStep={handleStep} screens={screens} />
-              </>
-              : null
-            }
-
-            <div className='absolute left-0 bottom-1 w-full flex justify-center items-center'>
-              <Link to={myLinks.home} className='font-semibold text-center border-b border-transparent hover:border-purple-400'>Back to <span className='text-purple-400 '>Home</span></Link>
-            </div>
-
-
-        </div>
-    </div>
-  )
-}

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' : 'bg-red-50'} w-full rounded p-3 sm:p-5 shadow flex flex-col gap-5 hover:scale-105 hover:cursor-pointer`}>
+                    <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 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

@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from 'react'
+import { useLocation, useNavigate, Link } from 'react-router-dom'
+
+import { IoIosArrowBack } from "react-icons/io";
+
+import myLinks from '../myLinks'
+import PayloanScreens from './loan_screen/PayloanScreens';
+import GetLoanScreens from './loan_screen/GetLoanScreens';
+import LoanInfoScreens from './loan_screen/LoanInfoScreens';
+
+export default function LoanScreens() {
+  
+  const {state} = useLocation()
+  const navigate = useNavigate()
+
+  const [step, setStep] = useState({
+    details: {},
+    screen: [],
+    activeUser: state.user
+  })
+
+  const typeToShow = {
+    getloan: 'getloan',
+    payloan: 'payloan',
+    loaninfo: 'loaninfo',
+  }
+
+  const [showtype, setShowType] = useState(typeToShow.getloan)
+
+  const handleStep = (detailsToAdd, screen) => {
+    setStep(prev => ({...prev, details: {...prev.details, ...detailsToAdd}, screen: [...prev.screen, screen]}))
+  }
+
+  const handleBackBtn = () => {
+    // if(step?.screen?.length <= 0 || step?.screen[step.screen.length -1 ] == screens.finished){
+    //   setStep({details: {}, screen: []})
+    //   return navigate(myLinks.home, {state:{proceed:'true'}})
+    // }
+    setStep(prev => ({...prev, screen: prev.screen.slice(0, -1)}))
+  }
+
+  let screens = showtype == typeToShow.getloan ? {
+    products: 'products-screen',
+    terms_conditions: 'terms_conditions',
+    getLoan: 'get-loan',
+    pin: 'pin-screen',
+    loan_details: 'loan_details',
+    offers: 'offers-screen',
+    selected_offer: 'selected-offer-screen',
+    loan_pin: 'loan-pin-screen',
+    finished: 'finished'
+  } : showtype == typeToShow.payloan ? {
+    loan_list: 'loan_list',
+    repay_pin: 'repay_pin',
+    finished: 'finished'
+  }: showtype == typeToShow.loaninfo ? {
+    loan_info: 'loan_info',
+    finished: 'finished'
+  }: null
+
+  useEffect(()=>{
+    if(!state?.user){
+      return navigate(myLinks.getStarted, {replace:true})
+    }
+  },[])
+
+  useEffect(()=>{ // reset set details whenever the type of screen route to display changes
+    setStep({ details: {}, screen: [], activeUser: state.user})
+  },[showtype])
+
+  return (
+    <div className={`flex flex-col items-center justify-center`}>
+        <div className='relative flex flex-col gap-4 w-[80%] sm:w-[400px] h-[600px] bg-white rounded-xl p-4 sm:p-8 shadow'>
+            <div className="relative pb-3 card-title w-full border-b-2 flex gap-4 items-center">
+              <div className={` ${!step.screen.length && 'hidden'} absolute left-2 top-1/2 -translate-y-1/2 p-1 cursor-pointer`} onClick={handleBackBtn}>
+                <IoIosArrowBack className='text-3xl sm:text-5xl font-bold text-orange-500 cursor-pointer' />
+              </div>
+              <div className='w-full text-center'>
+                <h1 className="mb-[1px] text-2xl font-bold">{state?.user.name}</h1>
+                <span className={`text-base font-bold p-1 rounded`}>ID: {state?.user.bvn}</span>
+              </div>
+            </div>
+
+            {showtype == typeToShow.getloan &&
+              <>
+                <GetLoanScreens step={step} screens={screens} typeToShow={typeToShow} setShowType={setShowType} handleStep={handleStep} />
+              </>
+            }
+
+            {showtype == typeToShow.payloan &&
+              <>
+                <PayloanScreens step={step} screens={screens} handleStep={handleStep} />
+              </>
+            }
+
+            {showtype == typeToShow.loaninfo &&
+              <>
+                <LoanInfoScreens step={step} screens={screens} handleStep={handleStep} />
+              </>
+            }
+
+            <div className='absolute left-0 bottom-1 w-full flex justify-center items-center'>
+              <Link to={myLinks.home} className='font-semibold text-center border-b border-transparent hover:border-purple-400'>Back to <span className='text-purple-400 '>Home</span></Link>
+            </div>
+
+        </div>
+    </div>
+  )
+}

src/components/loan_screen/GetLoan.jsx

@@ -1,21 +0,0 @@
-import React from 'react'
-
-export default function GetLoan({step, handleStep, screens}) {
-
-    const handleGetLoan = () => {
-        // handleStep({...step.details}, screens.pin)
-        handleStep({...step.details}, screens.terms_conditions)
-    }
-
-  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/GetLoanScreens.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import Pin from './getloan/Pin';
+import Offers from './getloan/Offers';
+import LoanPin from './getloan/LoanPin';
+import SelectedOffer from './getloan/SelectedOffer';
+import GetLoan from './getloan/GetLoan';
+import TermsAndConditions from './getloan/TermsAndConditions';
+import LoanDetails from './getloan/LoanDetails';
+import ProductDetails from './getloan/ProductDetails';
+
+export default function GetLoanScreens({step, screens, typeToShow, setShowType, handleStep}) {
+
+  return (
+    <>
+    {!step?.screen?.length || step?.screen[step.screen.length -1 ] == screens.products ?
+      <ProductDetails step={step} handleStep={handleStep} screens={screens} />
+      : step?.screen[step.screen.length -1 ] == screens.getLoan ?
+      <>
+        <GetLoan step={step} handleStep={handleStep} screens={screens} typeToShow={typeToShow} setShowType={setShowType} />
+      </>
+      :step?.screen[step.screen.length -1 ] == screens.terms_conditions ?
+      <>
+        <TermsAndConditions step={step} handleStep={handleStep} screens={screens} />
+      </>
+      :step?.screen[step.screen.length -1 ] == screens.pin ?
+      <>
+        <Pin step={step} handleStep={handleStep} screens={screens} />
+      </>
+      : step?.screen[step.screen.length -1 ] == screens.offers ?
+      <>
+        <Offers step={step} handleStep={handleStep} screens={screens} />
+      </>
+      : step?.screen[step.screen.length -1 ] == screens.selected_offer ?
+      <>
+        <SelectedOffer step={step} handleStep={handleStep} screens={screens} />
+      </>
+      :  step?.screen[step.screen.length -1 ] == screens.loan_details?
+      <>
+        <LoanDetails step={step} handleStep={handleStep} screens={screens} />
+      </>
+      :step?.screen[step.screen.length -1 ] == screens.loan_pin ?
+      <>
+        <LoanPin step={step} handleStep={handleStep} screens={screens} />
+      </>
+      :step?.screen[step.screen.length -1 ] == screens.finished ?
+      <>
+        <LoanPin step={step} handleStep={handleStep} screens={screens} />
+      </>
+      : null
+    }
+  </>
+  )
+}

src/components/loan_screen/LoanInfoScreens.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import LoanInfoList from './loaninfo/LoanInfoList';
+
+
+export default function LoanInfoScreens({step, screens, typeToShow, setShowType, handleStep}) {
+
+  return (
+    <>
+    {!step?.screen?.length || step?.screen[step.screen.length -1 ] == screens.loan_list ?
+      <LoanInfoList step={step} handleStep={handleStep} screens={screens} />
+      : step?.screen[step.screen.length -1 ] == screens.repay_pin ?
+      <>
+        {/* <GetLoan step={step} handleStep={handleStep} screens={screens} typeToShow={typeToShow} setShowType={setShowType} /> */}
+        {null}
+      </>
+      : null
+    }
+  </>
+  )
+}

src/components/loan_screen/PayloanScreens.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import RepayLoanList from './payloan/RepayLoanList';
+import PinRepayment from './payloan/PinRepayment';
+
+
+export default function PayloanScreens({step, screens, typeToShow, setShowType, handleStep}) {
+
+  return (
+    <>
+    {!step?.screen?.length || step?.screen[step.screen.length -1 ] == screens.loan_list ?
+      <RepayLoanList step={step} handleStep={handleStep} screens={screens} />
+      : step?.screen[step.screen.length -1 ] == screens.repay_pin ?
+      <>
+        {/* <GetLoan step={step} handleStep={handleStep} screens={screens} typeToShow={typeToShow} setShowType={setShowType} /> */}
+        <PinRepayment step={step} handleStep={handleStep} screens={screens} />
+      </>
+      : null
+    }
+  </>
+  )
+}

src/components/loan_screen/getloan/GetLoan.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+export default function GetLoan({step, handleStep, screens, typeToShow, setShowType}) {
+
+    const handleGetLoan = () => {
+        // handleStep({...step.details}, screens.pin)
+        handleStep({...step.details}, screens.terms_conditions)
+    }
+
+    const handlePayLoan = () => {
+      // setShowType(typeToShow.payloan)
+    }
+
+  const handleLoanInfo = () => {
+    // setShowType(typeToShow.loaninfo)
+  }
+
+  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 gap-2 justify-end'>
+            <button onClick={handlePayLoan} className='w-full p-3 bg-orange-500 text-lg sm:text-2xl text-white font-bold rounded'>Pay Loan</button>
+            <button onClick={handleLoanInfo} className='w-full p-3 bg-orange-500 text-lg sm:text-2xl text-white font-bold rounded'>Loan Information</button>
+        </div>
+
+    </div>
+  )
+}

src/components/loan_screen/getloan/LoanPin.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
-import Label from '../Label'
-import InputText from '../InputText'
-import { verifyLoan } from '../../services/siteServices'
+import Label from '../../Label'
+import InputText from '../../InputText'
+import { verifyLoan } from '../../../services/siteServices'
 
 export default function LoanPin({step, handleStep, screens}) {
 
@@ -56,7 +56,6 @@ export default function LoanPin({step, handleStep, screens}) {
             <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'>
                     <p className='text-center text-base md:text-xl'>Your loan is being disbursed. You will receive a confirmation SMS shortly.</p>
-                    {/* <p className='text-center text-base md:text-xl'>You will get an sms with result shortly</p> */}
                 </div>
             </div>
         }

src/components/loan_screen/getloan/Offers.jsx

@@ -3,8 +3,8 @@ import { useQuery } from "@tanstack/react-query";
 import { useMutation } from '@tanstack/react-query'
 import { IoIosArrowForward } from "react-icons/io";
 
-import { getOffers, loanSelect } from '../../services/siteServices'
-import queryKeys from '../../services/queryKeys'
+import { getOffers, loanSelect } from '../../../services/siteServices'
+import queryKeys from '../../../services/queryKeys'
 
 export default function Offers({step, handleStep, screens}) {
 
@@ -83,8 +83,6 @@ export default function Offers({step, handleStep, screens}) {
                 </div>
                 </>
                 }
-
-                {/* <button onClick={handleContinue} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>Continue</button> */}
             </div>
         </div>
     )

src/components/loan_screen/getloan/Pin.jsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
 
-import Label from '../Label'
-import InputText from '../InputText'
-import { verifyPin } from '../../services/siteServices'
+import Label from '../../Label'
+import InputText from '../../InputText'
+import { verifyPin } from '../../../services/siteServices'
 
 export default function Pin({step, handleStep, screens}) {
 

src/components/loan_screen/getloan/ProductDetails.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { useQuery } from "@tanstack/react-query";
+import queryKeys from '../../../services/queryKeys';
+import { getProducts } from '../../../services/siteServices';
+import { IoIosArrowForward } from "react-icons/io";
+
+export default function ProductDetails({step, handleStep, screens}) {
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.products,
+        queryFn: () => getProducts()
+    })
+  
+    const products = data?.data?.product_data?.products // PRODUCTS LIST
+
+  return (
+    <>
+    <div className='mt-3 flex flex-col gap-3'>
+        {isFetching ? 
+        <>
+            <div className="w-full py-4">
+                <p className='text-slate-800 text-center'>Loading...</p>
+            </div>
+        </>
+        : isError ?
+        <div className="w-full py-4">
+            <p className='text-red-500 text-center'>{error.message}</p>
+        </div>
+        :
+        <>
+            {products && products.map(product => {
+            let isDisabled = product.active == '0' ? true : false
+            return (
+                <button 
+                key={product?.cid} 
+                disabled={isDisabled} 
+                onClick={()=>handleStep(product, screens.getLoan)} 
+                className={`w-full flex gap-2 justify-between items-center p-2 bg-purple-800 text-base sm:text-xl text-white font-bold rounded ${isDisabled && 'opacity-50'}`} 
+                >
+                <span>{product?.description}</span>
+                <IoIosArrowForward />
+                </button>
+            )
+            }
+            )}
+        </>
+        }
+    </div>
+    </>
+  )
+}

src/components/loan_screen/getloan/SelectedOffer.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
-import Label from '../Label'
-import InputText from '../InputText'
-import { loanApply } from '../../services/siteServices'
+import Label from '../../Label'
+import InputText from '../../InputText'
+import { loanApply } from '../../../services/siteServices'
 
 export default function SelectedOffer({step, handleStep, screens}) {
 

src/components/loan_screen/loaninfo/LoanInfoList.jsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react'
+import { useQuery } from "@tanstack/react-query";
+import { useMutation } from '@tanstack/react-query'
+import { IoIosArrowForward } from "react-icons/io";
+
+import { getOffers, loanSelect } from '../../../services/siteServices'
+import queryKeys from '../../../services/queryKeys'
+
+export default function LoanInfoList({step, handleStep, screens}) {
+
+    const [selectedAmount, setSelectedAmount] = useState('')
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.offers,
+        queryFn: () => getOffers()
+    })
+  
+    // const list = data?.data?.product_data?.offers // OFFERS LIST
+
+    const selectedLoan = useMutation({
+        mutationFn: (details) => {
+            let fields = {bvn:step.activeUser.bvn, loan: details.loan}
+            // if(!fields.bvn){
+            //     throw new Error('*')
+            // }
+            setSelectedAmount(details.amount)
+            return loanSelect(fields)
+        },
+        onError: (error) => {
+            // setError('*')
+        },
+        onSuccess: (res) => {
+            const selectedOffer = res.data.loan
+            handleStep({selectedAmount, selectedOffer, ...res.data}, screens.repay_pin)
+        }
+        })
+
+        const handleClick = (selectedAmount) => { // remove later
+            handleStep({selectedAmount}, screens.repay_pin)
+        }
+
+    return (
+        <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'>
+                {isFetching ? 
+                    <>
+                        <div className="w-full py-4">
+                          <p className='text-slate-800 text-center'>Loading...</p>
+                        </div>
+                    </>
+                    : isError ?
+                    <div className="w-full py-4">
+                      <p className='text-red-500 text-center'>{error.message}</p>
+                    </div>
+                    :
+                    <>
+                    <p className='text-center text-base md:text-xl'>Loan to repay</p>
+                    {offers.map(item => {
+                        let isDisabled = item.active == '0' ? true : false
+                        return (
+                            <button 
+                            key={item?.cid} 
+                            disabled={true}
+                            // disabled={isDisabled || selectedLoan.isPending}
+                            // value={item.loan} 
+                            // onClick={()=>selectedLoan.mutate(item)}
+                            onClick={()=>handleClick(item?.amount)}
+                            className={`w-full flex gap-2 justify-between items-center p-2 bg-purple-800 ${selectedLoan.isPending && 'bg-purple-800/50'} text-base sm:text-xl text-white font-bold rounded ${isDisabled && 'opacity-50'}`} 
+                            >
+                            {item?.description}
+                            {/* <IoIosArrowForward /> */}
+                            </button>
+                        )
+                    })}
+                    </>
+                }
+                <>
+                </>
+
+                {selectedLoan.isPending &&
+                    <div className="w-full text-center p-2">
+                        <p className='text-sm'>loading...</p>
+                    </div>
+                }
+
+                {selectedLoan.error &&
+                <>
+                <div className="w-full text-center p-2">
+                    <p className='text-red-500 text-sm'>{selectedLoan.error.message}</p>
+                </div>
+                </>
+                }
+            </div>
+        </div>
+    )
+}
+
+const offers = [ // remove later
+    {cid: '1', amount: 50000, description: 'Total amount to replay N50,000'},
+    {cid: '2', amount: 25000, description: 'Total amount to replay N25,000'}
+]

src/components/loan_screen/payloan/PinRepayment.jsx

@@ -0,0 +1,82 @@
+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 PinRepayment({step, handleStep, screens}) {
+
+    const [isSuccess, setIsSuccess] = useState(false)
+
+    const [error, setError] = useState('')
+
+    const [pin, setPin] = useState('')
+
+    const handlePinChange = ({target:{value}}) => {
+        setError('')
+        setPin(value)
+    }
+
+    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'})
+            }
+            // if(isNaN(fields.pin)){
+            //     throw ({message:'Amount must be a valid figure'})
+            // }
+            if(fields.pin.length != 4){
+                throw ({message:'Pin must be 4 digits'})
+            }
+            return verifyLoan(fields)
+        },
+        onError: (error) => {
+            setError(error.message)
+            setTimeout(()=>{setError('')},3000)
+        },
+        onSuccess: (res) => {
+            setIsSuccess(true)
+            handleStep({...step}, screens.finished)
+        }
+    })
+
+    const handleClick = (selectedAmount) => { // remove later
+        if(!pin){
+            return setError('Enter Pin')
+        }
+        setIsSuccess(true)
+        // handleStep({selectedAmount}, screens.finished)
+    }
+
+    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'>
+                    <p className='text-center text-base md:text-xl'>{`Your loan amount due is ₦${step.details.selectedAmount}`}</p>
+                    <Label name='Enter your 4 Digit pin' htmlfor='pin' />
+                    <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={()=>handleClick()} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>{'Continue'}</button>
+                </div>
+            </div>
+        :
+            <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'>
+                    <p className='text-center text-base md:text-xl'>Your loan repayment is being processed. You will receive a confirmation SMS shortly.</p>
+                </div>
+            </div>
+        }
+
+        {error &&
+        <>
+            <div className="w-full text-center p-2">
+            <p className='text-red-500 text-sm'>{error}</p>
+        </div>
+        </>
+        }
+
+        </>
+    )
+}

src/components/loan_screen/payloan/RepayLoanList.jsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react'
+import { useQuery } from "@tanstack/react-query";
+import { useMutation } from '@tanstack/react-query'
+import { IoIosArrowForward } from "react-icons/io";
+
+import { getOffers, loanSelect } from '../../../services/siteServices'
+import queryKeys from '../../../services/queryKeys'
+
+export default function RepayLoanList({step, handleStep, screens}) {
+
+    const [selectedAmount, setSelectedAmount] = useState('')
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.offers,
+        queryFn: () => getOffers()
+    })
+  
+    // const list = data?.data?.product_data?.offers // OFFERS LIST
+
+    const selectedLoan = useMutation({
+        mutationFn: (details) => {
+            let fields = {bvn:step.activeUser.bvn, loan: details.loan}
+            // if(!fields.bvn){
+            //     throw new Error('*')
+            // }
+            setSelectedAmount(details.amount)
+            return loanSelect(fields)
+        },
+        onError: (error) => {
+            // setError('*')
+        },
+        onSuccess: (res) => {
+            const selectedOffer = res.data.loan
+            handleStep({selectedAmount, selectedOffer, ...res.data}, screens.repay_pin)
+        }
+        })
+
+        const handleClick = (selectedAmount) => { // remove later
+            handleStep({selectedAmount}, screens.repay_pin)
+        }
+
+    return (
+        <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'>
+                {isFetching ? 
+                    <>
+                        <div className="w-full py-4">
+                          <p className='text-slate-800 text-center'>Loading...</p>
+                        </div>
+                    </>
+                    : isError ?
+                    <div className="w-full py-4">
+                      <p className='text-red-500 text-center'>{error.message}</p>
+                    </div>
+                    :
+                    <>
+                    <p className='text-center text-base md:text-xl'>Select Loan to repay</p>
+                    {offers.map(item => {
+                        let isDisabled = item.active == '0' ? true : false
+                        return (
+                            <button 
+                            key={item?.cid} 
+                            disabled={isDisabled || selectedLoan.isPending}
+                            // value={item.loan} 
+                            // onClick={()=>selectedLoan.mutate(item)}
+                            onClick={()=>handleClick(item?.amount)}
+                            className={`w-full flex gap-2 justify-between items-center p-2 bg-purple-800 ${selectedLoan.isPending && 'bg-purple-800/50'} text-base sm:text-xl text-white font-bold rounded ${isDisabled && 'opacity-50'}`} 
+                            >
+                            {item?.description}
+                            <IoIosArrowForward />
+                            </button>
+                        )
+                    })}
+                    </>
+                }
+                <>
+                </>
+
+                {selectedLoan.isPending &&
+                    <div className="w-full text-center p-2">
+                        <p className='text-sm'>loading...</p>
+                    </div>
+                }
+
+                {selectedLoan.error &&
+                <>
+                <div className="w-full text-center p-2">
+                    <p className='text-red-500 text-sm'>{selectedLoan.error.message}</p>
+                </div>
+                </>
+                }
+            </div>
+        </div>
+    )
+}
+
+const offers = [ // remove later
+    {cid: '1', amount: 50000, description: 'Total amount to replay N50,000'},
+    {cid: '2', amount: 25000, description: 'Total amount to replay N25,000'}
+]

src/pages/GetLoanPage.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import GetLoanScreens from '../components/GetLoanScreens'
+import LoanScreens from '../components/LoanScreens'
 
 export default function GetLoanPage() {
   return (
-    <GetLoanScreens />
+    <LoanScreens />
   )
 }