@openmrs/esm-billing-app 1.0.2-pre.764 → 1.0.2-pre.768

package/dist/openmrs-esm-billing-app.js.buildmanifest.json

@@ -71,9 +71,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 1174530,
+      "size": 1174566,
       "sizes": {
-        "javascript": 1174488,
+        "javascript": 1174524,
         "consume-shared": 42
       },
       "names": [],
@@ -87,7 +87,7 @@
       "auxiliaryFiles": [
         "942.js.map"
       ],
-      "hash": "b88f4b851392580f",
+      "hash": "4c3e935e456ec877",
       "childrenByOrder": {}
     },
     {
@@ -1209,10 +1209,10 @@
       "initial": true,
       "entry": true,
       "recorded": false,
-      "size": 5472360,
+      "size": 5472396,
       "sizes": {
         "consume-shared": 210,
-        "javascript": 5449705,
+        "javascript": 5449741,
         "share-init": 336,
         "runtime": 22109
       },
@@ -1229,7 +1229,7 @@
       "auxiliaryFiles": [
         "main.js.map"
       ],
-      "hash": "e3b8c4f5249fad86",
+      "hash": "5253e749f65b670a",
       "childrenByOrder": {}
     },
     {

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":">=2.24.0","fhir2":">=1.2"},"pages":[{"component":"billableServicesHome","route":"billable-services"}],"extensions":[{"component":"billingDashboardLink","name":"billing-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"billing","title":"billing","slot":"billing-dashboard-slot"},"featureFlag":"billing"},{"component":"root","name":"billing-dashboard-root","slot":"billing-dashboard-slot"},{"name":"billing-patient-summary","component":"billingPatientSummary","slot":"patient-chart-billing-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"billing-summary-dashboard-link","component":"billingSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-billing-dashboard-slot","path":"Billing history"},"featureFlag":"billing"},{"name":"billable-services-app-menu-item","component":"billableServicesAppMenuItem","slot":"app-menu-item-slot","meta":{"name":"Billable Services"}},{"name":"billing-checkin-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm","featureFlag":"billing"},{"slot":"system-admin-page-card-link-slot","component":"billableServicesCardLink","name":"billable-services-admin-card-link"},{"name":"patient-banner-billing-tags","component":"visitAttributeTags","slot":"patient-banner-tags-slot","order":2},{"name":"billing-home-tiles-ext","slot":"billing-home-tiles-slot","component":"serviceMetrics"},{"name":"edit-bill-line-item-dialog","component":"editBillLineItemModal","online":true,"offline":true}],"modals":[{"name":"add-cash-point-modal","component":"addCashPointModal"},{"name":"add-payment-mode-modal","component":"addPaymentModeModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"edit-bill-item-modal","component":"editBillLineItemModal"},{"name":"edit-billable-service-modal","component":"editBillableServiceModal"},{"name":"require-billing-modal","component":"requirePaymentModal"}],"workspaces":[{"name":"billing-form-workspace","title":"billingForm","component":"billingFormWorkspace","type":"form"}],"featureFlags":[{"flagName":"billing","label":"Billing module","description":"This feature introduces navigation links on the patient chart and home page to allow accessing the billing module features"}],"version":"1.0.2-pre.764"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":">=2.24.0","fhir2":">=1.2"},"pages":[{"component":"billableServicesHome","route":"billable-services"}],"extensions":[{"component":"billingDashboardLink","name":"billing-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"billing","title":"billing","slot":"billing-dashboard-slot"},"featureFlag":"billing"},{"component":"root","name":"billing-dashboard-root","slot":"billing-dashboard-slot"},{"name":"billing-patient-summary","component":"billingPatientSummary","slot":"patient-chart-billing-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"billing-summary-dashboard-link","component":"billingSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-billing-dashboard-slot","path":"Billing history"},"featureFlag":"billing"},{"name":"billable-services-app-menu-item","component":"billableServicesAppMenuItem","slot":"app-menu-item-slot","meta":{"name":"Billable Services"}},{"name":"billing-checkin-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm","featureFlag":"billing"},{"slot":"system-admin-page-card-link-slot","component":"billableServicesCardLink","name":"billable-services-admin-card-link"},{"name":"patient-banner-billing-tags","component":"visitAttributeTags","slot":"patient-banner-tags-slot","order":2},{"name":"billing-home-tiles-ext","slot":"billing-home-tiles-slot","component":"serviceMetrics"},{"name":"edit-bill-line-item-dialog","component":"editBillLineItemModal","online":true,"offline":true}],"modals":[{"name":"add-cash-point-modal","component":"addCashPointModal"},{"name":"add-payment-mode-modal","component":"addPaymentModeModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"edit-bill-item-modal","component":"editBillLineItemModal"},{"name":"edit-billable-service-modal","component":"editBillableServiceModal"},{"name":"require-billing-modal","component":"requirePaymentModal"}],"workspaces":[{"name":"billing-form-workspace","title":"billingForm","component":"billingFormWorkspace","type":"form"}],"featureFlags":[{"flagName":"billing","label":"Billing module","description":"This feature introduces navigation links on the patient chart and home page to allow accessing the billing module features"}],"version":"1.0.2-pre.768"}

package/e2e/core/test.ts

