@openmrs/esm-billing-app 1.1.2-pre.9 → 1.2.0

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

@@ -1,20 +1,25 @@
 import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import { render, screen, waitFor } from '@testing-library/react';
 import { getDefaultsFromConfigSchema, showModal, useConfig } from '@openmrs/esm-framework';
-import { type MappedBill } from '../types';
+import { BillStatus, RefundStatus, type BillRefund, type MappedBill } from '../types';
 import { configSchema, type BillingConfig } from '../config-schema';
 import InvoiceTable from './invoice-table.component';
 
-const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
-const mockShowModal = jest.mocked(showModal);
+const mockUseConfig = vi.mocked(useConfig<BillingConfig>);
+const mockShowModal = vi.mocked(showModal);
 
-jest.mock('../helpers', () => ({
-  convertToCurrency: jest.fn((price) => `USD ${price}`),
+vi.mock('../helpers', () => ({
+  convertToCurrency: vi.fn((price) => `USD ${price}`),
+}));
+
+vi.mock('../discounts/discounts.resource', () => ({
+  useBillDiscounts: () => ({ discounts: [], isLoading: false, error: null, mutate: vi.fn() }),
 }));
 
 describe('InvoiceTable', () => {
-  const mockOnMutate = jest.fn();
+  const mockOnMutate = vi.fn();
 
   const defaultBill: MappedBill = {
     uuid: 'bill-uuid',
@@ -25,7 +30,7 @@ describe('InvoiceTable', () => {
       {
         uuid: '1',
         item: 'Item 1',
-        paymentStatus: 'PAID',
+        status: 'PAID',
         quantity: 1,
         price: 100,
         display: '',
@@ -40,7 +45,7 @@ describe('InvoiceTable', () => {
       {
         uuid: '2',
         item: 'Item 2',
-        paymentStatus: 'PENDING',
+        status: 'PENDING',
         quantity: 2,
         price: 200,
         display: '',
@@ -68,6 +73,7 @@ describe('InvoiceTable', () => {
     billingService: 'billing-service-uuid',
     payments: [],
     totalAmount: 300,
+    netAmount: 300,
     tenderedAmount: 300,
   };
 
@@ -127,7 +133,7 @@ describe('InvoiceTable', () => {
         {
           uuid: '1',
           item: 'Service A',
-          paymentStatus: 'PENDING',
+          status: 'PENDING',
           quantity: 3,
           price: 100,
           display: '',
@@ -293,7 +299,7 @@ describe('InvoiceTable', () => {
         {
           uuid: '1',
           item: 'Free Service',
-          paymentStatus: 'PAID',
+          status: 'PAID',
           quantity: 1,
           price: 0,
           display: '',
@@ -321,7 +327,7 @@ describe('InvoiceTable', () => {
         {
           uuid: '1',
           item: 'Service',
-          paymentStatus: 'PENDING',
+          status: 'PENDING',
           quantity: 0,
           price: 100,
           display: '',
@@ -350,7 +356,7 @@ describe('InvoiceTable', () => {
           uuid: '1',
           item: 'Item Name',
           billableService: 'Billable Service Name',
-          paymentStatus: 'PAID',
+          status: 'PAID',
           quantity: 1,
           price: 100,
           display: '',
@@ -365,7 +371,7 @@ describe('InvoiceTable', () => {
           uuid: '2',
           item: 'Item Without Billable',
           billableService: '',
-          paymentStatus: 'PENDING',
+          status: 'PENDING',
           quantity: 1,
           price: 200,
           display: '',
@@ -409,4 +415,150 @@ describe('InvoiceTable', () => {
     expect(searchInput).toBeInTheDocument();
     expect(searchInput).toBeVisible();
   });
+
+  describe('viewOnly mode', () => {
+    it('hides the search box', () => {
+      render(<InvoiceTable bill={defaultBill} viewOnly />);
+      expect(screen.queryByPlaceholderText(/search this table/i)).not.toBeInTheDocument();
+    });
+
+    it('hides the actions column header', () => {
+      render(<InvoiceTable bill={defaultBill} viewOnly />);
+      // 6 data column headers; no 7th actions header
+      expect(screen.getAllByRole('columnheader')).toHaveLength(6);
+    });
+
+    it('hides per-row action menus', () => {
+      render(<InvoiceTable bill={defaultBill} viewOnly />);
+      expect(screen.queryAllByRole('button', { name: /options/i })).toHaveLength(0);
+    });
+
+    it('hides the filter helper text in the empty state', () => {
+      const emptyBill: MappedBill = { ...defaultBill, lineItems: [] };
+      render(<InvoiceTable bill={emptyBill} viewOnly />);
+      expect(screen.getByText(/no matching items to display/i)).toBeInTheDocument();
+      expect(screen.queryByText(/check the filters above/i)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('line-item refund eligibility', () => {
+    const makeRefund = (overrides: Partial<BillRefund> = {}): BillRefund => ({
+      uuid: 'r-1',
+      billUuid: 'bill-uuid',
+      lineItemUuid: null,
+      refundAmount: 100,
+      reason: 'overcharged',
+      initiator: { uuid: 'u1', display: 'cashier' },
+      approver: null,
+      completer: null,
+      dateApproved: null,
+      dateCompleted: null,
+      dateCreated: '2024-01-01',
+      status: RefundStatus.REQUESTED,
+      voided: false,
+      ...overrides,
+    });
+
+    const paidBill: MappedBill = { ...defaultBill, status: BillStatus.PAID, totalAmount: 300, tenderedAmount: 300 };
+
+    it('shows the refund action for an eligible line item on a PAID bill', async () => {
+      const user = userEvent.setup();
+      render(<InvoiceTable bill={paidBill} onMutate={mockOnMutate} />);
+      await user.click(screen.getByTestId('action-menu-1'));
+      expect(screen.getByTestId('request-refund-button-1')).toBeInTheDocument();
+    });
+
+    it('hides the refund action for a line item that already has an active refund', async () => {
+      const user = userEvent.setup();
+      render(
+        <InvoiceTable bill={{ ...paidBill, refunds: [makeRefund({ lineItemUuid: '1' })] }} onMutate={mockOnMutate} />,
+      );
+      await user.click(screen.getByTestId('action-menu-1'));
+      expect(screen.queryByTestId('request-refund-button-1')).not.toBeInTheDocument();
+    });
+
+    it('hides the refund action for all line items when there is an active bill-level refund', async () => {
+      const user = userEvent.setup();
+      render(
+        <InvoiceTable bill={{ ...paidBill, refunds: [makeRefund({ lineItemUuid: null })] }} onMutate={mockOnMutate} />,
+      );
+      await user.click(screen.getByTestId('action-menu-1'));
+      expect(screen.queryByTestId('request-refund-button-1')).not.toBeInTheDocument();
+    });
+
+    it('shows the refund action for a line item when bill is REFUND_REQUESTED due to a different line item', async () => {
+      const user = userEvent.setup();
+      const bill: MappedBill = {
+        ...paidBill,
+        status: BillStatus.REFUND_REQUESTED,
+        refunds: [makeRefund({ uuid: 'r-1', lineItemUuid: '1' })],
+      };
+      render(<InvoiceTable bill={bill} onMutate={mockOnMutate} />);
+      await user.click(screen.getByTestId('action-menu-2'));
+      expect(screen.getByTestId('request-refund-button-2')).toBeInTheDocument();
+    });
+
+    it('hides the refund action for the line item that triggered REFUND_REQUESTED status', async () => {
+      const user = userEvent.setup();
+      const bill: MappedBill = {
+        ...paidBill,
+        status: BillStatus.REFUND_REQUESTED,
+        refunds: [makeRefund({ uuid: 'r-1', lineItemUuid: '1' })],
+      };
+      render(<InvoiceTable bill={bill} onMutate={mockOnMutate} />);
+      await user.click(screen.getByTestId('action-menu-1'));
+      expect(screen.queryByTestId('request-refund-button-1')).not.toBeInTheDocument();
+    });
+
+    it('hides all line-item refund actions when there is an active bill-level refund on a REFUND_REQUESTED bill', async () => {
+      const user = userEvent.setup();
+      const bill: MappedBill = {
+        ...paidBill,
+        status: BillStatus.REFUND_REQUESTED,
+        refunds: [makeRefund({ lineItemUuid: null })],
+      };
+      render(<InvoiceTable bill={bill} onMutate={mockOnMutate} />);
+      await user.click(screen.getByTestId('action-menu-1'));
+      expect(screen.queryByTestId('request-refund-button-1')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('per-line-item discount action', () => {
+    it('opens the request-discount modal with lineItem scope', async () => {
+      const user = userEvent.setup();
+      const billPosted: MappedBill = {
+        ...defaultBill,
+        status: 'POSTED',
+        lineItems: [
+          {
+            uuid: 'li1',
+            item: 'Consultation',
+            status: 'PENDING',
+            quantity: 1,
+            price: 1000,
+            display: '',
+            voided: false,
+            voidReason: '',
+            billableService: '',
+            priceName: '',
+            priceUuid: '',
+            lineItemOrder: 0,
+            resourceVersion: '',
+          },
+        ],
+        totalAmount: 1000,
+      };
+      render(<InvoiceTable bill={billPosted} onMutate={mockOnMutate} />);
+
+      await user.click(screen.getByTestId('action-menu-li1'));
+      await user.click(screen.getByText(/request discount/i));
+
+      expect(mockShowModal).toHaveBeenCalledWith(
+        'request-discount-modal',
+        expect.objectContaining({
+          lineItem: expect.objectContaining({ uuid: 'li1', display: 'Consultation' }),
+        }),
+      );
+    });
+  });
 });

package/src/invoice/invoice.component.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, InlineLoading } from '@carbon/react';
+import { Button, InlineLoading, Tooltip } from '@carbon/react';
 import { Add, Printer } from '@carbon/react/icons';
 import { useParams } from 'react-router-dom';
 import { useReactToPrint } from 'react-to-print';
@@ -9,6 +9,7 @@ import {
   ExtensionSlot,
   formatDate,
   launchWorkspace2,
+  navigate,
   parseDate,
   showModal,
   showSnackbar,
@@ -22,7 +23,9 @@ 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 { BillStatus } from '../types';
+import { BillDiscountStatus, BillStatus, RefundStatus } from '../types';
+import DiscountsTable from '../discounts/discounts-table.component';
+import RefundsTable from '../refunds/refunds-table.component';
 import styles from './invoice.scss';
 
 interface InvoiceDetailsProps {
@@ -41,6 +44,64 @@ const Invoice: React.FC = () => {
   const onBeforeGetContentResolve = useRef<(() => void) | null>(null);
   const { defaultCurrency } = useConfig<BillingConfig>();
 
+  const discounts = (bill?.discounts ?? []).filter((d) => !d.voided);
+  const billLevelDiscountExists = discounts.some((d) => !d.lineItemUuid);
+  const lineItemDiscountExists = discounts.some((d) => !!d.lineItemUuid);
+  const billStatusEligible = bill?.status === BillStatus.PENDING || bill?.status === BillStatus.POSTED;
+  const showRequestDiscountButton = !!bill && billStatusEligible && !billLevelDiscountExists;
+  const hasApprovedDiscount = discounts.some((d) => d.status === BillDiscountStatus.APPROVED);
+
+  const refunds = (bill?.refunds ?? []).filter((r) => !r.voided);
+  const billStatusRefundEligible = bill?.status === BillStatus.PAID || bill?.status === BillStatus.PARTIALLY_REFUNDED;
+  const activeRefunds = refunds.filter(
+    (r) => r.status === RefundStatus.REQUESTED || r.status === RefundStatus.APPROVED,
+  );
+  const activeBillLevelRefund = activeRefunds.some((r) => !r.lineItemUuid);
+  const activeLineRefundUuids = new Set(activeRefunds.flatMap((r) => (r.lineItemUuid ? [r.lineItemUuid] : [])));
+  const showRequestRefundButton = !!bill && billStatusRefundEligible && !activeBillLevelRefund;
+
+  const handleRequestRefund = () => {
+    if (!bill) return;
+    if (bill.netAmount == null) {
+      showSnackbar({
+        title: t('refundUnavailable', 'Refund unavailable'),
+        subtitle: t('refundUnavailableSubtitle', 'Bill amount could not be determined. Please reload and try again.'),
+        kind: 'error',
+      });
+      return;
+    }
+    const totalAlreadyRefunded = refunds
+      .filter((r) => r.status === RefundStatus.APPROVED || r.status === RefundStatus.COMPLETED)
+      .reduce((s, r) => s + r.refundAmount, 0);
+    const remainingRefundable = bill.netAmount - totalAlreadyRefunded;
+    const dispose = showModal('request-refund-modal', {
+      bill: {
+        uuid: bill.uuid,
+        total: bill.totalAmount ?? 0,
+        amountAfterDiscount: bill.netAmount,
+        receiptNumber: bill.receiptNumber,
+        lineItemCount: bill.lineItems?.length ?? 0,
+      },
+      remainingRefundable: Math.max(0, remainingRefundable),
+      onMutate: () => mutate(),
+      closeModal: () => dispose(),
+    });
+  };
+
+  const handleRequestDiscount = () => {
+    const dispose = showModal('request-discount-modal', {
+      bill: {
+        uuid: bill!.uuid,
+        total: bill!.totalAmount ?? 0,
+        amountDue: Math.max(0, (bill!.netAmount ?? bill!.totalAmount ?? 0) - (bill!.tenderedAmount ?? 0)),
+        receiptNumber: bill!.receiptNumber,
+        lineItemCount: bill!.lineItems?.length ?? 0,
+      },
+      onMutate: () => mutate(),
+      closeModal: () => dispose(),
+    });
+  };
+
   const handleAfterPrint = useCallback(() => {
     onBeforeGetContentResolve.current = null;
     setIsPrinting(false);
@@ -63,6 +124,14 @@ const Invoice: React.FC = () => {
     });
   };
 
+  const handleDeleteBill = () => {
+    const dispose = showModal('delete-bill-confirmation-modal', {
+      bill,
+      onSuccess: () => navigate({ to: window.getOpenmrsSpaBase() + 'home/billing' }),
+      closeModal: () => dispose(),
+    });
+  };
+
   const handlePrint = useReactToPrint({
     contentRef: componentRef,
     documentTitle: `Invoice ${bill?.receiptNumber} - ${patient?.name?.[0]?.given?.join(' ')} ${patient?.name?.[0].family}`,
@@ -87,17 +156,28 @@ const Invoice: React.FC = () => {
   /**
    * t('totalAmount', 'Total amount')
    * t('amountTendered', 'Amount tendered')
-   * t('invoiceNumber', 'Invoice #')
+   * t('invoiceNumber', 'Invoice number')
    * t('dateAndTime', 'Date and time')
    * t('invoiceStatus', 'Invoice status')
    */
-  const invoiceDetails = {
+  const invoiceDetails: Record<string, string | number | undefined> = {
+    [t('dateBillCreated', 'Date bill created')]: bill?.dateCreated
+      ? formatDate(parseDate(bill.dateCreated), { mode: 'wide' })
+      : '--',
     [t('totalAmount', 'Total amount')]: convertToCurrency(bill?.totalAmount, defaultCurrency),
+    ...(hasApprovedDiscount
+      ? {
+          [t('discount', 'Discount')]:
+            `- ${convertToCurrency((bill?.totalAmount ?? 0) - (bill?.netAmount ?? 0), defaultCurrency)}`,
+          [t('netAmount', 'Net amount')]: convertToCurrency(bill?.netAmount, defaultCurrency),
+        }
+      : {}),
     [t('amountTendered', 'Amount tendered')]: convertToCurrency(bill?.tenderedAmount, defaultCurrency),
+    [t('amountDue', 'Amount due')]: convertToCurrency(
+      bill ? (bill.netAmount ?? 0) - (bill.tenderedAmount ?? 0) : undefined,
+      defaultCurrency,
+    ),
     [t('invoiceNumber', 'Invoice number')]: bill?.receiptNumber,
-    [t('dateAndTime', 'Date and time')]: bill?.dateCreated
-      ? formatDate(parseDate(bill.dateCreated), { mode: 'wide' })
-      : '--',
     [t('invoiceStatus', 'Invoice status')]: bill?.status,
   };
 
@@ -129,6 +209,25 @@ const Invoice: React.FC = () => {
             <InlineLoading status="active" />
           </span>
         )}
+        {showRequestDiscountButton && (
+          <Button kind="tertiary" onClick={handleRequestDiscount} disabled={lineItemDiscountExists}>
+            {t('requestDiscount', 'Request discount')}
+          </Button>
+        )}
+        {showRequestRefundButton &&
+          (activeLineRefundUuids.size > 0 ? (
+            <Tooltip
+              align="bottom"
+              label={t('refundInProgress', 'A refund is already in progress for one or more line items')}>
+              <Button kind="tertiary" onClick={handleRequestRefund} disabled>
+                {t('requestRefund', 'Request refund')}
+              </Button>
+            </Tooltip>
+          ) : (
+            <Button kind="tertiary" onClick={handleRequestRefund}>
+              {t('requestRefund', 'Request refund')}
+            </Button>
+          ))}
         {bill?.status === BillStatus.PENDING && (
           <>
             <Button
@@ -143,6 +242,9 @@ const Invoice: React.FC = () => {
               }>
               {t('addItemsToBill', 'Add items to bill')}
             </Button>
+            <Button kind="danger--ghost" onClick={handleDeleteBill}>
+              {t('deleteBill', 'Delete bill')}
+            </Button>
             <Button kind="primary" onClick={handleFinalizeBill}>
               {t('finalizeBill', 'Finalize bill')}
             </Button>
@@ -167,6 +269,8 @@ const Invoice: React.FC = () => {
 
       <div className={styles.invoiceContent}>
         <InvoiceTable bill={bill} isLoadingBill={isLoadingBill} onMutate={mutate} />
+        {bill && <DiscountsTable bill={bill} />}
+        {bill && <RefundsTable bill={bill} onMutate={mutate} />}
         <Payments bill={bill} mutate={mutate} />
       </div>