confirmation-modal

src/components/transactionDetails/LoanDetails.jsx

@@ -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

@@ -10,8 +10,17 @@ 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)
 
     const {data, isFetching, isError, error} = useQuery({
@@ -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>
+        }
+        </>
     )
 }