@openmrs/esm-billing-app 1.0.2-pre.86 → 1.0.2-pre.863

package/src/invoice/invoice-table.test.tsx

@@ -1,46 +1,20 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { render, screen, fireEvent, act } from '@testing-library/react';
-import { showModal } from '@openmrs/esm-framework';
-import InvoiceTable from './invoice-table.component';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, showModal, useConfig } from '@openmrs/esm-framework';
 import { type MappedBill } from '../types';
+import { configSchema, type BillingConfig } from '../config-schema';
+import InvoiceTable from './invoice-table.component';
 
-// Mocking dependencies
-jest.mock('react-i18next', () => ({
-  useTranslation: jest.fn(() => ({
-    t: jest.fn((key, fallback) => fallback || key),
-    i18n: { language: 'en' },
-  })),
-}));
-
-jest.mock('@openmrs/esm-framework', () => ({
-  showModal: jest.fn(),
-  useConfig: jest.fn(() => ({
-    defaultCurrency: 'USD',
-    showEditBillButton: true,
-  })),
-  useDebounce: jest.fn((value) => value),
-  useLayoutType: jest.fn(() => 'desktop'),
-  isDesktop: jest.fn(() => true),
-}));
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
+const mockShowModal = jest.mocked(showModal);
 
 jest.mock('../helpers', () => ({
   convertToCurrency: jest.fn((price) => `USD ${price}`),
 }));
 
 describe('InvoiceTable', () => {
-  const mockT = jest.fn((key) => key);
-
-  beforeEach(() => {
-    (useTranslation as jest.Mock).mockReturnValue({ t: mockT, i18n: { language: 'en' } });
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
-  const bill: MappedBill = {
+  const defaultBill: MappedBill = {
     uuid: 'bill-uuid',
     id: 123,
     patientUuid: 'patient-uuid',
@@ -95,57 +69,294 @@ describe('InvoiceTable', () => {
     tenderedAmount: 300,
   };
 
-  it('renders the table and displays line items correctly', () => {
-    render(<InvoiceTable bill={bill} />);
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      defaultCurrency: 'USD',
+    });
+  });
+
+  it('should render table headers correctly', () => {
+    render(<InvoiceTable bill={defaultBill} />);
+
+    expect(screen.getByText(/line items/i)).toBeInTheDocument();
+    expect(screen.getByText(/items to be billed/i)).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: /number/i })).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: /bill item/i })).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: /bill code/i })).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: /status/i })).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: /quantity/i })).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: /price/i })).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: /total/i })).toBeInTheDocument();
+  });
+
+  it('should render line items correctly', () => {
+    render(<InvoiceTable bill={defaultBill} />);
 
     expect(screen.getByText('Item 1')).toBeInTheDocument();
     expect(screen.getByText('Item 2')).toBeInTheDocument();
     expect(screen.getByTestId('receipt-number-0')).toHaveTextContent('12345');
+    expect(screen.getByTestId('receipt-number-1')).toHaveTextContent('12345');
+  });
+
+  it('should display loading skeleton when bill is loading', () => {
+    render(<InvoiceTable bill={defaultBill} isLoadingBill={true} />);
+
+    expect(screen.getByTestId('loader')).toBeInTheDocument();
+    expect(screen.queryByText(/line items/i)).not.toBeInTheDocument();
   });
 
