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

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

@@ -1,17 +1,15 @@
 import React from 'react';
 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 FetchResponse, getDefaultsFromConfigSchema, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { configSchema, type BillingConfig } from '../config-schema';
 import { type MappedBill } from '../types';
 import { updateBillItems } from '../billing.resource';
 import EditBillLineItemModal from './edit-bill-item.modal';
 
 const mockUpdateBillItems = jest.mocked(updateBillItems);
 const mockShowSnackbar = jest.mocked(showSnackbar);
-
-jest.mock('../billing.resource', () => ({
-  updateBillItems: jest.fn(() => Promise.resolve({})),
-}));
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
 
 const mockBillableServices = [
   { name: 'X-Ray Service', uuid: 'xray-uuid-123' },
@@ -19,6 +17,10 @@ const mockBillableServices = [
   { name: 'Consultation Service', uuid: 'consult-uuid-789' },
 ];
 
+jest.mock('../billing.resource', () => ({
+  updateBillItems: jest.fn().mockResolvedValue({}),
+}));
+
 jest.mock('../billable-services/billable-service.resource', () => ({
   useBillableServices: jest.fn(() => ({
     billableServices: mockBillableServices,
@@ -79,34 +81,44 @@ const mockItem = {
   resourceVersion: '1.0',
 };
 
-describe('ChangeStatus component', () => {
-  const closeModalMock = jest.fn();
+describe('EditBillItem', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      defaultCurrency: 'USD',
+    });
+  });
+
+  const mockCloseModal = jest.fn();
 
   test('renders the form with correct fields and default values', () => {
-    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
 
     expect(screen.getByText('Edit bill line item')).toBeInTheDocument();
-    expect(screen.getByText('John Doe · Main Cashpoint · 123456')).toBeInTheDocument();
+    expect(screen.getByText(/John Doe/)).toBeInTheDocument();
+    expect(screen.getByText(/Main Cashpoint/)).toBeInTheDocument();
+    expect(screen.getByText(/123456/)).toBeInTheDocument();
     expect(screen.getByRole('spinbutton', { name: /Quantity/ })).toHaveValue(2);
     expect(screen.getByLabelText(/Unit Price/)).toHaveValue('100');
-    expect(screen.getByText(/Total/)).toHaveTextContent('200');
+    expect(screen.getByText(/Total/)).toHaveTextContent(/200/);
   });
 
   test('updates total when quantity is changed', async () => {
     const user = userEvent.setup();
-    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
 
     const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
+    await user.clear(quantityInput);
     await user.type(quantityInput, '3');
 
-    expect(screen.getByText(/Total/)).toHaveTextContent('300');
+    expect(screen.getByText(/Total/)).toHaveTextContent(/300/);
   });
 
   test('submits the form and shows a success notification', async () => {
     const user = userEvent.setup();
     mockUpdateBillItems.mockResolvedValueOnce({} as FetchResponse<any>);
 
-    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
 
     await user.click(screen.getByText(/Save/));
 
@@ -117,7 +129,7 @@ describe('ChangeStatus component', () => {
         subtitle: 'The bill line item has been updated successfully',
         kind: 'success',
       });
-      expect(closeModalMock).toHaveBeenCalled();
+      expect(mockCloseModal).toHaveBeenCalled();
     });
   });
 
@@ -125,7 +137,7 @@ describe('ChangeStatus component', () => {
     const user = userEvent.setup();
     mockUpdateBillItems.mockRejectedValueOnce({ message: 'Error occurred' });
 
-    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
 
     await user.click(screen.getByText(/Save/));
 
@@ -197,7 +209,7 @@ describe('ChangeStatus component', () => {
     // Editing the Lab Test item (item-2)
     const itemToEdit = billWithMultipleItems.lineItems[1];
 
-    render(<EditBillLineItemModal bill={billWithMultipleItems} item={itemToEdit} closeModal={closeModalMock} />);
+    render(<EditBillLineItemModal bill={billWithMultipleItems} item={itemToEdit} closeModal={mockCloseModal} />);
 
     await user.click(screen.getByText(/Save/));
 
@@ -219,4 +231,81 @@ describe('ChangeStatus component', () => {
       expect(labItem?.billableService).toBe('lab-uuid-456');
     });
   });
+
+  test('shows validation error for quantity less than 1', async () => {
+    const user = userEvent.setup();
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
+
+    const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '0');
+
+    // Try to submit
+    await user.click(screen.getByText(/Save/));
+
+    // Should show validation error
+    await waitFor(() => {
+      expect(screen.getByText(/Quantity must be at least 1/)).toBeInTheDocument();
+    });
+
+    // Should NOT call the update function
+    expect(mockUpdateBillItems).not.toHaveBeenCalled();
+  });
+
+  test('shows validation error for quantity greater than 100', async () => {
+    const user = userEvent.setup();
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
+
+    const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '101');
+
+    await user.click(screen.getByText(/Save/));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Quantity cannot exceed 100/)).toBeInTheDocument();
+    });
+    expect(mockUpdateBillItems).not.toHaveBeenCalled();
+  });
+
+  test('shows validation error for non-integer quantity', async () => {
+    const user = userEvent.setup();
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
+
+    const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '2.5');
+
+    await user.click(screen.getByText(/Save/));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Quantity must be a whole number/)).toBeInTheDocument();
+    });
+    expect(mockUpdateBillItems).not.toHaveBeenCalled();
+  });
+
+  test('clears validation error when valid quantity is entered', async () => {
+    const user = userEvent.setup();
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
+
+    const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
+
+    // Enter invalid value
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '0');
+    await user.click(screen.getByText(/Save/));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Quantity must be at least 1/)).toBeInTheDocument();
+    });
+
+    // Fix it
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '5');
+
+    // Error should disappear
+    await waitFor(() => {
+      expect(screen.queryByText(/Quantity must be at least 1/)).not.toBeInTheDocument();
+    });
+  });
 });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Checkbox,
   Layer,
