@openmrs/esm-billing-app 1.0.2-pre.98 → 1.0.2-pre.980

package/src/invoice/printable-invoice/printable-footer.test.tsx

@@ -3,28 +3,19 @@ import { screen, render } from '@testing-library/react';
 import { useDefaultFacility } from '../../billing.resource';
 import PrintableFooter from './printable-footer.component';
 
-const mockUseDefaultFacility = useDefaultFacility as jest.MockedFunction<typeof useDefaultFacility>;
+const mockUseDefaultFacility = jest.mocked<typeof useDefaultFacility>(useDefaultFacility);
 
 jest.mock('../../billing.resource', () => ({
   useDefaultFacility: jest.fn(),
 }));
 
 describe('PrintableFooter', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   test('should render PrintableFooter component', () => {
-    mockUseDefaultFacility.mockReturnValue({ data: { display: 'MTRH', uuid: 'mtrh-uuid' }, isLoading: false });
+    mockUseDefaultFacility.mockReturnValue({
+      data: { display: 'MTRH', uuid: 'mtrh-uuid', links: [] },
+    });
     render(<PrintableFooter />);
     const footer = screen.getByText('MTRH');
     expect(footer).toBeInTheDocument();
   });
-
-  test('should show placeholder text when facility isLoading', () => {
-    mockUseDefaultFacility.mockReturnValue({ data: { display: 'MTRH', uuid: 'mtrh-uuid' }, isLoading: true });
-    render(<PrintableFooter />);
-    const footer = screen.getByText('--');
-    expect(footer).toBeInTheDocument();
-  });
 });

package/src/invoice/printable-invoice/printable-invoice-header.component.tsx

@@ -1,27 +1,28 @@
 import React from 'react';
 import { type PatientDetails } from '../../types';
-import { useConfig } from '@openmrs/esm-framework';
+import { type SessionLocation, useConfig, interpolateUrl, formatDate, parseDate } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
-import { useDefaultFacility } from '../../billing.resource';
+import type { BillingConfig } from '../../config-schema';
 import styles from './printable-invoice-header.scss';
+import isEmpty from 'lodash/isEmpty';
 
 interface PrintableInvoiceHeaderProps {
   patientDetails: PatientDetails;
+  defaultFacility: SessionLocation | null;
 }
 
