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

package/src/discounts/admin/discount-requests.component.tsx

@@ -0,0 +1,316 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Dropdown,
+  InlineLoading,
+  Layer,
+  Link,
+  Pagination,
+  Search,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import {
+  EmptyCardIllustration,
+  ErrorState,
+  formatDate,
+  isDesktop,
+  parseDate,
+  showModal,
+  useConfig,
+  useLayoutType,
+  usePagination,
+  usePaginationInfo,
+  type LayoutType,
+} from '@openmrs/esm-framework';
+import { convertToCurrency } from '../../helpers';
+import { useDiscountRequests } from '../discounts.resource';
+import type { BillingConfig } from '../../config-schema';
+import { BillDiscountStatus, type PatientInvoice } from '../../types';
+import styles from './discount-requests.scss';
+
+type FilterValue = 'PENDING' | 'APPROVED' | 'REJECTED' | 'ALL';
+
+interface DiscountStatusFilterItem {
+  id: FilterValue;
+  text: string;
+}
+
+const filterToStatuses = (value: FilterValue): BillDiscountStatus[] => {
+  if (value === 'ALL') {
+    return [BillDiscountStatus.PENDING, BillDiscountStatus.APPROVED, BillDiscountStatus.REJECTED];
+  }
+  return [value as BillDiscountStatus];
+};
+
+const DiscountRequests: React.FC = () => {
+  const { t } = useTranslation();
+  const { defaultCurrency, pageSize: configuredPageSize } = useConfig<BillingConfig>();
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
+
+  const filterItems: DiscountStatusFilterItem[] = useMemo(
+    () => [
+      { id: 'PENDING', text: t('pending', 'Pending') },
+      { id: 'APPROVED', text: t('approved', 'Approved') },
+      { id: 'REJECTED', text: t('rejected', 'Rejected') },
+      { id: 'ALL', text: t('all', 'All') },
+    ],
+    [t],
+  );
+  const [filter, setFilter] = useState<DiscountStatusFilterItem>(filterItems[0]);
+  const [currentPageSize, setCurrentPageSize] = useState(configuredPageSize ?? 10);
+  const [searchString, setSearchString] = useState('');
+
+  const { bills, isLoading, error, mutate, isValidating } = useDiscountRequests({
+    statuses: filterToStatuses(filter.id),
+  });
+
+  const filteredBills = useMemo(() => {
+    const q = searchString.trim().toLowerCase();
+    if (!q) return bills;
+    return bills.filter(
+      (b) => b.patient?.display?.toLowerCase().includes(q) || b.receiptNumber?.toLowerCase().includes(q),
+    );
+  }, [bills, searchString]);
+
+  const { paginated, goTo, results: paginatedBills, currentPage } = usePagination(filteredBills, currentPageSize);
+  const { pageSizes } = usePaginationInfo(currentPageSize, filteredBills.length, currentPage, paginatedBills.length);
+
+  const headers = useMemo(
+    () => [
+      { key: 'dateCreated', header: t('date', 'Date') },
+      { key: 'receiptNumber', header: t('invoiceNo', 'Invoice #') },
+      { key: 'patient', header: t('patient', 'Patient') },
+      { key: 'billAmount', header: t('billAmount', 'Bill amount') },
+      { key: 'cashier', header: t('cashier', 'Cashier') },
+    ],
+    [t],
+  );
+
+  const handleRowClick = useCallback(
+    (bill: PatientInvoice) => {
+      const dispose = showModal('review-bill-discounts-modal', {
+        bill,
+        onMutate: mutate,
+        closeModal: () => dispose(),
+      });
+    },
+    [mutate],
+  );
+
+  const rows = useMemo(
+    () =>
+      paginatedBills.map((bill: PatientInvoice) => ({
+        id: bill.uuid,
+        dateCreated: bill.dateCreated ? formatDate(parseDate(bill.dateCreated), { mode: 'wide' }) : '--',
+        patient: bill.patient?.display ?? '--',
+        receiptNumber: bill.receiptNumber ? (
+          <Link
+            href="#"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleRowClick(bill);
+            }}>
+            {bill.receiptNumber}
+          </Link>
+        ) : (
+          '--'
+        ),
+        billAmount: convertToCurrency(bill.total ?? 0, defaultCurrency),
+        cashier: bill.cashier?.display ?? '--',
+        _raw: bill,
+      })),
+    [paginatedBills, defaultCurrency, handleRowClick],
+  );
+
+  const handleSearch = useCallback(
+    (e) => {
+      setSearchString(e.target.value);
+      goTo(1);
+    },
+    [goTo],
+  );
+
+  return (
+    <main className={styles.container}>
+      <main className={styles.servicesTableContainer}>
+        <div className={styles.filterContainer}>
+          <Dropdown
+            className={styles.filterDropdown}
+            direction="bottom"
+            id="discount-status-filter"
+            selectedItem={filter}
+            items={filterItems}
+            itemToString={(item: DiscountStatusFilterItem) => (item ? item.text : '')}
+            label=""
+            onChange={({ selectedItem }: { selectedItem: DiscountStatusFilterItem }) => {
+              setFilter(selectedItem);
+              goTo(1);
+            }}
+            size={responsiveSize}
+            titleText={t('filterBy', 'Filter by:')}
+            type="inline"
+          />
+        </div>
+
+        <div className={styles.billListContainer}>
+          <FilterableTableHeader
+            handleSearch={handleSearch}
+            isValidating={isValidating}
+            layout={layout}
+            responsiveSize={responsiveSize}
+            searchString={searchString}
+            t={t}
+          />
+          {isLoading && !bills?.length ? (
+            <div className={styles.loaderContainer} role="progressbar" aria-label={t('loadingDescription', 'Loading')}>
+              <DataTableSkeleton
+                rowCount={currentPageSize}
+                showHeader={false}
+                showToolbar={false}
+                zebra
+                columnCount={headers.length}
+              />
+            </div>
+          ) : error ? (
+            <div className={styles.errorContainer}>
+              <Layer>
+                <ErrorState error={error} headerTitle={t('discountRequests', 'Discount requests')} />
+              </Layer>
+            </div>
+          ) : rows.length > 0 ? (
+            <>
+              <DataTable
+                isSortable
+                rows={rows}
+                headers={headers}
+                size={responsiveSize}
+                useZebraStyles={rows.length > 1}>
+                {({ rows: dataRows, headers: dataHeaders, getRowProps, getTableProps }) => (
+                  <TableContainer>
+                    <Table {...getTableProps()} aria-label={t('discountRequests', 'Discount requests')}>
+                      <TableHead>
+                        <TableRow>
+                          {dataHeaders.map((header) => (
+                            <TableHeader key={header.key}>{header.header}</TableHeader>
+                          ))}
+                        </TableRow>
+                      </TableHead>
+                      <TableBody>
+                        {dataRows.map((row) => (
+                          <TableRow
+                            key={row.id}
+                            {...getRowProps({ row })}
+                            className={styles.row}
+                            onClick={() => {
+                              const match = rows.find((r) => r.id === row.id);
+                              if (match) handleRowClick(match._raw);
+                            }}>
+                            {row.cells.map((cell) => (
+                              <TableCell key={cell.id}>{cell.value}</TableCell>
+                            ))}
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </TableContainer>
+                )}
+              </DataTable>
+              {paginated && (
+                <Pagination
+                  forwardText={t('nextPage', 'Next page')}
+                  backwardText={t('previousPage', 'Previous page')}
+                  page={currentPage}
+                  pageSize={currentPageSize}
+                  pageSizes={pageSizes}
+                  totalItems={filteredBills.length}
+                  size={responsiveSize}
+                  onChange={({ pageSize: newPageSize, page: newPage }) => {
+                    if (newPageSize !== currentPageSize) {
+                      setCurrentPageSize(newPageSize);
+                    }
+                    if (newPage !== currentPage) {
+                      goTo(newPage);
+                    }
+                  }}
+                />
+              )}
+            </>
+          ) : (
+            <Layer className={styles.emptyStateContainer}>
+              <Tile className={styles.tile}>
+                <div className={styles.illo}>
+                  <EmptyCardIllustration />
+                </div>
+                <p className={styles.content}>
+                  {t('noDiscountRequestsToDisplay', 'There are no discount requests to display.')}
+                </p>
+              </Tile>
+            </Layer>
+          )}
+        </div>
+      </main>
+    </main>
+  );
+};
+
+interface FilterableTableHeaderProps {
+  layout: LayoutType;
+  handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  isValidating: boolean;
+  responsiveSize: 'sm' | 'md' | 'lg';
+  searchString: string;
+  t: (key: string, fallback: string) => string;
+}
+
+function FilterableTableHeader({
+  layout,
+  handleSearch,
+  isValidating,
+  responsiveSize,
+  searchString,
+  t,
+}: FilterableTableHeaderProps) {
+  return (
+    <>
+      <div className={styles.headerContainer}>
+        <div
+          className={classNames({
+            [styles.tabletHeading]: !isDesktop(layout),
+            [styles.desktopHeading]: isDesktop(layout),
+          })}>
+          <h4>{t('discountRequests', 'Discount requests')}</h4>
+        </div>
+        {isValidating && (
+          <div className={styles.backgroundDataFetchingIndicator}>
+            <span>
+              <InlineLoading />
+            </span>
+          </div>
+        )}
+      </div>
+      <Search
+        closeButtonLabelText={t('clearSearch', 'Clear')}
+        data-testid="discountRequestsSearchBar"
+        labelText={t('searchDiscountRequests', 'Search discount requests')}
+        placeholder={t('searchByPatientOrBill', 'Search by patient name or bill #')}
+        value={searchString}
+        onChange={handleSearch}
+        size={responsiveSize}
+      />
+    </>
+  );
+}
+
+export default DiscountRequests;

package/src/discounts/admin/discount-requests.scss

@@ -0,0 +1,133 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  height: calc(100vh - layout.$spacing-09);
+  margin: layout.$spacing-05;
+}
+
+.servicesTableContainer {
+  margin: layout.$spacing-07 layout.$spacing-05;
+}
+
+.sectionMargin {
+  margin: layout.$spacing-07 0;
+}
+
+.emptyStateContainer,
+.loaderContainer,
+.errorContainer {
+  @extend .sectionMargin;
+}
+
+.billListContainer {
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  width: 100%;
+  margin: 0 auto;
+  max-width: 95vw;
+  padding-bottom: 0;
+
+  :has(.filterEmptyState) {
+    border-bottom: none;
+  }
+}
+
+.filterContainer {
+  flex: 1;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: 1rem;
+  }
+
+  :global(.cds--list-box__menu) {
+    min-width: max-content;
+  }
+
+  :global(.cds--list-box) {
+    margin-left: layout.$spacing-03;
+  }
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04 layout.$spacing-05;
+  background-color: $ui-02;
+  gap: layout.$spacing-05;
+}
+
+.row {
+  cursor: pointer;
+}
+
+.statusTags {
+  display: inline-flex;
+  gap: layout.$spacing-02;
+}
+
+.illo {
+  margin-top: layout.$spacing-05;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  flex: 1;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid;
+      @include brand-03(border-bottom-color);
+    }
+  }
+}
+
+.tile {
+  text-align: center;
+}
+
+.filterEmptyState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-09;
+  text-align: center;
+}
+
+.filterEmptyStateTile {
+  margin: auto;
+}
+
+.filterEmptyStateContent {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-03;
+}
+
+.filterEmptyStateHelper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}