@@ -20,7 +20,7 @@ const PatientBillsSelections: React.FC<{ bills: MappedBill; setPatientUuid: (pat
   setPatientUuid,
 }) => {
   const { t } = useTranslation();
-  const [selectedBills, setSelectedBills] = React.useState<Array<LineItem>>([]);
+  const [selectedBills, setSelectedBills] = useState<Array<LineItem>>([]);
   const { defaultCurrency } = useConfig();
 
   const checkBoxLabel = (lineItem) => {

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

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Form, Stack, FormGroup, Layer, Button, NumberInput } from '@carbon/react';
 import { TaskAdd } from '@carbon/react/icons';
 import { mutate } from 'swr';
 import { useTranslation } from 'react-i18next';
 import { showSnackbar, useConfig } from '@openmrs/esm-framework';
 import { createBillWaiverPayload } from './utils';
-import { convertToCurrency } from '../../helpers';
+import { calculateTotalAmount, convertToCurrency } from '../../helpers';
 import { processBillPayment } from '../../billing.resource';
 import { useBillableItems } from '../../billing-form/billing-form.resource';
 import type { LineItem, MappedBill } from '../../types';
@@ -20,16 +20,16 @@ type BillWaiverFormProps = {
 
 const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPatientUuid }) => {
   const { t } = useTranslation();
-  const [waiverAmount, setWaiverAmount] = React.useState(0);
-  const { lineItems: billableLineItems, isLoading: isLoadingLineItems, error: lineError } = useBillableItems();
-  const totalAmount = lineItems.reduce((acc, curr) => acc + curr.price * curr.quantity, 0);
+  const [waiverAmount, setWaiverAmount] = useState(0);
+  const { lineItems: billableLineItems } = useBillableItems();
+  const totalAmount = calculateTotalAmount(lineItems);
   const { defaultCurrency } = useConfig();
 
   if (lineItems?.length === 0) {
     return null;
   }
 
-  const handleProcessPayment = () => {
+  const handleProcessPayment = async () => {
     const waiverEndPointPayload = createBillWaiverPayload(
       bill,
       waiverAmount,
@@ -38,29 +38,26 @@ const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPat
       billableLineItems,
     );
 
-    processBillPayment(waiverEndPointPayload, bill.uuid).then(
-      () => {
-        showSnackbar({
-          title: t('billWaiver', 'Bill waiver'),
-          subtitle: t('billWaiverSuccess', 'Bill waiver successful'),
-          kind: 'success',
-          timeoutInMs: 3500,
-          isLowContrast: true,
-        });
-        setPatientUuid('');
-        mutate((key) => typeof key === 'string' && key.startsWith(`${apiBasePath}bill?v=full`), undefined, {
-          revalidate: true,
-        });
-      },
-      (err) => {
-        showSnackbar({
-          title: t('billWaiver', 'Bill waiver'),
-          subtitle: t('billWaiverError', 'Bill waiver failed {{error}}', { error: err.message }),
-          kind: 'error',
-          isLowContrast: true,
-        });
-      },
-    );
+    try {
+      await processBillPayment(waiverEndPointPayload, bill.uuid);
+      showSnackbar({
+        title: t('billWaiver', 'Bill waiver'),
+        subtitle: t('billWaiverSuccess', 'Bill waiver successful'),
+        kind: 'success',
+        isLowContrast: true,
+      });
+      setPatientUuid('');
+      mutate((key) => typeof key === 'string' && key.startsWith(`${apiBasePath}bill?v=full`), undefined, {
+        revalidate: true,
+      });
+    } catch (error) {
+      showSnackbar({
+        title: t('billWaiver', 'Bill waiver'),
+        subtitle: t('billWaiverError', 'Bill waiver failed {{error}}', { error: error?.message }),
+        kind: 'error',
+        isLowContrast: true,
+      });
+    }
   };
 
   return (

package/src/billing-form/billing-checkin-form.component.tsx

@@ -21,20 +21,25 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
   const [paymentMethod, setPaymentMethod] = useState<any>();
   let lineList = [];
 
-  const handleCreateExtraVisitInfo = useCallback((createBillPayload) => {
-    createPatientBill(createBillPayload).then(
-      (res) => {
-        showSnackbar({ title: 'Patient Bill', subtitle: 'Patient has been billed successfully', kind: 'success' });
-      },
-      (error) => {
+  const handleCreateExtraVisitInfo = useCallback(
+    async (createBillPayload) => {
+      try {
+        await createPatientBill(createBillPayload);
         showSnackbar({
-          title: 'Patient Bill Error',
-          subtitle: 'An error has occurred while creating patient bill',
+          title: t('patientBill', 'Patient bill'),
+          subtitle: t('billCreatedSuccessfully', 'Bill created successfully'),
+          kind: 'success',
+        });
+      } catch (error) {
+        showSnackbar({
+          title: t('billCreationError', 'Bill creation error'),
+          subtitle: t('errorCreatingBill', 'An error occurred while creating the bill'),
           kind: 'error',
         });
-      },
-    );
-  }, []);
+      }
+    },
+    [t],
+  );
 
   const handleBillingService = ({ selectedItem }) => {
     const cashPointUuid = cashPoints?.[0]?.uuid ?? '';
@@ -74,7 +79,7 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
       <InlineLoading
         status="active"
         iconDescription={getCoreTranslation('loading')}
-        description={t('loadingBillingServices', 'Loading billing services...')}
+        description={`${t('loadingBillingServices', 'Loading billing services')}...`}
       />
     );
   }
@@ -110,7 +115,7 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
           <div className={styles.sectionTitle}>{t('billing', 'Billing')}</div>
           <div className={styles.sectionField}></div>
           <Dropdown
-            label={t('selectBillableService', 'Select a billable service...')}
+            label={t('selectBillableService', 'Select a billable service')}
             onChange={handleBillingService}
             id="billable-items"
             items={lineList}

package/src/billing-form/billing-form.component.tsx

@@ -1,21 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { mutate } from 'swr';
-import {
-  Button,
-  ButtonSet,
-  ComboBox,
-  Form,
-  NumberInput,
-  InlineLoading,
-  InlineNotification,
-  Table,
-  TableHead,
-  TableBody,
-  TableRow,
-  TableHeader,
-  TableCell,
-} from '@carbon/react';
+import { Button, ButtonSet, ComboBox, Form, NumberInput, InlineLoading, InlineNotification } from '@carbon/react';
 import { TrashCan } from '@carbon/react/icons';
 import { useConfig, useLayoutType, showSnackbar, getCoreTranslation } from '@openmrs/esm-framework';
 import { processBillItems, useBillableServices } from '../billing.resource';
@@ -119,7 +105,7 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
     return true;
   };
 
-  const postBillItems = () => {
+  const postBillItems = async () => {
     if (!validateSelectedItems()) {
       return;
     }
@@ -147,27 +133,24 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
     });
 
     const url = `${apiBasePath}bill`;
-    processBillItems(bill).then(
-      () => {
-        setIsSubmitting(false);
-
-        closeWorkspace();
-        mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
-        showSnackbar({
-          title: t('saveBill', 'Save Bill'),
-          subtitle: t('billProcessingSuccess', 'Bill processing has been successful'),
-          kind: 'success',
-        });
-      },
-      (error) => {
-        setIsSubmitting(false);
-        showSnackbar({
-          title: t('billProcessingError', 'Bill processing error'),
-          kind: 'error',
-          subtitle: error?.message,
-        });
-      },
-    );
+    try {
+      await processBillItems(bill);
+      closeWorkspace();
+      mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
+      showSnackbar({
+        title: t('saveBill', 'Save Bill'),
+        subtitle: t('billProcessingSuccess', 'Bill processing has been successful'),
+        kind: 'success',
+      });
+    } catch (error) {
+      showSnackbar({
+        title: t('billProcessingError', 'Bill processing error'),
+        kind: 'error',
+        subtitle: error?.message,
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (

package/src/billing.resource.ts

@@ -1,6 +1,5 @@
-import isEmpty from 'lodash-es/isEmpty';
-import sortBy from 'lodash-es/sortBy';
 import useSWR from 'swr';
+import sortBy from 'lodash-es/sortBy';
 import {
   formatDate,
   parseDate,
@@ -21,9 +20,11 @@ import type {
 } from './types';
 
 const mapBillProperties = (bill: PatientInvoice): MappedBill => {
+  const activeLineItems = bill?.lineItems?.filter((item) => !item.voided) || [];
+
   const status =
-    bill.lineItems.length > 1
-      ? bill.lineItems.some((item) => item.paymentStatus === 'PENDING')
+    activeLineItems.length > 1
+      ? activeLineItems.some((item) => item.paymentStatus === 'PENDING')
         ? 'PENDING'
         : 'PAID'
       : bill.status;
@@ -41,28 +42,38 @@ const mapBillProperties = (bill: PatientInvoice): MappedBill => {
     cashPointName: bill?.cashPoint?.name,
     cashPointLocation: bill?.cashPoint?.location?.display,
     dateCreated: bill?.dateCreated ? formatDate(parseDate(bill.dateCreated), { mode: 'wide' }) : '--',
-    lineItems: bill?.lineItems,
-    billingService: bill?.lineItems.map((lineItem) => lineItem?.item || lineItem?.billableService || '--').join('  '),
+    lineItems: activeLineItems,
+    billingService: activeLineItems.map((lineItem) => lineItem?.item || lineItem?.billableService || '--').join('  '),
     payments: bill.payments,
     display: bill?.display,
-    totalAmount: bill?.lineItems?.map((item) => item.price * item.quantity).reduce((prev, curr) => prev + curr, 0),
+    totalAmount: activeLineItems?.map((item) => item.price * item.quantity).reduce((prev, curr) => prev + curr, 0),
     tenderedAmount: bill?.payments?.map((item) => item.amountTendered).reduce((prev, curr) => prev + curr, 0),
   };
 };
 
 export const useBills = (patientUuid: string = '', billStatus: string = '') => {
-  const url = `${apiBasePath}bill?q=&v=full`;
+  // Build URL with status parameter if provided
+  const buildUrl = () => {
+    let url = `${apiBasePath}bill?v=full`;
 
-  const patientUrl = `${apiBasePath}bill?patientUuid=${patientUuid}&v=full`;
+    if (patientUuid) {
+      url += `&patientUuid=${patientUuid}`;
+    }
+
+    if (billStatus) {
+      url += `&status=${billStatus}`;
+    }
+
+    return url;
+  };
 
   const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Array<PatientInvoice> } }>(
-    isEmpty(patientUuid) ? url : patientUrl,
+    buildUrl(),
     openmrsFetch,
   );
 
   const sortedBills = sortBy(data?.data?.results ?? [], ['dateCreated']).reverse();
-  const filteredBills = billStatus === '' ? sortedBills : sortedBills?.filter((bill) => bill?.status === billStatus);
-  const mappedResults = filteredBills?.map((bill) => mapBillProperties(bill));
+  const mappedResults = sortedBills?.map((bill) => mapBillProperties(bill));
 
   return {
     bills: mappedResults,

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

@@ -73,7 +73,7 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isLoadingBill }) => {
 
   const handleSelectBillItem = useCallback(
     (row: LineItem) => {
-      const dispose = showModal('edit-bill-line-item-dialog', {
+      const dispose = showModal('edit-bill-line-item-modal', {
         bill,
         item: row,
         closeModal: () => dispose(),

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

@@ -168,7 +168,7 @@ describe('InvoiceTable', () => {
 
     expect(mockShowModal).toHaveBeenCalledTimes(1);
     expect(mockShowModal).toHaveBeenCalledWith(
-      'edit-bill-line-item-dialog',
+      'edit-bill-line-item-modal',
       expect.objectContaining({
         bill: defaultBill,
         item: expect.objectContaining({ uuid: '1' }),

package/src/routes.json

@@ -78,12 +78,6 @@
       "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": [
@@ -103,6 +97,10 @@
       "name": "edit-bill-item-modal",
       "component": "editBillLineItemModal"
     },
+    {
+      "name": "edit-bill-line-item-modal",
+      "component": "editBillLineItemModal"
+    },
     {
       "name": "edit-billable-service-modal",
       "component": "editBillableServiceModal"

package/translations/en.json

@@ -24,6 +24,8 @@
   "billableServices__lower": "billable services",
   "billAmount": "Bill amount",
   "billCode": "Bill code",
+  "billCreatedSuccessfully": "Bill created successfully",
+  "billCreationError": "Bill creation error",
   "billedItems": "Billed Items",
   "billedTo": "Billed to",
   "billErrorService": "Bill service error",
@@ -81,7 +83,7 @@
   "enterSellingPrice": "Enter selling price",
   "enterServiceName": "Enter service name",
   "enterServiceShortName": "Enter service short name",
-  "error": "Error",
+  "errorCreatingBill": "An error occurred while creating the bill",
   "errorDeletingPaymentMode": "An error occurred while deleting the payment mode.",
   "errorFetchingCashPoints": "An error occurred while fetching cash points.",
   "errorFetchingLocations": "An error occurred while fetching locations.",
@@ -132,6 +134,7 @@
   "noResultsFor": "No results for",
   "number": "No",
   "ok": "OK",
+  "patientBill": "Patient bill",
   "patientBillingAlert": "Patient Billing Alert",
   "patientBills": "Patient bill",
   "patientBillsDescription": "List of patient bills",
@@ -152,7 +155,6 @@
   "paymentOptionRequired": "At least one payment option is required",
   "paymentProcessedSuccessfully": "Payment processed successfully",
   "payments": "Payments",
-  "pleaseRequiredFields": "Please fill all required fields",
   "policyNumber": "Policy number",
   "postWaiver": "Post waiver",
   "previousPage": "Previous page",
@@ -181,7 +183,7 @@
   "searching": "Searching",
   "searchItems": "Search items and services",
   "searchThisTable": "Search this table",
-  "selectBillableService": "Select a billable service...",
+  "selectBillableService": "Select a billable service",
   "selectedItems": "Selected Items",
   "selectLocation": "Select Location",
   "selectPatientCategory": "Select patient category",