victorAnumudu
93 lines
3.8 KiB
React
93 lines
3.8 KiB
React
import React, { useState } from 'react'
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useMutation } from '@tanstack/react-query'
|
|
import { IoIosArrowForward } from "react-icons/io";
|
|
|
|
import { getLoanInfo, 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: () => getLoanInfo()
|
|
})
|
|
|
|
const loanInfoList = data?.data // LOAN INFO LIST
|
|
|
|
// const selectedLoan = useMutation({
|
|
// mutationFn: (details) => {
|
|
// let fields = {bvn:step.activeUser.bvn, loan: details.loan}
|
|
// setSelectedAmount(details.amount)
|
|
// return loanSelect(fields)
|
|
// },
|
|
// onError: (error) => {
|
|
// },
|
|
// onSuccess: (res) => {
|
|
// const selectedOffer = res.data.loan
|
|
// handleStep({selectedAmount, selectedOffer, ...res.data}, screens.repay_pin)
|
|
// }
|
|
// })
|
|
|
|
const handleClick = (selected_loan_id, selectedAmount) => {
|
|
handleStep({selected_loan_id, 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>
|
|
{loanInfoList.map(item => {
|
|
let isDisabled = item.active == '0' ? true : false
|
|
let amount = item?.description.split(' ')[item?.description.split(' ').length -1] //remove later
|
|
return (
|
|
<button
|
|
key={item?.cid}
|
|
// disabled={isDisabled || selectedLoan.isPending}
|
|
// value={item.loan}
|
|
// onClick={()=>selectedLoan.mutate(item)}
|
|
// 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'}`}
|
|
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`}
|
|
onClick={()=>handleClick(item.loan_id, amount)}
|
|
>
|
|
{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>
|
|
)
|
|
} |