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

package/src/payment-status-tag/payment-status-tag.component.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tag, Toggletip, ToggletipButton, ToggletipContent } from '@carbon/react';
+import { usePatientPaymentStatus } from '../billing.resource';
+import styles from './payment-status-tag.scss';
+
+/**
+ * DO NOT DELETE — intentional extraction hints for i18next-parser.
+ * The t() calls in this component use a dynamic key (paymentStatus.status),
+ * which the parser cannot statically detect. These dummy calls ensure 'PAID'
+ * and 'UNPAID' are included in the translation catalogue.
+ * t('PAID', 'PAID')
+ * t('UNPAID', 'UNPAID')
+ */
+
+type PaymentStatusTagProps = {
+  patientUuid: string;
+  renderedFrom: string;
+};
+
+const PaymentStatusTag: React.FC<PaymentStatusTagProps> = ({ patientUuid, renderedFrom }) => {
+  const isPatientChart = renderedFrom === 'patient-chart';
+
+  if (!isPatientChart) {
+    return null;
+  }
+
+  return <PaymentStatusTagInner patientUuid={patientUuid} />;
+};
+
+const PaymentStatusTagInner: React.FC<Omit<PaymentStatusTagProps, 'renderedFrom'>> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const { paymentStatus, isLoading, error } = usePatientPaymentStatus(patientUuid);
+  return !isLoading && !error && paymentStatus && paymentStatus.status !== 'UNKNOWN' ? (
+    <Toggletip className={styles.tag}>
+      <ToggletipButton label={t(paymentStatus.status, paymentStatus.status)}>
+        <Tag type={paymentStatus.status === 'PAID' ? 'green' : 'red'}>
+          {t(paymentStatus.status, paymentStatus.status)}
+        </Tag>
+      </ToggletipButton>
+      <ToggletipContent>
+        <div role="tooltip">
+          <p>{paymentStatus.reason}</p>
+        </div>
+      </ToggletipContent>
+    </Toggletip>
+  ) : null;
+};
+
+export default PaymentStatusTag;

package/src/payment-status-tag/payment-status-tag.scss

@@ -0,0 +1,6 @@
+@use '@carbon/layout';
+
+.tag {
+    margin: 0 layout.$spacing-01 0 0;
+}
+

