@openmrs/esm-billing-app 1.0.2-pre.76 → 1.0.2-pre.761

package/src/bill-history/bill-history.test.tsx

@@ -1,17 +1,23 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { configSchema, type BillingConfig } from '../config-schema';
 import { useBills } from '../billing.resource';
 import BillHistory from './bill-history.component';
 
-// Mock i18next
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
+const mockUseBills = jest.mocked(useBills);
+
+jest.mock('../billing.resource', () => ({
+  useBills: jest.fn(() => ({
+    bills: mockBillData,
+    isLoading: false,
+    isValidating: false,
+    error: null,
+  })),
 }));
 
-// Mock window.i18next
 window.i18next = {
   language: 'en-US',
 } as any;
@@ -20,9 +26,7 @@ const testProps = {
   patientUuid: 'some-uuid',
 };
 
-const mockbills = useBills as jest.MockedFunction<typeof useBills>;
-
-const mockBillsData = [
+const mockBillData = [
   { uuid: '1', patientName: 'John Doe', identifier: '12345678', billingService: 'Checkup', totalAmount: 500 },
   { uuid: '2', patientName: 'John Doe', identifier: '12345678', billingService: 'Consulatation', totalAmount: 600 },
   { uuid: '3', patientName: 'John Doe', identifier: '12345678', billingService: 'Child services', totalAmount: 700 },
@@ -37,70 +41,19 @@ const mockBillsData = [
   { uuid: '12', patientName: 'John Doe', identifier: '12345678', billingService: 'MCH', totalAmount: 1300 },
 ];
 
-// Mock the invoice table component
-jest.mock('../invoice/invoice-table.component', () => jest.fn(() => <div>Invoice table</div>));
-
-// Mock the billing resource
-jest.mock('../billing.resource', () => ({
-  useBills: jest.fn(() => ({
-    bills: mockBillsData,
-    isLoading: false,
-    isValidating: false,
-    error: null,
-  })),
-}));
-
-// Mock esm-patient-common-lib
-jest.mock('@openmrs/esm-patient-common-lib', () => ({
-  CardHeader: jest.fn(({ children }) => <div>{children}</div>),
-  EmptyDataIllustration: jest.fn(() => <div>Empty state illustration</div>),
-  ErrorState: jest.fn(({ error }) => <div>Error: {error?.message}</div>),
-  launchPatientWorkspace: jest.fn(),
-  usePaginationInfo: jest.fn(() => ({
-    pageSizes: [10, 20, 30],
-    currentPage: 1,
-  })),
-}));
-
-// Mock esm-framework
-jest.mock('@openmrs/esm-framework', () => ({
-  useLayoutType: jest.fn(() => 'small-desktop'),
-  isDesktop: jest.fn(() => true),
-  usePagination: jest.fn().mockImplementation((data) => ({
-    currentPage: 1,
-    goTo: jest.fn(),
-    results: data,
-    paginated: true,
-  })),
-  showToast: jest.fn(),
-  showNotification: jest.fn(),
-  createErrorHandler: jest.fn(),
-  createGlobalStore: jest.fn(),
-  getGlobalStore: jest.fn(() => ({
-    subscribe: jest.fn(),
-    getState: jest.fn(),
-    setState: jest.fn(),
-  })),
-  useConfig: jest.fn(() => ({
-    pageSize: 10,
-    defaultCurrency: 'USD',
-  })),
-  useSession: jest.fn(() => ({
-    sessionLocation: { uuid: 'some-uuid', display: 'Location' },
-  })),
-  formatDate: jest.fn((date) => date?.toString() ?? ''),
-  formatDatetime: jest.fn((date) => date?.toString() ?? ''),
-  parseDate: jest.fn((dateString) => new Date(dateString)),
-  ExtensionSlot: jest.fn(({ children }) => <>{children}</>),
-}));
-
 describe('BillHistory', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({ ...getDefaultsFromConfigSchema(configSchema), defaultCurrency: 'USD' });
   });
 
   test('should render loading datatable skeleton', () => {
-    mockbills.mockReturnValueOnce({ isLoading: true, isValidating: false, error: null, bills: [], mutate: jest.fn() });
+    mockUseBills.mockReturnValueOnce({
+      isLoading: true,
+      isValidating: false,
+      error: null,
+      bills: [],
+      mutate: jest.fn(),
+    });
     render(<BillHistory {...testProps} />);
     const loadingSkeleton = screen.getByRole('table');
     expect(loadingSkeleton).toBeInTheDocument();
@@ -108,7 +61,7 @@ describe('BillHistory', () => {
   });
 
   test('should render error state when API call fails', () => {
-    mockbills.mockReturnValueOnce({
+    mockUseBills.mockReturnValueOnce({
       isLoading: false,
       isValidating: false,
       error: new Error('some error'),
@@ -116,31 +69,31 @@ describe('BillHistory', () => {
       mutate: jest.fn(),
     });
     render(<BillHistory {...testProps} />);
-    const errorState = screen.getByText('Error: some error');
+    const errorState = screen.getByText(/Error/);
     expect(errorState).toBeInTheDocument();
   });
 
   test('should render bills table', async () => {
     const user = userEvent.setup();
-    mockbills.mockReturnValueOnce({
+    mockUseBills.mockReturnValueOnce({
       isLoading: false,
       isValidating: false,
       error: null,
-      bills: mockBillsData as any,
+      bills: mockBillData as any,
       mutate: jest.fn(),
     });
     render(<BillHistory {...testProps} />);
 
     // Verify headers
-    expect(screen.getByText('visitTime')).toBeInTheDocument();
-    expect(screen.getByText('identifier')).toBeInTheDocument();
+    expect(screen.getByText('Visit time')).toBeInTheDocument();
+    expect(screen.getByText('Identifier')).toBeInTheDocument();
 
     const tableRowGroup = screen.getAllByRole('rowgroup');
     expect(tableRowGroup).toHaveLength(2);
 
     // Page navigation should work as expected
-    const nextPageButton = screen.getByRole('button', { name: /nextPage/ });
-    const prevPageButton = screen.getByRole('button', { name: /previousPage/ });
+    const nextPageButton = screen.getByRole('button', { name: /Next page/ });
+    const prevPageButton = screen.getByRole('button', { name: /Previous page/ });
 
     expect(nextPageButton).toBeInTheDocument();
     expect(prevPageButton).toBeInTheDocument();
@@ -156,7 +109,13 @@ describe('BillHistory', () => {
   });
 
   test('should render empty state view when there are no bills', () => {
-    mockbills.mockReturnValueOnce({ isLoading: false, isValidating: false, error: null, bills: [], mutate: jest.fn() });
+    mockUseBills.mockReturnValueOnce({
+      isLoading: false,
+      isValidating: false,
+      error: null,
+      bills: [],
+      mutate: jest.fn(),
+    });
     render(<BillHistory {...testProps} />);
     const emptyState = screen.getByText(/There are no bills to display./);
     expect(emptyState).toBeInTheDocument();

package/src/bill-item-actions/bill-item-actions.scss

@@ -2,10 +2,6 @@
 @use '@carbon/type';
 @use '@carbon/colors';
 
-.section {
-  margin: layout.$spacing-03;
-}
-  
 .sectionTitle {
   @include type.type-style('heading-compact-02');
   color: colors.$gray-70;

package/src/bill-item-actions/{edit-bill-item.component.tsx → edit-bill-item.modal.tsx}

@@ -9,6 +9,7 @@ import {
   ModalFooter,
   ModalHeader,
   NumberInput,
+  Stack,
   TextInput,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
@@ -16,7 +17,7 @@ import { Controller, type FieldErrors, useForm } from 'react-hook-form';
 import { mutate } from 'swr';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { showSnackbar } from '@openmrs/esm-framework';
+import { getCoreTranslation, showSnackbar } from '@openmrs/esm-framework';
 import { apiBasePath } from '../constants';
 import { getBillableServiceUuid } from '../invoice/payments/utils';
 import { type LineItem, type MappedBill } from '../types';
@@ -24,13 +25,13 @@ import { updateBillItems } from '../billing.resource';
 import { useBillableServices } from '../billable-services/billable-service.resource';
 import styles from './bill-item-actions.scss';
 
-interface BillLineItemProps {
+interface EditBillLineItemModalProps {
   bill: MappedBill;
-  item: LineItem;
   closeModal: () => void;
+  item: LineItem;
 }
 
-const ChangeStatus: React.FC<BillLineItemProps> = ({ bill, item, closeModal }) => {
+const EditBillLineItemModal: React.FC<EditBillLineItemModalProps> = ({ bill, closeModal, item }) => {
   const { t } = useTranslation();
   const { billableServices } = useBillableServices();
   const [showErrorNotification, setShowErrorNotification] = useState(false);
@@ -56,7 +57,7 @@ const ChangeStatus: React.FC<BillLineItemProps> = ({ bill, item, closeModal }) =
   const {
     control,
     handleSubmit,
-    formState: { isSubmitting, errors, isDirty },
+    formState: { isSubmitting, errors },
     watch,
   } = useForm<BillLineItemForm>({
     defaultValues: {
@@ -74,7 +75,7 @@ const ChangeStatus: React.FC<BillLineItemProps> = ({ bill, item, closeModal }) =
     setTotal(newTotal);
   }, [quantity, price]);
 
-  const onSubmit = (data: BillLineItemForm) => {
+  const onSubmit = async (data: BillLineItemForm) => {
     const url = `${apiBasePath}bill`;
 
     const newItem = {
@@ -101,39 +102,41 @@ const ChangeStatus: React.FC<BillLineItemProps> = ({ bill, item, closeModal }) =
       status: bill.status,
       uuid: bill.uuid,
     };
-    updateBillItems(payload).then(
-      (res) => {
-        mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
-        showSnackbar({
-          title: t('billItems', 'Save Bill'),
-          subtitle: 'Bill processing has been successful',
-          kind: 'success',
-          timeoutInMs: 3000,
-        });
-        closeModal();
-      },
-      (error) => {
-        showSnackbar({ title: 'Bill processing error', kind: 'error', subtitle: error?.message });
-      },
-    );
+
+    try {
+      await updateBillItems(payload);
+      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',
+      });
+      closeModal();
+    } catch (error) {
+      showSnackbar({
+        title: t('billProcessingError', 'Bill processing error'),
+        kind: 'error',
+        subtitle: error?.message,
+      });
+    }
   };
 
   if (Object.keys(bill)?.length === 0) {
     return <ModalHeader closeModal={closeModal} title={t('billLineItemEmpty', 'This bill has no line items')} />;
   }
 
-  if (Object.keys(bill)?.length > 0) {
-    return (
-      <div>
-        <Form onSubmit={handleSubmit(onSubmit, onError)}>
-          <ModalHeader closeModal={closeModal} title={t('editBillLineItem', 'Edit bill line item?')} />
-          <ModalBody>
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('editBillLineItem', 'Edit bill line item?')} />
+      <Form onSubmit={handleSubmit(onSubmit, onError)}>
+        <ModalBody>
+          <Stack gap={5}>
             <div className={styles.modalBody}>
               <h5>
                 {bill?.patientName} &nbsp; · &nbsp;{bill?.cashPointName} &nbsp; · &nbsp;{bill?.receiptNumber}&nbsp;
               </h5>
             </div>
-            <section className={styles.section}>
+            <section>
               <p className={styles.label}>
                 {t('item', 'Item')} : {item?.billableService ? item?.billableService : item?.item}
               </p>
@@ -146,7 +149,7 @@ const ChangeStatus: React.FC<BillLineItemProps> = ({ bill, item, closeModal }) =
               <Controller
                 name="quantity"
                 control={control}
-                render={({ field: { onChange, onBlur, value } }) => (
+                render={({ field: { onChange, value } }) => (
                   <NumberInput
                     label={t('quantity', 'Quantity')}
                     id="quantityInput"
@@ -171,7 +174,7 @@ const ChangeStatus: React.FC<BillLineItemProps> = ({ bill, item, closeModal }) =
                     value={value}
                     readOnly={true}
                     className={styles.controlField}
-                    helperText="This is the unit Price for this item."
+                    helperText={t('unitPriceHelperText', 'This is the unit price for this item.')}
                   />
                 )}
               />
@@ -191,31 +194,29 @@ const ChangeStatus: React.FC<BillLineItemProps> = ({ bill, item, closeModal }) =
                 </Column>
               )}
             </section>
-          </ModalBody>
-          <ModalFooter>
-            <Button kind="secondary" onClick={closeModal}>
-              {t('cancel', 'Cancel')}
-            </Button>
-            <Button disabled={isSubmitting} type="submit">
-              <>
-                {isSubmitting ? (
-                  <div className={styles.inline}>
-                    <InlineLoading
-                      status="active"
-                      iconDescription={t('submitting', 'Submitting')}
-                      description={t('submitting', 'Submitting...')}
-                    />
-                  </div>
-                ) : (
-                  t('save', 'Save')
-                )}
-              </>
-            </Button>
-          </ModalFooter>
-        </Form>
-      </div>
-    );
-  }
+          </Stack>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {getCoreTranslation('cancel')}
+          </Button>
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? (
+              <div className={styles.inline}>
+                <InlineLoading
+                  status="active"
+                  iconDescription={t('submitting', 'Submitting')}
+                  description={t('submitting', 'Submitting') + '...'}
+                />
+              </div>
+            ) : (
+              getCoreTranslation('save')
+            )}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </>
+  );
 };
 
-export default ChangeStatus;
+export default EditBillLineItemModal;

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

@@ -1,19 +1,18 @@
 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(),
-}));
-
 jest.mock('../billable-services/billable-service.resource', () => ({
   useBillableServices: jest.fn(() => ({
     billableServices: [],
@@ -77,12 +76,8 @@ 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('John Doe · Main Cashpoint · 123456')).toBeInTheDocument();
@@ -91,43 +86,45 @@ describe('ChangeStatus component', () => {
     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',
         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({
+      expect(mockShowSnackbar).toHaveBeenCalledWith({
         title: 'Bill processing error',
         kind: 'error',
         subtitle: 'Error occurred',

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/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/billable-service.resource.ts

@@ -1,8 +1,8 @@
 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 } from '../types';
+import type { BillingConfig } from '../config-schema';
 
 type ResponseObject = {
   results: Array<OpenmrsResource>;
@@ -22,16 +22,20 @@ 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 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 +44,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: any) => {
   const url = `${apiBasePath}api/billable-service`;
   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 = () => {