@openmrs/esm-billing-app 1.0.1-pre.95 → 1.0.2-pre.56

package/src/index.ts

@@ -1,23 +1,17 @@
 import { configSchema } from './config-schema';
-import { createDashboardLink, registerWorkspace } from '@openmrs/esm-patient-common-lib';
+import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
 import { createLeftPanelLink } from './left-panel-link.component';
 import { dashboardMeta } from './dashboard.meta';
-import {
-  defineConfigSchema,
-  getAsyncLifecycle,
-  getSyncLifecycle,
-  registerFeatureFlag,
-  translateFrom,
-} from '@openmrs/esm-framework';
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import appMenu from './billable-services/billable-services-menu-item/item.component';
 import BillableServiceHome from './billable-services/billable-services-home.component';
 import BillableServicesCardLink from './billable-services-admin-card-link.component';
 import BillHistory from './bill-history/bill-history.component';
 import BillingCheckInForm from './billing-form/billing-checkin-form.component';
 import RequirePaymentModal from './modal/require-payment-modal.component';
 import RootComponent from './root.component';
-import VisitAttributeTags from './invoice/payments/visit-tags/visit-attribute.component';
-import BillableServicesDashboard from './billable-services/dashboard/dashboard.component';
 import ServiceMetrics from './billable-services/dashboard/service-metrics.component';
+import VisitAttributeTags from './invoice/payments/visit-tags/visit-attribute.component';
 
 const moduleName = '@openmrs/esm-billing-app';
 
@@ -26,12 +20,6 @@ const options = {
   moduleName,
 };
 
