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

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import fuzzy from 'fuzzy';
 import {
@@ -13,42 +13,38 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-  TableSelectRow,
   TableToolbarSearch,
   Tile,
   type DataTableRow,
 } from '@carbon/react';
 import { Edit } from '@carbon/react/icons';
-import { isDesktop, showModal, useConfig, useDebounce, useLayoutType } from '@openmrs/esm-framework';
+import {
+  isDesktop,
+  showModal,
+  useConfig,
+  useDebounce,
+  useLayoutType,
+  getCoreTranslation,
+} from '@openmrs/esm-framework';
 import { type LineItem, type MappedBill } from '../types';
 import { convertToCurrency } from '../helpers';
+import type { BillingConfig } from '../config-schema';
 import styles from './invoice-table.scss';
 
 type InvoiceTableProps = {
   bill: MappedBill;
-  isSelectable?: boolean;
   isLoadingBill?: boolean;
-  onSelectItem?: (selectedLineItems: LineItem[]) => void;
 };
 
-const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true, isLoadingBill, onSelectItem }) => {
+const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isLoadingBill }) => {
   const { t } = useTranslation();
-  const { defaultCurrency, showEditBillButton } = useConfig();
+  const { defaultCurrency } = useConfig<BillingConfig>();
   const layout = useLayoutType();
   const lineItems = useMemo(() => bill?.lineItems ?? [], [bill?.lineItems]);
-  const paidLineItems = useMemo(() => lineItems?.filter((item) => item.paymentStatus === 'PAID') ?? [], [lineItems]);
   const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
-
-  const [selectedLineItems, setSelectedLineItems] = useState(paidLineItems ?? []);
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearchTerm = useDebounce(searchTerm);
 
-  useEffect(() => {
-    if (onSelectItem) {
-      onSelectItem(selectedLineItems);
-    }
-  }, [selectedLineItems, onSelectItem]);
-
   const filteredLineItems = useMemo(() => {
     if (!debouncedSearchTerm) {
       return lineItems;
@@ -65,14 +61,14 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
   }, [debouncedSearchTerm, lineItems]);
 
   const tableHeaders = [
-    { header: 'No', key: 'no', width: 7 }, // Width as a percentage
-    { header: 'Bill item', key: 'billItem', width: 25 },
-    { header: 'Bill code', key: 'billCode', width: 20 },
-    { header: 'Status', key: 'status', width: 25 },
-    { header: 'Quantity', key: 'quantity', width: 15 },
-    { header: 'Price', key: 'price', width: 24 },
-    { header: 'Total', key: 'total', width: 15 },
-    { header: t('actions', 'Actions'), key: 'actionButton' },
+    { header: t('number', 'No'), key: 'no', width: 7 }, // Width as a percentage
+    { header: t('billItem', 'Bill item'), key: 'billItem', width: 25 },
+    { header: t('billCode', 'Bill code'), key: 'billCode', width: 20 },
+    { header: t('status', 'Status'), key: 'status', width: 25 },
+    { header: t('quantity', 'Quantity'), key: 'quantity', width: 15 },
+    { header: t('price', 'Price'), key: 'price', width: 24 },
+    { header: t('total', 'Total'), key: 'total', width: 15 },
+    { header: getCoreTranslation('actions'), key: 'actionButton' },
   ];
 
   const handleSelectBillItem = useCallback(
@@ -100,24 +96,20 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
           total: item.price * item.quantity,
           actionButton: (
             <span>
-              {showEditBillButton ? (
-                <Button
-                  data-testid={`edit-button-${item.uuid}`}
-                  renderIcon={Edit}
-                  hasIconOnly
-                  kind="ghost"
-                  iconDescription={t('editThisBillItem', 'Edit this bill item')}
-                  tooltipPosition="left"
-                  onClick={() => handleSelectBillItem(item)}
-                />
-              ) : (
-                '--'
-              )}
+              <Button
+                data-testid={`edit-button-${item.uuid}`}
+                renderIcon={Edit}
+                hasIconOnly
+                kind="ghost"
+                iconDescription={t('editThisBillItem', 'Edit this bill item')}
+                tooltipPosition="left"
+                onClick={() => handleSelectBillItem(item)}
+              />
             </span>
           ),
         };
       }) ?? [],
-    [filteredLineItems, bill?.receiptNumber, defaultCurrency, showEditBillButton, t, handleSelectBillItem],
+    [filteredLineItems, bill?.receiptNumber, defaultCurrency, t, handleSelectBillItem],
   );
 
   if (isLoadingBill) {
@@ -135,23 +127,10 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
     );
   }
 
