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

fix checks issue

Browse Source
This commit is contained in:
victorAnumudu
2025-03-02 23:13:13 +01:00
parent d263a4e3df
commit e1b2eec88d
19 changed files with 585 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/loan_screen/GetLoan.jsx
-21
View File
@@ -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
+54
View File
@@ -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
+21
View File
@@ -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
+22
View File
@@ -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
+31
View File
@@ -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/LoanDetails.jsx → src/components/loan_screen/getloan/LoanDetails.jsx
View File
src/components/loan_screen/LoanPin.jsx → src/components/loan_screen/getloan/LoanPin.jsx
+3 -4
View File
@@ -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/Offers.jsx → src/components/loan_screen/getloan/Offers.jsx
+2 -4
View File
@@ -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/Pin.jsx → src/components/loan_screen/getloan/Pin.jsx
+3 -3
View File
@@ -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
+51
View File
@@ -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/SelectedOffer.jsx → src/components/loan_screen/getloan/SelectedOffer.jsx
+3 -3
View File
@@ -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/TermsAndConditions.jsx → src/components/loan_screen/getloan/TermsAndConditions.jsx
View File
src/components/loan_screen/loaninfo/LoanInfoList.jsx
+101
View File
@@ -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
+82
View File
@@ -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
+100
View File
@@ -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'}
]