issue fix

src/components/common/PaymentConfirmationModal/PaymentConfirmationModal.tsx

@@ -1,46 +1,59 @@
-import '@testing-library/jest-dom';
-import { fireEvent, render, waitFor } from '@testing-library/react';
-import React from 'react';
-import { PaymentConfirmationModal } from '../PaymentConfirmationModal';
+import React, { PropsWithChildren } from 'react';
+import { Stack } from '@mui/system';
+import { BaseModal } from '../BaseModal'; // Assuming you have a BaseModal component
+import IconButton from '../IconButton2'; // Assuming you have an IconButton2 component
+import { useCreateModal } from '../useCreateModal'; // Assuming you have a custom hook useCreateModal
 
-describe('PaymentConfirmationModal', () => {
-  it('renders correctly', () => {
-    const onCloseMock = jest.fn();
-    const onConfirmPaymentMock = jest.fn();
-    const { getByText } = render(
-      <PaymentConfirmationModal onClose={onCloseMock} onConfirmPayment={onConfirmPaymentMock}>
-        Are you sure you want to pay this bounty?
-      </PaymentConfirmationModal>
-    );
+export type PaymentConfirmationModalProps = PropsWithChildren<{
+  onClose: () => void;
+  onConfirmPayment: () => void;
+  onCancel?: () => void;
+}>;
 
-    expect(getByText('Are you sure you want to pay this bounty?')).toBeInTheDocument();
-  });
+export const PaymentConfirmationModal = ({
+  onClose,
+  children,
+  onCancel,
+  onConfirmPayment
+}: PaymentConfirmationModalProps) => {
+  const closeHandler = () => {
+    onClose();
+    onCancel?.();
+  };
 
-  it('calls onClose when Cancel button is clicked', async () => {
-    const onCloseMock = jest.fn();
-    const onConfirmPaymentMock = jest.fn();
-    const { getByText } = render(
-      <PaymentConfirmationModal onClose={onCloseMock} onConfirmPayment={onConfirmPaymentMock}>
-        Are you sure you want to pay this bounty?
-      </PaymentConfirmationModal>
-    );
+  const confirmPaymentHandler = () => {
+    onConfirmPayment();
+    onClose();
+  };
 
-    fireEvent.click(getByText('Cancel'));
-    await waitFor(() => expect(onCloseMock).toHaveBeenCalledTimes(1));
-    expect(onConfirmPaymentMock).not.toHaveBeenCalled();
-  });
+  return (
+    <BaseModal backdrop="white" open onClose={closeHandler}>
+      <Stack minWidth={350} p={4} alignItems="center" spacing={3}>
+        {children}
+        <Stack width="100%" direction="row" justifyContent="space-between">
+          <IconButton width={120} height={44} color="white" text="Cancel" onClick={closeHandler} />
+          <IconButton
+            width={120}
+            height={44}
+            color="success" // Assuming this color indicates confirmation
+            text="Confirm" // Changed "Delete" to "Confirm"
+            onClick={confirmPaymentHandler} // Changed onClick handler
+          />
+        </Stack>
+      </Stack>
+    </BaseModal>
+  );
+};
 
-  it('calls onConfirmPayment and onClose when Confirm button is clicked', async () => {
-    const onCloseMock = jest.fn();
-    const onConfirmPaymentMock = jest.fn();
-    const { getByText } = render(
-      <PaymentConfirmationModal onClose={onCloseMock} onConfirmPayment={onConfirmPaymentMock}>
-        Are you sure you want to pay this bounty?
-      </PaymentConfirmationModal>
-    );
+export const usePaymentConfirmationModal = () => {
+  const openModal = useCreateModal();
 
-    fireEvent.click(getByText('Confirm'));
-    await waitFor(() => expect(onCloseMock).toHaveBeenCalledTimes(1));
-    expect(onConfirmPaymentMock).toHaveBeenCalledTimes(1);
-  });
-});
+  const openPaymentConfirmation = (props: Omit<PaymentConfirmationModalProps, 'onClose'>) => {
+    openModal({
+      Component: PaymentConfirmationModal,
+      props
+    });
+  };
+
+  return { openPaymentConfirmation };
+};