-  const handleRowSelection = (row: typeof DataTableRow, checked: boolean) => {
-    const matchingRow = filteredLineItems.find((item) => item.uuid === row.id);
-    let newSelectedLineItems;
-
-    if (checked) {
-      newSelectedLineItems = [...selectedLineItems, matchingRow];
-    } else {
-      newSelectedLineItems = selectedLineItems.filter((item) => item.uuid !== row.id);
-    }
-    setSelectedLineItems(newSelectedLineItems);
-    onSelectItem(newSelectedLineItems);
-  };
-
   return (
-    <div className={styles.invoiceContainer}>
-      <DataTable headers={tableHeaders} isSortable rows={tableRows} size={responsiveSize} useZebraStyles>
-        {({ rows, headers, getRowProps, getSelectionProps, getTableProps, getToolbarProps }) => (
+    <>
+      <DataTable headers={tableHeaders} rows={tableRows} size={responsiveSize} useZebraStyles>
+        {({ rows, headers, getRowProps, getTableProps }) => (
           <TableContainer
             description={
               <span className={styles.tableDescription}>
@@ -172,7 +151,6 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
               className={`${styles.invoiceTable} billingTable`}>
               <TableHead>
                 <TableRow>
-                  {rows.length > 1 && isSelectable ? <TableHeader /> : null}
                   {headers.map((header) => (
                     <TableHeader key={header.key}>{header.header}</TableHeader>
                   ))}
@@ -186,18 +164,6 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
                       {...getRowProps({
                         row,
                       })}>
-                      {rows.length > 1 && isSelectable && (
-                        <TableSelectRow
-                          aria-label="Select row"
-                          {...getSelectionProps({ row })}
-                          disabled={tableRows[index].status === 'PAID'}
-                          onChange={(checked: boolean) => handleRowSelection(row, checked)}
-                          checked={
-                            tableRows[index].status === 'PAID' ||
-                            Boolean(selectedLineItems?.find((item) => item?.uuid === row?.id))
-                          }
-                        />
-                      )}
                       {row.cells.map((cell) => (
                         <TableCell key={cell.id}>{cell.value}</TableCell>
                       ))}
@@ -221,7 +187,7 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
           </Layer>
         </div>
       )}
-    </div>
+    </>
   );
 };
 

package/src/invoice/invoice-table.scss

@@ -29,11 +29,7 @@
 
 .headerContainer {
   background-color: colors.$gray-10;
-}
-
-.invoiceContainer {
-  border: 1px solid $ui-03;
-}
+}c
 
 .searchbox {
   input:focus {

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

@@ -1,43 +1,23 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { render, screen, fireEvent, act } from '@testing-library/react';
-import { showModal } from '@openmrs/esm-framework';
-import InvoiceTable from './invoice-table.component';
+import userEvent from '@testing-library/user-event';
+import { render, screen, act } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, showModal, useConfig } from '@openmrs/esm-framework';
 import { type MappedBill } from '../types';
+import { configSchema, type BillingConfig } from '../config-schema';
+import InvoiceTable from './invoice-table.component';
 
-// Mocking dependencies
-jest.mock('react-i18next', () => ({
-  useTranslation: jest.fn(() => ({
-    t: jest.fn((key, fallback) => fallback || key),
-    i18n: { language: 'en' },
-  })),
-}));
-
-jest.mock('@openmrs/esm-framework', () => ({
-  showModal: jest.fn(),
-  useConfig: jest.fn(() => ({
-    defaultCurrency: 'USD',
-    showEditBillButton: true,
-  })),
-  useDebounce: jest.fn((value) => value),
-  useLayoutType: jest.fn(() => 'desktop'),
-  isDesktop: jest.fn(() => true),
-}));
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
 
 jest.mock('../helpers', () => ({
   convertToCurrency: jest.fn((price) => `USD ${price}`),
 }));
 
 describe('InvoiceTable', () => {
-  const mockT = jest.fn((key) => key);
-
   beforeEach(() => {
-    (useTranslation as jest.Mock).mockReturnValue({ t: mockT, i18n: { language: 'en' } });
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      defaultCurrency: 'USD',
+    });
   });
 
   const bill: MappedBill = {
@@ -103,11 +83,12 @@ describe('InvoiceTable', () => {
     expect(screen.getByTestId('receipt-number-0')).toHaveTextContent('12345');
   });
 
-  it('renders the edit button and calls showModal when clicked', () => {
+  it('renders the edit button and calls showModal when clicked', async () => {
+    const user = userEvent.setup();
     render(<InvoiceTable bill={bill} />);
 
     const editButton = screen.getByTestId('edit-button-1');
-    fireEvent.click(editButton);
+    await user.click(editButton);
     expect(showModal).toHaveBeenCalledWith('edit-bill-line-item-dialog', expect.anything());
   });
 
@@ -117,31 +98,23 @@ describe('InvoiceTable', () => {
     expect(screen.getByTestId('loader')).toBeInTheDocument();
   });
 
-  it('filters line items based on the search term', () => {
+  it('filters line items based on the search term', async () => {
+    const user = userEvent.setup();
     render(<InvoiceTable bill={bill} />);
-    const searchInput = screen.getByPlaceholderText('searchThisTable'); //
+    const searchInput = screen.getByPlaceholderText(/search this table/i);
 
-    fireEvent.change(searchInput, { target: { value: 'Item 2' } });
+    await user.type(searchInput, 'Item 2');
 
     expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
     expect(screen.getByText('Item 2')).toBeInTheDocument();
   });
 
-  it('correctly handles row selection', () => {
-    const onSelectItem = jest.fn();
-    render(<InvoiceTable bill={bill} onSelectItem={onSelectItem} />);
-
-    const checkboxes = screen.getAllByLabelText('Select row');
-    fireEvent.click(checkboxes[0]);
-
-    expect(onSelectItem).toHaveBeenCalledWith([bill.lineItems[0]]);
-  });
-
-  it('resets isRedirecting to false after timeout', () => {
+  it('resets isRedirecting to false after timeout', async () => {
+    const user = userEvent.setup();
     render(<InvoiceTable bill={bill} />);
 
     const button = screen.getByTestId('edit-button-1');
-    fireEvent.click(button);
+    await user.click(button);
     act(() => {
       jest.advanceTimersByTime(1000);
     });

package/src/invoice/invoice.component.tsx

@@ -4,15 +4,15 @@ import { Printer } from '@carbon/react/icons';
 import { useParams } from 'react-router-dom';
 import { useReactToPrint } from 'react-to-print';
 import { useTranslation } from 'react-i18next';
-import { ExtensionSlot, useConfig, usePatient } from '@openmrs/esm-framework';
-import { ErrorState } from '@openmrs/esm-patient-common-lib';
-import { convertToCurrency } from '../helpers';
-import { type LineItem } from '../types';
-import { useBill } from '../billing.resource';
+import { ExtensionSlot, showSnackbar, useConfig, usePatient } from '@openmrs/esm-framework';
 import InvoiceTable from './invoice-table.component';
 import Payments from './payments/payments.component';
 import PrintReceipt from './printable-invoice/print-receipt.component';
 import PrintableInvoice from './printable-invoice/printable-invoice.component';
+import { ErrorState } from '@openmrs/esm-patient-common-lib';
+import { convertToCurrency } from '../helpers';
+import { useBill, useDefaultFacility } from '../billing.resource';
+import type { BillingConfig } from '../config-schema';
 import styles from './invoice.scss';
 
 interface InvoiceDetailsProps {
@@ -22,25 +22,20 @@ interface InvoiceDetailsProps {
 
 const Invoice: React.FC = () => {
   const { t } = useTranslation();
+  const { data } = useDefaultFacility();
   const { billUuid, patientUuid } = useParams();
   const { patient, isLoading: isLoadingPatient } = usePatient(patientUuid);
   const { bill, isLoading: isLoadingBill, error, mutate } = useBill(billUuid);
   const [isPrinting, setIsPrinting] = useState(false);
-  const [selectedLineItems, setSelectedLineItems] = useState<LineItem[]>([]);
   const componentRef = useRef<HTMLDivElement>(null);
   const onBeforeGetContentResolve = useRef<(() => void) | null>(null);
-  const { defaultCurrency } = useConfig();
-  const handleSelectItem = (lineItems: LineItem[]) => {
-    setSelectedLineItems(lineItems);
-  };
+  const { defaultCurrency } = useConfig<BillingConfig>();
 
   const handleAfterPrint = useCallback(() => {
     onBeforeGetContentResolve.current = null;
     setIsPrinting(false);
   }, []);
 
-  const reactToPrintContent = useCallback(() => componentRef.current, []);
-
   const handleOnBeforeGetContent = useCallback(() => {
     return new Promise<void>((resolve) => {
       if (patient && bill) {
@@ -51,11 +46,17 @@ const Invoice: React.FC = () => {
   }, [bill, patient]);
 
   const handlePrint = useReactToPrint({
-    content: reactToPrintContent,
+    contentRef: componentRef,
     documentTitle: `Invoice ${bill?.receiptNumber} - ${patient?.name?.[0]?.given?.join(' ')} ${patient?.name?.[0].family}`,
-    onBeforeGetContent: handleOnBeforeGetContent,
+    onBeforePrint: handleOnBeforeGetContent,
     onAfterPrint: handleAfterPrint,
-    removeAfterPrint: true,
+    preserveAfterPrint: false,
+    onPrintError: (_, error) =>
+      showSnackbar({
+        title: t('errorPrintingInvoice', 'Error printing invoice'),
+        kind: 'error',
+        subtitle: error.message,
+      }),
   });
 
   useEffect(() => {
@@ -64,11 +65,14 @@ const Invoice: React.FC = () => {
     }
   }, [isPrinting]);
 
-  useEffect(() => {
-    const unPaidLineItems = bill?.lineItems?.filter((item) => item.paymentStatus === 'PENDING') ?? [];
-    setSelectedLineItems(unPaidLineItems);
-  }, [bill?.lineItems]);
-
+  // Do not remove this comment. Adds the translation keys for the invoice details
+  /**
+   * t('totalAmount', 'Total Amount')
+   * t('amountTendered', 'Amount Tendered')
+   * t('invoiceNumber', 'Invoice Number')
+   * t('dateAndTime', 'Date And Time')
+   * t('invoiceStatus', 'Invoice Status')
+   */
   const invoiceDetails = {
     'Total Amount': convertToCurrency(bill?.totalAmount, defaultCurrency),
     'Amount Tendered': convertToCurrency(bill?.tenderedAmount, defaultCurrency),
@@ -77,14 +81,14 @@ const Invoice: React.FC = () => {
     'Invoice Status': bill?.status,
   };
 
-  if (isLoadingPatient && isLoadingBill) {
+  if (isLoadingPatient || isLoadingBill) {
     return (
       <div className={styles.invoiceContainer}>
         <InlineLoading
           className={styles.loader}
           status="active"
           iconDescription="Loading"
-          description="Loading patient header..."
+          description={t('loadingBillInfo', 'Loading bill information...')}
         />
       </div>
     );
@@ -109,7 +113,7 @@ const Invoice: React.FC = () => {
         </section>
         <div>
           <Button
-            disabled={isPrinting}
+            disabled={isPrinting || isLoadingPatient || isLoadingBill}
             onClick={handlePrint}
             renderIcon={(props) => <Printer size={24} {...props} />}
             iconDescription="Print bill"
@@ -120,20 +124,23 @@ const Invoice: React.FC = () => {
         </div>
       </div>
 
-      <InvoiceTable bill={bill} isLoadingBill={isLoadingBill} onSelectItem={handleSelectItem} />
-      <Payments bill={bill} mutate={mutate} selectedLineItems={selectedLineItems} />
+      <InvoiceTable bill={bill} isLoadingBill={isLoadingBill} />
+      <Payments bill={bill} mutate={mutate} />
 
-      <div className={styles.printContainer} ref={componentRef}>
-        {isPrinting && <PrintableInvoice bill={bill} patient={patient} isLoading={isLoadingPatient} />}
-      </div>
+      {bill && patient && (
+        <div className={styles.printContainer}>
+          <PrintableInvoice bill={bill} patient={patient} defaultFacility={data} componentRef={componentRef} />
+        </div>
+      )}
     </div>
   );
 };
 
 function InvoiceDetails({ label, value }: InvoiceDetailsProps) {
+  const { t } = useTranslation();
   return (
     <div>
-      <h1 className={styles.label}>{label}</h1>
+      <h1 className={styles.label}>{t(label)}</h1>
       <span className={styles.value}>{value}</span>
     </div>
   );

package/src/invoice/invoice.scss

@@ -78,16 +78,19 @@
   color: colors.$cool-gray-90;
 }
 
-@media screen {
-  .printContainer {
-    background-color: colors.$white;
-    display: none;
+.printContainer {
+  background-color: colors.$white;
+  display: none;
+
+  @media print {
+    display: block !important;
   }
 }
 
 @media print {
   html,
   body {
+    display: block !important;
     background-color: colors.$white !important;
   }
 }

package/src/invoice/invoice.test.tsx

@@ -1,24 +1,21 @@
 import React from 'react';
-import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { screen, render } from '@testing-library/react';
 import { useReactToPrint } from 'react-to-print';
-import { mockBill } from '../../__mocks__/bills.mock';
+import { getDefaultsFromConfigSchema, useConfig, usePatient } from '@openmrs/esm-framework';
+import { configSchema, type BillingConfig } from '../config-schema';
+import { mockBill, mockPatient } from '../../__mocks__/bills.mock';
 import { useBill, processBillPayment } from '../billing.resource';
 import { usePaymentModes } from './payments/payment.resource';
 import Invoice from './invoice.component';
 
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
+
 // Mock convertToCurrency
 jest.mock('../helpers/functions', () => ({
   convertToCurrency: jest.fn((amount) => `USD ${amount}`),
 }));
 
-// Mock i18next
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}));
-
 // Set window.i18next
 window.i18next = {
   language: 'en',
@@ -78,40 +75,9 @@ jest.mock('react-to-print', () => ({
   useReactToPrint: jest.fn(),
 }));
 
-// Mock OpenMRS framework
-jest.mock('@openmrs/esm-framework', () => ({
-  showSnackbar: jest.fn(),
-  useLayoutType: jest.fn(() => 'desktop'),
-  isDesktop: jest.fn(() => true),
-  useConfig: jest.fn(() => ({
-    defaultCurrency: 'USD',
-  })),
-  formatDate: jest.fn((date) => date?.toString() ?? ''),
-  ExtensionSlot: jest.fn(({ children }) => <div data-testid="extension-slot">{children}</div>),
-  usePatient: jest.fn().mockReturnValue({
-    patient: {
-      id: 'b2fcf02b-7ee3-4d16-a48f-576be2b103aa',
-      name: [{ given: ['John'], family: 'Doe' }],
-    },
-    patientUuid: 'b2fcf02b-7ee3-4d16-a48f-576be2b103aa',
-    isLoading: false,
-    error: null,
-  }),
-  createGlobalStore: jest.fn(),
-  getGlobalStore: jest.fn(() => ({
-    subscribe: jest.fn(),
-    getState: jest.fn(),
-    setState: jest.fn(),
-  })),
-}));
-
-// Mock patient common lib
-jest.mock('@openmrs/esm-patient-common-lib', () => ({
-  ErrorState: jest.fn(({ error }) => <div data-testid="error-state">Error: {error?.message || error}</div>),
-}));
-
 describe('Invoice', () => {
   const mockedBill = useBill as jest.Mock;
+  const mockedPatient = usePatient as jest.Mock;
   const mockedProcessBillPayment = processBillPayment as jest.Mock;
   const mockedUsePaymentModes = usePaymentModes as jest.Mock;
   const mockedUseReactToPrint = useReactToPrint as jest.Mock;
@@ -144,6 +110,14 @@ describe('Invoice', () => {
       mutate: jest.fn(),
     });
 
+    mockedPatient.mockReturnValue({
+      patient: mockPatient,
+      isLoading: false,
+      error: null,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
+
     mockedUsePaymentModes.mockReturnValue({
       paymentModes: [
         { uuid: 'cash-uuid', name: 'Cash', description: 'Cash Method', retired: false },
@@ -154,15 +128,13 @@ describe('Invoice', () => {
       mutate: jest.fn(),
     });
 
+    mockUseConfig.mockReturnValue({ ...getDefaultsFromConfigSchema(configSchema), defaultCurrency: 'USD' });
+
     // Setup print handler mock
     const printHandler = jest.fn();
     mockedUseReactToPrint.mockReturnValue(printHandler);
   });
 
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
   it('should render error state correctly', () => {
     mockedBill.mockReturnValue({
       bill: null,
@@ -173,8 +145,8 @@ describe('Invoice', () => {
     });
 
     render(<Invoice />);
-    expect(screen.getByTestId('error-state')).toBeInTheDocument();
-    expect(screen.getByText(/Test error/i)).toBeInTheDocument();
+    expect(screen.getByText(/Invoice error/i)).toBeInTheDocument();
+    expect(screen.getByText(/Error/)).toBeInTheDocument();
   });
 
   it('should render invoice details correctly', () => {
@@ -265,7 +237,9 @@ describe('Invoice', () => {
 
   it('should show patient information correctly', () => {
     render(<Invoice />);
-    expect(screen.getByTestId('extension-slot')).toBeInTheDocument();
+    // Check that the invoice details are rendered
+    expect(screen.getByText('Invoice Number')).toBeInTheDocument();
+    expect(screen.getByText('RCPT-001')).toBeInTheDocument();
   });
 
   // Add more test cases as needed for specific features or edge cases