@openmrs/esm-billing-app 1.0.2-pre.78 → 1.0.2-pre.786

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import fuzzy from 'fuzzy';
 import {
@@ -13,42 +13,38 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-  TableSelectRow,
   TableToolbarSearch,
   Tile,
   type DataTableRow,
 } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
-import { isDesktop, showModal, useConfig, useDebounce, useLayoutType } from '@openmrs/esm-framework';
+import {
+  isDesktop,
+  showModal,
+  useConfig,
+  useDebounce,
+  useLayoutType,
+  getCoreTranslation,
+} from '@openmrs/esm-framework';
 import { type LineItem, type MappedBill } from '../types';
 import { convertToCurrency } from '../helpers';
+import type { BillingConfig } from '../config-schema';
 import styles from './invoice-table.scss';
 
 type InvoiceTableProps = {
   bill: MappedBill;
-  isSelectable?: boolean;
   isLoadingBill?: boolean;
-  onSelectItem?: (selectedLineItems: LineItem[]) => void;
 };
 
-const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true, isLoadingBill, onSelectItem }) => {
+const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isLoadingBill }) => {
   const { t } = useTranslation();
-  const { defaultCurrency, showEditBillButton } = useConfig();
+  const { defaultCurrency } = useConfig<BillingConfig>();
   const layout = useLayoutType();
   const lineItems = useMemo(() => bill?.lineItems ?? [], [bill?.lineItems]);
-  const paidLineItems = useMemo(() => lineItems?.filter((item) => item.paymentStatus === 'PAID') ?? [], [lineItems]);
   const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
-
-  const [selectedLineItems, setSelectedLineItems] = useState(paidLineItems ?? []);
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearchTerm = useDebounce(searchTerm);
 
-  useEffect(() => {
-    if (onSelectItem) {
-      onSelectItem(selectedLineItems);
-    }
-  }, [selectedLineItems, onSelectItem]);
-
   const filteredLineItems = useMemo(() => {
     if (!debouncedSearchTerm) {
       return lineItems;
@@ -65,14 +61,14 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
   }, [debouncedSearchTerm, lineItems]);
 
   const tableHeaders = [
-    { header: 'No', key: 'no', width: 7 }, // Width as a percentage
-    { header: 'Bill item', key: 'billItem', width: 25 },
-    { header: 'Bill code', key: 'billCode', width: 20 },
-    { header: 'Status', key: 'status', width: 25 },
-    { header: 'Quantity', key: 'quantity', width: 15 },
-    { header: 'Price', key: 'price', width: 24 },
-    { header: 'Total', key: 'total', width: 15 },
-    { header: t('actions', 'Actions'), key: 'actionButton' },
+    { header: t('number', 'No'), key: 'no', width: 7 }, // Width as a percentage
+    { header: t('billItem', 'Bill item'), key: 'billItem', width: 25 },
+    { header: t('billCode', 'Bill code'), key: 'billCode', width: 20 },
+    { header: t('status', 'Status'), key: 'status', width: 25 },
+    { header: t('quantity', 'Quantity'), key: 'quantity', width: 15 },
+    { header: t('price', 'Price'), key: 'price', width: 24 },
+    { header: t('total', 'Total'), key: 'total', width: 15 },
+    { header: getCoreTranslation('actions'), key: 'actionButton' },
   ];
 
   const handleSelectBillItem = useCallback(
@@ -97,27 +93,23 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
           status: item.paymentStatus,
           quantity: item.quantity,
           price: convertToCurrency(item.price, defaultCurrency),
-          total: item.price * item.quantity,
+          total: convertToCurrency(item.price * item.quantity, defaultCurrency),
           actionButton: (
             <span>
-              {showEditBillButton ? (
-                <Button
-                  data-testid={`edit-button-${item.uuid}`}
-                  renderIcon={Edit}
-                  hasIconOnly
-                  kind="ghost"
-                  iconDescription={t('editThisBillItem', 'Edit this bill item')}
-                  tooltipPosition="left"
-                  onClick={() => handleSelectBillItem(item)}
-                />
-              ) : (
-                '--'
-              )}
+              <Button
+                data-testid={`edit-button-${item.uuid}`}
+                renderIcon={Edit}
+                hasIconOnly
+                kind="ghost"
+                iconDescription={t('editThisBillItem', 'Edit this bill item')}
+                tooltipPosition="left"
+                onClick={() => handleSelectBillItem(item)}
+              />
             </span>
           ),
         };
       }) ?? [],
-    [filteredLineItems, bill?.receiptNumber, defaultCurrency, showEditBillButton, t, handleSelectBillItem],
+    [filteredLineItems, bill?.receiptNumber, defaultCurrency, t, handleSelectBillItem],
   );
 
   if (isLoadingBill) {
@@ -135,23 +127,10 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
     );
   }
 
-  const handleRowSelection = (row: typeof DataTableRow, checked: boolean) => {
-    const matchingRow = filteredLineItems.find((item) => item.uuid === row.id);
-    let newSelectedLineItems;
-
-    if (checked) {
-      newSelectedLineItems = [...selectedLineItems, matchingRow];
-    } else {
-      newSelectedLineItems = selectedLineItems.filter((item) => item.uuid !== row.id);
-    }
-    setSelectedLineItems(newSelectedLineItems);
-    onSelectItem(newSelectedLineItems);
-  };
-
   return (
-    <div className={styles.invoiceContainer}>
-      <DataTable headers={tableHeaders} isSortable rows={tableRows} size={responsiveSize} useZebraStyles>
-        {({ rows, headers, getRowProps, getSelectionProps, getTableProps, getToolbarProps }) => (
+    <>
+      <DataTable headers={tableHeaders} rows={tableRows} size={responsiveSize} useZebraStyles>
+        {({ rows, headers, getRowProps, getTableProps }) => (
           <TableContainer
             description={
               <span className={styles.tableDescription}>
@@ -172,7 +151,6 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
               className={`${styles.invoiceTable} billingTable`}>
               <TableHead>
                 <TableRow>
-                  {rows.length > 1 && isSelectable ? <TableHeader /> : null}
                   {headers.map((header) => (
                     <TableHeader key={header.key}>{header.header}</TableHeader>
                   ))}
@@ -186,18 +164,6 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
                       {...getRowProps({
                         row,
                       })}>
-                      {rows.length > 1 && isSelectable && (
-                        <TableSelectRow
-                          aria-label="Select row"
-                          {...getSelectionProps({ row })}
-                          disabled={tableRows[index].status === 'PAID'}
-                          onChange={(checked: boolean) => handleRowSelection(row, checked)}
-                          checked={
-                            tableRows[index].status === 'PAID' ||
-                            Boolean(selectedLineItems?.find((item) => item?.uuid === row?.id))
-                          }
-                        />
-                      )}
                       {row.cells.map((cell) => (
                         <TableCell key={cell.id}>{cell.value}</TableCell>
                       ))}
@@ -221,7 +187,7 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
           </Layer>
         </div>
       )}
-    </div>
+    </>
   );
 };
 

package/src/invoice/invoice-table.scss

@@ -29,11 +29,7 @@
 
 .headerContainer {
   background-color: colors.$gray-10;
-}
-
-.invoiceContainer {
-  border: 1px solid $ui-03;
-}
+}c
 
 .searchbox {
   input:focus {

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: /no/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-dialog',
+      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();
   });
 });