package/src/discounts/admin/discount-requests.test.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { showModal } from '@openmrs/esm-framework';
+import DiscountRequests from './discount-requests.component';
+import { useDiscountRequests } from '../discounts.resource';
+import { BillDiscountStatus } from '../../types';
+
+vi.mock('@openmrs/esm-framework', () => ({
+  showModal: vi.fn(),
+  useConfig: () => ({ defaultCurrency: 'USD', pageSize: 10 }),
+  formatDate: () => 'date',
+  parseDate: (s: string) => new Date(s),
+  restBaseUrl: '/ws/rest/v1',
+  useLayoutType: () => 'small-desktop',
+  isDesktop: () => true,
+  usePagination: <T,>(items: T[]) => ({
+    paginated: (items?.length ?? 0) > 10,
+    goTo: vi.fn(),
+    results: items ?? [],
+    currentPage: 1,
+  }),
+  usePaginationInfo: () => ({ pageSizes: [10, 20, 30, 40, 50] }),
+  EmptyCardIllustration: () => null,
+  ErrorState: ({ headerTitle }: { headerTitle: string }) => <div>{headerTitle} error</div>,
+}));
+
+(window as any).i18next = { language: 'en-US' };
+vi.mock('../discounts.resource');
+
+const sampleBill = {
+  uuid: 'b1',
+  receiptNumber: 'INV-1',
+  status: 'POSTED',
+  total: 5000,
+  amountAfterDiscount: 5000,
+  dateCreated: '2026-05-11T00:00:00.000+0000',
+  patient: { display: '10001V - Jane Doe' },
+  cashier: { display: 'cashier' },
+  discounts: [{ uuid: 'd1', status: BillDiscountStatus.PENDING, voided: false }],
+};
+
+beforeEach(() => vi.clearAllMocks());
+
+describe('DiscountRequests page', () => {
+  it('renders an empty state when no bills match', () => {
+    vi.mocked(useDiscountRequests).mockReturnValue({
+      bills: [],
+      totalCount: 0,
+      isLoading: false,
+      error: null,
+      mutate: vi.fn(),
+    } as any);
+    render(<DiscountRequests />);
+    expect(screen.getByText(/no discount requests to display/i)).toBeInTheDocument();
+  });
+
+  it('lists one row per bill with the bill metadata', () => {
+    vi.mocked(useDiscountRequests).mockReturnValue({
+      bills: [sampleBill],
+      totalCount: 1,
+      isLoading: false,
+      error: null,
+      mutate: vi.fn(),
+    } as any);
+    render(<DiscountRequests />);
+    expect(screen.getByText(/INV-1/)).toBeInTheDocument();
+    expect(screen.getByText(/10001V - Jane Doe/)).toBeInTheDocument();
+  });
+
+  it('opens the review modal on row click', async () => {
+    vi.mocked(useDiscountRequests).mockReturnValue({
+      bills: [sampleBill],
+      totalCount: 1,
+      isLoading: false,
+      error: null,
+      mutate: vi.fn(),
+    } as any);
+    const user = userEvent.setup();
+    render(<DiscountRequests />);
+    await user.click(screen.getByText(/INV-1/));
+    expect(showModal).toHaveBeenCalledWith(
+      'review-bill-discounts-modal',
+      expect.objectContaining({ bill: expect.objectContaining({ uuid: 'b1' }) }),
+    );
+  });
+
+  it('changes the status filter and refetches', async () => {
+    const mutate = vi.fn();
+    vi.mocked(useDiscountRequests).mockReturnValue({
+      bills: [],
+      totalCount: 0,
+      isLoading: false,
+      error: null,
+      mutate,
+    } as any);
+    const user = userEvent.setup();
+    render(<DiscountRequests />);
+    await user.click(screen.getByRole('combobox'));
+    await user.click(screen.getByText(/approved/i));
+    expect(vi.mocked(useDiscountRequests).mock.calls.at(-1)?.[0].statuses).toEqual([BillDiscountStatus.APPROVED]);
+  });
+});