-const PrintableInvoiceHeader: React.FC<PrintableInvoiceHeaderProps> = ({ patientDetails }) => {
+const PrintableInvoiceHeader: React.FC<PrintableInvoiceHeaderProps> = ({ patientDetails, defaultFacility }) => {
   const { t } = useTranslation();
-  const { logo } = useConfig();
-  const { data } = useDefaultFacility();
+  const { logo, country } = useConfig<BillingConfig>();
 
   return (
     <div className={styles.container}>
       <div className={styles.printableHeader}>
         <p className={styles.heading}>{t('invoice', 'Invoice')}</p>
-        {logo?.src ? (
-          <img className={styles.img} src={logo.src} alt={logo.alt} />
-        ) : logo?.name ? (
-          logo.name
+        {logo?.src && !isEmpty(logo.src) ? (
+          <img className={styles.img} src={interpolateUrl(logo.src)} alt={logo.alt} />
+        ) : logo?.alt && !isEmpty(logo.alt) ? (
+          logo.alt
         ) : (
           // OpenMRS Logo
           <svg
@@ -44,6 +45,14 @@ const PrintableInvoiceHeader: React.FC<PrintableInvoiceHeaderProps> = ({ patient
         <div className={styles.billDetails}>
           <p className={styles.itemHeading}>{t('billedTo', 'Billed to')}</p>
           <p className={styles.itemLabel}>{patientDetails?.name}</p>
+          {patientDetails?.gender && (
+            <p className={styles.itemLabel}>{`${t('gender', 'Gender')}: ${patientDetails.gender}`}</p>
+          )}
+          {patientDetails?.birthDate && (
+            <p className={styles.itemLabel}>
+              {`${t('birthDate', 'Date of birth')}: ${formatDate(parseDate(patientDetails.birthDate), { time: false })}`}
+            </p>
+          )}
           <p className={styles.itemLabel}>{patientDetails?.county}</p>
           <p className={styles.itemLabel}>
             {patientDetails?.subCounty}
@@ -52,8 +61,8 @@ const PrintableInvoiceHeader: React.FC<PrintableInvoiceHeaderProps> = ({ patient
         </div>
 
         <div className={styles.facilityDetails}>
-          <p className={styles.facilityName}>{data?.display}</p>
-          <p className={styles.itemLabel}>Kenya</p>
+          <p className={styles.facilityName}>{defaultFacility?.display}</p>
+          <p className={styles.itemLabel}>{country}</p>
         </div>
       </div>
     </div>

package/src/invoice/printable-invoice/printable-invoice-header.test.tsx

@@ -1,35 +1,41 @@
 import React from 'react';
 import { screen, render } from '@testing-library/react';
 import { useConfig } from '@openmrs/esm-framework';
+import { type BillingConfig } from '../../config-schema';
 import { useDefaultFacility } from '../../billing.resource';
 import PrintableInvoiceHeader from './printable-invoice-header.component';
 
-const mockUseDefaultFacility = useDefaultFacility as jest.MockedFunction<typeof useDefaultFacility>;
-const mockUseConfig = useConfig as jest.MockedFunction<typeof useConfig>;
+const mockUseDefaultFacility = jest.mocked(useDefaultFacility);
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
 
 jest.mock('../../billing.resource', () => ({
   useDefaultFacility: jest.fn(),
 }));
 
-jest.mock('@openmrs/esm-framework', () => ({
-  useConfig: jest.fn(),
-}));
 const testProps = {
   patientDetails: {
     name: 'John Doe',
     county: 'Nairobi',
     subCounty: 'Westlands',
     city: 'Nairobi',
-    age: '45',
+    birthDate: '1980-05-15',
     gender: 'Male',
   },
 };
 
+const defaultFacility = { display: 'MTRH', uuid: 'mtrh-uuid', links: [] };
+
 describe('PrintableInvoiceHeader', () => {
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({
+      logo: { src: 'logo.png', alt: 'logo' },
+      country: 'Kenya',
+    } as unknown as BillingConfig);
+    mockUseDefaultFacility.mockReturnValue({ data: { display: 'MTRH', uuid: 'mtrh-uuid', links: [] } });
+  });
+
   test('should render PrintableInvoiceHeader component', () => {
-    mockUseConfig.mockReturnValue({ logo: { src: 'logo.png', alt: 'logo' } });
-    mockUseDefaultFacility.mockReturnValue({ data: { display: 'MTRH', uuid: 'mtrh-uuid' }, isLoading: false });
-    render(<PrintableInvoiceHeader {...testProps} />);
+    render(<PrintableInvoiceHeader {...testProps} defaultFacility={defaultFacility} />);
     const header = screen.getByText('Invoice');
     expect(header).toBeInTheDocument();
 
@@ -38,21 +44,94 @@ describe('PrintableInvoiceHeader', () => {
     expect(screen.getByText('Westlands, Nairobi')).toBeInTheDocument();
     expect(screen.getByText('MTRH')).toBeInTheDocument();
     expect(screen.getByText('Kenya')).toBeInTheDocument();
+    expect(screen.getByText('Gender: Male')).toBeInTheDocument();
+    expect(screen.getByText('Date of birth: 15-May-1980')).toBeInTheDocument();
   });
 
   test('should display the logo when logo is provided', () => {
-    mockUseConfig.mockReturnValue({ logo: { src: 'logo.png', alt: 'logo' } });
-    mockUseDefaultFacility.mockReturnValue({ data: { display: 'MTRH', uuid: 'mtrh-uuid' }, isLoading: false });
-    render(<PrintableInvoiceHeader {...testProps} />);
+    render(<PrintableInvoiceHeader {...testProps} defaultFacility={defaultFacility} />);
     const logo = screen.getByAltText('logo');
     expect(logo).toBeInTheDocument();
   });
 
-  test('should display the default logo when logo is not provided', () => {
-    mockUseConfig.mockReturnValue({ logo: {} });
-    mockUseDefaultFacility.mockReturnValue({ data: { display: 'MTRH', uuid: 'mtrh-uuid' }, isLoading: false });
-    render(<PrintableInvoiceHeader {...testProps} />);
+  test('should display the default OpenMRS SVG logo when logo src is not provided', () => {
+    mockUseConfig.mockReturnValue({
+      logo: { src: '', alt: '' },
+      country: 'Kenya',
+    } as unknown as BillingConfig);
+
+    render(<PrintableInvoiceHeader {...testProps} defaultFacility={defaultFacility} />);
     const logo = screen.getByRole('img');
     expect(logo).toBeInTheDocument();
+    expect(logo.tagName).toBe('svg');
+  });
+
+  test('should display logo alt text when src is empty but alt is provided', () => {
+    mockUseConfig.mockReturnValue({
+      logo: { src: '', alt: 'Test Facility Logo' },
+      country: 'Kenya',
+    } as unknown as BillingConfig);
+
+    render(<PrintableInvoiceHeader {...testProps} defaultFacility={defaultFacility} />);
+    expect(screen.getByText('Test Facility Logo')).toBeInTheDocument();
+  });
+
+  test('should format birthDate correctly', () => {
+    const propsWithDifferentDate = {
+      patientDetails: {
+        name: 'Jane Doe',
+        county: 'Mombasa',
+        subCounty: 'Nyali',
+        city: 'Mombasa',
+        birthDate: '1995-12-25',
+        gender: 'Female',
+      },
+    };
+    render(<PrintableInvoiceHeader {...propsWithDifferentDate} defaultFacility={defaultFacility} />);
+    expect(screen.getByText('Date of birth: 25-Dec-1995')).toBeInTheDocument();
+  });
+
+  test('should not render birthDate and gender when not provided', () => {
+    const propsWithoutBirthDateAndGender = {
+      patientDetails: {
+        name: 'Jane Doe',
+        county: 'Mombasa',
+        subCounty: 'Nyali',
+        city: 'Mombasa',
+        birthDate: '',
+        gender: '',
+      },
+    };
+    render(<PrintableInvoiceHeader {...propsWithoutBirthDateAndGender} defaultFacility={defaultFacility} />);
+
+    expect(screen.queryByText(/Date of birth:/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Gender:/i)).not.toBeInTheDocument();
+  });
+
+  test('should render city with comma when provided', () => {
+    render(<PrintableInvoiceHeader {...testProps} defaultFacility={defaultFacility} />);
+    expect(screen.getByText('Westlands, Nairobi')).toBeInTheDocument();
+  });
+
+  test('should render subCounty without comma when city is not provided', () => {
+    const propsWithoutCity = {
+      patientDetails: {
+        name: 'Jane Doe',
+        county: 'Mombasa',
+        subCounty: 'Nyali',
+        city: '',
+        birthDate: '1990-01-01',
+        gender: 'Female',
+      },
+    };
+    render(<PrintableInvoiceHeader {...propsWithoutCity} defaultFacility={defaultFacility} />);
+    expect(screen.getByText('Nyali')).toBeInTheDocument();
+    expect(screen.queryByText(/Nyali,/)).not.toBeInTheDocument();
+  });
+
+  test('should handle null defaultFacility gracefully', () => {
+    render(<PrintableInvoiceHeader {...testProps} defaultFacility={null} />);
+    expect(screen.getByText('Invoice')).toBeInTheDocument();
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
   });
 });

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

@@ -8,9 +8,8 @@ import {
   TableBody,
   TableHeader,
   TableCell,
-  DataTableSkeleton,
 } from '@carbon/react';
-import { age, isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import { isDesktop, type SessionLocation, useLayoutType } from '@openmrs/esm-framework';
 import { getGender } from '../../helpers';
 import { type MappedBill } from '../../types';
 import { useTranslation } from 'react-i18next';
@@ -21,25 +20,26 @@ import styles from './printable-invoice.scss';
 type PrintableInvoiceProps = {
   bill: MappedBill;
   patient: fhir.Patient;
-  isLoading: boolean;
+  componentRef: React.RefObject<HTMLDivElement>;
+  defaultFacility: SessionLocation;
 };
 
-const PrintableInvoice: React.FC<PrintableInvoiceProps> = ({ bill, patient, isLoading }) => {
+const PrintableInvoice: React.FC<PrintableInvoiceProps> = ({ bill, patient, componentRef, defaultFacility }) => {
   const { t } = useTranslation();
   const layout = useLayoutType();
   const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
   const headerData = [
-    { header: 'Inventory item', key: 'billItem' },
-    { header: 'Quantity', key: 'quantity' },
-    { header: 'Unit price', key: 'price' },
-    { header: 'Total', key: 'total' },
+    { header: t('inventoryItem', 'Inventory item'), key: 'billItem' },
+    { header: t('quantity', 'Quantity'), key: 'quantity' },
+    { header: t('unitPrice', 'Unit price'), key: 'price' },
+    { header: t('total', 'Total'), key: 'total' },
   ];
 
   const rowData =
     bill?.lineItems?.map((item) => {
       return {
         id: `${item.uuid}`,
-        billItem: item.item,
+        billItem: item.billableService ?? item.item,
         quantity: item.quantity,
         price: item.price,
         total: item.price * item.quantity,
@@ -47,16 +47,16 @@ const PrintableInvoice: React.FC<PrintableInvoiceProps> = ({ bill, patient, isLo
     }) ?? [];
 
   const invoiceTotal = {
-    'Total Amount': bill?.totalAmount,
-    'Amount Tendered': bill?.tenderedAmount,
-    'Discount Amount': 0,
-    'Amount due': bill?.totalAmount - bill?.tenderedAmount,
+    [t('totalAmount', 'Total amount')]: bill?.totalAmount,
+    [t('amountTendered', 'Amount tendered')]: bill?.tenderedAmount,
+    [t('discountAmount', 'Discount amount')]: 0,
+    [t('amountDue', 'Amount due')]: bill?.totalAmount - bill?.tenderedAmount,
   };
 
   const patientDetails = useMemo(() => {
     return {
       name: `${patient?.name?.[0]?.given?.join(' ')} ${patient?.name?.[0].family}`,
-      age: age(patient?.birthDate),
+      birthDate: patient?.birthDate,
       gender: getGender(patient?.gender, t),
       city: patient?.address?.[0].city,
       county: patient?.address?.[0].district,
@@ -65,28 +65,14 @@ const PrintableInvoice: React.FC<PrintableInvoiceProps> = ({ bill, patient, isLo
   }, [patient, t]);
 
   const invoiceDetails = {
-    'Invoice #': bill?.receiptNumber,
-    'Invoice date': bill.dateCreated,
-    Status: bill?.status,
+    [t('invoiceNumber', 'Invoice #')]: bill?.receiptNumber,
+    [t('invoiceDate', 'Invoice date')]: bill?.dateCreated,
+    [t('status', 'Status')]: bill?.status,
   };
 
-  if (isLoading) {
-    return (
-      <div className={styles.loaderContainer}>
-        <DataTableSkeleton
-          columnCount={headerData?.length ?? 0}
-          showHeader={false}
-          showToolbar={false}
-          size={responsiveSize}
-          zebra
-        />
-      </div>
-    );
-  }
-
   return (
-    <div className={styles.container}>
-      <PrintableInvoiceHeader patientDetails={patientDetails} />
+    <div className={styles.container} ref={componentRef}>
+      <PrintableInvoiceHeader patientDetails={patientDetails} defaultFacility={defaultFacility} />
       <div className={styles.printableInvoiceContainer}>
         <div className={styles.detailsContainer}>
           {Object.entries(invoiceDetails).map(([key, val]) => (
@@ -99,10 +85,10 @@ const PrintableInvoice: React.FC<PrintableInvoiceProps> = ({ bill, patient, isLo
 
         <div className={styles.itemsContainer}>
           <div className={styles.tableContainer}>
-            <DataTable isSortable rows={rowData} headers={headerData} size={responsiveSize} useZebraStyles={false}>
+            <DataTable rows={rowData} headers={headerData} size={responsiveSize} useZebraStyles={false}>
               {({ rows, headers, getRowProps, getTableProps }) => (
                 <TableContainer>
-                  <Table {...getTableProps()} aria-label="Invoice line items">
+                  <Table {...getTableProps()} aria-label={t('invoiceLineItems', 'Invoice line items')}>
                     <TableHead>
                       <TableRow>
                         {headers.map((header) => (

package/src/left-panel-link.test.tsx

@@ -23,7 +23,6 @@ describe('LinkExtension Component', () => {
 });
 
 describe('createLeftPanelLink Function', () => {
-  const user = userEvent.setup();
   test('returns a component that renders LinkExtension', () => {
     const config = { name: 'billing', title: 'Billing' };
     const TestComponent = createLeftPanelLink(config);
@@ -31,8 +30,6 @@ describe('createLeftPanelLink Function', () => {
     render(<TestComponent />);
     expect(screen.getByText('Billing')).toBeInTheDocument();
     const testLink = screen.getByRole('link', { name: 'Billing' });
-    user.click(testLink);
-    expect(window.location.pathname).toBe('/billing/6eb8d678-514d-46ad-9554-51e48d96d567');
-    // expect(testLink).toHaveClass('active-left-nav-link');
+    expect(testLink).toHaveAttribute('href', '/openmrs/spa/home/billing');
   });
 });

package/src/metrics-cards/metrics-cards.component.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { InlineLoading } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { ErrorState } from '@openmrs/esm-patient-common-lib';
+import { getCoreTranslation } from '@openmrs/esm-framework';
 import { useBills } from '../billing.resource';
 import { useBillMetrics } from './metrics.resource';
 import Card from './card.component';
@@ -14,24 +15,33 @@ export default function MetricsCards() {
 
   const cards = useMemo(
     () => [
-      { title: 'Cumulative Bills', count: cumulativeBills },
-      { title: 'Pending Bills', count: pendingBills },
-      { title: 'Paid Bills', count: paidBills },
+      { title: t('cumulativeBills', 'Cumulative bills'), count: cumulativeBills },
+      { title: t('pendingBills', 'Pending bills'), count: pendingBills },
+      { title: t('paidBills', 'Paid bills'), count: paidBills },
     ],
-    [cumulativeBills, pendingBills, paidBills],
+    [cumulativeBills, pendingBills, paidBills, t],
   );
 
   if (isLoading) {
     return (
       <section className={styles.container}>
-        <InlineLoading status="active" iconDescription="Loading" description="Loading bill metrics..." />
+        <InlineLoading
+          status="active"
+          iconDescription={getCoreTranslation('loading')}
+          description={t('loadingBillMetrics', 'Loading bill metrics') + '...'}
+        />
       </section>
     );
   }
 
   if (error) {
-    return <ErrorState headerTitle={t('billMetrics', 'Bill metrics')} error={error} />;
+    return (
+      <div className={styles.errorContainer}>
+        <ErrorState headerTitle={t('billMetrics', 'Bill metrics')} error={error} />
+      </div>
+    );
   }
+
   return (
     <section className={styles.container}>
       {cards.map((card) => (

package/src/metrics-cards/metrics-cards.scss

@@ -10,3 +10,7 @@
   row-gap: layout.$spacing-05;
   flex-flow: row wrap;
 }
+
+.errorContainer {
+  margin: layout.$spacing-05;
+}

package/src/metrics-cards/metrics-cards.test.tsx

@@ -3,10 +3,11 @@ import { render, screen } from '@testing-library/react';
 import { useConfig } from '@openmrs/esm-framework';
 import { billsSummary } from '../../__mocks__/bills.mock';
 import { useBills } from '../billing.resource';
+import { type MappedBill } from '../types';
 import MetricsCards from './metrics-cards.component';
 
-const mockUseBills = useBills as jest.Mock;
-const mockUseConfig = useConfig as jest.Mock;
+const mockUseBills = jest.mocked(useBills);
+const mockUseConfig = jest.mocked(useConfig);
 
 jest.mock('../billing.resource', () => ({
   useBills: jest.fn(),
@@ -14,13 +15,19 @@ jest.mock('../billing.resource', () => ({
 
 describe('MetricsCards', () => {
   test('renders loading state', () => {
-    mockUseBills.mockReturnValue({ isLoading: true, bills: [], error: null });
+    mockUseBills.mockReturnValue({ isLoading: true, bills: [], error: null, isValidating: false, mutate: jest.fn() });
     renderMetricsCards();
     expect(screen.getByText(/Loading bill metrics.../i)).toBeInTheDocument();
   });
 
   test('renders error state', () => {
-    mockUseBills.mockReturnValue({ isLoading: false, bills: [], error: new Error('Internal server error') });
+    mockUseBills.mockReturnValue({
+      isLoading: false,
+      bills: [],
+      error: new Error('Internal server error'),
+      isValidating: false,
+      mutate: jest.fn(),
+    });
     renderMetricsCards();
     expect(
       screen.getByText(
@@ -30,7 +37,13 @@ describe('MetricsCards', () => {
   });
 
   test('renders metrics cards', () => {
-    mockUseBills.mockReturnValue({ isLoading: false, bills: billsSummary, error: null });
+    mockUseBills.mockReturnValue({
+      isLoading: false,
+      bills: billsSummary as unknown as MappedBill[],
+      error: null,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
     mockUseConfig.mockImplementation(() => ({ defaultCurrency: 'USD' }));
     renderMetricsCards();
     expect(screen.getByRole('heading', { name: /cumulative bills/i })).toBeInTheDocument();

package/src/modal/require-payment-modal.test.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
 import { useBills } from '../billing.resource';
-import RequirePaymentModal from './require-payment-modal.component';
+import { type MappedBill } from '../types';
+import { configSchema, type BillingConfig } from '../config-schema';
+import RequirePaymentModal from './require-payment.modal';
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: (key: string) => key }),
-}));
-
-jest.mock('@openmrs/esm-framework', () => ({
-  useConfig: () => ({ defaultCurrency: 'USD' }),
-}));
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
+const mockUseBills = jest.mocked<typeof useBills>(useBills);
 
 jest.mock('../billing.resource', () => ({
   useBills: jest.fn(),
@@ -25,19 +23,19 @@ describe('RequirePaymentModal', () => {
   const patientUuid = '12345';
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    mockUseConfig.mockReturnValue({ ...getDefaultsFromConfigSchema(configSchema), defaultCurrency: 'USD' });
   });
 
   it('renders correctly', () => {
-    (useBills as jest.Mock).mockReturnValue({ bills: [], isLoading: false, error: null });
+    mockUseBills.mockReturnValue({ bills: [], isLoading: false, error: null, isValidating: false, mutate: jest.fn() });
     render(<RequirePaymentModal closeModal={closeModal} patientUuid={patientUuid} />);
-    expect(screen.getByText('patientBillingAlert')).toBeInTheDocument();
+    expect(screen.getByText('Patient Billing Alert')).toBeInTheDocument();
   });
 
   it('displays loading state', () => {
-    (useBills as jest.Mock).mockReturnValue({ bills: [], isLoading: true, error: null });
+    mockUseBills.mockReturnValue({ bills: [], isLoading: true, error: null, isValidating: false, mutate: jest.fn() });
     render(<RequirePaymentModal closeModal={closeModal} patientUuid={patientUuid} />);
-    expect(screen.getByText('inlineLoading')).toBeInTheDocument();
+    expect(screen.getByText('Loading bill items...')).toBeInTheDocument();
   });
 
   it('displays line items', () => {
@@ -45,22 +43,29 @@ describe('RequirePaymentModal', () => {
       {
         status: 'UNPAID',
         lineItems: [
-          { billableService: 'Service 1', quantity: 1, price: 100 },
-          { item: 'Item 1', quantity: 2, price: 50 },
+          { billableService: 'Service 1', quantity: 1, price: 100, uuid: 'billable-service-1' },
+          { item: 'Item 1', quantity: 2, price: 50, uuid: 'billable-item-1' },
         ],
       },
     ];
-    (useBills as jest.Mock).mockReturnValue({ bills, isLoading: false, error: null });
+    mockUseBills.mockReturnValue({
+      bills: bills as unknown as MappedBill[],
+      isLoading: false,
+      error: null,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
     render(<RequirePaymentModal closeModal={closeModal} patientUuid={patientUuid} />);
     expect(screen.getByText('Service 1')).toBeInTheDocument();
     expect(screen.getByText('Item 1')).toBeInTheDocument();
   });
 
-  it('handles closeModal', () => {
-    (useBills as jest.Mock).mockReturnValue({ bills: [], isLoading: false, error: null });
+  it('handles closeModal', async () => {
+    const user = userEvent.setup();
+    mockUseBills.mockReturnValue({ bills: [], isLoading: false, error: null, isValidating: false, mutate: jest.fn() });
     render(<RequirePaymentModal closeModal={closeModal} patientUuid={patientUuid} />);
-    fireEvent.click(screen.getByText('cancel'));
-    fireEvent.click(screen.getByText('ok'));
+    await user.click(screen.getByText('Cancel'));
+    await user.click(screen.getByText('OK'));
     expect(closeModal).toHaveBeenCalledTimes(2);
   });
 });

package/src/modal/{require-payment-modal.component.tsx → require-payment.modal.tsx}

@@ -12,7 +12,7 @@ import {
   StructuredListRow,
   StructuredListWrapper,
 } from '@carbon/react';
-import { useConfig } from '@openmrs/esm-framework';
+import { getCoreTranslation, useConfig } from '@openmrs/esm-framework';
 import { useBills } from '../billing.resource';
 import { convertToCurrency } from '../helpers';
 import styles from './require-payment.scss';
@@ -29,22 +29,23 @@ const RequirePaymentModal: React.FC<RequirePaymentModalProps> = ({ closeModal, p
   const lineItems = bills.filter((bill) => bill?.status !== 'PAID').flatMap((bill) => bill?.lineItems);
 
   return (
-    <div>
+    <>
       <ModalHeader closeModal={closeModal} title={t('patientBillingAlert', 'Patient Billing Alert')} />
       <ModalBody>
         <p className={styles.bodyShort02}>
           {t(
             'billPaymentRequiredMessage',
-            'The current patient has pending bill. Advice patient to settle bill before receiving services',
+            'The current patient has a pending bill. Advise the patient to settle the bill before receiving services',
           )}
         </p>
         {isLoading && (
           <InlineLoading
             status="active"
-            iconDescription="Loading"
-            description={t('inlineLoading', 'Loading bill items...')}
+            iconDescription={getCoreTranslation('loading')}
+            description={t('loadingBillItems', 'Loading bill items') + '...'}
           />
         )}
+
         <StructuredListWrapper isCondensed>
           <StructuredListHead>
             <StructuredListRow head>
@@ -55,30 +56,28 @@ const RequirePaymentModal: React.FC<RequirePaymentModalProps> = ({ closeModal, p
             </StructuredListRow>
           </StructuredListHead>
           <StructuredListBody>
-            {lineItems.map((lineItem) => {
-              return (
-                <StructuredListRow>
-                  <StructuredListCell>{lineItem.billableService || lineItem.item}</StructuredListCell>
-                  <StructuredListCell>{lineItem.quantity}</StructuredListCell>
-                  <StructuredListCell>{convertToCurrency(lineItem.price, defaultCurrency)}</StructuredListCell>
-                  <StructuredListCell>
-                    {convertToCurrency(lineItem.quantity * lineItem.price, defaultCurrency)}
-                  </StructuredListCell>
-                </StructuredListRow>
-              );
-            })}
+            {lineItems.map((lineItem) => (
+              <StructuredListRow key={lineItem.uuid}>
+                <StructuredListCell>{lineItem.billableService || lineItem.item}</StructuredListCell>
+                <StructuredListCell>{lineItem.quantity}</StructuredListCell>
+                <StructuredListCell>{convertToCurrency(lineItem.price, defaultCurrency)}</StructuredListCell>
+                <StructuredListCell>
+                  {convertToCurrency(lineItem.quantity * lineItem.price, defaultCurrency)}
+                </StructuredListCell>
+              </StructuredListRow>
+            ))}
           </StructuredListBody>
         </StructuredListWrapper>
       </ModalBody>
       <ModalFooter>
         <Button kind="secondary" onClick={closeModal}>
-          {t('cancel', 'Cancel')}
+          {getCoreTranslation('cancel')}
         </Button>
         <Button kind="primary" onClick={closeModal}>
           {t('ok', 'OK')}
         </Button>
       </ModalFooter>
-    </div>
+    </>
   );
 };