added verifyloan API
This commit is contained in:
victorAnumudu
@@ -0,0 +1,150 @@
|
||||
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';
|
||||
|
||||
export default function GetLoanScreens() {
|
||||
|
||||
let screens = {
|
||||
products: 'products-screen',
|
||||
getLoan: 'get-loan',
|
||||
pin: 'pin-screen',
|
||||
offers: 'offers-screen',
|
||||
selected_offer: 'selected-offer-screen',
|
||||
loan_pin: 'loan-pin-screen'
|
||||
}
|
||||
|
||||
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.loan_pin){
|
||||
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`}>BVN: {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.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_pin ?
|
||||
<>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user