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

package/src/discounts/admin/review-bill-discounts/discount-card/discount-card.scss

@@ -0,0 +1,164 @@
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.card {
+  position: relative;
+  border: 1px solid $ui-03;
+  background: $ui-02;
+  padding: $spacing-05 $spacing-05 $spacing-04 $spacing-06;
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: $color-gray-30;
+}
+
+.cardPending::before {
+  background: $inverse-support-03;
+}
+
+.cardApproved::before {
+  background: $support-02;
+}
+
+.cardRejected::before {
+  background: $danger;
+}
+
+.cardTop {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: $spacing-04;
+  margin-bottom: $spacing-03;
+}
+
+.cardScope {
+  display: flex;
+  align-items: center;
+  gap: $spacing-03;
+  flex-wrap: wrap;
+}
+
+.cardRef {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  background: $ui-05;
+  color: $ui-02;
+  @include type.type-style('code-01');
+  font-weight: 500;
+  text-align: center;
+  line-height: 22px;
+}
+
+.cardScopeName {
+  @include type.type-style('heading-02');
+  color: var(--cds-text-primary);
+}
+
+.cardScopeKind {
+  @include type.type-style('label-01');
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--cds-text-helper);
+  border-left: 1px solid $ui-03;
+  padding-left: $spacing-03;
+}
+
+.cardFigure {
+  display: flex;
+  align-items: baseline;
+  gap: $spacing-03;
+  margin-bottom: $spacing-04;
+  font-variant-numeric: tabular-nums;
+}
+
+.cardAmount {
+  @include type.type-style('heading-05');
+  letter-spacing: -0.015em;
+  color: var(--cds-text-primary);
+  line-height: 1;
+}
+
+.cardAmountMinus {
+  color: $danger;
+  margin-right: 2px;
+}
+
+.cardAmountVoided {
+  color: var(--cds-text-helper);
+}
+
+.cardValue {
+  @include type.type-style('code-01');
+  color: var(--cds-text-helper);
+  padding: 3px $spacing-02;
+  background: $ui-01;
+  border: 1px solid $ui-03;
+}
+
+.cardJustification {
+  @include type.type-style('body-01');
+  font-style: italic;
+  color: var(--cds-text-secondary);
+  padding: $spacing-01 0 $spacing-01 $spacing-03;
+  margin: 0 0 $spacing-04;
+}
+
+.cardAlert {
+  margin: 0 0 $spacing-04 !important;
+  max-width: 100% !important;
+}
+
+.cardFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-04;
+  padding-top: $spacing-03;
+  border-top: 1px solid $ui-03;
+  flex-wrap: wrap;
+}
+
+.cardByline {
+  @include type.type-style('label-01');
+  color: var(--cds-text-helper);
+  display: flex;
+  gap: $spacing-02;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.cardByline strong {
+  font-weight: 500;
+  color: var(--cds-text-secondary);
+}
+
+.cardBylineSep {
+  color: $color-gray-30;
+}
+
+.cardActions {
+  display: flex;
+  gap: $spacing-02;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.cardActions :global(.cds--btn) {
+  min-width: 7rem;
+  justify-content: center;
+}
+
+.confirmCopy {
+  @include type.type-style('body-compact-01');
+  color: var(--cds-text-secondary);
+  margin-right: $spacing-02;
+}

package/src/discounts/admin/review-bill-discounts/discount-review-stack/discount-review-stack.component.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import DiscountCard from '../discount-card/discount-card.component';
+import type { BillDiscount, LineItem } from '../../../../types';
+import styles from './discount-review-stack.scss';
+
+interface Props {
+  pendingDiscounts: BillDiscount[];
+  confirmedDiscounts: BillDiscount[];
+  lineItems: Array<LineItem>;
+  busy: string | null;
+  rejectingId: string | null;
+  deletingId: string | null;
+  canDecide: boolean;
+  onApprove: (d: BillDiscount) => void;
+  onStartReject: (uuid: string) => void;
+  onCancelReject: () => void;
+  onConfirmReject: (d: BillDiscount) => void;
+  onStartDelete: (uuid: string) => void;
+  onCancelDelete: () => void;
+  onConfirmDelete: (d: BillDiscount) => void;
+}
+
+const DiscountReviewStack: React.FC<Props> = ({
+  pendingDiscounts,
+  confirmedDiscounts,
+  lineItems,
+  busy,
+  rejectingId,
+  deletingId,
+  canDecide,
+  onApprove,
+  onStartReject,
+  onCancelReject,
+  onConfirmReject,
+  onStartDelete,
+  onCancelDelete,
+  onConfirmDelete,
+}) => {
+  const { t } = useTranslation();
+
+  const renderCard = (d: BillDiscount) => (
+    <DiscountCard
+      key={d.uuid}
+      discount={d}
+      lineItems={lineItems}
+      busy={busy}
+      rejectingId={rejectingId}
+      deletingId={deletingId}
+      canDecide={canDecide}
+      onApprove={onApprove}
+      onStartReject={onStartReject}
+      onCancelReject={onCancelReject}
+      onConfirmReject={onConfirmReject}
+      onStartDelete={onStartDelete}
+      onCancelDelete={onCancelDelete}
+      onConfirmDelete={onConfirmDelete}
+    />
+  );
+
+  return (
+    <section className={styles.review}>
+      {pendingDiscounts.length > 0 && (
+        <div>
+          <div className={styles.groupHeader}>
+            <h3 className={styles.groupTitle}>{t('pendingDiscounts', 'Pending discounts')}</h3>
+            <span className={styles.groupCount}>{pendingDiscounts.length}</span>
+          </div>
+          <div className={styles.stack}>{pendingDiscounts.map(renderCard)}</div>
+        </div>
+      )}
+
+      {confirmedDiscounts.length > 0 && (
+        <div>
+          <div className={styles.groupHeader}>
+            <h3 className={styles.groupTitle}>{t('confirmedDiscounts', 'Confirmed discounts')}</h3>
+            <span className={styles.groupCount}>{confirmedDiscounts.length}</span>
+          </div>
+          <div className={styles.stack}>{confirmedDiscounts.map(renderCard)}</div>
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default React.memo(DiscountReviewStack);

package/src/discounts/admin/review-bill-discounts/discount-review-stack/discount-review-stack.scss

@@ -0,0 +1,40 @@
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.review {
+  padding: $spacing-06 $spacing-07 $spacing-07;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-06;
+  background: $ui-02;
+}
+
+.groupHeader {
+  display: flex;
+  align-items: baseline;
+  gap: $spacing-03;
+  margin-bottom: $spacing-04;
+}
+
+.groupTitle {
+  @include type.type-style('label-01');
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--cds-text-helper);
+  margin: 0;
+}
+
+.groupCount {
+  @include type.type-style('code-01');
+  color: var(--cds-text-helper);
+  padding: 2px $spacing-02;
+  background: $ui-01;
+  border: 1px solid $ui-03;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-04;
+}

package/src/discounts/admin/review-bill-discounts/review-bill-discounts.modal.scss

@@ -0,0 +1,14 @@
+@use '@carbon/styles/scss/spacing' as *;
+
+.layout {
+  display: grid;
+  grid-template-columns: 380px 1fr;
+  gap: 0;
+  min-height: 480px;
+}
+
+@media (max-width: 900px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+}

package/src/discounts/admin/review-bill-discounts/review-bill-discounts.modal.test.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { beforeEach, describe, expect, it, vi, type Mock } from 'vitest';
+import { useBill } from '../../../billing.resource';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { showSnackbar } from '@openmrs/esm-framework';
+import ReviewBillDiscountsModal from './review-bill-discounts.modal';
+import { decideDiscount, voidDiscount } from '../../discounts.resource';
+import {
+  BillDiscountStatus,
+  BillDiscountType,
+  BillStatus,
+  type BillDiscount,
+  type PatientInvoice,
+} from '../../../types';
+
+vi.mock('@openmrs/esm-framework', () => ({
+  showSnackbar: vi.fn(),
+  useConfig: vi.fn().mockReturnValue({ defaultCurrency: 'USD' }),
+  useSession: vi.fn().mockReturnValue({ user: { uuid: 'admin-uuid' } }),
+  formatDate: () => 'date',
+  parseDate: (s: string) => new Date(s),
+  getCoreTranslation: (key: string) => key,
+  restBaseUrl: '/ws/rest/v1',
+}));
+vi.mock('../../discounts.resource');
+vi.mock('../../../billing.resource', () => ({
+  useBill: vi.fn().mockReturnValue({ bill: null, mutate: vi.fn(), isLoading: false, isValidating: false }),
+}));
+
+(window as any).i18next = { language: 'en-US' };
+
+beforeEach(() => vi.clearAllMocks());
+
+const makeDiscount = (overrides: Partial<BillDiscount> = {}): BillDiscount => ({
+  uuid: 'd1',
+  billUuid: 'b1',
+  lineItemUuid: null,
+  discountType: BillDiscountType.FIXED_AMOUNT,
+  discountValue: 100,
+  discountAmount: 100,
+  justification: 'goodwill',
+  initiator: { uuid: 'u1', display: 'Cashier A' },
+  approver: null,
+  dateCreated: '2026-05-11T00:00:00.000+0000',
+  status: BillDiscountStatus.PENDING,
+  voided: false,
+  ...overrides,
+});
+
+const makeBill = (overrides: Partial<PatientInvoice> = {}): PatientInvoice =>
+  ({
+    uuid: 'b1',
+    receiptNumber: 'INV-1',
+    status: BillStatus.POSTED,
+    total: 1000,
+    amountAfterDiscount: 1000,
+    dateCreated: '2026-05-11T00:00:00.000+0000',
+    patient: { display: 'Jane Doe' },
+    cashier: { display: 'cashier' },
+    lineItems: [],
+    payments: [],
+    discounts: [],
+    ...overrides,
+  }) as unknown as PatientInvoice;
+
+describe('ReviewBillDiscountsModal', () => {
+  it('disables approve and reject on a bill that is neither PENDING nor POSTED', () => {
+    const bill = makeBill({
+      status: BillStatus.PAID,
+      discounts: [makeDiscount()],
+    });
+
+    render(<ReviewBillDiscountsModal closeModal={vi.fn()} bill={bill} onMutate={vi.fn()} />);
+
+    expect(screen.getByRole('button', { name: /approve/i })).toBeDisabled();
+    expect(screen.getByRole('button', { name: /reject/i })).toBeDisabled();
+  });
+
+  it('blocks approve when it would make the amount due negative', async () => {
+    const user = userEvent.setup();
+    const bill = makeBill({
+      status: BillStatus.POSTED,
+      total: 1000,
+      amountAfterDiscount: 200,
+      discounts: [makeDiscount({ discountAmount: 500 })],
+    });
+
+    render(<ReviewBillDiscountsModal closeModal={vi.fn()} bill={bill} onMutate={vi.fn()} />);
+
+    await user.click(screen.getByRole('button', { name: /approve/i }));
+
+    await waitFor(() => expect(showSnackbar).toHaveBeenCalledWith(expect.objectContaining({ kind: 'error' })));
+    expect(decideDiscount).not.toHaveBeenCalled();
+  });
+
+  it('blocks voiding an approved discount on a fully paid bill', async () => {
+    const user = userEvent.setup();
+    const bill = makeBill({
+      status: BillStatus.PAID,
+      total: 1000,
+      amountAfterDiscount: 900,
+      payments: [{ uuid: 'p1', amountTendered: 900, voided: false } as any],
+      discounts: [makeDiscount({ status: BillDiscountStatus.APPROVED, discountAmount: 100 })],
+    });
+
+    render(<ReviewBillDiscountsModal closeModal={vi.fn()} bill={bill} onMutate={vi.fn()} />);
+
+    // Carbon's danger--tertiary button prepends a visually-hidden "danger" span
+    // to the accessible name; match by trailing text.
+    await user.click(screen.getByRole('button', { name: /delete$/i }));
+    await user.click(screen.getByRole('button', { name: /confirm delete$/i }));
+
+    await waitFor(() => expect(showSnackbar).toHaveBeenCalledWith(expect.objectContaining({ kind: 'error' })));
+    expect(voidDiscount).not.toHaveBeenCalled();
+  });
+
+  it('does not close the modal after a successful approve', async () => {
+    const user = userEvent.setup();
+    const closeModal = vi.fn();
+    const onMutate = vi.fn();
+
+    vi.mocked(decideDiscount).mockResolvedValue({
+      ...makeDiscount(),
+      status: BillDiscountStatus.APPROVED,
+    } as any);
+
+    const bill = makeBill({
+      status: BillStatus.POSTED,
+      total: 1000,
+      amountAfterDiscount: 1000,
+      discounts: [makeDiscount({ discountAmount: 100 })],
+    });
+
+    render(<ReviewBillDiscountsModal closeModal={closeModal} bill={bill} onMutate={onMutate} />);
+
+    await user.click(screen.getByRole('button', { name: /approve/i }));
+
+    await waitFor(() => expect(showSnackbar).toHaveBeenCalledWith(expect.objectContaining({ kind: 'success' })));
+    expect(closeModal).not.toHaveBeenCalled();
+    expect(onMutate).toHaveBeenCalledOnce();
+  });
+
+  it('renders a progress bar and hides content while isLoading', () => {
+    (useBill as Mock).mockReturnValue({ bill: null, mutate: vi.fn(), isLoading: true, isValidating: false });
+
+    const bill = makeBill({ discounts: [makeDiscount()] });
+    render(<ReviewBillDiscountsModal closeModal={vi.fn()} bill={bill} onMutate={vi.fn()} />);
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /approve/i })).not.toBeInTheDocument();
+  });
+});

package/src/discounts/admin/review-bill-discounts/review-bill-discounts.modal.tsx

@@ -0,0 +1,167 @@
+import React, { useCallback, useState } from 'react';
+import { ModalBody, ModalHeader, ProgressBar } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { showSnackbar, useSession } from '@openmrs/esm-framework';
+import BillReceiptRail from './bill-receipt-rail/bill-receipt-rail.component';
+import DiscountReviewStack from './discount-review-stack/discount-review-stack.component';
+import { useBill } from '../../../billing.resource';
+import { decideDiscount, voidDiscount } from '../../discounts.resource';
+import { useReviewBillModel } from './review-bill-discounts.utils';
+import { BillDiscountStatus, BillStatus, type BillDiscount, type PatientInvoice } from '../../../types';
+import styles from './review-bill-discounts.modal.scss';
+
+const extractErrorMessage = (e: any): string =>
+  e?.responseBody?.error?.message ?? (e instanceof Error ? e.message : String(e));
+
+interface Props {
+  closeModal: () => void;
+  bill: PatientInvoice;
+  onMutate: () => void;
+}
+
+const ReviewBillDiscountsModal: React.FC<Props> = ({ closeModal, bill, onMutate }) => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const { bill: localBill, mutate: localMutate, isLoading, isValidating } = useBill(bill.uuid, false);
+  const activeBill = localBill ?? bill;
+  const [busy, setBusy] = useState<string | null>(null);
+  const [rejectingId, setRejectingId] = useState<string | null>(null);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const canDecide = activeBill.status === BillStatus.PENDING || activeBill.status === BillStatus.POSTED;
+
+  const {
+    pendingDiscounts,
+    confirmedDiscounts,
+    approvedDiscounts,
+    lineItems,
+    payments,
+    paymentsTotal,
+    subtotal,
+    currentNet,
+    outstanding,
+  } = useReviewBillModel(activeBill);
+
+  const handleApprove = useCallback(
+    async (d: BillDiscount) => {
+      if (!canDecide) return;
+      if (outstanding - d.discountAmount < 0) {
+        showSnackbar({
+          title: t('approveBlocked', 'Cannot approve discount'),
+          subtitle: t('approveBlockedNegativeDue', 'Approving this discount would push the amount due below zero.'),
+          kind: 'error',
+        });
+        return;
+      }
+      setBusy(d.uuid);
+      try {
+        await decideDiscount(d.uuid, BillDiscountStatus.APPROVED, session.user.uuid);
+        showSnackbar({ title: t('discountApproved', 'Discount approved'), kind: 'success' });
+        await localMutate();
+        onMutate();
+      } catch (e: unknown) {
+        showSnackbar({
+          title: t('approveFailed', 'Approve failed'),
+          subtitle: extractErrorMessage(e),
+          kind: 'error',
+        });
+      } finally {
+        setBusy(null);
+      }
+    },
+    [canDecide, outstanding, t, session.user.uuid, localMutate, onMutate],
+  );
+
+  const confirmReject = useCallback(
+    async (d: BillDiscount) => {
+      if (!canDecide) return;
+      setBusy(d.uuid);
+      try {
+        await decideDiscount(d.uuid, BillDiscountStatus.REJECTED, session.user.uuid);
+        showSnackbar({ title: t('discountRejected', 'Discount rejected'), kind: 'success' });
+        await localMutate();
+        onMutate();
+      } catch (e: unknown) {
+        showSnackbar({ title: t('rejectFailed', 'Reject failed'), subtitle: extractErrorMessage(e), kind: 'error' });
+      } finally {
+        setBusy(null);
+        setRejectingId(null);
+      }
+    },
+    [canDecide, t, session.user.uuid, localMutate, onMutate],
+  );
+
+  const confirmDelete = useCallback(
+    async (d: BillDiscount) => {
+      if (d.status === BillDiscountStatus.APPROVED && outstanding <= 0) {
+        showSnackbar({
+          title: t('deleteBlocked', 'Cannot delete discount'),
+          subtitle: t('deleteBlockedFullyPaid', 'An approved discount cannot be removed once the bill is fully paid.'),
+          kind: 'error',
+        });
+        setDeletingId(null);
+        return;
+      }
+      setBusy(d.uuid);
+      try {
+        await voidDiscount(d.uuid, 'Deleted by admin');
+        showSnackbar({ title: t('discountDeleted', 'Discount deleted'), kind: 'success' });
+        await localMutate();
+        onMutate();
+      } catch (e: unknown) {
+        showSnackbar({ title: t('deleteFailed', 'Delete failed'), subtitle: extractErrorMessage(e), kind: 'error' });
+      } finally {
+        setBusy(null);
+        setDeletingId(null);
+      }
+    },
+    [outstanding, t, localMutate, onMutate],
+  );
+
+  const handleCancelReject = useCallback(() => setRejectingId(null), []);
+  const handleCancelDelete = useCallback(() => setDeletingId(null), []);
+
+  const showProgress = !!busy || isLoading || isValidating;
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('reviewDiscounts', 'Review discounts')} />
+      <ModalBody>
+        {showProgress ? (
+          <ProgressBar label="" hideLabel />
+        ) : (
+          <div className={styles.layout}>
+            <BillReceiptRail
+              bill={activeBill}
+              lineItems={lineItems}
+              payments={payments}
+              paymentsTotal={paymentsTotal}
+              subtotal={subtotal}
+              currentNet={currentNet}
+              outstanding={outstanding}
+              approvedDiscounts={approvedDiscounts}
+              pendingDiscounts={pendingDiscounts}
+            />
+            <DiscountReviewStack
+              pendingDiscounts={pendingDiscounts}
+              confirmedDiscounts={confirmedDiscounts}
+              lineItems={lineItems}
+              busy={busy}
+              rejectingId={rejectingId}
+              deletingId={deletingId}
+              canDecide={canDecide}
+              onApprove={handleApprove}
+              onStartReject={setRejectingId}
+              onCancelReject={handleCancelReject}
+              onConfirmReject={confirmReject}
+              onStartDelete={setDeletingId}
+              onCancelDelete={handleCancelDelete}
+              onConfirmDelete={confirmDelete}
+            />
+          </div>
+        )}
+      </ModalBody>
+    </>
+  );
+};
+
+export default ReviewBillDiscountsModal;