@@ -1,4 +1,4 @@
-import { APIRequestContext, Page, test as base } from '@playwright/test';
+import { type APIRequestContext, type Page, test as base } from '@playwright/test';
 import { api } from '../fixtures';
 
 // This file sets up our custom test harness using the custom fixtures.

package/e2e/fixtures/api.ts

@@ -1,5 +1,5 @@
 import { restBaseUrl } from '@openmrs/esm-framework';
-import { APIRequestContext, PlaywrightWorkerArgs, WorkerFixture } from '@playwright/test';
+import { type APIRequestContext, type PlaywrightWorkerArgs, type WorkerFixture } from '@playwright/test';
 
 /**
  * A fixture which initializes an [`APIRequestContext`](https://playwright.dev/docs/api/class-apirequestcontext)

package/e2e/support/github/Dockerfile

@@ -1,5 +1,5 @@
 # syntax=docker/dockerfile:1.3
-FROM --platform=$BUILDPLATFORM node:18-alpine as dev
+FROM --platform=$BUILDPLATFORM node:22-alpine as dev
 
 ARG APP_SHELL_VERSION=next
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-billing-app",
-  "version": "1.0.2-pre.764",
+  "version": "1.0.2-pre.768",
   "description": "O3 frontend module for handling billing concerns in healthcare settings",
   "browser": "dist/openmrs-esm-billing-app.js",
   "main": "src/index.ts",
@@ -86,7 +86,10 @@
     "dotenv": "^16.4.1",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest-dom": "^5.5.0",
+    "eslint-plugin-playwright": "^2.2.2",
     "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-testing-library": "^7.13.1",
     "husky": "^9.0.6",
     "i18next": "^23.7.20",
     "i18next-parser": "^8.12.0",

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

@@ -196,7 +196,7 @@ describe('BillsTable', () => {
     const patientNameLink = screen.getByRole('link', { name: 'John Doe' });
     expect(patientNameLink).toBeInTheDocument();
 
-    expect(patientNameLink.getAttribute('href')).toEqual('/home/billing/patient/uuid1/1');
+    expect(patientNameLink).toHaveAttribute('href', '/home/billing/patient/uuid1/1');
   });
 
   test('should filter bills by payment status', async () => {

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

@@ -93,7 +93,7 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isLoadingBill }) => {
           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>
               <Button

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

@@ -1,26 +1,20 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { render, screen, act } from '@testing-library/react';
+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';
 
 const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
+const mockShowModal = jest.mocked(showModal);
 
 jest.mock('../helpers', () => ({
   convertToCurrency: jest.fn((price) => `USD ${price}`),
 }));
 
 describe('InvoiceTable', () => {
-  beforeEach(() => {
-    mockUseConfig.mockReturnValue({
-      ...getDefaultsFromConfigSchema(configSchema),
-      defaultCurrency: 'USD',
-    });
-  });
-
-  const bill: MappedBill = {
+  const defaultBill: MappedBill = {
     uuid: 'bill-uuid',
     id: 123,
     patientUuid: 'patient-uuid',
@@ -75,50 +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('should display payment status for each line item', () => {
+    render(<InvoiceTable bill={defaultBill} />);
+
+    expect(screen.getByText('PAID')).toBeInTheDocument();
+    expect(screen.getByText('PENDING')).toBeInTheDocument();
   });
 
-  it('renders the edit button and calls showModal when clicked', async () => {
+  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={bill} />);
+    render(<InvoiceTable bill={defaultBill} />);
 
     const editButton = screen.getByTestId('edit-button-1');
     await user.click(editButton);
-    expect(showModal).toHaveBeenCalledWith('edit-bill-line-item-dialog', expect.anything());
+
+    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', async () => {
+  it('should show all items when search is cleared', async () => {
     const user = userEvent.setup();
-    render(<InvoiceTable bill={bill} />);
+    render(<InvoiceTable bill={defaultBill} />);
+
     const searchInput = screen.getByPlaceholderText(/search this table/i);
 
-    await user.type(searchInput, 'Item 2');
+    // Search for Item 1
+    await user.type(searchInput, 'Item 1');
 
-    expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
-    expect(screen.getByText('Item 2')).toBeInTheDocument();
+    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('should display empty state when no line items exist', () => {
+    const emptyBill: MappedBill = {
+      ...defaultBill,
+      lineItems: [],
+    };
+
+    render(<InvoiceTable bill={emptyBill} />);
+
+    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', async () => {
+  it('should show empty state when search has no results', async () => {
     const user = userEvent.setup();
-    render(<InvoiceTable bill={bill} />);
+    render(<InvoiceTable bill={defaultBill} />);
 
-    const button = screen.getByTestId('edit-button-1');
-    await user.click(button);
-    act(() => {
-      jest.advanceTimersByTime(1000);
+    const searchInput = screen.getByPlaceholderText(/search this table/i);
+    await user.type(searchInput, 'NonexistentItem');
+
+    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: '',
+        },
+      ],
+    };
 
-    expect(button).not.toBeDisabled();
+    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} />);
+
+    const searchInput = screen.getByPlaceholderText(/search this table/i);
+    expect(searchInput).toBeInTheDocument();
+    expect(searchInput).toBeVisible();
   });
 });