-registerFeatureFlag(
-  'billing',
-  'Billing module',
-  'This feature introduces navigation links on the patient chart and home page to allow accessing the billing module features',
-);
-
 // t('billing', 'Billing')
 export const billingDashboardLink = getSyncLifecycle(
   createLeftPanelLink({
@@ -45,16 +33,6 @@ export const importTranslation = require.context('../translations', false, /.jso
 
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
-
-  // t('billingForm', 'Billing form')
-  registerWorkspace({
-    name: 'billing-form-workspace',
-    title: translateFrom(moduleName, 'billingForm', 'Billing form'),
-    load: getAsyncLifecycle(() => import('./billing-form/billing-form.component'), options),
-    type: 'billing',
-    canHide: false,
-    width: 'wider',
-  });
 }
 
 export const billingSummaryDashboardLink = getSyncLifecycle(
@@ -62,11 +40,28 @@ export const billingSummaryDashboardLink = getSyncLifecycle(
   options,
 );
 
+export const billableServicesAppMenuItem = getSyncLifecycle(appMenu, options);
+
 export const billableServicesCardLink = getSyncLifecycle(BillableServicesCardLink, options);
+
 export const billableServicesHome = getSyncLifecycle(BillableServiceHome, options);
+
 export const billingCheckInForm = getSyncLifecycle(BillingCheckInForm, options);
-export const serviceMetrics = getSyncLifecycle(ServiceMetrics, options);
+
 export const billingPatientSummary = getSyncLifecycle(BillHistory, options);
+
 export const requirePaymentModal = getSyncLifecycle(RequirePaymentModal, options);
+
 export const root = getSyncLifecycle(RootComponent, options);
+
+export const serviceMetrics = getSyncLifecycle(ServiceMetrics, options);
+
 export const visitAttributeTags = getSyncLifecycle(VisitAttributeTags, options);
+
+export const editBillLineItemDialog = getAsyncLifecycle(() => import('./bill-item-actions/edit-bill-item.component'), {
+  featureName: 'edit bill line item',
+  moduleName,
+});
+
+// t('billingForm', 'Billing form')
+export const billingFormWorkspace = getAsyncLifecycle(() => import('./billing-form/billing-form.component'), options);

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

@@ -1,7 +1,8 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import fuzzy from 'fuzzy';
 import {
+  Button,
   DataTable,
   DataTableSkeleton,
   Layer,
@@ -12,18 +13,16 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-  TableToolbar,
-  TableToolbarContent,
-  TableToolbarSearch,
   TableSelectRow,
+  TableToolbarSearch,
   Tile,
-  type DataTableHeader,
   type DataTableRow,
 } from '@carbon/react';
-import { isDesktop, useConfig, useDebounce, useLayoutType } from '@openmrs/esm-framework';
+import { Edit } from '@carbon/react/icons';
+import { isDesktop, showModal, useConfig, useDebounce, useLayoutType } from '@openmrs/esm-framework';
 import { type LineItem, type MappedBill } from '../types';
-import styles from './invoice-table.scss';
 import { convertToCurrency } from '../helpers';
+import styles from './invoice-table.scss';
 
 type InvoiceTableProps = {
   bill: MappedBill;
@@ -34,14 +33,21 @@ type InvoiceTableProps = {
 
 const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true, isLoadingBill, onSelectItem }) => {
   const { t } = useTranslation();
-  const lineItems = bill?.lineItems ?? [];
+  const { defaultCurrency, showEditBillButton } = useConfig();
   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 pendingLineItems = lineItems?.filter((item) => item.paymentStatus === 'PENDING') ?? [];
-  const [selectedLineItems, setSelectedLineItems] = useState(pendingLineItems ?? []);
+
+  const [selectedLineItems, setSelectedLineItems] = useState(paidLineItems ?? []);
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearchTerm = useDebounce(searchTerm);
-  const { defaultCurrency } = useConfig();
+
+  useEffect(() => {
+    if (onSelectItem) {
+      onSelectItem(selectedLineItems);
+    }
+  }, [selectedLineItems, onSelectItem]);
 
   const filteredLineItems = useMemo(() => {
     if (!debouncedSearchTerm) {
@@ -58,16 +64,28 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
       : lineItems;
   }, [debouncedSearchTerm, lineItems]);
 
-  const tableHeaders: Array<typeof DataTableHeader> = [
-    { header: 'No', key: 'no' },
-    { header: 'Bill item', key: 'billItem' },
-    { header: 'Bill code', key: 'billCode' },
-    { header: 'Status', key: 'status' },
-    { header: 'Quantity', key: 'quantity' },
-    { header: 'Price', key: 'price' },
-    { header: 'Total', key: 'total' },
+  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' },
   ];
 
+  const handleSelectBillItem = useCallback(
+    (row: LineItem) => {
+      const dispose = showModal('edit-bill-line-item-dialog', {
+        bill,
+        item: row,
+        closeModal: () => dispose(),
+      });
+    },
+    [bill],
+  );
+
   const tableRows: Array<typeof DataTableRow> = useMemo(
     () =>
       filteredLineItems?.map((item, index) => {
@@ -75,20 +93,38 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
           no: `${index + 1}`,
           id: `${item.uuid}`,
           billItem: item.billableService ? item.billableService : item?.item,
-          billCode: bill?.receiptNumber,
-          status: item?.paymentStatus,
+          billCode: <span data-testid={`receipt-number-${index}`}>{bill?.receiptNumber}</span>,
+          status: item.paymentStatus,
           quantity: item.quantity,
           price: convertToCurrency(item.price, defaultCurrency),
-          total: convertToCurrency(item.price * item.quantity, defaultCurrency),
+          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)}
+                />
+              ) : (
+                '--'
+              )}
+            </span>
+          ),
         };
       }) ?? [],
-    [bill?.receiptNumber, filteredLineItems],
+    [filteredLineItems, bill?.receiptNumber, defaultCurrency, showEditBillButton, t, handleSelectBillItem],
   );
 
   if (isLoadingBill) {
     return (
       <div className={styles.loaderContainer}>
         <DataTableSkeleton
+          data-testid="loader"
           columnCount={tableHeaders.length}
           showHeader={false}
           showToolbar={false}
@@ -123,20 +159,17 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
               </span>
             }
             title={t('lineItems', 'Line items')}>
-            <div className={styles.toolbarWrapper}>
-              <TableToolbar {...getToolbarProps()} className={styles.tableToolbar} size={responsiveSize}>
-                <TableToolbarContent className={styles.headerContainer}>
-                  <TableToolbarSearch
-                    className={styles.searchbox}
-                    expanded
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
-                    placeholder={t('searchThisTable', 'Search this table')}
-                    size={responsiveSize}
-                  />
-                </TableToolbarContent>
-              </TableToolbar>
-            </div>
-            <Table {...getTableProps()} aria-label="Invoice line items" className={styles.table}>
+            <TableToolbarSearch
+              className={styles.searchbox}
+              expanded
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+              placeholder={t('searchThisTable', 'Search this table')}
+              size={responsiveSize}
+            />
+            <Table
+              {...getTableProps()}
+              aria-label="Invoice line items"
+              className={`${styles.invoiceTable} billingTable`}>
               <TableHead>
                 <TableRow>
                   {rows.length > 1 && isSelectable ? <TableHeader /> : null}
@@ -146,25 +179,31 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
                 </TableRow>
               </TableHead>
               <TableBody>
-                {rows.map((row, index) => (
-                  <TableRow
-                    key={row.id}
-                    {...getRowProps({
-                      row,
-                    })}>
-                    {rows.length > 1 && isSelectable && (
-                      <TableSelectRow
-                        aria-label="Select row"
-                        {...getSelectionProps({ row })}
-                        onChange={(checked: boolean) => handleRowSelection(row, checked)}
-                        checked={Boolean(selectedLineItems?.find((item) => item?.uuid === row?.id))}
-                      />
-                    )}
-                    {row.cells.map((cell) => (
-                      <TableCell key={cell.id}>{cell.value}</TableCell>
-                    ))}
-                  </TableRow>
-                ))}
+                {rows.map((row, index) => {
+                  return (
+                    <TableRow
+                      key={row.id}
+                      {...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>
+                      ))}
+                    </TableRow>
+                  );
+                })}
               </TableBody>
             </Table>
           </TableContainer>

