DigiFi/digifi-SalaryLoan
1
0
Fork 0
Code Issues Pull Requests Releases Activity

loan details screen added

Browse Source
This commit is contained in:
victorAnumudu
2025-02-25 14:16:30 +01:00
parent ab1192a508
commit f360056f03
4 changed files with 47 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/GetLoanScreens.jsx
+7 -1
View File
@@ -13,6 +13,7 @@ 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() {
@@ -21,6 +22,7 @@ export default function GetLoanScreens() {
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'
@@ -138,7 +140,11 @@ export default function GetLoanScreens() {
<>
<SelectedOffer step={step} handleStep={handleStep} screens={screens} />
</>
: step?.screen[step.screen.length -1 ] == screens.loan_pin ?
: 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} />
</>
src/components/loan_screen/LoanDetails.jsx
+23
View File
@@ -0,0 +1,23 @@
import React from 'react'
export default function LoanDetails({step, handleStep, screens}) {
const handleGetLoan = () => {
handleStep({...step.details}, screens.loan_pin)
}
return (
<div className='mt-3 h-full flex flex-col gap-3'>
<p className='font-semibold text-base md:text-xl'>Loan Details</p>
<div className='text-input w-full flex flex-col gap-2 justify-center items-center'>
<p className='w-full text-base md:text-xl'>Loan Amount: ₦{step.details.selectedAmount}</p>
<p className='w-full text-base md:text-xl'>Interest 3%: ₦{step.details.selectedAmount*0.03}</p>
<p className='w-full text-base md:text-xl'>Mgt Fee 1%: ₦{step.details.selectedAmount*0.01}</p>
<p className='w-full text-base md:text-xl'>Insurance 1%: ₦{step.details.selectedAmount*0.01}</p>
</div>
<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'>Accept</button>
</div>
</div>
)
}
src/components/loan_screen/Offers.jsx
+8 -5
View File
@@ -1,4 +1,4 @@
import React from 'react'
import React, { useState } from 'react'
import { useQuery } from "@tanstack/react-query";
import { useMutation } from '@tanstack/react-query'
import { IoIosArrowForward } from "react-icons/io";
@@ -8,6 +8,8 @@ import queryKeys from '../../services/queryKeys'
export default function Offers({step, handleStep, screens}) {
const [selectedAmount, setSelectedAmount] = useState('')
const {data, isFetching, isError, error} = useQuery({
queryKey: queryKeys.offers,
queryFn: () => getOffers()
@@ -16,11 +18,12 @@ export default function Offers({step, handleStep, screens}) {
const offers = data?.data?.product_data?.offers // OFFERS LIST
const selectedLoan = useMutation({
mutationFn: (loan) => {
let fields = {bvn:step.activeUser.bvn, loan}
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) => {
@@ -28,7 +31,7 @@ export default function Offers({step, handleStep, screens}) {
},
onSuccess: (res) => {
const selectedOffer = res.data.loan
handleStep({selectedOffer, ...res.data}, screens.selected_offer)
handleStep({selectedAmount, selectedOffer, ...res.data}, screens.selected_offer)
}
})
@@ -54,7 +57,7 @@ export default function Offers({step, handleStep, screens}) {
key={item?.cid}
disabled={isDisabled || selectedLoan.isPending}
// value={item.loan}
onClick={()=>selectedLoan.mutate(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'}`}
>
{item?.description}
src/components/loan_screen/SelectedOffer.jsx
+9 -5
View File
@@ -23,6 +23,10 @@ export default function SelectedOffer({step, handleStep, screens}) {
// throw new Error('*')
throw ({message:'Please enter amount'})
}
if(fields.amount > Number(step.details.selectedAmount)){
// throw new Error('*')
throw ({message:`Please enter amount not more than ${step.details.selectedAmount}`})
}
if(isNaN(amount)){
throw ({message:'Amount must be a valid figure'})
}
@@ -34,20 +38,20 @@ export default function SelectedOffer({step, handleStep, screens}) {
},
onSuccess: (res) => {
// const selectedOffer = res.data.loan[0].loan
handleStep({loan_application_id:res.data.loan_application_id[0], ...step.details}, screens.loan_pin)
handleStep({loan_application_id:res.data.loan_application_id[0], ...step.details}, screens.loan_details)
}
})
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'>
<p className='text-center text-base'>Tenor: 30 Days</p>
<Label name='Enter Loan Amount' htmlfor='amount' />
<p className='text-center text-base'>Your eligible loan amount is ₦{step.details.selectedAmount}</p>
<Label name='Please enter your desired loan amount' htmlfor='amount' />
<InputText id='amount' name='amount' type='text' value={amount} handleChange={handleAmountChange} />
<div className='flex flex-col gap-4'>
{/* <div className='flex flex-col gap-4'>
<p className='text-center text-base'>Upfront Interest 200 Naira</p>
<p className='text-center text-base'>Due Date: Next Salary or 30 Days</p>
</div>
</div> */}
<button onClick={()=>{apply.mutate()}} disabled={apply.isPending} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>{apply.isPending ? 'loading...' : 'Continue'}</button>
</div>