package/src/discounts/admin/review-bill-discounts/review-bill-discounts.utils.ts

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+
+import {
+  BillDiscountStatus,
+  type BillDiscount,
+  type LineItem,
+  type PatientInvoice,
+  type Payment,
+} from '../../../types';
+
+export function useReviewBillModel(bill: PatientInvoice) {
+  const activeDiscounts: BillDiscount[] = useMemo(
+    () => (bill.discounts ?? []).filter((d: BillDiscount) => !d.voided),
+    [bill.discounts],
+  );
+
+  const pendingDiscounts = activeDiscounts.filter((d) => d.status === BillDiscountStatus.PENDING);
+  const confirmedDiscounts = activeDiscounts.filter((d) => d.status !== BillDiscountStatus.PENDING);
+  const approvedDiscounts = activeDiscounts.filter((d) => d.status === BillDiscountStatus.APPROVED);
+
+  const lineItems = (bill.lineItems ?? []).filter((li: LineItem) => !li.voided);
+
+  const payments = (bill.payments ?? []).filter((p: Payment) => !p.voided);
+  const paymentsTotal = payments.reduce((sum: number, p: Payment) => sum + (p.amountTendered ?? 0), 0);
+
+  const subtotal = bill.total;
+  const currentNet = bill.amountAfterDiscount;
+  const outstanding = currentNet - paymentsTotal;
+
+  return {
+    activeDiscounts,
+    pendingDiscounts,
+    confirmedDiscounts,
+    approvedDiscounts,
+    lineItems,
+    payments,
+    paymentsTotal,
+    subtotal,
+    currentNet,
+    outstanding,
+  };
+}