victorAnumudu
83 lines
3.0 KiB
React
83 lines
3.0 KiB
React
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>
|
|
</>
|
|
}
|
|
|
|
</>
|
|
)
|
|
}
|