From eab874546866e940417adffc324b6a0e2ac78939 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Tue, 4 Mar 2025 19:12:19 +0100
Subject: [PATCH] loan repay API added

---
 src/components/HomeCom.jsx                    | 30 +++++++--------
 .../loan_screen/payloan/PinRepayment.jsx      | 23 ++++-------
 .../loan_screen/payloan/RepayLoanList.jsx     | 38 +++++++++----------
 src/helpers/formatNumber.js                   |  6 +++
 src/services/siteServices.js                  | 10 ++++-
 5 files changed, 54 insertions(+), 53 deletions(-)
 create mode 100644 src/helpers/formatNumber.js

diff --git a/src/components/HomeCom.jsx b/src/components/HomeCom.jsx
index 63ce8f6..34d1ce1 100644
--- a/src/components/HomeCom.jsx
+++ b/src/components/HomeCom.jsx
@@ -2,15 +2,15 @@
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from 'react-router-dom'
 
-import { CiPhone } from "react-icons/ci"
-import { CiBank } from "react-icons/ci";
-import { MdOutlineEmail } from "react-icons/md"
-import { FaMapPin } from "react-icons/fa";
+import { BsCash } from "react-icons/bs";
+import { MdUpdate } from "react-icons/md"
+import { FaUser, FaMapPin } from "react-icons/fa";
 
 import { demoUsersList } from "../services/siteServices"
 import queryKeys from "../services/queryKeys"
 import myLinks from "../myLinks";
 import TableWrapper from "./TableWrapper";
+import formatNumber from "../helpers/formatNumber";
 
 export default function HomeCom() {
 
@@ -56,27 +56,27 @@ export default function HomeCom() {
                       <div className="card-body flex flex-col gap-2">
                         <div className="contact text-slate-700 flex gap-2 items-center">
                           <span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
-                            <CiBank />
+                            <FaUser />
                           </span>
-                          <span>{user.bvn}</span>
+                          <span>{user.accountid}</span>
                         </div>
                         <div className="contact text-slate-700 flex gap-3 items-center">
                           <span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
-                            <CiPhone />
+                            <BsCash />
                           </span>
-                          <span>{user.mobile}</span>
-                        </div>
-                        <div className="contact text-slate-700 flex gap-3 items-center">
-                          <span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
-                            <MdOutlineEmail />
-                          </span>
-                          <span className="break-words">{user.email}</span>
+                          <span>{formatNumber(user.balance)}</span>
                         </div>
                         <div className="contact text-slate-700 flex gap-3 items-center">
                           <span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
                             <FaMapPin />
                           </span>
-                          <span>{user.pin}</span>
+                          <span className="break-words">{user.pin}</span>
+                        </div>
+                        <div className="contact text-slate-700 flex gap-3 items-center">
+                          <span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
+                            <MdUpdate />
+                          </span>
+                          <span>{user.updated}</span>
                         </div>
                       </div>
                     </div>
diff --git a/src/components/loan_screen/payloan/PinRepayment.jsx b/src/components/loan_screen/payloan/PinRepayment.jsx
index e37bf23..2609a43 100644
--- a/src/components/loan_screen/payloan/PinRepayment.jsx
+++ b/src/components/loan_screen/payloan/PinRepayment.jsx
@@ -2,10 +2,12 @@ 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 { repayLoan } from '../../../services/siteServices'
 
 export default function PinRepayment({step, handleStep, screens}) {
 
+    console.log('step', step.activeUser, step.details)
+
     const [isSuccess, setIsSuccess] = useState(false)
 
     const [error, setError] = useState('')
@@ -19,17 +21,15 @@ export default function PinRepayment({step, handleStep, screens}) {
 
     const proceed = useMutation({
         mutationFn: () => {
-            let fields = {pin, bvn:step.activeUser.bvn, loan_application_id:step.details.loan_application_id}
+            let fields = {pin, loan_id:step.details.selected_loan_id, customerID:step.activeUser.customerid}
             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)
+            return repayLoan(fields)
         },
         onError: (error) => {
             setError(error.message)
@@ -41,14 +41,6 @@ export default function PinRepayment({step, handleStep, screens}) {
         }
     })
 
-    const handleClick = (selectedAmount) => { // remove later
-        if(!pin){
-            return setError('Enter Pin')
-        }
-        setIsSuccess(true)
-        // handleStep({selectedAmount}, screens.finished)
-    }
-
     return (
         <>
         {!isSuccess ?
@@ -57,8 +49,7 @@ export default function PinRepayment({step, handleStep, screens}) {
                     <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>
+                    <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>
                 </div>
             </div>
         :
diff --git a/src/components/loan_screen/payloan/RepayLoanList.jsx b/src/components/loan_screen/payloan/RepayLoanList.jsx
index 48a38b5..e1aebf3 100644
--- a/src/components/loan_screen/payloan/RepayLoanList.jsx
+++ b/src/components/loan_screen/payloan/RepayLoanList.jsx
@@ -17,27 +17,23 @@ export default function RepayLoanList({step, handleStep, screens}) {
   
     const loanInfoList = data?.data // LOAN INFO 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 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 = (selectedAmount) => { // remove later
-            handleStep({selectedAmount}, 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'>
@@ -64,7 +60,7 @@ export default function RepayLoanList({step, handleStep, screens}) {
                             disabled={isDisabled || selectedLoan.isPending}
                             // value={item.loan} 
                             // onClick={()=>selectedLoan.mutate(item)}
-                            onClick={()=>handleClick(amount)}
+                            onClick={()=>handleClick(item.loan_id, 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}
diff --git a/src/helpers/formatNumber.js b/src/helpers/formatNumber.js
new file mode 100644
index 0000000..c1b6c57
--- /dev/null
+++ b/src/helpers/formatNumber.js
@@ -0,0 +1,6 @@
+const formatNumber = (number = 0) => {
+    // return new Intl.NumberFormat().format(number);
+    return number.toFixed(2);
+  };
+  
+  export default formatNumber
\ No newline at end of file
diff --git a/src/services/siteServices.js b/src/services/siteServices.js
index 8db8b96..98f8b1b 100644
--- a/src/services/siteServices.js
+++ b/src/services/siteServices.js
@@ -58,7 +58,7 @@ export const verifyPin = (reqData) => {
     return postAuxEnd('/salary/verifypin', postData, false)
 }
 
-// FUNCTION TO LOGIN USER IN
+// FUNCTION TO VERIFY LOAN
 export const verifyLoan = (reqData) => {
     let postData = {
         ...reqData
@@ -66,6 +66,14 @@ export const verifyLoan = (reqData) => {
     return postAuxEnd('/salary/verifloan', postData, false)
 }
 
+// FUNCTION TO REPAY LOAN
+export const repayLoan = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/loan/repay', postData, false)
+}
+
 // FUNCTION TO RUN WHEN USER SELECTS A LOAN
 export const loanSelect = (reqData) => {
     let postData = {