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

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 } 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
@@ -52,8 +53,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,19 +1,17 @@
 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',
@@ -25,11 +23,19 @@ const testProps = {
   },
 };
 
+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();
 
@@ -41,17 +47,13 @@ describe('PrintableInvoiceHeader', () => {
   });
 
   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} />);
+    render(<PrintableInvoiceHeader {...testProps} defaultFacility={defaultFacility} />);
     const logo = screen.getByRole('img');
     expect(logo).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 { age, 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,10 +47,10 @@ 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(() => {
@@ -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,7 +85,7 @@ 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">

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.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...')}
+            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>
+    </>
   );
 };
 

package/src/routes.json

@@ -78,15 +78,33 @@
       "name": "billing-home-tiles-ext",
       "slot": "billing-home-tiles-slot",
       "component": "serviceMetrics"
-    },
-    {
-      "name": "edit-bill-line-item-dialog",
-      "component": "editBillLineItemDialog",
-      "online": true,
-      "offline": true
     }
   ],
   "modals": [
+    {
+      "name": "add-cash-point-modal",
+      "component": "addCashPointModal"
+    },
+    {
+      "name": "add-payment-mode-modal",
+      "component": "addPaymentModeModal"
+    },
+    {
+      "name": "delete-payment-mode-modal",
+      "component": "deletePaymentModeModal"
+    },
+    {
+      "name": "edit-bill-item-modal",
+      "component": "editBillLineItemModal"
+    },
+    {
+      "name": "edit-bill-line-item-modal",
+      "component": "editBillLineItemModal"
+    },
+    {
+      "name": "edit-billable-service-modal",
+      "component": "editBillableServiceModal"
+    },
     {
       "name": "require-billing-modal",
       "component": "requirePaymentModal"
@@ -107,4 +125,4 @@
       "description": "This feature introduces navigation links on the patient chart and home page to allow accessing the billing module features"
     }
   ]
-}
+}