package/src/invoice/invoice-table.scss

@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .filterEmptyState {
   align-items: center;
@@ -19,7 +19,7 @@
 .filterEmptyStateContent {
   @include type.type-style('heading-compact-02');
   color: $text-02;
-  margin-bottom: 0.5rem;
+  margin-bottom: layout.$spacing-03;
 }
 
 .filterEmptyStateHelper {
@@ -32,7 +32,6 @@
 }
 
 .invoiceContainer {
-  margin: layout.$spacing-09 layout.$spacing-05 0;
   border: 1px solid $ui-03;
 }
 
@@ -42,10 +41,10 @@
   }
 }
 
-.table {
-  td {
-    border-bottom: none !important;
-  }
+.invoiceTable {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
 }
 
 .tableDescription {
@@ -57,7 +56,7 @@
   ::after {
     content: '';
     display: block;
-    width: 2rem;
+    width: layout.$spacing-07;
     padding-top: 0.188rem;
     border-bottom: 0.375rem solid var(--brand-03);
   }

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

@@ -0,0 +1,151 @@
+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 { type MappedBill } from '../types';
+
+// 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),
+}));
+
+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();
+  });
+
+  const bill: MappedBill = {
+    uuid: 'bill-uuid',
+    id: 123,
+    patientUuid: 'patient-uuid',
+    patientName: 'John Doe',
+    lineItems: [
+      {
+        uuid: '1',
+        item: 'Item 1',
+        paymentStatus: 'PAID',
+        quantity: 1,
+        price: 100,
+        display: '',
+        voided: false,
+        voidReason: '',
+        billableService: '',
+        priceName: '',
+        priceUuid: '',
+        lineItemOrder: 0,
+        resourceVersion: '',
+      },
+      {
+        uuid: '2',
+        item: 'Item 2',
+        paymentStatus: 'PENDING',
+        quantity: 2,
+        price: 200,
+        display: '',
+        voided: false,
+        voidReason: '',
+        billableService: '',
+        priceName: '',
+        priceUuid: '',
+        lineItemOrder: 0,
+        resourceVersion: '',
+      },
+    ],
+    receiptNumber: '12345',
+    cashPointUuid: 'cash-point-uuid',
+    cashPointName: 'Main Cash Point',
+    cashPointLocation: 'Front Desk',
+    cashier: {
+      uuid: 'cashier-uuid',
+      display: 'John Doe',
+      links: [],
+    },
+    status: 'PAID',
+    identifier: 'receipt-identifier',
+    dateCreated: new Date().toISOString(),
+    billingService: 'billing-service-uuid',
+    payments: [],
+    totalAmount: 300,
+    tenderedAmount: 300,
+  };
+
+  it('renders the table and displays line items correctly', () => {
+    render(<InvoiceTable bill={bill} />);
+
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
+    expect(screen.getByText('Item 2')).toBeInTheDocument();
+    expect(screen.getByTestId('receipt-number-0')).toHaveTextContent('12345');
+  });
+
+  it('renders the edit button and calls showModal when clicked', () => {
+    render(<InvoiceTable bill={bill} />);
+
+    const editButton = screen.getByTestId('edit-button-1');
+    fireEvent.click(editButton);
+    expect(showModal).toHaveBeenCalledWith('edit-bill-line-item-dialog', expect.anything());
+  });
+
+  it('displays a skeleton loader when the bill is loading', () => {
+    render(<InvoiceTable bill={bill} isLoadingBill={true} />);
+
+    expect(screen.getByTestId('loader')).toBeInTheDocument();
+  });
+
+  it('filters line items based on the search term', () => {
+    render(<InvoiceTable bill={bill} />);
+    const searchInput = screen.getByPlaceholderText('searchThisTable'); //
+
+    fireEvent.change(searchInput, { target: { value: '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', () => {
+    render(<InvoiceTable bill={bill} />);
+
+    const button = screen.getByTestId('edit-button-1');
+    fireEvent.click(button);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(button).not.toBeDisabled();
+  });
+});

package/src/invoice/invoice.component.tsx

@@ -24,15 +24,15 @@ const Invoice: React.FC = () => {
   const { t } = useTranslation();
   const { billUuid, patientUuid } = useParams();
   const { patient, isLoading: isLoadingPatient } = usePatient(patientUuid);
-  const { bill, isLoading: isLoadingBill, error } = useBill(billUuid);
+  const { bill, isLoading: isLoadingBill, error, mutate } = useBill(billUuid);
   const [isPrinting, setIsPrinting] = useState(false);
-  const [selectedLineItems, setSelectedLineItems] = useState([]);
+  const [selectedLineItems, setSelectedLineItems] = useState<LineItem[]>([]);
   const componentRef = useRef<HTMLDivElement>(null);
   const onBeforeGetContentResolve = useRef<(() => void) | null>(null);
-  const handleSelectItem = (lineItems: Array<LineItem>) => {
+  const { defaultCurrency } = useConfig();
+  const handleSelectItem = (lineItems: LineItem[]) => {
     setSelectedLineItems(lineItems);
   };
-  const { defaultCurrency } = useConfig();
 
   const handleAfterPrint = useCallback(() => {
     onBeforeGetContentResolve.current = null;
@@ -52,9 +52,7 @@ const Invoice: React.FC = () => {
 
   const handlePrint = useReactToPrint({
     content: reactToPrintContent,
-    documentTitle: `Invoice ${bill?.receiptNumber} - ${patient?.name?.[0]?.given?.join(' ')} ${
-      patient?.name?.[0].family
-    }`,
+    documentTitle: `Invoice ${bill?.receiptNumber} - ${patient?.name?.[0]?.given?.join(' ')} ${patient?.name?.[0].family}`,
     onBeforeGetContent: handleOnBeforeGetContent,
     onAfterPrint: handleAfterPrint,
     removeAfterPrint: true,
@@ -118,12 +116,12 @@ const Invoice: React.FC = () => {
             size="md">
             {t('printBill', 'Print bill')}
           </Button>
-          {bill?.status === 'PAID' ? <PrintReceipt billId={bill?.id} /> : null}
+          {(bill?.status === 'PAID' || bill?.tenderedAmount > 0) && <PrintReceipt billId={bill?.id} />}
         </div>
       </div>
 
       <InvoiceTable bill={bill} isLoadingBill={isLoadingBill} onSelectItem={handleSelectItem} />
-      <Payments bill={bill} selectedLineItems={selectedLineItems} />
+      <Payments bill={bill} mutate={mutate} selectedLineItems={selectedLineItems} />
 
       <div className={styles.printContainer} ref={componentRef}>
         {isPrinting && <PrintableInvoice bill={bill} patient={patient} isLoading={isLoadingPatient} />}

package/src/invoice/invoice.scss

@@ -4,7 +4,7 @@
 
 .invoiceContainer {
   background-color: colors.$gray-10;
-  height: calc(100vh - 3rem);
+  height: calc(100vh - layout.$spacing-09);
 }
 
 .errorContainer {
@@ -28,7 +28,7 @@
   align-items: center;
   justify-content: space-between;
   margin: layout.$spacing-05;
-  row-gap: 1.5rem;
+  row-gap: layout.$spacing-06;
 }
 
 .label {