@openmrs/esm-billing-app 1.0.2-pre.82 → 1.0.2-pre.820

package/src/bill-item-actions/edit-bill-item.test.tsx

@@ -1,22 +1,27 @@
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { showSnackbar } from '@openmrs/esm-framework';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
+import { type FetchResponse, showSnackbar } from '@openmrs/esm-framework';
 import { type MappedBill } from '../types';
 import { updateBillItems } from '../billing.resource';
-import ChangeStatus from './edit-bill-item.component';
+import EditBillLineItemModal from './edit-bill-item.modal';
+
+const mockUpdateBillItems = jest.mocked(updateBillItems);
+const mockShowSnackbar = jest.mocked(showSnackbar);
 
-// Mock external dependencies
 jest.mock('../billing.resource', () => ({
   updateBillItems: jest.fn(() => Promise.resolve({})),
 }));
 
-jest.mock('@openmrs/esm-framework', () => ({
-  showSnackbar: jest.fn(),
-}));
+const mockBillableServices = [
+  { name: 'X-Ray Service', uuid: 'xray-uuid-123' },
+  { name: 'Lab Test Service', uuid: 'lab-uuid-456' },
+  { name: 'Consultation Service', uuid: 'consult-uuid-789' },
+];
 
 jest.mock('../billable-services/billable-service.resource', () => ({
   useBillableServices: jest.fn(() => ({
-    billableServices: [],
+    billableServices: mockBillableServices,
   })),
 }));
 
