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

confirmation-modal

Browse Source
This commit was merged in pull request #38.
This commit is contained in:
victorAnumudu
2025-11-10 13:16:14 +01:00
parent 090892b51e
commit 4b2e73949e
2 changed files with 76 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/transactionDetails/LoanDetails.jsx
+49 -3
View File
@@ -1,4 +1,4 @@
import React from 'react'
import React, { useState } from 'react'
import {useQuery} from "@tanstack/react-query";
import Icons from '../Icons'
@@ -10,9 +10,23 @@ import getDateFromDateString from '../../helpers/GetDateFromDateString';
import formatNumber from '../../helpers/formatNumber'
import getTimeFromDateString from "../../helpers/GetTimeFromDateString";
import {initiateDisburseRetrials, initiateDisburseVerify} from "../../services/siteEventService"
import ModalWrapper from '../modals/ModalWrapper';
import MainBtn from '../MainBtn';
export default function LoanDetails({transactionID}) {
const [retryDisbursementModal, setRetryDisbursementModal] = useState({})
const [retryVerifyModal, setRetryVerifyModal] = useState({})
const handleSetRetryDisbursementModal = (transactioID) => {
setRetryDisbursementModal({status:true, transactioID})
}
const closeRetryDisbursementModal = () => {setRetryDisbursementModal({})}
const handleSetRetryVerifyModal = (transactioID) => {
setRetryVerifyModal({status:true, transactioID})
}
const closeRetryVerifyModal = () => {setRetryVerifyModal({})}
const {data: allLoans, isFetching, isError, error} = useQuery({
queryKey: [...queryKeys.loans, transactionID],
queryFn: () => getLoans({transaction_id: transactionID})
@@ -26,6 +40,7 @@ export default function LoanDetails({transactionID}) {
const fields = {
"transactionId": transactioID
}
closeRetryDisbursementModal() // CLOSES THE DISBURSEMENT MODAL
return initiateDisburseRetrials(fields)
// console.log('Button clicked!');
};
@@ -35,10 +50,12 @@ export default function LoanDetails({transactionID}) {
const fields = {
"transactionId": transactioID
}
closeRetryVerifyModal() // CLOSES THE VERIFY MODAL
return initiateDisburseVerify(fields)
// console.log('Button clicked!');
};
return (
<>
{isFetching ?
@@ -147,7 +164,8 @@ export default function LoanDetails({transactionID}) {
<div style={{width: '50%', textAlign: 'right'}}>
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 roundede"
onClick={() => handleClick(item?.transaction_id)}>
// onClick={() => handleClick(item?.transaction_id)}>
onClick={() => handleSetRetryDisbursementModal(item?.transaction_id)}>
Retry Disbursement
</button>
</div>
@@ -172,7 +190,7 @@ export default function LoanDetails({transactionID}) {
<div style={{width: '30%', textAlign: 'right'}}>
<button
className="bg-blue-500 hover:bg-red-700 text-white font-bold py-2 px-4 roundede"
onClick={() => handleRetryClick(item?.transaction_id)}>
onClick={() => handleSetRetryVerifyModal(item?.transaction_id)}>
Retry Verification
</button>
</div>
@@ -200,6 +218,34 @@ export default function LoanDetails({transactionID}) {
:
null
}
{retryDisbursementModal.status &&
<ModalWrapper maxWidth='max-w-lg'>
<div className="p-4 md:p-5 text-center bg-white rounded-md">
<svg className="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
</svg>
<h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{'Confirm Retry Disbursement?'}</h3>
<div className="flex justify-center items-center gap-6 sm:gap-20">
<MainBtn onClick={closeRetryDisbursementModal} text='Cancel' className="border text-black dark:text-white" />
<MainBtn onClick={()=>handleClick(retryDisbursementModal.transactioID)} text='Yes' className="text-white bg-primary hover:bg-primary/90 focus:ring-0 focus:outline-none ring-0 font-medium rounded-lg text-sm px-5 py-2.5 text-center" />
</div>
</div>
</ModalWrapper>
}
{retryVerifyModal.status &&
<ModalWrapper maxWidth='max-w-lg'>
<div className="p-4 md:p-5 text-center bg-white rounded-md">
<svg className="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
</svg>
<h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{'Continue Verify Disburesement?'}</h3>
<div className="flex justify-center items-center gap-6 sm:gap-20">
<MainBtn onClick={closeRetryVerifyModal} text='Cancel' className="border text-black dark:text-white" />
<MainBtn onClick={()=>handleRetryClick(retryVerifyModal.transactioID)} text='Yes' className="text-white bg-primary hover:bg-primary/90 focus:ring-0 focus:outline-none ring-0 font-medium rounded-lg text-sm px-5 py-2.5 text-center" />
</div>
</div>
</ModalWrapper>
}
</>
)
}
src/components/transactionDetails/RepaymentScheduleDetails.jsx
+27 -1
View File
@@ -10,7 +10,16 @@ import getDateFromDateString from '../../helpers/GetDateFromDateString';
import formatNumber from '../../helpers/formatNumber';
import localSiteIcons from "../../helpers/localSiteIcons";
import {initiateLoanPayment } from "../../services/siteEventService"
import ModalWrapper from '../modals/ModalWrapper';
import MainBtn from '../MainBtn';
export default function RepaymentScheduleDetails({transactionID}) {
const [retryPaymentModal, setRetryPaymentModal] = useState({})
const handleSetRetryPaymentModal = (transactioID) => {
setRetryPaymentModal({status:true, transactioID})
}
const closeRetryPaymentModal = () => {setRetryPaymentModal({})}
const [page, setPage] = useState(1)
@@ -28,6 +37,7 @@ export default function RepaymentScheduleDetails({transactionID}) {
const fields = {
"transactionId": transactioID
}
closeRetryPaymentModal() // CLOSES PAYMENT INITIATE MODAL
return initiateLoanPayment(fields)
// console.log('Button clicked!');
};
@@ -37,6 +47,7 @@ export default function RepaymentScheduleDetails({transactionID}) {
}, [])
return (
<>
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
<p className='pb-4 font-bold text-base'>Repayment Schedule</p>
{isFetching ?
@@ -117,7 +128,7 @@ export default function RepaymentScheduleDetails({transactionID}) {
<div className="text-right">
<button
className="bg-blue-500 hover:bg-red-700 text-white font-bold py-2 px-4 roundede"
onClick={() => handleClick(item?.transaction_id)}>
onClick={() => handleSetRetryPaymentModal(item?.transaction_id)}>
Process Payment
</button>
@@ -138,5 +149,20 @@ export default function RepaymentScheduleDetails({transactionID}) {
</table>
}
</div>
{retryPaymentModal.status &&
<ModalWrapper maxWidth='max-w-lg'>
<div className="p-4 md:p-5 text-center bg-white rounded-md">
<svg className="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
</svg>
<h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{'Continue Initiate Payment?'}</h3>
<div className="flex justify-center items-center gap-6 sm:gap-20">
<MainBtn onClick={closeRetryPaymentModal} text='Cancel' className="border text-black dark:text-white" />
<MainBtn onClick={()=>handleClick(retryDisbursementModal.transactioID)} text='Yes' className="text-white bg-primary hover:bg-primary/90 focus:ring-0 focus:outline-none ring-0 font-medium rounded-lg text-sm px-5 py-2.5 text-center" />
</div>
</div>
</ModalWrapper>
}
</>
)
}