@openmrs/esm-billing-app 1.1.2-pre.9 → 1.2.0

package/src/invoice/printable-invoice/printable-invoice-header.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { screen, render } from '@testing-library/react';
 import { useConfig } from '@openmrs/esm-framework';
 import { type BillingConfig } from '../../config-schema';
@@ -6,11 +7,11 @@ import { useDefaultFacility } from '../../billing.resource';
 import { type MappedBill } from '../../types';
 import PrintableInvoiceHeader from './printable-invoice-header.component';
 
-const mockUseDefaultFacility = jest.mocked(useDefaultFacility);
-const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
+const mockUseDefaultFacility = vi.mocked(useDefaultFacility);
+const mockUseConfig = vi.mocked(useConfig<BillingConfig>);
 
-jest.mock('../../billing.resource', () => ({
-  useDefaultFacility: jest.fn(),
+vi.mock('../../billing.resource', () => ({
+  useDefaultFacility: vi.fn(),
 }));
 
 const testProps = {
@@ -41,7 +42,7 @@ describe('PrintableInvoiceHeader', () => {
     mockUseDefaultFacility.mockReturnValue({ data: { display: 'MTRH', uuid: 'mtrh-uuid', links: [] } });
   });
 
-  test('should render PrintableInvoiceHeader component', () => {
+  it('should render PrintableInvoiceHeader component', () => {
     render(<PrintableInvoiceHeader {...testProps} defaultFacility={defaultFacility} bill={bill} />);
     const header = screen.getByText('Invoice');
     expect(header).toBeInTheDocument();
@@ -54,13 +55,13 @@ describe('PrintableInvoiceHeader', () => {
     expect(screen.getByText(/15-May-1980/i)).toBeInTheDocument();
   });
 
-  test('should display the logo when logo is provided', () => {
+  it('should display the logo when logo is provided', () => {
     render(<PrintableInvoiceHeader {...testProps} defaultFacility={defaultFacility} bill={bill} />);
     const logo = screen.getByAltText('logo');
     expect(logo).toBeInTheDocument();
   });
 
-  test('should display the default OpenMRS SVG logo when logo src is not provided', () => {
+  it('should display the default OpenMRS SVG logo when logo src is not provided', () => {
     mockUseConfig.mockReturnValue({
       logo: { src: '', alt: '' },
       country: 'Kenya',
@@ -73,7 +74,7 @@ describe('PrintableInvoiceHeader', () => {
     expect(logo.tagName).toBe('svg');
   });
 
-  test('should display logo alt text when src is empty but alt is provided', () => {
+  it('should display logo alt text when src is empty but alt is provided', () => {
     mockUseConfig.mockReturnValue({
       logo: { src: '', alt: 'Test Facility Logo' },
       country: 'Kenya',
@@ -84,7 +85,7 @@ describe('PrintableInvoiceHeader', () => {
     expect(screen.getByText('Test Facility Logo')).toBeInTheDocument();
   });
 
-  test('should format birthDate correctly', () => {
+  it('should format birthDate correctly', () => {
     const propsWithDifferentDate = {
       patientDetails: {
         ...testProps.patientDetails,
@@ -96,7 +97,7 @@ describe('PrintableInvoiceHeader', () => {
     expect(screen.getByText(/25-Dec-1995/i)).toBeInTheDocument();
   });
 
-  test('should not render birthDate and gender when not provided', () => {
+  it('should not render birthDate and gender when not provided', () => {
     const propsWithoutBirthDateAndGender = {
       patientDetails: {
         ...testProps.patientDetails,
@@ -112,9 +113,23 @@ describe('PrintableInvoiceHeader', () => {
     expect(screen.queryByText(/Gender:/i)).not.toBeInTheDocument();
   });
 
-  test('should handle null defaultFacility gracefully', () => {
+  it('should handle null defaultFacility gracefully', () => {
     render(<PrintableInvoiceHeader {...testProps} defaultFacility={null} bill={bill} />);
     expect(screen.getByRole('heading', { name: /Invoice/i, level: 1 })).toBeInTheDocument();
     expect(screen.getByText(/john Doe/i)).toBeInTheDocument();
   });
+
+  it('should use netAmount to calculate amount balance when a discount is applied', () => {
+    const discountedBill = {
+      ...bill,
+      totalAmount: 100,
+      netAmount: 80,
+      tenderedAmount: 20,
+    } as MappedBill;
+
+    render(<PrintableInvoiceHeader {...testProps} defaultFacility={defaultFacility} bill={discountedBill} />);
+
+    expect(screen.getByText(': KES 60')).toBeInTheDocument();
+    expect(screen.queryByText(': KES 80')).not.toBeInTheDocument();
+  });
 });

package/src/invoice/printable-invoice/printable-invoice.component.tsx

@@ -83,12 +83,6 @@ const PrintableInvoice: React.FC<PrintableInvoiceProps> = ({ bill, patient, comp
     return [];
   }, [bill, defaultCurrency]);
 
-  const summaryHeaders = [
-    { key: 'total', header: t('totalAmount', 'Total Amount') },
-    { key: 'paid', header: t('totalPaid', 'Total Paid') },
-    { key: 'balance', header: t('amountBalance', 'Amount Balance') },
-  ];
-
   const patientDetails = useMemo(() => {
     const address = patient?.address?.[0];
     const addressParts = [address?.line?.join(' '), address?.city, address?.district, address?.state].filter(Boolean);
@@ -136,14 +130,43 @@ const PrintableInvoice: React.FC<PrintableInvoiceProps> = ({ bill, patient, comp
               </TableContainer>
             )}
           </DataTable>
-          <div className={styles.balanceContainer}>
-            <span className={styles.itemHeading}>{t('totalAmount', 'Total Amount')}:</span>{' '}
-            <span className={styles.itemLabel}>
-              <strong>
-                {defaultCurrency} {bill?.totalAmount}
-              </strong>
-            </span>
-          </div>
+          {bill?.netAmount != null && bill.totalAmount !== bill.netAmount ? (
+            <>
+              <div className={styles.balanceContainer}>
+                <span className={styles.itemHeading}>{t('subtotal', 'Subtotal')}:</span>{' '}
+                <span className={styles.itemLabel}>
+                  <strong>
+                    {defaultCurrency} {bill?.totalAmount}
+                  </strong>
+                </span>
+              </div>
+              <div className={styles.balanceContainer}>
+                <span className={styles.itemHeading}>{t('discount', 'Discount')}:</span>{' '}
+                <span className={styles.itemLabel}>
+                  <strong>
+                    - {defaultCurrency} {(bill?.totalAmount ?? 0) - (bill?.netAmount ?? 0)}
+                  </strong>
+                </span>
+              </div>
+              <div className={styles.balanceContainer}>
+                <span className={styles.itemHeading}>{t('totalAmount', 'Total amount')}:</span>{' '}
+                <span className={styles.itemLabel}>
+                  <strong>
+                    {defaultCurrency} {bill?.netAmount}
+                  </strong>
+                </span>
+              </div>
+            </>
+          ) : (
+            <div className={styles.balanceContainer}>
+              <span className={styles.itemHeading}>{t('totalAmount', 'Total amount')}:</span>{' '}
+              <span className={styles.itemLabel}>
+                <strong>
+                  {defaultCurrency} {bill?.totalAmount}
+                </strong>
+              </span>
+            </div>
+          )}
           {bill?.payments?.length > 0 && (
             <div className={styles.paymentHistoryContainer}>
               <DataTable rows={paymentHistoryRows} headers={paymentHistoryHeaders} size={responsiveSize}>
@@ -184,7 +207,7 @@ const PrintableInvoice: React.FC<PrintableInvoiceProps> = ({ bill, patient, comp
             <span className={styles.itemHeading}>{t('balance', 'Balance')}:</span>
             <span className={styles.itemLabel}>
               <strong>
-                {defaultCurrency} {bill?.totalAmount - bill?.tenderedAmount}
+                {defaultCurrency} {bill?.netAmount - bill?.tenderedAmount}
               </strong>
             </span>
           </div>

package/src/left-panel-link.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { LinkExtension, createLeftPanelLink } from './left-panel-link.component';
-import userEvent from '@testing-library/user-event';
 
 window.getOpenmrsSpaBase = () => '/openmrs/spa/';
 
@@ -12,7 +12,7 @@ describe('LinkExtension Component', () => {
     return render(component, { wrapper: MemoryRouter });
   };
 
-  test('renders correctly', () => {
+  it('renders correctly', () => {
     const config = { name: 'billing', title: 'Billing' };
     renderWithRouter(<LinkExtension config={config} />, {
       route: '/billing/6eb8d678-514d-46ad-9554-51e48d96d567',
@@ -23,7 +23,7 @@ describe('LinkExtension Component', () => {
 });
 
 describe('createLeftPanelLink Function', () => {
-  test('returns a component that renders LinkExtension', () => {
+  it('returns a component that renders LinkExtension', () => {
     const config = { name: 'billing', title: 'Billing' };
     const TestComponent = createLeftPanelLink(config);
 

package/src/metrics-cards/metrics-cards.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
 import { billsSummary } from '../../__mocks__/bills.mock';
@@ -7,11 +8,11 @@ import { type MappedBill } from '../types';
 import { configSchema, type BillingConfig } from '../config-schema';
 import MetricsCards from './metrics-cards.component';
 
-const mockUseBills = jest.mocked<typeof useBills>(useBills);
-const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
+const mockUseBills = vi.mocked<typeof useBills>(useBills);
+const mockUseConfig = vi.mocked(useConfig<BillingConfig>);
 
-jest.mock('../billing.resource', () => ({
-  useBills: jest.fn(),
+vi.mock('../billing.resource', () => ({
+  useBills: vi.fn(),
 }));
 
 describe('MetricsCards', () => {
@@ -19,31 +20,31 @@ describe('MetricsCards', () => {
     mockUseConfig.mockReturnValue({ ...getDefaultsFromConfigSchema(configSchema), defaultCurrency: 'USD' });
   });
 
-  test('renders loading state', () => {
-    mockUseBills.mockReturnValue({ isLoading: true, bills: [], error: null, isValidating: false, mutate: jest.fn() });
+  it('renders loading state', () => {
+    mockUseBills.mockReturnValue({ isLoading: true, bills: [], error: null, isValidating: false, mutate: vi.fn() });
     renderMetricsCards();
     expect(screen.getByText(/Loading bill metrics.../i)).toBeInTheDocument();
   });
 
-  test('renders error state', () => {
+  it('renders error state', () => {
     mockUseBills.mockReturnValue({
       isLoading: false,
       bills: [],
       error: new Error('Internal server error'),
       isValidating: false,
-      mutate: jest.fn(),
+      mutate: vi.fn(),
     });
     renderMetricsCards();
     expect(screen.getByText(/error state/i)).toBeInTheDocument();
   });
 
-  test('renders metrics cards', () => {
+  it('renders metrics cards', () => {
     mockUseBills.mockReturnValue({
       isLoading: false,
       bills: billsSummary as unknown as MappedBill[],
       error: null,
       isValidating: false,
-      mutate: jest.fn(),
+      mutate: vi.fn(),
     });
     renderMetricsCards();
     expect(screen.getByRole('heading', { name: /cumulative bills/i })).toBeInTheDocument();

package/src/modal/delete-bill-confirmation.modal.test.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { deleteBill } from '../billing.resource';
+import { type MappedBill } from '../types';
+import DeleteBillModal from './delete-bill-confirmation.modal';
+
+const mockDeleteBill = vi.mocked(deleteBill);
+const mockShowSnackbar = vi.mocked(showSnackbar);
+
+vi.mock('../billing.resource', () => ({
+  deleteBill: vi.fn(),
+}));
+
+const mockBill = {
+  uuid: 'bill-uuid',
+  receiptNumber: 'RCPT-001',
+} as MappedBill;
+
+describe('DeleteBillModal', () => {
+  const mockCloseModal = vi.fn();
+  const mockOnSuccess = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('calls deleteBill with trimmed reason, fires onSuccess, shows success snackbar, and closes modal', async () => {
+    const user = userEvent.setup();
+    mockDeleteBill.mockResolvedValueOnce({} as any);
+
+    render(<DeleteBillModal closeModal={mockCloseModal} bill={mockBill} onSuccess={mockOnSuccess} />);
+
+    const deleteReasonInput = screen.getByLabelText(/Reason for deletion/i);
+    await user.type(deleteReasonInput, 'Test delete reason');
+
+    await user.click(screen.getByRole('button', { name: /delete/i }));
+
+    await waitFor(() => {
+      expect(mockDeleteBill).toHaveBeenCalledWith(mockBill.uuid, 'Test delete reason');
+      expect(mockOnSuccess).toHaveBeenCalled();
+      expect(mockShowSnackbar).toHaveBeenCalledWith({
+        kind: 'success',
+        subtitle: 'Bill deleted successfully',
+        title: 'Bill deleted',
+      });
+      expect(mockCloseModal).toHaveBeenCalled();
+    });
+  });
+
+  it('shows error message from responseBody when delete fails', async () => {
+    const user = userEvent.setup();
+
+    mockDeleteBill.mockRejectedValueOnce({
+      responseBody: {
+        error: {
+          message: 'Cannot delete paid bill',
+        },
+      },
+    });
+
+    render(<DeleteBillModal closeModal={mockCloseModal} bill={mockBill} onSuccess={mockOnSuccess} />);
+
+    const deleteReasonInput = screen.getByLabelText(/Reason for deletion/i);
+    await user.type(deleteReasonInput, 'Test delete reason');
+
+    await user.click(screen.getByRole('button', { name: /delete/i }));
+
+    await waitFor(() => {
+      expect(mockShowSnackbar).toHaveBeenCalledWith({
+        kind: 'error',
+        subtitle: 'Cannot delete paid bill',
+        title: 'Failed to delete bill',
+      });
+    });
+  });
+
+  it('shows fallback error message when error has no responseBody message', async () => {
+    const user = userEvent.setup();
+
+    mockDeleteBill.mockRejectedValueOnce({});
+
+    render(<DeleteBillModal closeModal={mockCloseModal} bill={mockBill} onSuccess={mockOnSuccess} />);
+
+    const deleteReasonInput = screen.getByLabelText(/Reason for deletion/i);
+    await user.type(deleteReasonInput, 'Test delete reason');
+
+    await user.click(screen.getByRole('button', { name: /delete/i }));
+
+    await waitFor(() => {
+      expect(mockShowSnackbar).toHaveBeenCalledWith({
+        kind: 'error',
+        subtitle: 'Unable to delete bill. Please try again.',
+        title: 'Failed to delete bill',
+      });
+    });
+  });
+
+  it('disables delete button when reason is empty', () => {
+    render(<DeleteBillModal closeModal={mockCloseModal} bill={mockBill} onSuccess={mockOnSuccess} />);
+
+    const deleteButton = screen.getByRole('button', { name: /delete/i });
+    expect(deleteButton).toBeDisabled();
+  });
+
+  it('disables delete button when reason contains only whitespace', async () => {
+    const user = userEvent.setup();
+    render(<DeleteBillModal closeModal={mockCloseModal} bill={mockBill} onSuccess={mockOnSuccess} />);
+
+    const deleteReasonInput = screen.getByLabelText(/Reason for deletion/i);
+    await user.type(deleteReasonInput, '   ');
+
+    const deleteButton = screen.getByRole('button', { name: /delete/i });
+    expect(deleteButton).toBeDisabled();
+  });
+
+  it('trims reason before sending to API', async () => {
+    const user = userEvent.setup();
+    mockDeleteBill.mockResolvedValueOnce({} as any);
+
+    render(<DeleteBillModal closeModal={mockCloseModal} bill={mockBill} onSuccess={mockOnSuccess} />);
+
+    const deleteReasonInput = screen.getByLabelText(/Reason for deletion/i);
+    await user.type(deleteReasonInput, '  Test delete reason with spaces  ');
+
+    await user.click(screen.getByRole('button', { name: /delete/i }));
+
+    await waitFor(() => {
+      expect(mockDeleteBill).toHaveBeenCalledWith(mockBill.uuid, 'Test delete reason with spaces');
+    });
+  });
+});

package/src/modal/delete-bill-confirmation.modal.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { Button, InlineLoading, ModalBody, ModalFooter, ModalHeader, Stack, TextArea } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { getCoreTranslation, showSnackbar } from '@openmrs/esm-framework';
+import { deleteBill } from '../billing.resource';
+import { type MappedBill } from '../types';
+import styles from './delete-line-item-confirmation.scss';
+
+interface DeleteBillModalParams {
+  closeModal: () => void;
+  bill: MappedBill;
+  onSuccess?: () => void;
+}
+
+const DeleteBillModal: React.FC<DeleteBillModalParams> = ({ closeModal, bill, onSuccess }) => {
+  const { t } = useTranslation();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [deleteReason, setDeleteReason] = useState('');
+
+  const handleDelete = async () => {
+    if (!bill?.uuid) {
+      return;
+    }
+
+    setIsDeleting(true);
+
+    try {
+      await deleteBill(bill.uuid, deleteReason.trim());
+
+      showSnackbar({
+        title: t('billDeleted', 'Bill deleted'),
+        subtitle: t('billDeleteSuccess', 'Bill deleted successfully'),
+        kind: 'success',
+      });
+
+      onSuccess?.();
+      closeModal();
+    } catch (err: any) {
+      const message =
+        err?.responseBody?.error?.message ||
+        err?.message ||
+        t('deleteBillFailedTryAgain', 'Unable to delete bill. Please try again.');
+
+      showSnackbar({
+        title: t('billDeleteFailed', 'Failed to delete bill'),
+        subtitle: message,
+        kind: 'error',
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('deleteBill', 'Delete bill')} />
+
+      <ModalBody className={styles.modalBody}>
+        <Stack gap={5}>
+          <p>
+            {t(
+              'deleteBillConfirmation',
+              'Are you sure you want to delete bill {{receiptNumber}}? This action cannot be undone.',
+              { receiptNumber: bill?.receiptNumber },
+            )}
+          </p>
+          <TextArea
+            enableCounter
+            id="deleteBillReason"
+            labelText={t('deleteReason', 'Reason for deletion')}
+            maxCount={255}
+            onChange={(e) => setDeleteReason(e.target.value)}
+            placeholder={t('deleteBillReasonPlaceholder', 'Enter the reason for deleting this bill')}
+            required
+            rows={3}
+            value={deleteReason}
+          />
+        </Stack>
+      </ModalBody>
+
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal} disabled={isDeleting}>
+          {getCoreTranslation('cancel')}
+        </Button>
+
+        <Button kind="danger" onClick={handleDelete} disabled={isDeleting || !deleteReason.trim()}>
+          {isDeleting ? (
+            <InlineLoading className={styles.spinner} description={t('deleting', 'Deleting') + '...'} />
+          ) : (
+            <span>{getCoreTranslation('delete')}</span>
+          )}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default DeleteBillModal;

package/src/modal/delete-line-item-confirmation.modal.test.tsx

@@ -1,23 +1,25 @@
 import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import { render, screen, waitFor } from '@testing-library/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import { deleteBillItem } from '../billing.resource';
+import { type LineItem } from '../types';
 import DeleteLineItem from './delete-line-item-confirmation.modal';
 
-const mockDeleteBillItem = jest.mocked(deleteBillItem);
-const mockShowSnackbar = jest.mocked(showSnackbar);
+const mockDeleteBillItem = vi.mocked(deleteBillItem);
+const mockShowSnackbar = vi.mocked(showSnackbar);
 
-jest.mock('../billing.resource', () => ({
-  deleteBillItem: jest.fn(),
+vi.mock('../billing.resource', () => ({
+  deleteBillItem: vi.fn(),
 }));
 
-const mockItem = {
+const mockItem: LineItem = {
   uuid: 'item-uuid',
   quantity: 2,
   price: 100,
   billableService: 'X-Ray Service',
-  paymentStatus: 'UNPAID',
+  status: 'PENDING',
   item: 'Test Service',
   display: 'Test Service',
   voided: false,
@@ -29,11 +31,11 @@ const mockItem = {
 };
 
 describe('DeleteLineItem Modal', () => {
-  const mockCloseModal = jest.fn();
-  const mockMutate = jest.fn();
+  const mockCloseModal = vi.fn();
+  const mockMutate = vi.fn();
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('renders delete confirmation modal', () => {

package/src/modal/finalize-bill-confirmation.modal.test.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import { render, screen, waitFor } from '@testing-library/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import { finalizeBill } from '../billing.resource';
 import FinalizeBillModal from './finalize-bill-confirmation.modal';
 import type { MappedBill } from '../types';
-import { BillStatus } from '../types';
+import { BillStatus, BillLineItemStatus } from '../types';
 
-const mockFinalizeBill = jest.mocked(finalizeBill);
-const mockShowSnackbar = jest.mocked(showSnackbar);
+const mockFinalizeBill = vi.mocked(finalizeBill);
+const mockShowSnackbar = vi.mocked(showSnackbar);
 
-jest.mock('../billing.resource', () => ({
-  finalizeBill: jest.fn(),
+vi.mock('../billing.resource', () => ({
+  finalizeBill: vi.fn(),
 }));
 
 const mockBill: MappedBill = {
@@ -33,19 +34,20 @@ const mockBill: MappedBill = {
       item: 'X-Ray',
       quantity: 1,
       price: 500,
-      paymentStatus: BillStatus.PENDING,
+      status: BillLineItemStatus.PENDING,
       billableService: 'X-Ray Service',
     },
   ],
   billingService: 'X-Ray Service',
   payments: [],
   totalAmount: 500,
+  netAmount: 500,
   tenderedAmount: 0,
 };
 
 describe('FinalizeBillModal', () => {
-  const mockCloseModal = jest.fn();
-  const mockMutate = jest.fn();
+  const mockCloseModal = vi.fn();
+  const mockMutate = vi.fn();
 
   it('renders the confirmation modal with correct content', () => {
     render(<FinalizeBillModal closeModal={mockCloseModal} bill={mockBill} onMutate={mockMutate} />);

package/src/modal/require-payment-modal.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
@@ -7,19 +8,19 @@ import { type MappedBill } from '../types';
 import { configSchema, type BillingConfig } from '../config-schema';
 import RequirePaymentModal from './require-payment.modal';
 
-const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
-const mockUseBills = jest.mocked<typeof useBills>(useBills);
+const mockUseConfig = vi.mocked(useConfig<BillingConfig>);
+const mockUseBills = vi.mocked<typeof useBills>(useBills);
 
-jest.mock('../billing.resource', () => ({
-  useBills: jest.fn(),
+vi.mock('../billing.resource', () => ({
+  useBills: vi.fn(),
 }));
 
-jest.mock('../helpers', () => ({
-  convertToCurrency: (value, currency) => `${currency} ${value.toFixed(2)}`,
+vi.mock('../helpers', () => ({
+  convertToCurrency: (value: number, currency: string) => `${currency} ${value.toFixed(2)}`,
 }));
 
 describe('RequirePaymentModal', () => {
-  const closeModal = jest.fn();
+  const closeModal = vi.fn();
   const patientUuid = '12345';
 
   beforeEach(() => {
@@ -27,13 +28,13 @@ describe('RequirePaymentModal', () => {
   });
 
   it('renders correctly', () => {
-    mockUseBills.mockReturnValue({ bills: [], isLoading: false, error: null, isValidating: false, mutate: jest.fn() });
+    mockUseBills.mockReturnValue({ bills: [], isLoading: false, error: null, isValidating: false, mutate: vi.fn() });
     render(<RequirePaymentModal closeModal={closeModal} patientUuid={patientUuid} />);
     expect(screen.getByText('Patient Billing Alert')).toBeInTheDocument();
   });
 
   it('displays loading state', () => {
-    mockUseBills.mockReturnValue({ bills: [], isLoading: true, error: null, isValidating: false, mutate: jest.fn() });
+    mockUseBills.mockReturnValue({ bills: [], isLoading: true, error: null, isValidating: false, mutate: vi.fn() });
     render(<RequirePaymentModal closeModal={closeModal} patientUuid={patientUuid} />);
     expect(screen.getByText('Loading bill items...')).toBeInTheDocument();
   });
@@ -53,7 +54,7 @@ describe('RequirePaymentModal', () => {
       isLoading: false,
       error: null,
       isValidating: false,
-      mutate: jest.fn(),
+      mutate: vi.fn(),
     });
     render(<RequirePaymentModal closeModal={closeModal} patientUuid={patientUuid} />);
     expect(screen.getByText('Service 1')).toBeInTheDocument();
@@ -62,7 +63,7 @@ describe('RequirePaymentModal', () => {
 
   it('handles closeModal', async () => {
     const user = userEvent.setup();
-    mockUseBills.mockReturnValue({ bills: [], isLoading: false, error: null, isValidating: false, mutate: jest.fn() });
+    mockUseBills.mockReturnValue({ bills: [], isLoading: false, error: null, isValidating: false, mutate: vi.fn() });
     render(<RequirePaymentModal closeModal={closeModal} patientUuid={patientUuid} />);
     await user.click(screen.getByText('Cancel'));
     await user.click(screen.getByText('OK'));