@openmrs/esm-billing-app 1.0.2-pre.1069 → 1.0.2-pre.1075

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"}},{"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"}},{"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"},{"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":"billable-services-left-panel-link","component":"billableServicesLeftPanelLink","slot":"billable-services-left-panel-slot","order":0},{"name":"bill-waiver-left-panel-link","component":"billWaiverLeftPanelLink","slot":"billable-services-left-panel-slot","order":1},{"name":"billing-settings-left-panel-menu","component":"billingSettingsLeftPanelMenu","slot":"billable-services-left-panel-slot","order":2}],"modals":[{"name":"add-cash-point-modal","component":"addCashPointModal"},{"name":"payment-mode-form-modal","component":"paymentModeFormModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"edit-bill-item-modal","component":"editBillLineItemModal"},{"name":"edit-bill-line-item-modal","component":"editBillLineItemModal"},{"name":"require-billing-modal","component":"requirePaymentModal"}],"workspaces":[{"name":"billing-form-workspace","title":"billingForm","component":"billingFormWorkspace","type":"form"},{"name":"billable-service-form","title":"billableServiceForm","component":"billableServiceFormWorkspace","type":"form","width":"wider"}],"version":"1.0.2-pre.1069"}
+{"$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"}},{"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"}},{"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"},{"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":"billable-services-left-panel-link","component":"billableServicesLeftPanelLink","slot":"billable-services-left-panel-slot","order":0},{"name":"bill-waiver-left-panel-link","component":"billWaiverLeftPanelLink","slot":"billable-services-left-panel-slot","order":1},{"name":"billing-settings-left-panel-menu","component":"billingSettingsLeftPanelMenu","slot":"billable-services-left-panel-slot","order":2}],"modals":[{"name":"add-cash-point-modal","component":"addCashPointModal"},{"name":"payment-mode-form-modal","component":"paymentModeFormModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"edit-bill-item-modal","component":"editBillLineItemModal"},{"name":"edit-bill-line-item-modal","component":"editBillLineItemModal"},{"name":"require-billing-modal","component":"requirePaymentModal"}],"workspaces":[{"name":"billing-form-workspace","title":"billingForm","component":"billingFormWorkspace","type":"form"},{"name":"billable-service-form","title":"billableServiceForm","component":"billableServiceFormWorkspace","type":"form","width":"wider"}],"version":"1.0.2-pre.1075"}

package/e2e/pages/billing-dashboard-page.ts

@@ -0,0 +1,84 @@
+import { type Page, expect } from '@playwright/test';
+
+export class BillingDashboardPage {
+  constructor(readonly page: Page) {}
+
+  readonly billsTable = () => this.page.getByRole('table').first();
+  readonly filterDropdown = () => this.page.getByRole('combobox', { name: /filter by/i });
+  readonly searchInput = () => this.page.getByPlaceholder(/filter table/i);
+  readonly billListHeading = () => this.page.getByRole('heading', { name: /bill list/i });
+
+  async goto() {
+    await this.page.goto('home/billing');
+  }
+
+  async waitForBillsTableToLoad() {
+    await this.billsTable().waitFor({ state: 'visible' });
+    try {
+      await this.page.waitForResponse(
+        (response) => response.url().includes('billing/bill') && response.status() === 200,
+        { timeout: 10000 },
+      );
+    } catch {
+      // If bills already loaded or request times out, continue
+    }
+  }
+
+  async selectFilter(filterText: 'All bills' | 'Pending bills' | 'Paid bills') {
+    await this.filterDropdown().click();
+    await this.page.getByRole('option', { name: filterText }).click();
+  }
+
+  async searchBills(searchTerm: string) {
+    await this.searchInput().fill(searchTerm);
+  }
+
+  async getBillsCount() {
+    const rows = await this.billsTable().locator('tbody tr').all();
+    return rows.length;
+  }
+
+  async getBillRowByPatientName(patientName: string) {
+    return this.billsTable().locator('tbody tr').filter({ hasText: patientName });
+  }
+
+  async clickPatientNameLink(patientName: string) {
+    const patientLink = this.billsTable().getByRole('link', { name: new RegExp(patientName, 'i') });
+    await patientLink.click();
+  }
+
+  async verifyBillInTable(patientName: string, shouldBeVisible: boolean = true) {
+    const billRow = await this.getBillRowByPatientName(patientName);
+    if (shouldBeVisible) {
+      await expect(billRow).toBeVisible();
+    } else {
+      await expect(billRow).toBeHidden();
+    }
+  }
+
+  async getBillsInTable() {
+    const rows = await this.billsTable().locator('tbody tr').all();
+    const bills = [];
+
+    const headers = await this.billsTable().locator('thead th').allTextContents();
+    const visitTimeIndex = headers.findIndex((h) => h.includes('Visit time') || h.includes('visitTime'));
+    const identifierIndex = headers.findIndex((h) => h.includes('Identifier') || h.includes('identifier'));
+    const nameIndex = headers.findIndex((h) => h.includes('Name') || h.includes('name'));
+    const billedItemsIndex = headers.findIndex((h) => h.includes('Billed Items') || h.includes('billedItems'));
+
+    for (const row of rows) {
+      const cells = await row.locator('td').allTextContents();
+      bills.push({
+        visitTime: cells[visitTimeIndex],
+        identifier: cells[identifierIndex],
+        patientName: cells[nameIndex],
+        billedItems: cells[billedItemsIndex],
+      });
+    }
+    return bills;
+  }
+
+  async verifyNoMatchingBillsMessage() {
+    await expect(this.page.getByText(/no matching bills to display/i)).toBeVisible();
+  }
+}

package/e2e/pages/billing-form-page.ts

@@ -1,4 +1,5 @@
-import { type Page } from '@playwright/test';
+import { expect, type Page } from '@playwright/test';
+import { extractNumericValue } from '../commands';
 
 export class BillingFormPage {
   constructor(readonly page: Page) {}
@@ -14,7 +15,6 @@ export class BillingFormPage {
 
   async openBillingForm(patientUuid: string) {
     await this.page.goto(`patient/${patientUuid}/chart`);
-    // The billing form opens as a workspace
     await this.page.getByRole('button', { name: /add bill/i }).click();
   }
 
@@ -24,6 +24,34 @@ export class BillingFormPage {
     await this.page.getByRole('option', { name: new RegExp(serviceName, 'i') }).click();
   }
 
+  async clearBillableServiceCombobox() {
+    const combobox = this.billableServicesCombobox();
+    // Carbon ComboBox has a clear button (X icon) - try to find it
+    // The button is typically inside the combobox container
+    const comboboxContainer = combobox.locator('..');
+    const clearButton = comboboxContainer
+      .getByRole('button', { name: /clear|close/i })
+      .or(comboboxContainer.locator('button[aria-label*="clear" i]'));
+
+    const isClearButtonVisible = await clearButton.isVisible().catch(() => false);
+
+    if (isClearButtonVisible) {
+      await clearButton.click();
+      await expect
+        .poll(async () => {
+          const value = await combobox.inputValue();
+          return value === '';
+        })
+        .toBe(true);
+    } else {
+      // Fallback: clear the input field directly by selecting all and deleting
+      await combobox.click();
+      await combobox.selectText();
+      await combobox.press('Backspace');
+      await combobox.press('Escape');
+    }
+  }
+
   async updateQuantity(itemUuid: string, quantity: number) {
     const input = this.quantityInput(itemUuid);
     await input.clear();
@@ -66,13 +94,21 @@ export class BillingFormPage {
   }
 
   async selectPaymentMethodIfVisible(paymentMethodName: string = 'Cash') {
-    // Find any visible payment method dropdown by its placeholder text
     const dropdown = this.page.getByPlaceholder('Select payment method').first();
     const isVisible = await dropdown.isVisible().catch(() => false);
 
     if (isVisible) {
       await dropdown.click();
-      await this.page.getByRole('option', { name: new RegExp(paymentMethodName, 'i') }).click();
+      await this.page
+        .getByRole('option', { name: new RegExp(paymentMethodName, 'i') })
+        .first()
+        .click();
     }
   }
+
+  async verifyGrandTotal(expectedTotal: number) {
+    const grandTotal = await this.getGrandTotal();
+    const grandTotalValue = extractNumericValue(grandTotal || '');
+    expect(grandTotalValue).toBeCloseTo(expectedTotal, 2);
+  }
 }

package/e2e/pages/index.ts

@@ -1,3 +1,4 @@
+export * from './billing-dashboard-page';
 export * from './billing-form-page';
 export * from './invoice-page';
 export * from './payment-page';

package/e2e/pages/invoice-page.ts

@@ -8,6 +8,7 @@ export class InvoicePage {
   readonly amountTenderedLabel = () => this.page.getByText(/amount tendered/i);
   readonly amountDueLabel = () => this.page.getByText(/amount due/i);
   readonly invoiceStatusLabel = () => this.page.getByText(/invoice status/i);
+  readonly dateAndTimeLabel = () => this.page.getByText(/date and time/i);
   readonly printBillButton = () => this.page.getByRole('button', { name: /print bill/i });
   readonly printReceiptButton = () => this.page.getByRole('button', { name: /print receipt/i });
   readonly invoiceTable = () => this.page.getByRole('table').first();
@@ -64,16 +65,23 @@ export class InvoicePage {
     return value?.trim();
   }
 
+  async getDateAndTime() {
+    const parent = this.dateAndTimeLabel().locator('..');
+    const value = await parent.locator('[class*="value"]').textContent();
+    return value?.trim();
+  }
+
   async getLineItems() {
     const rows = await this.invoiceTable().locator('tbody tr').all();
     const items = [];
 
-    // Get header indices dynamically
     const headers = await this.invoiceTable().locator('thead th').allTextContents();
     const itemIndex = headers.findIndex((h) => h.includes('Bill item'));
     const quantityIndex = headers.findIndex((h) => h.includes('Quantity'));
     const priceIndex = headers.findIndex((h) => h.includes('Price'));
     const totalIndex = headers.findIndex((h) => h.includes('Total'));
+    // Look for "Status" column (case-insensitive, handles "Status" or "Service status")
+    const statusIndex = headers.findIndex((h) => h.toLowerCase().includes('status'));
 
     for (const row of rows) {
       const cells = await row.locator('td').allTextContents();
@@ -82,6 +90,7 @@ export class InvoicePage {
         quantity: cells[quantityIndex],
         price: cells[priceIndex],
         total: cells[totalIndex],
+        status: statusIndex >= 0 && cells[statusIndex] ? cells[statusIndex].trim() : undefined,
       });
     }
     return items;

package/e2e/pages/payment-page.ts

@@ -1,4 +1,4 @@
-import { type Page } from '@playwright/test';
+import { expect, type Page } from '@playwright/test';
 
 export class PaymentPage {
   constructor(readonly page: Page) {}
@@ -10,6 +10,7 @@ export class PaymentPage {
   readonly processPaymentButton = () => this.page.getByRole('button', { name: /process payment/i });
   readonly paymentHistorySection = () =>
     this.page.getByRole('table').filter({ has: this.page.getByText('Date of payment') });
+  readonly addPaymentMethodButton = () => this.page.getByRole('button', { name: /add payment method/i });
   readonly removePaymentButton = () => this.page.getByRole('button', { name: /remove/i });
 
   async waitForPaymentForm() {
@@ -20,23 +21,46 @@ export class PaymentPage {
   }
 
   async addPayment(paymentMethod: string, amount: number, referenceCode?: string) {
-    // waitForPaymentForm() should be called before this to ensure the form is ready
-    // Select payment method
     await this.paymentMethodCombobox().click();
     await this.page.getByRole('option', { name: new RegExp(paymentMethod, 'i') }).click();
 
-    // Enter amount
     await this.amountInput().fill(amount.toString());
 
-    // Enter reference code if provided
     if (referenceCode) {
       await this.referenceCodeInput().fill(referenceCode);
     }
   }
 
   async addMultiplePayments(payments: Array<{ method: string; amount: number; referenceCode?: string }>) {
-    for (const payment of payments) {
-      await this.addPayment(payment.method, payment.amount, payment.referenceCode);
+    const addButton = this.addPaymentMethodButton();
+    const isAddButtonVisible = await addButton.isVisible().catch(() => false);
+    const existingRows = await this.page.locator('[class*="paymentMethodContainer"]').count();
+
+    if (isAddButtonVisible && payments.length > existingRows) {
+      const rowsToAdd = payments.length - existingRows;
+      for (let i = 0; i < rowsToAdd; i++) {
+        await addButton.click();
+        const expectedRowCount = existingRows + i + 1;
+        await expect(this.page.locator('[class*="paymentMethodContainer"]')).toHaveCount(expectedRowCount);
+      }
+    }
+
+    const paymentRows = await this.page.locator('[class*="paymentMethodContainer"]').all();
+
+    for (let i = 0; i < payments.length && i < paymentRows.length; i++) {
+      const row = paymentRows[i];
+
+      const methodDropdown = row.getByRole('combobox', { name: /payment method/i });
+      await methodDropdown.click();
+      await this.page.getByRole('option', { name: new RegExp(payments[i].method, 'i') }).click();
+
+      const amountInput = row.getByLabel(/amount/i);
+      await amountInput.fill(payments[i].amount.toString());
+
+      if (payments[i].referenceCode) {
+        const refInput = row.getByLabel(/reference number/i);
+        await refInput.fill(payments[i].referenceCode);
+      }
     }
   }
 
@@ -44,6 +68,10 @@ export class PaymentPage {
     await this.processPaymentButton().click();
   }
 
+  async isProcessPaymentButtonEnabled() {
+    return await this.processPaymentButton().isEnabled();
+  }
+
   async removePayment(index = 0) {
     const removeButtons = await this.removePaymentButton().all();
     await removeButtons[index].click();

package/e2e/specs/billing-dashboard.spec.ts

@@ -0,0 +1,203 @@
+import { expect } from '@playwright/test';
+import { test } from '../core/test';
+import { deleteBill, extractNumericValue, ensureServiceHasPrices, waitForSuccessNotification } from '../commands';
+import { BillingDashboardPage, BillingFormPage, InvoicePage, PaymentPage } from '../pages';
+
+test.describe('Billing Dashboard workflow', () => {
+  // Run tests serially to avoid race conditions when setting up service prices
+  test.describe.configure({ mode: 'serial' });
+
+  let testServiceName: string;
+  let expectedServicePrice: number;
+  const billsToCleanup = new Set<string>();
+
+  test.beforeAll(async ({ api }) => {
+    const serviceUuid = process.env.E2E_TEST_SERVICE_UUID;
+    if (!serviceUuid) {
+      throw new Error('E2E_TEST_SERVICE_UUID must be configured in .env file');
+    }
+
+    // Ensure the test service has prices configured (required for billing tests)
+    // If prices already exist, this will skip; otherwise it adds a default Cash price of 30.00
+    const service = await ensureServiceHasPrices(api, serviceUuid, 30.0);
+
+    testServiceName = service.name;
+
+    const cashPrice = service.servicePrices.find((sp) => sp.name === 'Cash');
+    if (!cashPrice) {
+      throw new Error('Cash price not found for test service');
+    }
+    expectedServicePrice = parseFloat(cashPrice.price);
+  });
+
+  test.afterEach(async ({ api }) => {
+    // Cleanup: delete all bills created during tests
+    for (const billUuid of billsToCleanup) {
+      try {
+        await deleteBill(api, billUuid);
+      } catch (error) {
+        // Log but don't fail test if cleanup fails
+        console.error(`Failed to delete bill ${billUuid}:`, error);
+      }
+    }
+    billsToCleanup.clear();
+  });
+
+  test('Process payment from dashboard and verify bill moves from pending to paid bills', async ({
+    page,
+    api,
+    patient,
+  }) => {
+    const billingDashboardPage = new BillingDashboardPage(page);
+    const billingFormPage = new BillingFormPage(page);
+    const invoicePage = new InvoicePage(page);
+    const paymentPage = new PaymentPage(page);
+    const patientUuid = patient.uuid;
+    const patientName = patient.person.display;
+    let billUuid: string;
+
+    await test.step('Given I have created and saved a bill', async () => {
+      await page.goto(`patient/${patientUuid}/chart/Billing history`);
+
+      const createBillButton = page.getByRole('button', { name: /launch bill form|add bill/i });
+      await createBillButton.click();
+
+      await billingFormPage.searchAndSelectBillableService(testServiceName);
+      await billingFormPage.selectPaymentMethodIfVisible();
+      await billingFormPage.saveBill();
+      await waitForSuccessNotification(page, 'Bill processed successfully');
+
+      const billsResponse = await api.get(`billing/bill?patient=${patientUuid}&v=full`);
+      const billsData = await billsResponse.json();
+      billUuid = billsData.results[0].uuid;
+      billsToCleanup.add(billUuid);
+    });
+
+    await test.step('When I navigate to the Billing dashboard', async () => {
+      await billingDashboardPage.goto();
+      await billingDashboardPage.waitForBillsTableToLoad();
+    });
+
+    await test.step('Then the Bill List should display pending bills', async () => {
+      await expect(billingDashboardPage.filterDropdown()).toBeVisible();
+
+      await billingDashboardPage.verifyBillInTable(patientName, true);
+    });
+
+    await test.step('When I click on a patient name in the Bill List', async () => {
+      await billingDashboardPage.clickPatientNameLink(patientName);
+      await invoicePage.waitForInvoiceToLoad();
+    });
+
+    await test.step("Then the patient's bill details page should open", async () => {
+      const totalAmount = await invoicePage.getTotalAmount();
+      expect(totalAmount).toBeTruthy();
+      const totalValue = extractNumericValue(totalAmount);
+      expect(totalValue).toBeCloseTo(expectedServicePrice, 2);
+
+      const amountTendered = await invoicePage.getAmountTendered();
+      expect(amountTendered).toBeTruthy();
+      const tenderedValue = extractNumericValue(amountTendered);
+      expect(tenderedValue).toBe(0);
+
+      const receiptNumber = await invoicePage.getInvoiceNumber();
+      expect(receiptNumber).toBeTruthy();
+      await expect(invoicePage.invoiceNumberLabel()).toBeVisible();
+
+      const dateAndTime = await invoicePage.getDateAndTime();
+      expect(dateAndTime).toBeTruthy();
+
+      const invoiceStatus = await invoicePage.getInvoiceStatus();
+      expect(invoiceStatus).toBe('PENDING');
+    });
+
+    await test.step('And the Payments section should be displayed', async () => {
+      await paymentPage.waitForPaymentForm();
+
+      await expect(paymentPage.paymentMethodCombobox()).toBeVisible();
+      await expect(paymentPage.amountInput()).toBeVisible();
+      await expect(paymentPage.referenceCodeInput()).toBeVisible();
+    });
+
+    await test.step('When I select a payment method and enter an amount matching the bill total', async () => {
+      const amountDue = await invoicePage.getAmountDue();
+      const amountDueValue = extractNumericValue(amountDue);
+
+      await paymentPage.addPayment('Cash', amountDueValue);
+      await expect(paymentPage.amountInput()).toHaveValue(amountDueValue.toString());
+
+      const isEnabled = await paymentPage.isProcessPaymentButtonEnabled();
+      expect(isEnabled).toBe(true);
+    });
+
+    await test.step('When I click "Process Payment"', async () => {
+      await paymentPage.processPayment();
+      await waitForSuccessNotification(page, 'Payment processed successfully');
+    });
+
+    await test.step('Then the invoice status should update to PAID', async () => {
+      await page.reload();
+      await invoicePage.waitForInvoiceToLoad();
+
+      const updatedStatus = await invoicePage.getInvoiceStatus();
+      expect(updatedStatus).toBe('PAID');
+
+      const billResponse = await api.get(`billing/bill/${billUuid}`);
+      const billData = await billResponse.json();
+      expect(billData.status).toBe('PAID');
+    });
+
+    await test.step('And the Amount Tendered should update to reflect the payment', async () => {
+      const totalAmount = await invoicePage.getTotalAmount();
+      const updatedAmountTendered = await invoicePage.getAmountTendered();
+      expect(updatedAmountTendered).toEqual(totalAmount);
+
+      const updatedAmountDue = await invoicePage.getAmountDue();
+      expect(extractNumericValue(updatedAmountDue)).toBe(0);
+    });
+
+    await test.step('And the Service status in the Line items table should change to PAID', async () => {
+      const lineItems = await invoicePage.getLineItems();
+      expect(lineItems.length).toBeGreaterThan(0);
+      lineItems.forEach((lineItem) => {
+        expect(lineItem.status).toBe('PAID');
+      });
+
+      // Also verify backend line items have paymentStatus set to PAID
+      const billResponse = await api.get(`billing/bill/${billUuid}`);
+      const billData = await billResponse.json();
+      billData.lineItems.forEach((lineItem: { paymentStatus: string }) => {
+        expect(lineItem.paymentStatus).toBe('PAID');
+      });
+    });
+
+    await test.step('And the Payments section should display a payment record', async () => {
+      const paymentHistory = await paymentPage.getPaymentHistory();
+      expect(paymentHistory.length).toBeGreaterThan(0);
+
+      const payment = paymentHistory[0];
+      expect(payment.date).toBeTruthy();
+      expect(payment.billAmount).toBeTruthy();
+      expect(payment.amountTendered).toBeTruthy();
+      expect(payment.method).toContain('Cash');
+    });
+
+    await test.step('When I navigate back to the Billing dashboard landing page', async () => {
+      await billingDashboardPage.goto();
+      await billingDashboardPage.waitForBillsTableToLoad();
+    });
+
+    await test.step('Then the processed bill should no longer appear in the pending bills list', async () => {
+      await expect(billingDashboardPage.filterDropdown()).toBeVisible();
+
+      await billingDashboardPage.verifyBillInTable(patientName, false);
+    });
+
+    await test.step('And the bill should appear under Paid bills', async () => {
+      await billingDashboardPage.selectFilter('Paid bills');
+      await billingDashboardPage.waitForBillsTableToLoad();
+
+      await billingDashboardPage.verifyBillInTable(patientName, true);
+    });
+  });
+});

package/e2e/specs/{billing-and-payment-operations.spec.ts → billing-patient-chart.spec.ts}

@@ -3,16 +3,15 @@ import { test } from '../core/test';
 import { deleteBill, extractNumericValue, ensureServiceHasPrices, waitForSuccessNotification } from '../commands';
 import { BillingFormPage, InvoicePage, PaymentPage } from '../pages';
 
-test.describe('Billing and payment operations', () => {
+test.describe('Billing: Patient Chart workflow', () => {
   // Run tests serially to avoid race conditions when setting up service prices
   test.describe.configure({ mode: 'serial' });
 
-  let billUuid: string;
   let testServiceName: string;
   let expectedServicePrice: number;
+  const billsToCleanup = new Set<string>();
 
   test.beforeAll(async ({ api }) => {
-    // Get the configured test service details
     const serviceUuid = process.env.E2E_TEST_SERVICE_UUID;
     if (!serviceUuid) {
       throw new Error('E2E_TEST_SERVICE_UUID must be configured in .env file');
@@ -24,7 +23,6 @@ test.describe('Billing and payment operations', () => {
 
     testServiceName = service.name;
 
-    // Extract the Cash price for use in assertions
     const cashPrice = service.servicePrices.find((sp) => sp.name === 'Cash');
     if (!cashPrice) {
       throw new Error('Cash price not found for test service');
@@ -33,9 +31,16 @@ test.describe('Billing and payment operations', () => {
   });
 
   test.afterEach(async ({ api }) => {
-    if (billUuid) {
-      await deleteBill(api, billUuid);
+    // Cleanup: delete all bills created during tests
+    for (const billUuid of billsToCleanup) {
+      try {
+        await deleteBill(api, billUuid);
+      } catch (error) {
+        // Log but don't fail test if cleanup fails
+        console.error(`Failed to delete bill ${billUuid}:`, error);
+      }
     }
+    billsToCleanup.clear();
   });
 
   test('Create bill, verify receipt number, and process full payment', async ({ page, api, patient }) => {
@@ -43,6 +48,7 @@ test.describe('Billing and payment operations', () => {
     const invoicePage = new InvoicePage(page);
     const paymentPage = new PaymentPage(page);
     const patientUuid = patient.uuid;
+    let billUuid: string;
 
     await test.step('When I navigate to the Billing history page', async () => {
       await page.goto(`patient/${patientUuid}/chart/Billing history`);
@@ -81,6 +87,7 @@ test.describe('Billing and payment operations', () => {
 
       const bill = billsData.results[0];
       billUuid = bill.uuid;
+      billsToCleanup.add(billUuid);
     });
 
     await test.step('When I navigate to the invoice page', async () => {
@@ -89,21 +96,17 @@ test.describe('Billing and payment operations', () => {
     });
 
     await test.step('Then I should see the invoice details with correct initial state', async () => {
-      // Verify status is PENDING
       const invoiceStatus = await invoicePage.getInvoiceStatus();
       expect(invoiceStatus).toBe('PENDING');
 
-      // Verify amounts are correct for new bill
       const totalAmount = await invoicePage.getTotalAmount();
       const amountDue = await invoicePage.getAmountDue();
       expect(totalAmount).toBeTruthy();
       expect(amountDue).toEqual(totalAmount);
 
-      // Verify bill total matches the expected service price
       const totalValue = extractNumericValue(totalAmount);
       expect(totalValue).toBeCloseTo(expectedServicePrice, 2);
 
-      // Verify invoice number is displayed
       const receiptNumber = await invoicePage.getInvoiceNumber();
       expect(receiptNumber).toBeTruthy();
       await expect(invoicePage.invoiceNumberLabel()).toBeVisible();
@@ -123,11 +126,9 @@ test.describe('Billing and payment operations', () => {
       await page.reload();
       await invoicePage.waitForInvoiceToLoad();
 
-      // Verify UI shows PAID status
       const updatedStatus = await invoicePage.getInvoiceStatus();
       expect(updatedStatus).toBe('PAID');
 
-      // Verify backend also updated to PAID
       const billResponse = await api.get(`billing/bill/${billUuid}`);
       const billData = await billResponse.json();
       expect(billData.status).toBe('PAID');
@@ -151,6 +152,7 @@ test.describe('Billing and payment operations', () => {
     const billingFormPage = new BillingFormPage(page);
     const invoicePage = new InvoicePage(page);
     const patientUuid = patient.uuid;
+    let billUuid: string;
 
     await test.step('When I navigate to the patient billing history', async () => {
       await page.goto(`patient/${patientUuid}/chart/Billing history`);
@@ -166,7 +168,6 @@ test.describe('Billing and payment operations', () => {
       await expect(page.getByText(testServiceName, { exact: false })).toBeVisible();
       await billingFormPage.selectPaymentMethodIfVisible();
 
-      // Update quantity to 2
       const quantityInput = page.locator('input[type="number"]').first();
       await expect(quantityInput).toHaveValue('1');
 
@@ -183,6 +184,7 @@ test.describe('Billing and payment operations', () => {
       const billsResponse = await api.get(`billing/bill?patient=${patientUuid}&v=full`);
       const billsData = await billsResponse.json();
       billUuid = billsData.results[0].uuid;
+      billsToCleanup.add(billUuid);
 
       await invoicePage.goto(patientUuid, billUuid);
       await invoicePage.waitForInvoiceToLoad();
@@ -191,7 +193,6 @@ test.describe('Billing and payment operations', () => {
       expect(lineItems.length).toBe(1);
       expect(lineItems[0].quantity).toBe('2');
 
-      // Verify total amount is quantity * unit price
       const totalAmount = await invoicePage.getTotalAmount();
       const totalValue = extractNumericValue(totalAmount);
       expect(totalValue).toBeCloseTo(expectedServicePrice * 2, 2);
@@ -226,7 +227,6 @@ test.describe('Billing and payment operations', () => {
 
     await test.step('When I discard the bill', async () => {
       await billingFormPage.discardBill();
-      // Wait for the form to close by checking the discard button is hidden
       await expect(billingFormPage.discardButton()).toBeHidden();
     });
 
@@ -234,7 +234,6 @@ test.describe('Billing and payment operations', () => {
       const billsResponse = await api.get(`billing/bill?patient=${patientUuid}&v=full`);
       expect(billsResponse.ok()).toBeTruthy();
       const billsData = await billsResponse.json();
-      // Bill count should remain the same (no new bill created)
       expect(billsData.results.length).toBe(initialBillCount);
     });
   });
@@ -259,7 +258,6 @@ test.describe('Billing and payment operations', () => {
     });
 
     await test.step('Then I should see one line item', async () => {
-      // Wait for the item card to be visible (indicates item is rendered)
       await expect(billingFormPage.selectedItemCards().first()).toBeVisible();
       const itemCount = await billingFormPage.getLineItemsCount();
       expect(itemCount).toBe(1);
@@ -269,7 +267,6 @@ test.describe('Billing and payment operations', () => {
     await test.step('When I remove the line item', async () => {
       await billingFormPage.removeItem(0);
 
-      // Wait for the item count to decrease to 0
       await expect.poll(async () => await billingFormPage.getLineItemsCount()).toBe(0);
     });
 
@@ -288,6 +285,7 @@ test.describe('Billing and payment operations', () => {
     const invoicePage = new InvoicePage(page);
     const paymentPage = new PaymentPage(page);
     const patientUuid = patient.uuid;
+    let billUuid: string;
     let partialAmount: number;
 
     await test.step('Given I have created and saved a bill', async () => {
@@ -304,6 +302,7 @@ test.describe('Billing and payment operations', () => {
       const billsResponse = await api.get(`billing/bill?patient=${patientUuid}&v=full`);
       const billsData = await billsResponse.json();
       billUuid = billsData.results[0].uuid;
+      billsToCleanup.add(billUuid);
     });
 
     await test.step('When I navigate to the invoice page', async () => {
@@ -322,13 +321,11 @@ test.describe('Billing and payment operations', () => {
 
       await paymentPage.addPayment('Cash', partialAmount);
 
-      // Verify amount entered correctly
       await expect(paymentPage.amountInput()).toHaveValue(partialAmount.toString());
 
       await paymentPage.processPayment();
       await waitForSuccessNotification(page, 'Payment processed successfully');
 
-      // Verify payment was actually recorded
       await expect
         .poll(async () => {
           const history = await paymentPage.getPaymentHistory();
@@ -356,7 +353,6 @@ test.describe('Billing and payment operations', () => {
       const amountDue = await invoicePage.getAmountDue();
       const amountDueValue = extractNumericValue(amountDue);
 
-      // Verify amount due = total - tendered
       expect(amountDueValue).toBeCloseTo(totalValue - partialAmount, 2);
     });
 
@@ -375,11 +371,9 @@ test.describe('Billing and payment operations', () => {
       await page.reload();
       await invoicePage.waitForInvoiceToLoad();
 
-      // Verify UI shows PAID status
       const status = await invoicePage.getInvoiceStatus();
       expect(status).toBe('PAID');
 
-      // Verify backend also updated to PAID
       const billResponse = await api.get(`billing/bill/${billUuid}`);
       const billData = await billResponse.json();
       expect(billData.status).toBe('PAID');
@@ -390,7 +384,6 @@ test.describe('Billing and payment operations', () => {
       const amountDueValue = extractNumericValue(amountDue);
       expect(amountDueValue).toBe(0);
 
-      // Verify total amount equals tendered amount
       const totalAmount = await invoicePage.getTotalAmount();
       const totalValue = extractNumericValue(totalAmount);
       const tenderedAmount = await invoicePage.getAmountTendered();
@@ -398,4 +391,348 @@ test.describe('Billing and payment operations', () => {
       expect(tenderedValue).toBeCloseTo(totalValue, 2);
     });
   });
+
+  test('Create bill with increased service quantity and verify totals', async ({ page, api, patient }) => {
+    const billingFormPage = new BillingFormPage(page);
+    const invoicePage = new InvoicePage(page);
+    const paymentPage = new PaymentPage(page);
+    const patientUuid = patient.uuid;
+    let billUuid: string;
+
+    // Note: Selecting the same service multiple times increments quantity (doesn't create multiple line items)
+    // This test verifies quantity increment and total calculation
+    const quantity = 3;
+    const expectedTotal = expectedServicePrice * quantity;
+
+    await test.step('When I navigate to the Billing history page', async () => {
+      await page.goto(`patient/${patientUuid}/chart/Billing history`);
+    });
+
+    await test.step('And I launch the Create Bill form', async () => {
+      const createBillButton = page.getByRole('button', { name: /launch bill form|add bill/i });
+      await createBillButton.click();
+    });
+
+    await test.step('And I add the same service multiple times to increment quantity', async () => {
+      await billingFormPage.searchAndSelectBillableService(testServiceName);
+      await billingFormPage.selectPaymentMethodIfVisible();
+      await expect(page.getByText(testServiceName, { exact: false })).toBeVisible();
+
+      const quantityInput = page.locator('input[type="number"]').first();
+      await expect(quantityInput).toHaveValue('1');
+
+      for (let i = 1; i < quantity; i++) {
+        await billingFormPage.clearBillableServiceCombobox();
+        await billingFormPage.searchAndSelectBillableService(testServiceName);
+        await expect
+          .poll(
+            async () => {
+              const value = await quantityInput.inputValue();
+              return value;
+            },
+            { timeout: 5000 },
+          )
+          .toBe((i + 1).toString());
+      }
+
+      await expect(quantityInput).toHaveValue(quantity.toString());
+    });
+
+    await test.step('Then the grand total should equal price times quantity', async () => {
+      await billingFormPage.verifyGrandTotal(expectedTotal);
+    });
+
+    await test.step('When I save the bill', async () => {
+      await billingFormPage.saveBill();
+      await waitForSuccessNotification(page, 'Bill processed successfully');
+    });
+
+    await test.step('Then the bill should be created with correct line item', async () => {
+      const billsResponse = await api.get(`billing/bill?patient=${patientUuid}&v=full`);
+      expect(billsResponse.ok()).toBeTruthy();
+      const billsData = await billsResponse.json();
+      expect(billsData.results.length).toBeGreaterThan(0);
+
+      const bill = billsData.results[0];
+      billUuid = bill.uuid;
+      billsToCleanup.add(billUuid);
+
+      expect(bill.lineItems.length).toBe(1);
+      const lineItem = bill.lineItems[0];
+      expect(lineItem.billableService).toBeTruthy();
+      expect(lineItem.quantity).toBe(quantity);
+      expect(lineItem.price).toBeCloseTo(expectedServicePrice, 2);
+
+      const backendTotal = bill.lineItems.reduce(
+        (sum: number, item: { price: number; quantity: number }) => sum + item.price * item.quantity,
+        0,
+      );
+      expect(backendTotal).toBeCloseTo(expectedTotal, 2);
+    });
+
+    await test.step('When I navigate to the invoice page', async () => {
+      await invoicePage.goto(patientUuid, billUuid);
+      await invoicePage.waitForInvoiceToLoad();
+    });
+
+    await test.step('Then the invoice should display the line item correctly', async () => {
+      const lineItems = await invoicePage.getLineItems();
+      expect(lineItems.length).toBe(1);
+      expect(lineItems[0].quantity).toBe(quantity.toString());
+    });
+
+    await test.step('And the total amount should match the calculated total', async () => {
+      const totalAmount = await invoicePage.getTotalAmount();
+      const totalValue = extractNumericValue(totalAmount);
+      expect(totalValue).toBeCloseTo(expectedTotal, 2);
+
+      const billResponse = await api.get(`billing/bill/${billUuid}?v=full`);
+      const billData = await billResponse.json();
+      const backendTotal = billData.lineItems.reduce(
+        (sum: number, item: { price: number; quantity: number }) => sum + item.price * item.quantity,
+        0,
+      );
+      expect(backendTotal).toBeCloseTo(totalValue, 2);
+    });
+
+    await test.step('When I process payment for the full amount', async () => {
+      await paymentPage.waitForPaymentForm();
+      const amountDue = await invoicePage.getAmountDue();
+      const amountDueValue = extractNumericValue(amountDue);
+
+      await paymentPage.addPayment('Cash', amountDueValue);
+      await paymentPage.processPayment();
+      await waitForSuccessNotification(page, 'Payment processed successfully');
+    });
+
+    await test.step('Then the line item should be marked as PAID', async () => {
+      await page.reload();
+      await invoicePage.waitForInvoiceToLoad();
+
+      const lineItems = await invoicePage.getLineItems();
+      lineItems.forEach((lineItem) => {
+        expect(lineItem.status).toBe('PAID');
+      });
+
+      // Verify backend state
+      const billResponse = await api.get(`billing/bill/${billUuid}?v=full`);
+      const billData = await billResponse.json();
+      billData.lineItems.forEach((lineItem: { paymentStatus: string }) => {
+        expect(lineItem.paymentStatus).toBe('PAID');
+      });
+    });
+  });
+
+  test('Process payment with multiple payment methods', async ({ page, api, patient }) => {
+    const billingFormPage = new BillingFormPage(page);
+    const invoicePage = new InvoicePage(page);
+    const paymentPage = new PaymentPage(page);
+    const patientUuid = patient.uuid;
+    let billUuid: string;
+
+    await test.step('Given I have created a bill', async () => {
+      await page.goto(`patient/${patientUuid}/chart/Billing history`);
+
+      const createBillButton = page.getByRole('button', { name: /launch bill form|add bill/i });
+      await createBillButton.click();
+
+      await billingFormPage.searchAndSelectBillableService(testServiceName);
+      await billingFormPage.selectPaymentMethodIfVisible();
+      await billingFormPage.saveBill();
+      await waitForSuccessNotification(page, 'Bill processed successfully');
+
+      const billsResponse = await api.get(`billing/bill?patient=${patientUuid}&v=full`);
+      const billsData = await billsResponse.json();
+      billUuid = billsData.results[0].uuid;
+      billsToCleanup.add(billUuid);
+    });
+
+    await test.step('When I navigate to the invoice page', async () => {
+      await invoicePage.goto(patientUuid, billUuid);
+      await invoicePage.waitForInvoiceToLoad();
+    });
+
+    await test.step('And I add multiple payment methods', async () => {
+      await paymentPage.waitForPaymentForm();
+
+      const amountDue = await invoicePage.getAmountDue();
+      const amountDueValue = extractNumericValue(amountDue);
+
+      // Split payment: 60% Cash, 40% Cash (using same method for simplicity)
+      // In real scenario, would use different payment methods like Mobile Money
+      const cashAmount1 = Math.round(amountDueValue * 0.6 * 100) / 100;
+      const cashAmount2 = amountDueValue - cashAmount1;
+
+      await paymentPage.addMultiplePayments([
+        { method: 'Cash', amount: cashAmount1 },
+        { method: 'Cash', amount: cashAmount2 },
+      ]);
+    });
+
+    await test.step('When I process the payment', async () => {
+      await paymentPage.processPayment();
+      await waitForSuccessNotification(page, 'Payment processed successfully');
+    });
+
+    await test.step('Then the bill should be marked as PAID', async () => {
+      await page.reload();
+      await invoicePage.waitForInvoiceToLoad();
+
+      const status = await invoicePage.getInvoiceStatus();
+      expect(status).toBe('PAID');
+
+      const billResponse = await api.get(`billing/bill/${billUuid}`);
+      const billData = await billResponse.json();
+      expect(billData.status).toBe('PAID');
+    });
+
+    await test.step('And the payment history should show multiple payments', async () => {
+      const paymentHistory = await paymentPage.getPaymentHistory();
+      expect(paymentHistory.length).toBeGreaterThanOrEqual(2);
+    });
+
+    await test.step('And the backend should store payment methods correctly', async () => {
+      const billResponse = await api.get(`billing/bill/${billUuid}?v=full`);
+      const billData = await billResponse.json();
+      const payments = billData.payments;
+
+      expect(payments.length).toBeGreaterThanOrEqual(2);
+
+      // Verify each payment has instanceType (payment method)
+      payments.forEach((payment: { instanceType: { name: string }; amountTendered: number }) => {
+        expect(payment.instanceType).toBeTruthy();
+        expect(payment.instanceType.name).toBeTruthy();
+        expect(payment.amountTendered).toBeGreaterThan(0);
+      });
+    });
+
+    await test.step('And the amount tendered should equal the total amount', async () => {
+      const totalAmount = await invoicePage.getTotalAmount();
+      const tenderedAmount = await invoicePage.getAmountTendered();
+
+      const totalValue = extractNumericValue(totalAmount);
+      const tenderedValue = extractNumericValue(tenderedAmount);
+
+      expect(tenderedValue).toBeCloseTo(totalValue, 2);
+
+      // Verify backend
+      const billResponse = await api.get(`billing/bill/${billUuid}`);
+      const billData = await billResponse.json();
+      const backendTendered = billData.payments.reduce(
+        (sum: number, p: { amountTendered: number }) => sum + p.amountTendered,
+        0,
+      );
+      expect(backendTendered).toBeCloseTo(totalValue, 2);
+    });
+  });
+
+  test('Create bill with quantity increase and process split payment', async ({ page, api, patient }) => {
+    const billingFormPage = new BillingFormPage(page);
+    const invoicePage = new InvoicePage(page);
+    const paymentPage = new PaymentPage(page);
+    const patientUuid = patient.uuid;
+    let billUuid: string;
+
+    // Note: Selecting same service twice increments quantity to 2
+    const quantity = 2;
+    const expectedTotal = expectedServicePrice * quantity;
+
+    await test.step('Given I create a bill with a service quantity of 2', async () => {
+      await page.goto(`patient/${patientUuid}/chart/Billing history`);
+
+      const createBillButton = page.getByRole('button', { name: /launch bill form|add bill/i });
+      await createBillButton.click();
+
+      await billingFormPage.searchAndSelectBillableService(testServiceName);
+      await billingFormPage.selectPaymentMethodIfVisible();
+      await expect(page.getByText(testServiceName, { exact: false })).toBeVisible();
+
+      await billingFormPage.clearBillableServiceCombobox();
+      await billingFormPage.searchAndSelectBillableService(testServiceName);
+
+      const quantityInput = page.locator('input[type="number"]').first();
+      await expect
+        .poll(
+          async () => {
+            const value = await quantityInput.inputValue();
+            return value;
+          },
+          { timeout: 5000 },
+        )
+        .toBe('2');
+
+      await billingFormPage.verifyGrandTotal(expectedTotal);
+      await billingFormPage.saveBill();
+      await waitForSuccessNotification(page, 'Bill processed successfully');
+
+      const billsResponse = await api.get(`billing/bill?patient=${patientUuid}&v=full`);
+      const billsData = await billsResponse.json();
+      billUuid = billsData.results[0].uuid;
+      billsToCleanup.add(billUuid);
+
+      const bill = billsData.results[0];
+      expect(bill.lineItems.length).toBe(1);
+      expect(bill.lineItems[0].quantity).toBe(quantity);
+    });
+
+    await test.step('When I navigate to the invoice page', async () => {
+      await invoicePage.goto(patientUuid, billUuid);
+      await invoicePage.waitForInvoiceToLoad();
+    });
+
+    await test.step('And I process payment with multiple payment methods', async () => {
+      await paymentPage.waitForPaymentForm();
+
+      const amountDue = await invoicePage.getAmountDue();
+      const amountDueValue = extractNumericValue(amountDue);
+
+      // Split payment: 50% + 50%
+      const payment1 = Math.round(amountDueValue * 0.5 * 100) / 100;
+      const payment2 = amountDueValue - payment1;
+
+      await paymentPage.addMultiplePayments([
+        { method: 'Cash', amount: payment1 },
+        { method: 'Cash', amount: payment2 },
+      ]);
+
+      await paymentPage.processPayment();
+      await waitForSuccessNotification(page, 'Payment processed successfully');
+    });
+
+    await test.step('Then the bill should be marked as PAID', async () => {
+      await page.reload();
+      await invoicePage.waitForInvoiceToLoad();
+
+      const status = await invoicePage.getInvoiceStatus();
+      expect(status).toBe('PAID');
+
+      const billResponse = await api.get(`billing/bill/${billUuid}`);
+      const billData = await billResponse.json();
+      expect(billData.status).toBe('PAID');
+    });
+
+    await test.step('And the line item should be marked as PAID', async () => {
+      const lineItems = await invoicePage.getLineItems();
+      lineItems.forEach((lineItem) => {
+        expect(lineItem.status).toBe('PAID');
+      });
+    });
+
+    await test.step('And the payment history should show multiple payments', async () => {
+      const paymentHistory = await paymentPage.getPaymentHistory();
+      expect(paymentHistory.length).toBeGreaterThanOrEqual(2);
+
+      // Verify backend payments
+      const billResponse = await api.get(`billing/bill/${billUuid}?v=full`);
+      const billData = await billResponse.json();
+      const payments = billData.payments;
+
+      expect(payments.length).toBeGreaterThanOrEqual(2);
+      payments.forEach((payment: { instanceType: { name: string }; amountTendered: number }) => {
+        expect(payment.instanceType).toBeTruthy();
+        expect(payment.instanceType.name).toBeTruthy();
+        expect(payment.amountTendered).toBeGreaterThan(0);
+      });
+    });
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-billing-app",
-  "version": "1.0.2-pre.1069",
+  "version": "1.0.2-pre.1075",
   "description": "O3 frontend module for handling billing concerns in healthcare settings",
   "browser": "dist/openmrs-esm-billing-app.js",
   "main": "src/index.ts",

package/playwright.config.ts

@@ -18,8 +18,8 @@ const config: PlaywrightTestConfig = {
     baseURL: `${process.env.E2E_BASE_URL}/spa/`,
     locale: 'en-US',
     storageState: 'e2e/storageState.json',
-    video: 'retain-on-failure',
     trace: 'retain-on-failure',
+    video: 'retain-on-failure',
   },
   projects: [
     {