fix checks issue

2025-03-02 23:13:13 +01:00
parent d263a4e3df
commit e1b2eec88d
19 changed files with 585 additions and 205 deletions
@@ -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>
+        </>
+        }
+
+        </>
+    )
+}