package/src/discounts/admin/review-bill-discounts/bill-line-items-table/bill-line-items-table.component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConfig } from '@openmrs/esm-framework';
+import type { BillingConfig } from '../../../../config-schema';
+import { convertToCurrency } from '../../../../helpers';
+import type { LineItem } from '../../../../types';
+import styles from './bill-line-items-table.scss';
+
+interface Props {
+  lineItems: Array<LineItem>;
+}
+
+const BillLineItemsTable: React.FC<Props> = ({ lineItems }) => {
+  const { t } = useTranslation();
+  const { defaultCurrency } = useConfig<BillingConfig>();
+
+  return (
+    <section className={styles.ledger}>
+      <h3 className={styles.ledgerHeading}>{t('lineItems', 'Line items')}</h3>
+      <table className={styles.ledgerTable}>
+        <thead>
+          <tr>
+            <th>{t('item', 'Item')}</th>
+            <th>{t('qty', 'Qty')}</th>
+            <th className={styles.right}>{t('price', 'Price')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {lineItems.map((li: LineItem, idx: number) => (
+            <tr key={li.uuid ?? idx}>
+              <td className={styles.itemName}>{li.item || li.billableService || '--'}</td>
+              <td>{li.quantity}</td>
+              <td className={styles.right}>{convertToCurrency(li.price ?? 0, defaultCurrency)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </section>
+  );
+};
+
+export default BillLineItemsTable;

package/src/discounts/admin/review-bill-discounts/bill-line-items-table/bill-line-items-table.scss

@@ -0,0 +1,76 @@
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.ledger {
+  margin-bottom: $spacing-05;
+}
+
+.ledgerHeading {
+  @include type.type-style('label-01');
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--cds-text-helper);
+  margin: 0 0 $spacing-03;
+}
+
+.ledgerTable {
+  width: 100%;
+  border-collapse: collapse;
+  @include type.type-style('body-compact-01');
+}
+
+.ledgerTable thead th {
+  text-align: left;
+  @include type.type-style('label-01');
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--cds-text-helper);
+  font-weight: 500;
+  padding: $spacing-02 0;
+  border-bottom: 1px solid $ui-03;
+}
+
+.ledgerTable tbody td {
+  padding: $spacing-03 0;
+  border-bottom: 1px dashed $ui-03;
+  color: var(--cds-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.ledgerTable tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.center {
+  text-align: center;
+  width: 36px;
+}
+
+.right {
+  text-align: right;
+}
+
+.itemName {
+  color: var(--cds-text-primary);
+}
+
+.ref {
+  display: inline-block;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 $spacing-02;
+  background: $ui-02;
+  border: 1px solid $color-gray-30;
+  @include type.type-style('code-01');
+  font-weight: 500;
+  text-align: center;
+  line-height: 18px;
+  color: var(--cds-text-secondary);
+}
+
+.refSolid {
+  background: $ui-05;
+  border-color: $ui-05;
+  color: $ui-02;
+}