package/src/payment-status-tag/payment-status-tag.test.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { usePatientPaymentStatus } from '../billing.resource';
+import PaymentStatusTag from './payment-status-tag.component';
+
+const mockUsePatientPaymentStatus = vi.mocked(usePatientPaymentStatus);
+
+vi.mock('../billing.resource', () => ({
+  usePatientPaymentStatus: vi.fn(),
+}));
+
+const patientUuid = 'test-patient-uuid';
+
+describe('PaymentStatusTag', () => {
+  it('renders nothing while loading', () => {
+    mockUsePatientPaymentStatus.mockReturnValue({
+      paymentStatus: undefined,
+      isLoading: true,
+      error: undefined,
+      isValidating: false,
+      mutate: vi.fn(),
+    });
+    const { container } = render(<PaymentStatusTag patientUuid={patientUuid} renderedFrom="patient-chart" />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders nothing when there is an error', () => {
+    mockUsePatientPaymentStatus.mockReturnValue({
+      paymentStatus: undefined,
+      isLoading: false,
+      error: new Error('fetch failed'),
+      isValidating: false,
+      mutate: vi.fn(),
+    });
+    const { container } = render(<PaymentStatusTag patientUuid={patientUuid} renderedFrom="patient-chart" />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders nothing when paymentStatus is undefined', () => {
+    mockUsePatientPaymentStatus.mockReturnValue({
+      paymentStatus: undefined,
+      isLoading: false,
+      error: undefined,
+      isValidating: false,
+      mutate: vi.fn(),
+    });
+    const { container } = render(<PaymentStatusTag patientUuid={patientUuid} renderedFrom="patient-chart" />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders nothing for UNKNOWN status', () => {
+    mockUsePatientPaymentStatus.mockReturnValue({
+      paymentStatus: { status: 'UNKNOWN', reason: 'Status could not be determined' },
+      isLoading: false,
+      error: undefined,
+      isValidating: false,
+      mutate: vi.fn(),
+    });
+    const { container } = render(<PaymentStatusTag patientUuid={patientUuid} renderedFrom="patient-chart" />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders nothing when not in patient-chart status', () => {
+    mockUsePatientPaymentStatus.mockReturnValue({
+      paymentStatus: { status: 'PAID', reason: 'Status could not be determined' },
+      isLoading: false,
+      error: undefined,
+      isValidating: false,
+      mutate: vi.fn(),
+    });
+    const { container } = render(<PaymentStatusTag patientUuid={patientUuid} renderedFrom="patient-search" />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders a PAID tag with the reason in the tooltip content', () => {
+    mockUsePatientPaymentStatus.mockReturnValue({
+      paymentStatus: { status: 'PAID', reason: 'Bill fully settled' },
+      isLoading: false,
+      error: undefined,
+      isValidating: false,
+      mutate: vi.fn(),
+    });
+    render(<PaymentStatusTag patientUuid={patientUuid} renderedFrom="patient-chart" />);
+    expect(screen.getByText('PAID')).toBeInTheDocument();
+    expect(screen.getByText('Bill fully settled')).toBeInTheDocument();
+  });
+
+  it('renders an UNPAID tag with the reason in the tooltip content', () => {
+    mockUsePatientPaymentStatus.mockReturnValue({
+      paymentStatus: { status: 'UNPAID', reason: 'Outstanding balance of 500' },
+      isLoading: false,
+      error: undefined,
+      isValidating: false,
+      mutate: vi.fn(),
+    });
+    render(<PaymentStatusTag patientUuid={patientUuid} renderedFrom="patient-chart" />);
+    expect(screen.getByText('UNPAID')).toBeInTheDocument();
+    expect(screen.getByText('Outstanding balance of 500')).toBeInTheDocument();
+  });
+
+  it('does not blink on revalidation — renders stale value while isValidating is true', () => {
+    mockUsePatientPaymentStatus.mockReturnValue({
+      paymentStatus: { status: 'PAID', reason: 'Fully paid' },
+      isLoading: false,
+      error: undefined,
+      isValidating: true,
+      mutate: vi.fn(),
+    });
+    render(<PaymentStatusTag patientUuid={patientUuid} renderedFrom="patient-chart" />);
+    expect(screen.getByText('PAID')).toBeInTheDocument();
+  });
+});

package/src/refunds/admin/refund-requests-left-panel-link.component.tsx

@@ -0,0 +1,43 @@
+import React, { useMemo } from 'react';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { SideNavLink } from '@carbon/react';
+import { navigate } from '@openmrs/esm-framework';
+
+export interface LinkConfig {
+  name: string;
+  title: string;
+  path: string;
+  icon?: React.ComponentType;
+}
+
+function RefundRequestsLinkExtension({ config }: Readonly<{ config: LinkConfig }>) {
+  const { title, path, icon: Icon } = config;
+  const { t } = useTranslation();
+  const location = useLocation();
+  const spaBasePath = `${globalThis.spaBase}/billable-services`;
+
+  const isActive = useMemo(() => {
+    const currentPath = location.pathname.replace(spaBasePath, '');
+    if (path === '' || path === '/') {
+      return currentPath === '' || currentPath === '/';
+    }
+    return currentPath.startsWith(`/${path}`);
+  }, [location.pathname, path, spaBasePath]);
+
+  const handleNavigation = () => {
+    navigate({ to: `${spaBasePath}/${path}` });
+  };
+
+  return (
+    <SideNavLink onClick={handleNavigation} renderIcon={Icon} isActive={isActive}>
+      {t(title)}
+    </SideNavLink>
+  );
+}
+
+export const createRefundRequestsLeftPanelLink = (config: LinkConfig) => () => (
+  <BrowserRouter>
+    <RefundRequestsLinkExtension config={config} />
+  </BrowserRouter>
+);

package/src/refunds/admin/refund-requests.component.tsx

@@ -0,0 +1,324 @@
+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 { useRefundRequests } from '../refunds.resource';
+import type { BillingConfig } from '../../config-schema';
+import { RefundStatus, type PatientInvoice } from '../../types';
+import styles from './refund-requests.scss';
+
+type FilterValue = 'REQUESTED' | 'APPROVED' | 'REJECTED' | 'COMPLETED' | 'ALL';
+
+interface RefundStatusFilterItem {
+  id: FilterValue;
+  text: string;
+}
+
+const filterToStatuses = (value: FilterValue): RefundStatus[] => {
+  if (value === 'ALL') {
+    return [RefundStatus.REQUESTED, RefundStatus.APPROVED, RefundStatus.REJECTED, RefundStatus.COMPLETED];
+  }
+  return [value];
+};
+
+const RefundRequests: React.FC = () => {
+  const { t } = useTranslation();
+  const { defaultCurrency, pageSize: configuredPageSize } = useConfig<BillingConfig>();
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
+
+  const filterItems: RefundStatusFilterItem[] = useMemo(
+    () => [
+      { id: 'REQUESTED', text: t('requested', 'Requested') },
+      { id: 'APPROVED', text: t('approved', 'Approved') },
+      { id: 'REJECTED', text: t('rejected', 'Rejected') },
+      { id: 'COMPLETED', text: t('completed', 'Completed') },
+      { id: 'ALL', text: t('all', 'All') },
+    ],
+    [t],
+  );
+  const [filter, setFilter] = useState<RefundStatusFilterItem>(filterItems[0]);
+  const [currentPageSize, setCurrentPageSize] = useState(configuredPageSize ?? 10);
+  const [searchString, setSearchString] = useState('');
+
+  const { bills, isLoading, error, mutate, isValidating } = useRefundRequests({
+    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-refunds-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],
+  );
+
+  const handleTableRowClick = useCallback(
+    (rowId: string) => {
+      const match = rows.find((r) => r.id === rowId);
+      if (match) handleRowClick(match._raw);
+    },
+    [rows, handleRowClick],
+  );
+
+  let tableContent: React.ReactNode;
+  if (isLoading && !bills?.length) {
+    tableContent = (
+      <div className={styles.loaderContainer} aria-busy="true" aria-label={t('loading', 'Loading')}>
+        <DataTableSkeleton
+          rowCount={currentPageSize}
+          showHeader={false}
+          showToolbar={false}
+          zebra
+          columnCount={headers.length}
+        />
+      </div>
+    );
+  } else if (error) {
+    tableContent = (
+      <div className={styles.errorContainer}>
+        <Layer>
+          <ErrorState error={error} headerTitle={t('refundRequests', 'Refund requests')} />
+        </Layer>
+      </div>
+    );
+  } else if (rows.length > 0) {
+    tableContent = (
+      <>
+        <DataTable isSortable rows={rows} headers={headers} size={responsiveSize} useZebraStyles={rows.length > 1}>
+          {({ rows: dataRows, headers: dataHeaders, getRowProps, getTableProps }) => (
+            <TableContainer>
+              <Table {...getTableProps()} aria-label={t('refundRequests', 'Refund 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={() => handleTableRowClick(row.id)}>
+                      {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);
+              }
+            }}
+          />
+        )}
+      </>
+    );
+  } else {
+    tableContent = (
+      <Layer className={styles.emptyStateContainer}>
+        <Tile className={styles.tile}>
+          <div className={styles.illo}>
+            <EmptyCardIllustration />
+          </div>
+          <p className={styles.content}>{t('noRefundRequestsToDisplay', 'There are no refund requests to display.')}</p>
+        </Tile>
+      </Layer>
+    );
+  }
+
+  return (
+    <main className={styles.container}>
+      <div className={styles.servicesTableContainer}>
+        <div className={styles.filterContainer}>
+          <Dropdown
+            className={styles.filterDropdown}
+            direction="bottom"
+            id="refund-status-filter"
+            selectedItem={filter}
+            items={filterItems}
+            itemToString={(item: RefundStatusFilterItem) => (item ? item.text : '')}
+            label=""
+            onChange={({ selectedItem }: { selectedItem: RefundStatusFilterItem }) => {
+              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}
+          />
+          {tableContent}
+        </div>
+      </div>
+    </main>
+  );
+};
+
+interface FilterableTableHeaderProps {
+  readonly layout: LayoutType;
+  readonly handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  readonly isValidating: boolean;
+  readonly responsiveSize: 'sm' | 'md' | 'lg';
+  readonly searchString: string;
+  readonly 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('refundRequests', 'Refund requests')}</h4>
+        </div>
+        {isValidating && (
+          <span>
+            <InlineLoading />
+          </span>
+        )}
+      </div>
+      <Search
+        closeButtonLabelText={t('clearSearch', 'Clear')}
+        data-testid="refundRequestsSearchBar"
+        labelText={t('searchRefundRequests', 'Search refund requests')}
+        placeholder={t('searchByPatientOrBill', 'Search by patient name or bill #')}
+        value={searchString}
+        onChange={handleSearch}
+        size={responsiveSize}
+      />
+    </>
+  );
+}
+
+export default RefundRequests;

package/src/refunds/admin/refund-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;
+}