@@ -41,7 +46,7 @@ const mockBill: MappedBill = {
       voided: false,
       voidReason: null,
       priceName: 'Service Price',
-      billableService: 'service-uuid',
+      billableService: 'X-Ray Service',
       priceUuid: 'price-uuid',
       lineItemOrder: 1,
       resourceVersion: '1.0',
@@ -62,7 +67,7 @@ const mockItem = {
   uuid: 'item-uuid',
   quantity: 2,
   price: 100,
-  billableService: 'service-uuid',
+  billableService: 'X-Ray Service',
   paymentStatus: 'UNPAID',
   item: 'Test Service',
   display: 'Test Service',
@@ -77,61 +82,141 @@ const mockItem = {
 describe('ChangeStatus component', () => {
   const closeModalMock = jest.fn();
 
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   test('renders the form with correct fields and default values', () => {
-    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
 
-    expect(screen.getByText('Edit bill line item?')).toBeInTheDocument();
+    expect(screen.getByText('Edit bill line item')).toBeInTheDocument();
     expect(screen.getByText('John Doe · Main Cashpoint · 123456')).toBeInTheDocument();
     expect(screen.getByRole('spinbutton', { name: /Quantity/ })).toHaveValue(2);
     expect(screen.getByLabelText(/Unit Price/)).toHaveValue('100');
     expect(screen.getByText(/Total/)).toHaveTextContent('200');
   });
 
-  test('updates total when quantity is changed', () => {
-    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+  test('updates total when quantity is changed', async () => {
+    const user = userEvent.setup();
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
 
     const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
-    fireEvent.change(quantityInput, { target: { value: 3 } });
+    await user.type(quantityInput, '3');
 
     expect(screen.getByText(/Total/)).toHaveTextContent('300');
   });
 
   test('submits the form and shows a success notification', async () => {
-    (updateBillItems as jest.Mock).mockResolvedValueOnce({});
+    const user = userEvent.setup();
+    mockUpdateBillItems.mockResolvedValueOnce({} as FetchResponse<any>);
 
-    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
 
-    fireEvent.click(screen.getByText(/Save/));
+    await user.click(screen.getByText(/Save/));
 
     await waitFor(() => {
-      expect(updateBillItems).toHaveBeenCalled();
+      expect(mockUpdateBillItems).toHaveBeenCalled();
       expect(showSnackbar).toHaveBeenCalledWith({
-        title: 'Save Bill',
-        subtitle: 'Bill processing has been successful',
+        title: 'Line item updated',
+        subtitle: 'The bill line item has been updated successfully',
         kind: 'success',
-        timeoutInMs: 3000,
       });
       expect(closeModalMock).toHaveBeenCalled();
     });
   });
 
   test('shows error notification when submission fails', async () => {
-    (updateBillItems as jest.Mock).mockRejectedValueOnce({ message: 'Error occurred' });
+    const user = userEvent.setup();
+    mockUpdateBillItems.mockRejectedValueOnce({ message: 'Error occurred' });
 
-    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
 
-    fireEvent.click(screen.getByText(/Save/));
+    await user.click(screen.getByText(/Save/));
 
     await waitFor(() => {
-      expect(showSnackbar).toHaveBeenCalledWith({
-        title: 'Bill processing error',
+      expect(mockShowSnackbar).toHaveBeenCalledWith({
+        title: 'Failed to update line item',
         kind: 'error',
         subtitle: 'Error occurred',
       });
     });
   });
+
+  test('preserves billable service UUIDs for other line items when editing', async () => {
+    const user = userEvent.setup();
+    mockUpdateBillItems.mockResolvedValueOnce({} as FetchResponse<any>);
+
+    // Bill with multiple line items with different billable services
+    const billWithMultipleItems: MappedBill = {
+      ...mockBill,
+      lineItems: [
+        {
+          uuid: 'item-1',
+          quantity: 1,
+          price: 100,
+          billableService: 'X-Ray Service',
+          paymentStatus: 'PENDING',
+          item: 'X-Ray',
+          display: 'X-Ray',
+          voided: false,
+          voidReason: null,
+          priceName: 'X-Ray Price',
+          priceUuid: 'xray-price-uuid',
+          lineItemOrder: 1,
+          resourceVersion: '1.0',
+        },
+        {
+          uuid: 'item-2',
+          quantity: 2,
+          price: 50,
+          billableService: 'Lab Test Service',
+          paymentStatus: 'PENDING',
+          item: 'Lab Test',
+          display: 'Lab Test',
+          voided: false,
+          voidReason: null,
+          priceName: 'Lab Price',
+          priceUuid: 'lab-price-uuid',
+          lineItemOrder: 2,
+          resourceVersion: '1.0',
+        },
+        {
+          uuid: 'item-3',
+          quantity: 1,
+          price: 200,
+          billableService: 'Consultation Service',
+          paymentStatus: 'PENDING',
+          item: 'Consultation',
+          display: 'Consultation',
+          voided: false,
+          voidReason: null,
+          priceName: 'Consult Price',
+          priceUuid: 'consult-price-uuid',
+          lineItemOrder: 3,
+          resourceVersion: '1.0',
+        },
+      ],
+    };
+
+    // Editing the Lab Test item (item-2)
+    const itemToEdit = billWithMultipleItems.lineItems[1];
+
+    render(<EditBillLineItemModal bill={billWithMultipleItems} item={itemToEdit} closeModal={closeModalMock} />);
+
+    await user.click(screen.getByText(/Save/));
+
+    await waitFor(() => {
+      expect(mockUpdateBillItems).toHaveBeenCalled();
+      const payload = mockUpdateBillItems.mock.calls[0][0];
+
+      // Verify that each line item has the correct billable service UUID
+      const xrayItem = payload.lineItems.find((li) => li.uuid === 'item-1');
+      const consultItem = payload.lineItems.find((li) => li.uuid === 'item-3');
+
+      // These should NOT have the Lab Test UUID (lab-uuid-456)
+      // They should keep their original UUIDs
+      expect(xrayItem?.billableService).toBe('xray-uuid-123');
+      expect(consultItem?.billableService).toBe('consult-uuid-789');
+
+      // The edited item should have the Lab Test UUID
+      const labItem = payload.lineItems.find((li) => li.uuid === 'item-2');
+      expect(labItem?.billableService).toBe('lab-uuid-456');
+    });
+  });
 });

package/src/billable-services/bill-waiver/bill-selection.component.tsx

@@ -9,7 +9,7 @@ import {
   StructuredListWrapper,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { useConfig } from '@openmrs/esm-framework';
+import { getCoreTranslation, useConfig } from '@openmrs/esm-framework';
 import { convertToCurrency } from '../../helpers';
 import { type MappedBill, type LineItem } from '../../types';
 import BillWaiverForm from './bill-waiver-form.component';
@@ -44,7 +44,7 @@ const PatientBillsSelections: React.FC<{ bills: MappedBill; setPatientUuid: (pat
             <StructuredListCell head>{t('quantity', 'Quantity')}</StructuredListCell>
             <StructuredListCell head>{t('unitPrice', 'Unit Price')}</StructuredListCell>
             <StructuredListCell head>{t('total', 'Total')}</StructuredListCell>
-            <StructuredListCell head>{t('actions', 'Actions')}</StructuredListCell>
+            <StructuredListCell head>{getCoreTranslation('actions')}</StructuredListCell>
           </StructuredListRow>
         </StructuredListHead>
         <StructuredListBody>

package/src/billable-services/bill-waiver/bill-waiver-form.component.tsx

@@ -29,7 +29,7 @@ const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPat
     return null;
   }
 
-  const handleProcessPayment = (event) => {
+  const handleProcessPayment = () => {
     const waiverEndPointPayload = createBillWaiverPayload(
       bill,
       waiverAmount,
@@ -39,7 +39,7 @@ const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPat
     );
 
     processBillPayment(waiverEndPointPayload, bill.uuid).then(
-      (resp) => {
+      () => {
         showSnackbar({
           title: t('billWaiver', 'Bill waiver'),
           subtitle: t('billWaiverSuccess', 'Bill waiver successful'),
@@ -57,7 +57,6 @@ const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPat
           title: t('billWaiver', 'Bill waiver'),
           subtitle: t('billWaiverError', 'Bill waiver failed {{error}}', { error: err.message }),
           kind: 'error',
-          timeoutInMs: 3500,
           isLowContrast: true,
         });
       },

package/src/billable-services/bill-waiver/patient-bills.component.tsx

@@ -37,9 +37,9 @@ const PatientBills: React.FC<PatientBillsProps> = ({ patientUuid, bills, setPati
   }
 
   const tableHeaders = [
-    { header: 'Date', key: 'date' },
-    { header: 'Billable Service', key: 'billableService' },
-    { header: 'Total Amount', key: 'totalAmount' },
+    { header: t('date', 'Date'), key: 'date' },
+    { header: t('billableService', 'Billable Service'), key: 'billableService' },
+    { header: t('totalAmount', 'Total Amount'), key: 'totalAmount' },
   ];
 
   const tableRows = bills.map((bill) => ({

package/src/billable-services/bill-waiver/utils.ts

@@ -1,6 +1,7 @@
 import { type OpenmrsResource } from '@openmrs/esm-framework';
-import type { LineItem, MappedBill } from '../../types';
+import type { LineItem, MappedBill, PaymentPayload } from '../../types';
 
+// TODO: Move this UUID to the config schema
 const WAIVER_UUID = 'eb6173cb-9678-4614-bbe1-0ccf7ed9d1d4';
 
 export const createBillWaiverPayload = (
@@ -12,7 +13,7 @@ export const createBillWaiverPayload = (
 ) => {
   const { cashier } = bill;
 
-  const billPayment = {
+  const billPayment: PaymentPayload = {
     amount: parseFloat(totalAmount.toFixed(2)),
     amountTendered: parseFloat(Number(amountWaived).toFixed(2)),
     attributes: [],
@@ -25,11 +26,20 @@ export const createBillWaiverPayload = (
     paymentStatus: 'PAID',
   }));
 
+  // Transform existing payments to PaymentPayload format
+  const existingPayments: PaymentPayload[] = bill.payments.map((payment) => ({
+    amount: payment.amount,
+    amountTendered: payment.amountTendered,
+    attributes: payment.attributes,
+    instanceType: payment.instanceType.uuid,
+    dateCreated: payment.dateCreated,
+  }));
+
   const processedPayment = {
     cashPoint: bill.cashPointUuid,
     cashier: cashier.uuid,
     lineItems: processedLineItems,
-    payments: [...bill.payments, billPayment],
+    payments: [...existingPayments, billPayment],
     patient: bill.patientUuid,
   };
 

package/src/billable-services/billable-service.resource.ts

@@ -1,8 +1,13 @@
 import useSWR from 'swr';
 import { type OpenmrsResource, openmrsFetch, restBaseUrl, useOpenmrsFetchAll, useConfig } from '@openmrs/esm-framework';
-import { type ServiceConcept } from '../types';
 import { apiBasePath } from '../constants';
-import { type BillableService } from '../types/index';
+import {
+  type BillableService,
+  type ServiceConcept,
+  type CreateBillableServicePayload,
+  type UpdateBillableServicePayload,
+} from '../types';
+import type { BillingConfig } from '../config-schema';
 
 type ResponseObject = {
   results: Array<OpenmrsResource>;
@@ -10,7 +15,7 @@ type ResponseObject = {
 
 export const useBillableServices = () => {
   const url = `${apiBasePath}billableService?v=custom:(uuid,name,shortName,serviceStatus,concept:(uuid,display,name:(name)),serviceType:(display),servicePrices:(uuid,name,price,paymentMode:(uuid,name)))`;
-  const { data, isLoading, isValidating, error, mutate } = useOpenmrsFetchAll<BillableService[]>(url);
+  const { data, isLoading, isValidating, error, mutate } = useOpenmrsFetchAll<BillableService>(url);
 
   return {
     billableServices: data ?? [],
@@ -22,16 +27,23 @@ export const useBillableServices = () => {
 };
 
 export function useServiceTypes() {
-  const config = useConfig();
-  const serviceConceptUuid = config.serviceTypes.billableService;
+  const { serviceTypes } = useConfig<BillingConfig>();
+  const serviceConceptUuid = serviceTypes.billableService;
   const url = `${restBaseUrl}/concept/${serviceConceptUuid}?v=custom:(setMembers:(uuid,display))`;
 
-  const { data, error, isLoading } = useSWR<{ data }>(url, openmrsFetch);
+  const { data, error, isLoading } = useSWR<{ data: { setMembers: Array<{ uuid: string; display: string }> } }>(
+    url,
+    openmrsFetch,
+  );
+
+  const sortedServiceTypes = data?.data.setMembers
+    ? [...data.data.setMembers].sort((a, b) => a.display.localeCompare(b.display))
+    : [];
 
   return {
-    serviceTypes: data?.data.setMembers ?? [],
+    serviceTypes: sortedServiceTypes,
     error,
-    isLoading,
+    isLoadingServiceTypes: isLoading,
   };
 }
 
@@ -40,14 +52,18 @@ export const usePaymentModes = () => {
 
   const { data, error, isLoading } = useSWR<{ data: ResponseObject }>(url, openmrsFetch);
 
+  const sortedPaymentModes = data?.data.results
+    ? [...data.data.results].sort((a, b) => a.name.localeCompare(b.name))
+    : [];
+
   return {
-    paymentModes: data?.data.results ?? [],
+    paymentModes: sortedPaymentModes,
     error,
-    isLoading,
+    isLoadingPaymentModes: isLoading,
   };
 };
 
-export const createBillableSerice = (payload: any) => {
+export const createBillableService = (payload: CreateBillableServicePayload) => {
   const url = `${apiBasePath}api/billable-service`;
   return openmrsFetch(url, {
     method: 'POST',
@@ -73,7 +89,7 @@ export function useConceptsSearch(conceptToLookup: string) {
   };
 }
 
-export const updateBillableService = (uuid: string, payload: any) => {
+export const updateBillableService = (uuid: string, payload: UpdateBillableServicePayload) => {
   const url = `${apiBasePath}/billableService/${uuid}`;
   return openmrsFetch(url, {
     method: 'POST',

package/src/billable-services/billable-services-home.component.tsx

@@ -9,7 +9,7 @@ import BillWaiver from './bill-waiver/bill-waiver.component';
 import BillableServicesDashboard from './dashboard/dashboard.component';
 import BillingHeader from '../billing-header/billing-header.component';
 import CashPointConfiguration from './cash-point/cash-point-configuration.component';
-import PaymentModesConfig from './payyment-modes/payment-modes-config.component';
+import PaymentModesConfig from './payment-modes/payment-modes-config.component';
 import styles from './billable-services.scss';
 
 const BillableServiceHome: React.FC = () => {