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

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

@@ -0,0 +1,109 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { isDesktop, useConfig, useLayoutType } from '@openmrs/esm-framework';
+import type { BillingConfig } from '../config-schema';
+import { convertToCurrency } from '../helpers';
+import { BillDiscountType, type BillDiscount, type MappedBill } from '../types';
+import styles from './discounts-table.scss';
+
+interface Props {
+  bill: MappedBill;
+}
+
+function resolveScope(d: BillDiscount, bill: MappedBill, fallback: string) {
+  if (!d.lineItemUuid) return fallback;
+  const li = bill.lineItems?.find((l) => l.uuid === d.lineItemUuid);
+  return li?.item || li?.billableService || fallback;
+}
+
+const DiscountsTable: React.FC<Props> = ({ bill }) => {
+  const { t } = useTranslation();
+  const { defaultCurrency } = useConfig<BillingConfig>();
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
+  const discounts = useMemo(() => (bill.discounts ?? []).filter((d) => !d.voided), [bill.discounts]);
+
+  const tableHeaders = [
+    { header: t('discountItem', 'Item'), key: 'item', width: 25 },
+    { header: t('discountType', 'Type'), key: 'type', width: 15 },
+    { header: t('discountAmount', 'Amount'), key: 'amount', width: 15 },
+    { header: t('justification', 'Justification'), key: 'justification', width: 30 },
+    { header: t('status', 'Status'), key: 'status', width: 15 },
+  ];
+
+  const tableRows = useMemo(
+    () =>
+      (discounts ?? []).map((d) => ({
+        id: d.uuid,
+        item: resolveScope(d, bill, t('wholeBill', 'Whole bill')),
+        type:
+          d.discountType === BillDiscountType.PERCENTAGE
+            ? t('percentage', 'Percentage')
+            : t('fixedAmount', 'Fixed amount'),
+        amount: convertToCurrency(d.discountAmount, defaultCurrency),
+        justification: d.justification,
+        status: t(d.status.toLowerCase(), d.status),
+      })),
+    [discounts, bill, defaultCurrency, t],
+  );
+
+  if (!discounts || discounts.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.discountsWrapper}>
+      <DataTable
+        headers={tableHeaders}
+        rows={tableRows}
+        size={responsiveSize}
+        useZebraStyles
+        overflowMenuOnHover={isDesktop(layout)}>
+        {({ rows, headers, getRowProps, getTableProps }) => (
+          <TableContainer
+            description={
+              <span className={styles.tableDescription}>
+                <span>{t('discountsAppliedToBill', 'Discounts applied to this bill')}</span>
+              </span>
+            }
+            title={t('discounts', 'Discounts')}>
+            <Table
+              {...getTableProps()}
+              aria-label={t('billDiscounts', 'Bill discounts')}
+              className={classNames(styles.discountsTable, 'billingTable')}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader key={header.key}>{header.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.id} {...getRowProps({ row })}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+    </div>
+  );
+};
+
+export default DiscountsTable;

package/src/discounts/discounts-table.scss

@@ -0,0 +1,37 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.discountsWrapper {
+  border: 1px solid colors.$gray-20;
+  background-color: colors.$white;
+  margin-bottom: layout.$spacing-05;
+}
+
+.discountsTable {
+  width: 100%;
+
+  td {
+    border-bottom: none !important;
+  }
+}
+
+.tableDescription {
+  display: flex;
+  align-items: flex-start;
+  margin-top: layout.$spacing-02;
+  column-gap: layout.$spacing-01;
+
+  ::after {
+    content: '';
+    display: block;
+    width: layout.$spacing-07;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+
+  & > span {
+    @include type.type-style('body-01');
+  }
+}

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { useSession, useConfig } from '@openmrs/esm-framework';
+import DiscountsTable from './discounts-table.component';
+import { BillDiscountStatus, BillDiscountType, type BillDiscount, type MappedBill } from '../types';
+
+vi.mock('@openmrs/esm-framework', () => ({
+  useSession: vi.fn(),
+  useConfig: vi.fn(),
+  useLayoutType: () => 'desktop',
+  isDesktop: () => true,
+  formatDate: (d: Date) => d.toISOString(),
+  parseDate: (s: string) => new Date(s),
+  showModal: vi.fn(),
+  showSnackbar: vi.fn(),
+  restBaseUrl: '/ws/rest/v1',
+}));
+window.i18next = { language: 'en-US' } as any;
+
+const mockDiscount = (overrides: Partial<BillDiscount> = {}) => ({
+  uuid: 'd1',
+  billUuid: 'b1',
+  lineItemUuid: null,
+  discountType: BillDiscountType.PERCENTAGE,
+  discountValue: 10,
+  discountAmount: 500,
+  justification: 'returning patient',
+  initiator: { uuid: 'u-cashier', display: 'cashier-alex' },
+  approver: null,
+  dateCreated: '2026-05-11T00:00:00.000+0000',
+  status: BillDiscountStatus.PENDING,
+  voided: false,
+  ...overrides,
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  vi.mocked(useSession).mockReturnValue({ user: { uuid: 'u-cashier' } } as any);
+  vi.mocked(useConfig).mockReturnValue({ defaultCurrency: 'USD' } as any);
+});
+
+const makeBill = (discounts: BillDiscount[] = []): MappedBill =>
+  ({ uuid: 'b1', lineItems: [{ uuid: 'li1', item: 'Consultation' }], discounts }) as unknown as MappedBill;
+
+describe('DiscountsTable', () => {
+  it('returns null when no non-voided discounts exist', () => {
+    const { container } = render(<DiscountsTable bill={makeBill([])} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('returns null when all discounts are voided', () => {
+    const { container } = render(<DiscountsTable bill={makeBill([mockDiscount({ voided: true })])} />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders one row per discount with status tag', () => {
+    render(
+      <DiscountsTable
+        bill={makeBill([mockDiscount({ status: BillDiscountStatus.APPROVED }), mockDiscount({ uuid: 'd2' })])}
+      />,
+    );
+
+    expect(screen.getByText(/Approved/i)).toBeInTheDocument();
+    expect(screen.getByText(/Pending/i)).toBeInTheDocument();
+  });
+});

package/src/discounts/discounts.resource.ts

@@ -0,0 +1,71 @@
+import useSWR from 'swr';
+import { openmrsFetch, useOpenmrsFetchAll } from '@openmrs/esm-framework';
+import { apiBasePath } from '../constants';
+import type {
+  BillDiscount,
+  BillDiscountStatus,
+  DecideDiscountPayload,
+  PatientInvoice,
+  RequestDiscountPayload,
+} from '../types';
+
+interface FetchEnvelope<T> {
+  data: { results: T[]; totalCount?: number };
+}
+
+const discountUrl = `${apiBasePath}billDiscount`;
+const billUrl = `${apiBasePath}bill`;
+
+export function useBillDiscounts(billUuid: string | undefined) {
+  const url = billUuid ? `${discountUrl}?bill=${billUuid}&v=default` : null;
+  const { data, isLoading, error, mutate } = useSWR<FetchEnvelope<BillDiscount>>(url, openmrsFetch);
+  const discounts = (data?.data?.results ?? []).filter((d) => !d.voided);
+  return { discounts, isLoading, error, mutate };
+}
+
+interface UseDiscountRequestsArgs {
+  statuses: BillDiscountStatus[];
+}
+
+export function useDiscountRequests({ statuses }: UseDiscountRequestsArgs) {
+  const qs = new URLSearchParams({
+    discountStatus: statuses.join(','),
+    v: 'default',
+  });
+  const url = `${billUrl}?${qs.toString()}`;
+  const { data, isLoading, error, mutate, isValidating } = useOpenmrsFetchAll<PatientInvoice>(url);
+  return {
+    bills: data ?? [],
+    isLoading,
+    error,
+    mutate,
+    isValidating,
+  };
+}
+
+export async function requestDiscount(payload: RequestDiscountPayload): Promise<BillDiscount> {
+  const response = await openmrsFetch<BillDiscount>(discountUrl, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: payload as any,
+  });
+  return response.data;
+}
+
+export async function decideDiscount(
+  uuid: string,
+  status: DecideDiscountPayload['status'],
+  approverUuid: string,
+): Promise<BillDiscount> {
+  const body: DecideDiscountPayload = { status, approver: approverUuid };
+  const response = await openmrsFetch<BillDiscount>(`${discountUrl}/${uuid}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: body as any,
+  });
+  return response.data;
+}
+
+export async function voidDiscount(uuid: string, reason: string): Promise<void> {
+  await openmrsFetch(`${discountUrl}/${uuid}?reason=${encodeURIComponent(reason)}`, { method: 'DELETE' });
+}

package/src/discounts/request-discount.modal.scss

@@ -0,0 +1,88 @@
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+
+.modalBody {
+  padding-bottom: $spacing-05;
+}
+
+.scopePanel {
+  background: var(--cds-layer);
+  border-left: 3px solid var(--cds-border-interactive);
+  padding: $spacing-04 $spacing-05;
+}
+
+.scopePrimary {
+  @include type-style('heading-compact-01');
+  color: var(--cds-text-primary);
+  margin-bottom: $spacing-02;
+  word-break: break-word;
+}
+
+.scopeMeta {
+  @include type-style('label-01');
+  color: var(--cds-text-secondary);
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li + li::before {
+    content: '·';
+    margin: 0 $spacing-03;
+    color: var(--cds-text-helper);
+  }
+}
+
+.scopeTotal {
+  color: var(--cds-text-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.discountGroup :global(.cds--fieldset) {
+  margin-bottom: 0;
+}
+
+.summaryCard {
+  background: var(--cds-layer);
+  padding: $spacing-04 $spacing-05;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  row-gap: $spacing-03;
+  column-gap: $spacing-05;
+  align-items: baseline;
+}
+
+.summaryLabel {
+  @include type-style('body-compact-01');
+  color: var(--cds-text-secondary);
+}
+
+.summaryValue {
+  @include type-style('body-compact-01');
+  color: var(--cds-text-primary);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.summaryDiscount {
+  color: var(--cds-text-error);
+}
+
+.summaryDivider {
+  grid-column: 1 / -1;
+  height: 1px;
+  background: var(--cds-border-subtle);
+}
+
+.summaryTotalLabel {
+  @include type-style('heading-compact-01');
+  color: var(--cds-text-primary);
+}
+
+.summaryTotalValue {
+  @include type-style('heading-compact-01');
+  color: var(--cds-text-primary);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}

package/src/discounts/request-discount.modal.test.tsx

@@ -0,0 +1,161 @@
+import React from 'react';
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { showSnackbar } from '@openmrs/esm-framework';
+import RequestDiscountModal from './request-discount.modal';
+import { requestDiscount } from './discounts.resource';
+import { BillDiscountType } from '../types';
+
+vi.mock('@openmrs/esm-framework', () => ({
+  showSnackbar: vi.fn(),
+  useConfig: vi.fn().mockReturnValue({ defaultCurrency: 'USD' }),
+  getCoreTranslation: (key: string) => key,
+  restBaseUrl: '/ws/rest/v1',
+}));
+vi.mock('./discounts.resource');
+
+(window as any).i18next = { language: 'en-US' };
+
+const closeModal = vi.fn();
+const onMutate = vi.fn();
+
+beforeEach(() => vi.clearAllMocks());
+
+describe('RequestDiscountModal', () => {
+  it('blocks submit when justification is empty', async () => {
+    render(
+      <RequestDiscountModal
+        closeModal={closeModal}
+        bill={{ uuid: 'b1', total: 1000, amountDue: 1000 }}
+        onMutate={onMutate}
+      />,
+    );
+    const submit = screen.getByRole('button', { name: /submit request/i });
+    expect(submit).toBeDisabled();
+  });
+
+  it('rejects percentage value greater than 100', async () => {
+    const user = userEvent.setup();
+    render(
+      <RequestDiscountModal
+        closeModal={closeModal}
+        bill={{ uuid: 'b1', total: 1000, amountDue: 1000 }}
+        onMutate={onMutate}
+      />,
+    );
+    await user.type(screen.getByLabelText(/value/i), '150');
+    await user.type(screen.getByLabelText(/justification/i), 'reason');
+    expect(screen.getByRole('button', { name: /submit request/i })).toBeDisabled();
+    expect(screen.getByText(/cannot exceed 100/i)).toBeInTheDocument();
+  });
+
+  it('flags a fixed-amount discount that exceeds the amount due', async () => {
+    const user = userEvent.setup();
+    render(
+      <RequestDiscountModal
+        closeModal={closeModal}
+        bill={{ uuid: 'b1', total: 1000, amountDue: 1000 }}
+        onMutate={onMutate}
+      />,
+    );
+    await user.click(screen.getByRole('radio', { name: /fixed amount/i }));
+    await user.type(screen.getByLabelText(/value/i), '2000');
+    await user.type(screen.getByLabelText(/justification/i), 'reason');
+    expect(screen.getByText(/cannot exceed the amount due/i)).toBeInTheDocument();
+  });
+
+  it('flags a percentage whose computed discount exceeds amount due on a partially-paid bill', async () => {
+    const user = userEvent.setup();
+    render(
+      <RequestDiscountModal
+        closeModal={closeModal}
+        bill={{ uuid: 'b1', total: 1000, amountDue: 200 }}
+        onMutate={onMutate}
+      />,
+    );
+    await user.type(screen.getByLabelText(/value/i), '50');
+    await user.type(screen.getByLabelText(/justification/i), 'reason');
+    expect(screen.getByRole('button', { name: /submit request/i })).toBeDisabled();
+    expect(screen.getByText(/cannot exceed the amount due/i)).toBeInTheDocument();
+  });
+
+  it('flags a fixed-amount discount that exceeds the line item total', async () => {
+    const user = userEvent.setup();
+    render(
+      <RequestDiscountModal
+        closeModal={closeModal}
+        bill={{ uuid: 'b1', total: 1000, amountDue: 1000 }}
+        lineItem={{ uuid: 'li1', display: 'Consultation', total: 200 }}
+        onMutate={onMutate}
+      />,
+    );
+    await user.click(screen.getByRole('radio', { name: /fixed amount/i }));
+    await user.type(screen.getByLabelText(/value/i), '300');
+    await user.type(screen.getByLabelText(/justification/i), 'reason');
+    expect(screen.getByText(/cannot exceed the line item total/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /submit request/i })).toBeDisabled();
+  });
+
+  it('flags a fixed-amount discount that would push the bill amount due negative on a partially-paid bill', async () => {
+    const user = userEvent.setup();
+    render(
+      <RequestDiscountModal
+        closeModal={closeModal}
+        bill={{ uuid: 'b1', total: 1000, amountDue: 300 }}
+        onMutate={onMutate}
+      />,
+    );
+    await user.click(screen.getByRole('radio', { name: /fixed amount/i }));
+    // 500 <= bill.total (1000), but > amountDue (300) → would make amountDue negative.
+    await user.type(screen.getByLabelText(/value/i), '500');
+    await user.type(screen.getByLabelText(/justification/i), 'reason');
+    expect(screen.getByText(/cannot exceed the amount due/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /submit request/i })).toBeDisabled();
+  });
+
+  it('submits a valid request and closes', async () => {
+    vi.mocked(requestDiscount).mockResolvedValue({ uuid: 'new-d' } as any);
+    const user = userEvent.setup();
+    render(
+      <RequestDiscountModal
+        closeModal={closeModal}
+        bill={{ uuid: 'b1', total: 1000, amountDue: 1000 }}
+        onMutate={onMutate}
+      />,
+    );
+    await user.type(screen.getByLabelText(/value/i), '10');
+    await user.type(screen.getByLabelText(/justification/i), 'returning patient');
+    await user.click(screen.getByRole('button', { name: /submit request/i }));
+    await waitFor(() =>
+      expect(requestDiscount).toHaveBeenCalledWith({
+        bill: 'b1',
+        discountType: BillDiscountType.PERCENTAGE,
+        discountValue: 10,
+        justification: 'returning patient',
+      }),
+    );
+    await waitFor(() => expect(closeModal).toHaveBeenCalled());
+    expect(onMutate).toHaveBeenCalled();
+    expect(showSnackbar).toHaveBeenCalledWith(expect.objectContaining({ kind: 'success' }));
+  });
+
+  it('shows an error snackbar and keeps the modal open when submission fails', async () => {
+    vi.mocked(requestDiscount).mockRejectedValue({
+      responseBody: { error: { message: 'billing.error.discount.scopeConflict' } },
+    });
+    const user = userEvent.setup();
+    render(
+      <RequestDiscountModal
+        closeModal={closeModal}
+        bill={{ uuid: 'b1', total: 1000, amountDue: 1000 }}
+        onMutate={onMutate}
+      />,
+    );
+    await user.type(screen.getByLabelText(/value/i), '10');
+    await user.type(screen.getByLabelText(/justification/i), 'x');
+    await user.click(screen.getByRole('button', { name: /submit request/i }));
+    await waitFor(() => expect(showSnackbar).toHaveBeenCalledWith(expect.objectContaining({ kind: 'error' })));
+    expect(closeModal).not.toHaveBeenCalled();
+  });
+});