-  it('renders the edit button and calls showModal when clicked', () => {
-    render(<InvoiceTable bill={bill} />);
+  it('should display payment status for each line item', () => {
+    render(<InvoiceTable bill={defaultBill} />);
+
+    expect(screen.getByText('PAID')).toBeInTheDocument();
+    expect(screen.getByText('PENDING')).toBeInTheDocument();
+  });
+
+  it('should display correct quantities', () => {
+    render(<InvoiceTable bill={defaultBill} />);
+
+    // Item 1 has quantity 1, Item 2 has quantity 2
+    const rows = screen.getAllByRole('row');
+    expect(rows).toHaveLength(3); // Header row + 2 data rows
+  });
+
+  it('should calculate and display line item totals correctly', () => {
+    const billWithCalculation: MappedBill = {
+      ...defaultBill,
+      lineItems: [
+        {
+          uuid: '1',
+          item: 'Service A',
+          paymentStatus: 'PENDING',
+          quantity: 3,
+          price: 100,
+          display: '',
+          voided: false,
+          voidReason: '',
+          billableService: 'Service A',
+          priceName: '',
+          priceUuid: '',
+          lineItemOrder: 0,
+          resourceVersion: '',
+        },
+      ],
+    };
+
+    render(<InvoiceTable bill={billWithCalculation} />);
+
+    // Total should be 3 * 100 = 300
+    expect(screen.getByText('USD 300')).toBeInTheDocument();
+  });
+
+  it('should render edit buttons for all line items', () => {
+    render(<InvoiceTable bill={defaultBill} />);
+
+    const editButton1 = screen.getByTestId('edit-button-1');
+    const editButton2 = screen.getByTestId('edit-button-2');
+
+    expect(editButton1).toBeInTheDocument();
+    expect(editButton2).toBeInTheDocument();
+  });
+
+  it('should open edit modal when edit button is clicked', async () => {
+    const user = userEvent.setup();
+    render(<InvoiceTable bill={defaultBill} />);
 
     const editButton = screen.getByTestId('edit-button-1');
-    fireEvent.click(editButton);
-    expect(showModal).toHaveBeenCalledWith('edit-bill-line-item-dialog', expect.anything());
+    await user.click(editButton);
+
+    expect(mockShowModal).toHaveBeenCalledTimes(1);
+    expect(mockShowModal).toHaveBeenCalledWith(
+      'edit-bill-line-item-modal',
+      expect.objectContaining({
+        bill: defaultBill,
+        item: expect.objectContaining({ uuid: '1' }),
+      }),
+    );
   });
 
-  it('displays a skeleton loader when the bill is loading', () => {
-    render(<InvoiceTable bill={bill} isLoadingBill={true} />);
+  it('should filter line items based on search term', async () => {
+    const user = userEvent.setup();
+    render(<InvoiceTable bill={defaultBill} />);
 
-    expect(screen.getByTestId('loader')).toBeInTheDocument();
+    const searchInput = screen.getByPlaceholderText(/search this table/i);
+    await user.type(searchInput, 'Item 2');
+
+    await waitFor(() => {
+      expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
+      expect(screen.getByText('Item 2')).toBeInTheDocument();
+    });
   });
 
-  it('filters line items based on the search term', () => {
-    render(<InvoiceTable bill={bill} />);
-    const searchInput = screen.getByPlaceholderText('searchThisTable'); //
+  it('should show all items when search is cleared', async () => {
+    const user = userEvent.setup();
+    render(<InvoiceTable bill={defaultBill} />);
 
-    fireEvent.change(searchInput, { target: { value: 'Item 2' } });
+    const searchInput = screen.getByPlaceholderText(/search this table/i);
 
-    expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
-    expect(screen.getByText('Item 2')).toBeInTheDocument();
+    // Search for Item 1
+    await user.type(searchInput, 'Item 1');
+
+    await waitFor(() => {
+      expect(screen.queryByText('Item 2')).not.toBeInTheDocument();
+    });
+
+    // Clear search
+    await user.clear(searchInput);
+
+    await waitFor(() => {
+      expect(screen.getByText('Item 1')).toBeInTheDocument();
+      expect(screen.getByText('Item 2')).toBeInTheDocument();
+    });
   });
 
-  it('correctly handles row selection', () => {
-    const onSelectItem = jest.fn();
-    render(<InvoiceTable bill={bill} onSelectItem={onSelectItem} />);
+  it('should display empty state when no line items exist', () => {
+    const emptyBill: MappedBill = {
+      ...defaultBill,
+      lineItems: [],
+    };
 
-    const checkboxes = screen.getAllByLabelText('Select row');
-    fireEvent.click(checkboxes[0]);
+    render(<InvoiceTable bill={emptyBill} />);
 
-    expect(onSelectItem).toHaveBeenCalledWith([bill.lineItems[0]]);
+    expect(screen.getByText(/no matching items to display/i)).toBeInTheDocument();
+    expect(screen.getByText(/check the filters above/i)).toBeInTheDocument();
   });
 
-  it('resets isRedirecting to false after timeout', () => {
-    render(<InvoiceTable bill={bill} />);
+  it('should show empty state when search has no results', async () => {
+    const user = userEvent.setup();
+    render(<InvoiceTable bill={defaultBill} />);
+
+    const searchInput = screen.getByPlaceholderText(/search this table/i);
+    await user.type(searchInput, 'NonexistentItem');
 
-    const button = screen.getByTestId('edit-button-1');
-    fireEvent.click(button);
-    act(() => {
-      jest.advanceTimersByTime(1000);
+    await waitFor(() => {
+      expect(screen.getByText(/no matching items to display/i)).toBeInTheDocument();
+      expect(screen.getByText(/check the filters above/i)).toBeInTheDocument();
     });
+  });
+
+  it('should handle line items with zero price', () => {
+    const billWithZeroPrice: MappedBill = {
+      ...defaultBill,
+      lineItems: [
+        {
+          uuid: '1',
+          item: 'Free Service',
+          paymentStatus: 'PAID',
+          quantity: 1,
+          price: 0,
+          display: '',
+          voided: false,
+          voidReason: '',
+          billableService: 'Free Service',
+          priceName: '',
+          priceUuid: '',
+          lineItemOrder: 0,
+          resourceVersion: '',
+        },
+      ],
+    };
+
+    render(<InvoiceTable bill={billWithZeroPrice} />);
+
+    // USD 0 appears for both price and total
+    expect(screen.getAllByText('USD 0').length).toBeGreaterThan(0);
+  });
+
+  it('should handle line items with zero quantity', () => {
+    const billWithZeroQuantity: MappedBill = {
+      ...defaultBill,
+      lineItems: [
+        {
+          uuid: '1',
+          item: 'Service',
+          paymentStatus: 'PENDING',
+          quantity: 0,
+          price: 100,
+          display: '',
+          voided: false,
+          voidReason: '',
+          billableService: 'Service',
+          priceName: '',
+          priceUuid: '',
+          lineItemOrder: 0,
+          resourceVersion: '',
+        },
+      ],
+    };
+
+    render(<InvoiceTable bill={billWithZeroQuantity} />);
+
+    // Total should be 0 * 100 = 0
+    expect(screen.getByText('USD 0')).toBeInTheDocument();
+  });
+
+  it('should use billableService name when available, otherwise use item name', () => {
+    const billWithBillableService: MappedBill = {
+      ...defaultBill,
+      lineItems: [
+        {
+          uuid: '1',
+          item: 'Item Name',
+          billableService: 'Billable Service Name',
+          paymentStatus: 'PAID',
+          quantity: 1,
+          price: 100,
+          display: '',
+          voided: false,
+          voidReason: '',
+          priceName: '',
+          priceUuid: '',
+          lineItemOrder: 0,
+          resourceVersion: '',
+        },
+        {
+          uuid: '2',
+          item: 'Item Without Billable',
+          billableService: '',
+          paymentStatus: 'PENDING',
+          quantity: 1,
+          price: 200,
+          display: '',
+          voided: false,
+          voidReason: '',
+          priceName: '',
+          priceUuid: '',
+          lineItemOrder: 1,
+          resourceVersion: '',
+        },
+      ],
+    };
+
+    render(<InvoiceTable bill={billWithBillableService} />);
+
+    expect(screen.getByText('Billable Service Name')).toBeInTheDocument();
+    expect(screen.getByText('Item Without Billable')).toBeInTheDocument();
+  });
+
+  it('should display line item numbers starting from 1', () => {
+    render(<InvoiceTable bill={defaultBill} />);
+
+    // Check the table body for numbered rows
+    const rows = screen.getAllByRole('row');
+    // First row is header, so data rows start at index 1
+    expect(rows.length).toBeGreaterThan(2);
+  });
+
+  it('should pass correct currency to convertToCurrency helper', () => {
+    render(<InvoiceTable bill={defaultBill} />);
+
+    // Verify prices are formatted with USD - multiple occurrences expected
+    expect(screen.getAllByText('USD 100').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('USD 200').length).toBeGreaterThan(0);
+  });
+
+  it('should render search input in expanded state', () => {
+    render(<InvoiceTable bill={defaultBill} />);
 
-    expect(button).not.toBeDisabled();
+    const searchInput = screen.getByPlaceholderText(/search this table/i);
+    expect(searchInput).toBeInTheDocument();
+    expect(searchInput).toBeVisible();
   });
 });

package/src/invoice/invoice.component.tsx

@@ -4,15 +4,15 @@ import { Printer } from '@carbon/react/icons';
 import { useParams } from 'react-router-dom';
 import { useReactToPrint } from 'react-to-print';
 import { useTranslation } from 'react-i18next';
-import { ExtensionSlot, useConfig, usePatient } from '@openmrs/esm-framework';
-import { ErrorState } from '@openmrs/esm-patient-common-lib';
-import { convertToCurrency } from '../helpers';
-import { type LineItem } from '../types';
-import { useBill } from '../billing.resource';
+import { ExtensionSlot, showSnackbar, useConfig, usePatient } from '@openmrs/esm-framework';
 import InvoiceTable from './invoice-table.component';
 import Payments from './payments/payments.component';
 import PrintReceipt from './printable-invoice/print-receipt.component';
 import PrintableInvoice from './printable-invoice/printable-invoice.component';
+import { ErrorState } from '@openmrs/esm-patient-common-lib';
+import { convertToCurrency } from '../helpers';
+import { useBill, useDefaultFacility } from '../billing.resource';
+import type { BillingConfig } from '../config-schema';
 import styles from './invoice.scss';
 
 interface InvoiceDetailsProps {
@@ -22,25 +22,20 @@ interface InvoiceDetailsProps {
 
 const Invoice: React.FC = () => {
   const { t } = useTranslation();
+  const { data } = useDefaultFacility();
   const { billUuid, patientUuid } = useParams();
   const { patient, isLoading: isLoadingPatient } = usePatient(patientUuid);
   const { bill, isLoading: isLoadingBill, error, mutate } = useBill(billUuid);
   const [isPrinting, setIsPrinting] = useState(false);
-  const [selectedLineItems, setSelectedLineItems] = useState<LineItem[]>([]);
   const componentRef = useRef<HTMLDivElement>(null);
   const onBeforeGetContentResolve = useRef<(() => void) | null>(null);
-  const { defaultCurrency } = useConfig();
-  const handleSelectItem = (lineItems: LineItem[]) => {
-    setSelectedLineItems(lineItems);
-  };
+  const { defaultCurrency } = useConfig<BillingConfig>();
 
   const handleAfterPrint = useCallback(() => {
     onBeforeGetContentResolve.current = null;
     setIsPrinting(false);
   }, []);
 
-  const reactToPrintContent = useCallback(() => componentRef.current, []);
-
   const handleOnBeforeGetContent = useCallback(() => {
     return new Promise<void>((resolve) => {
       if (patient && bill) {
@@ -51,11 +46,17 @@ const Invoice: React.FC = () => {
   }, [bill, patient]);
 
   const handlePrint = useReactToPrint({
-    content: reactToPrintContent,
+    contentRef: componentRef,
     documentTitle: `Invoice ${bill?.receiptNumber} - ${patient?.name?.[0]?.given?.join(' ')} ${patient?.name?.[0].family}`,
-    onBeforeGetContent: handleOnBeforeGetContent,
+    onBeforePrint: handleOnBeforeGetContent,
     onAfterPrint: handleAfterPrint,
-    removeAfterPrint: true,
+    preserveAfterPrint: false,
+    onPrintError: (_, error) =>
+      showSnackbar({
+        title: t('errorPrintingInvoice', 'Error printing invoice'),
+        kind: 'error',
+        subtitle: error.message,
+      }),
   });
 
   useEffect(() => {
@@ -64,11 +65,14 @@ const Invoice: React.FC = () => {
     }
   }, [isPrinting]);
 
-  useEffect(() => {
-    const unPaidLineItems = bill?.lineItems?.filter((item) => item.paymentStatus === 'PENDING') ?? [];
-    setSelectedLineItems(unPaidLineItems);
-  }, [bill?.lineItems]);
-
+  // Do not remove this comment. Adds the translation keys for the invoice details
+  /**
+   * t('totalAmount', 'Total amount')
+   * t('amountTendered', 'Amount tendered')
+   * t('invoiceNumber', 'Invoice #')
+   * t('dateAndTime', 'Date and time')
+   * t('invoiceStatus', 'Invoice status')
+   */
   const invoiceDetails = {
     'Total Amount': convertToCurrency(bill?.totalAmount, defaultCurrency),
     'Amount Tendered': convertToCurrency(bill?.tenderedAmount, defaultCurrency),
@@ -77,14 +81,12 @@ const Invoice: React.FC = () => {
     'Invoice Status': bill?.status,
   };
 
-  if (isLoadingPatient && isLoadingBill) {
+  if (isLoadingPatient || isLoadingBill) {
     return (
       <div className={styles.invoiceContainer}>
         <InlineLoading
           className={styles.loader}
-          status="active"
-          iconDescription="Loading"
-          description="Loading patient header..."
+          description={`${t('loadingBillInfo', 'Loading bill information')}...`}
         />
       </div>
     );
@@ -109,10 +111,10 @@ const Invoice: React.FC = () => {
         </section>
         <div>
           <Button
-            disabled={isPrinting}
+            disabled={isPrinting || isLoadingPatient || isLoadingBill}
             onClick={handlePrint}
             renderIcon={(props) => <Printer size={24} {...props} />}
-            iconDescription="Print bill"
+            iconDescription={t('printBill', 'Print bill')}
             size="md">
             {t('printBill', 'Print bill')}
           </Button>
@@ -120,20 +122,25 @@ const Invoice: React.FC = () => {
         </div>
       </div>
 
-      <InvoiceTable bill={bill} isLoadingBill={isLoadingBill} onSelectItem={handleSelectItem} />
-      <Payments bill={bill} mutate={mutate} selectedLineItems={selectedLineItems} />
-
-      <div className={styles.printContainer} ref={componentRef}>
-        {isPrinting && <PrintableInvoice bill={bill} patient={patient} isLoading={isLoadingPatient} />}
+      <div className={styles.invoiceContent}>
+        <InvoiceTable bill={bill} isLoadingBill={isLoadingBill} />
+        <Payments bill={bill} mutate={mutate} />
       </div>
+
+      {bill && patient && (
+        <div className={styles.printContainer}>
+          <PrintableInvoice bill={bill} patient={patient} defaultFacility={data} componentRef={componentRef} />
+        </div>
+      )}
     </div>
   );
 };
 
 function InvoiceDetails({ label, value }: InvoiceDetailsProps) {
+  const { t } = useTranslation();
   return (
     <div>
-      <h1 className={styles.label}>{label}</h1>
+      <h1 className={styles.label}>{t(label)}</h1>
       <span className={styles.value}>{value}</span>
     </div>
   );

package/src/invoice/invoice.scss

@@ -73,21 +73,28 @@
   flex-direction: row;
 }
 
+.invoiceContent {
+  margin: layout.$spacing-05;
+}
+
 .billDetail {
   font-weight: bold;
   color: colors.$cool-gray-90;
 }
 
-@media screen {
-  .printContainer {
-    background-color: colors.$white;
-    display: none;
+.printContainer {
+  background-color: colors.$white;
+  display: none;
+
+  @media print {
+    display: block !important;
   }
 }
 
 @media print {
   html,
   body {
+    display: block !important;
     background-color: colors.$white !important;
   }
 }