@openmrs/esm-billing-app 1.0.1-pre.14

package/src/bill-history/bill-history.scss

@@ -0,0 +1,151 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  margin: 2rem 0;
+}
+
+.emptyStateContainer,
+.loaderContainer {
+  @extend .container;
+}
+
+.billHistoryContainer {
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  border-bottom: none;
+  width: 100%;
+  margin: 0 auto;
+  max-width: 95vw;
+  padding-bottom: 0;
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
+  background-color: $ui-02;
+}
+
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  flex: 1 1 0%;
+  justify-content: center;
+}
+
+.tableContainer section {
+  position: relative;
+}
+
+.tableContainer a {
+  text-decoration: none;
+}
+
+.pagination {
+  overflow: hidden;
+
+  &:global(.cds--pagination) {
+    border-top: none;
+  }
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.emptyRow {
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.visitSummaryContainer {
+  width: 100%;
+  max-width: 768px;
+  margin: 1rem auto;
+}
+
+.expandedActiveVisitRow > td > div {
+  max-height: max-content !important;
+}
+
+.expandedActiveVisitRow td {
+  padding: 0 2rem;
+}
+
+.expandedActiveVisitRow th[colspan] td[colspan] > div:first-child {
+  padding: 0 1rem;
+}
+
+.action {
+  margin-bottom: layout.$spacing-03;
+}
+
+.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;
+
+  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;
+  border: 1px solid $ui-03;
+}
+
+.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: 0.5rem;
+}
+
+.filterEmptyStateHelper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+.table {
+  tr[data-child-row] td {
+    padding-left: 2rem !important;
+  }
+}

package/src/bill-history/bill-history.test.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { useBills } from '../billing.resource';
+import BillHistory from './bill-history.component';
+
+const testProps = {
+  patientUuid: 'some-uuid',
+};
+
+const mockbills = useBills as jest.MockedFunction<typeof useBills>;
+
+const mockBillsData = [
+  { uuid: '1', patientName: 'John Doe', identifier: '12345678', billingService: 'Checkup', totalAmount: 500 },
+  { uuid: '2', patientName: 'John Doe', identifier: '12345678', billingService: 'Consulatation', totalAmount: 600 },
+  { uuid: '3', patientName: 'John Doe', identifier: '12345678', billingService: 'Child services', totalAmount: 700 },
+  { uuid: '4', patientName: 'John Doe', identifier: '12345678', billingService: 'Medication', totalAmount: 800 },
+  { uuid: '5', patientName: 'John Doe', identifier: '12345678', billingService: 'Lab', totalAmount: 900 },
+  { uuid: '6', patientName: 'John Doe', identifier: '12345678', billingService: 'Pharmacy', totalAmount: 400 },
+  { uuid: '7', patientName: 'John Doe', identifier: '12345678', billingService: 'Nutrition', totalAmount: 300 },
+  { uuid: '8', patientName: 'John Doe', identifier: '12345678', billingService: 'Physiotherapy', totalAmount: 200 },
+  { uuid: '9', patientName: 'John Doe', identifier: '12345678', billingService: 'Dentist', totalAmount: 1100 },
+  { uuid: '10', patientName: 'John Doe', identifier: '12345678', billingService: 'Neuro', totalAmount: 1200 },
+  { uuid: '11', patientName: 'John Doe', identifier: '12345678', billingService: 'Outpatient', totalAmount: 1050 },
+  { uuid: '12', patientName: 'John Doe', identifier: '12345678', billingService: 'MCH', totalAmount: 1300 },
+];
+
+jest.mock('../invoice/invoice-table.component', () => jest.fn(() => <div>Invoice table</div>));
+
+jest.mock('../billing.resource', () => ({
+  ...jest.requireActual('../billing.resource'),
+  useBills: jest.fn(() => ({
+    bills: mockBillsData,
+    isLoading: false,
+    isValidating: false,
+    error: null,
+  })),
+}));
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useLayoutType: jest.fn(() => 'small-desktop'),
+  usePagination: jest.fn().mockImplementation((data) => ({
+    currentPage: 1,
+    goTo: () => {},
+    results: data,
+    paginated: true,
+  })),
+}));
+
+describe('BillHistory', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('should render loading datatable skeleton', () => {
+    mockbills.mockReturnValueOnce({ isLoading: true, isValidating: false, error: null, bills: [], mutate: jest.fn() });
+    render(<BillHistory {...testProps} />);
+    const loadingSkeleton = screen.getByRole('table');
+    expect(loadingSkeleton).toBeInTheDocument();
+    expect(loadingSkeleton).toHaveClass('cds--skeleton cds--data-table cds--data-table--zebra');
+  });
+
+  test('should render error state when API call fails', () => {
+    mockbills.mockReturnValueOnce({
+      isLoading: false,
+      isValidating: false,
+      error: new Error('some error'),
+      bills: [],
+      mutate: jest.fn(),
+    });
+    render(<BillHistory {...testProps} />);
+    const errorState = screen.getByText(/Sorry, there was a problem displaying this information./);
+    expect(errorState).toBeInTheDocument();
+  });
+
+  xtest('should render bills table', async () => {
+    const user = userEvent.setup();
+    mockbills.mockReturnValueOnce({
+      isLoading: false,
+      isValidating: false,
+      error: null,
+      bills: mockBillsData as any,
+      mutate: jest.fn(),
+    });
+    render(<BillHistory {...testProps} />);
+    expect(screen.getByText('Visit time')).toBeInTheDocument();
+    expect(screen.getByText('Identifier')).toBeInTheDocument();
+    const expectedColumnHeaders = [/Visit time/, /Identifier/, /Billing service/, /Bill total/];
+    expectedColumnHeaders.forEach((header) => {
+      expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
+    });
+
+    const tableRowGroup = screen.getAllByRole('rowgroup');
+    expect(tableRowGroup).toHaveLength(2);
+
+    // Page navigation should work as expected
+    const nextPageButton = screen.getByRole('button', { name: /Next page/ });
+    const prevPageButton = screen.getByRole('button', { name: /Previous page/ });
+
+    expect(nextPageButton).toBeInTheDocument();
+    expect(prevPageButton).toBeInTheDocument();
+
+    expect(screen.getByText(/1–10 of 12 items/)).toBeInTheDocument();
+    await user.click(nextPageButton);
+    expect(screen.getByText(/11–12 of 12 items/)).toBeInTheDocument();
+    await user.click(prevPageButton);
+    expect(screen.getByText(/1–10 of 12 items/)).toBeInTheDocument();
+
+    // clicking the row should expand the row
+    const expandAllRowButton = screen.getByRole('button', { name: /Expand all rows/ });
+    expect(expandAllRowButton).toBeInTheDocument();
+    await user.click(expandAllRowButton);
+  });
+
+  test('should render empty state view when there are no bills', () => {
+    mockbills.mockReturnValueOnce({ isLoading: false, isValidating: false, error: null, bills: [], mutate: jest.fn() });
+    render(<BillHistory {...testProps} />);
+    const emptyState = screen.getByText(/There are no bills to display./);
+    expect(emptyState).toBeInTheDocument();
+  });
+});

package/src/billable-services/bill-waiver/bill-selection.component.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import {
+  Checkbox,
+  Layer,
+  StructuredListBody,
+  StructuredListCell,
+  StructuredListHead,
+  StructuredListRow,
+  StructuredListWrapper,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { convertToCurrency } from '../../helpers';
+import { type MappedBill, type LineItem } from '../../types';
+import BillWaiverForm from './bill-waiver-form.component';
+import styles from './bill-waiver.scss';
+
+const PatientBillsSelections: React.FC<{ bills: MappedBill; setPatientUuid: (patientUuid) => void }> = ({
+  bills,
+  setPatientUuid,
+}) => {
+  const { t } = useTranslation();
+  const [selectedBills, setSelectedBills] = React.useState<Array<LineItem>>([]);
+
+  const checkBoxLabel = (lineItem) => {
+    return `${lineItem.item === '' ? lineItem.billableService : lineItem.item} ${convertToCurrency(lineItem.price)}`;
+  };
+
+  const handleOnCheckBoxChange = (event, { checked, id }) => {
+    const selectedLineItem = bills.lineItems.find((lineItem) => lineItem.uuid === id);
+    if (checked) {
+      setSelectedBills([...selectedBills, selectedLineItem]);
+    } else {
+      setSelectedBills(selectedBills.filter((lineItem) => lineItem.uuid !== id));
+    }
+  };
+  return (
+    <Layer>
+      <StructuredListWrapper className={styles.billListContainer} isCondensed selection={true}>
+        <StructuredListHead>
+          <StructuredListRow head>
+            <StructuredListCell head>{t('billItem', 'Bill item')}</StructuredListCell>
+            <StructuredListCell head>{t('quantity', 'Quantity')}</StructuredListCell>
+            <StructuredListCell head>{t('unitPrice', 'Unit Price')}</StructuredListCell>
+            <StructuredListCell head>{t('total', 'Total')}</StructuredListCell>
+            <StructuredListCell head>{t('actions', 'Actions')}</StructuredListCell>
+          </StructuredListRow>
+        </StructuredListHead>
+        <StructuredListBody>
+          {bills?.lineItems.map((lineItem) => (
+            <StructuredListRow>
+              <StructuredListCell>{lineItem.item === '' ? lineItem.billableService : lineItem.item}</StructuredListCell>
+              <StructuredListCell>{lineItem.quantity}</StructuredListCell>
+              <StructuredListCell>{convertToCurrency(lineItem.price)}</StructuredListCell>
+              <StructuredListCell>{convertToCurrency(lineItem.price * lineItem.quantity)}</StructuredListCell>
+              <StructuredListCell>
+                <Checkbox
+                  hideLabel
+                  onChange={(event, { checked, id }) => handleOnCheckBoxChange(event, { checked, id })}
+                  labelText={checkBoxLabel(lineItem)}
+                  id={lineItem.uuid}
+                />
+              </StructuredListCell>
+            </StructuredListRow>
+          ))}
+        </StructuredListBody>
+      </StructuredListWrapper>
+      <BillWaiverForm bill={bills} lineItems={selectedBills} setPatientUuid={setPatientUuid} />
+    </Layer>
+  );
+};
+
+export default PatientBillsSelections;

package/src/billable-services/bill-waiver/bill-waiver-form.component.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Form, Stack, FormGroup, Layer, Button, NumberInput } from '@carbon/react';
+import { TaskAdd } from '@carbon/react/icons';
+import { mutate } from 'swr';
+import { useTranslation } from 'react-i18next';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { createBillWaiverPayload } from './utils';
+import { convertToCurrency } from '../../helpers';
+import { processBillPayment } from '../../billing.resource';
+import { useBillableItems } from '../../billing-form/billing-form.resource';
+import type { LineItem, MappedBill } from '../../types';
+import styles from './bill-waiver-form.scss';
+
+type BillWaiverFormProps = {
+  bill: MappedBill;
+  lineItems: Array<LineItem>;
+  setPatientUuid: (patientUuid) => void;
+};
+
+const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPatientUuid }) => {
+  const { t } = useTranslation();
+  const [waiverAmount, setWaiverAmount] = React.useState(0);
+  const { lineItems: billableLineItems, isLoading: isLoadingLineItems, error: lineError } = useBillableItems();
+  const totalAmount = lineItems.reduce((acc, curr) => acc + curr.price * curr.quantity, 0);
+
+  if (lineItems?.length === 0) {
+    return null;
+  }
+
+  const handleProcessPayment = (event) => {
+    const waiverEndPointPayload = createBillWaiverPayload(
+      bill,
+      waiverAmount,
+      totalAmount,
+      lineItems,
+      billableLineItems,
+    );
+
+    processBillPayment(waiverEndPointPayload, bill.uuid).then(
+      (resp) => {
+        showSnackbar({
+          title: t('billWaiver', 'Bill waiver'),
+          subtitle: t('billWaiverSuccess', 'Bill waiver successful'),
+          kind: 'success',
+          timeoutInMs: 3500,
+          isLowContrast: true,
+        });
+        setPatientUuid('');
+        mutate((key) => typeof key === 'string' && key.startsWith('/ws/rest/v1/cashier/bill?v=full'), undefined, {
+          revalidate: true,
+        });
+      },
+      (err) => {
+        showSnackbar({
+          title: t('billWaiver', 'Bill waiver'),
+          subtitle: t('billWaiverError', 'Bill waiver failed {{error}}', { error: err.message }),
+          kind: 'error',
+          timeoutInMs: 3500,
+          isLowContrast: true,
+        });
+      },
+    );
+  };
+
+  return (
+    <Form className={styles.billWaiverForm} aria-label={t('waiverForm', 'Waiver form')}>
+      <hr />
+      <Stack gap={7}>
+        <FormGroup>
+          <section className={styles.billWaiverDescription}>
+            <label className={styles.label}>{t('billItems', 'Bill Items')}</label>
+            <p className={styles.value}>
+              {t('billName', ' {{billName}} ', {
+                billName: lineItems.map((item) => item.item || item.billableService).join(', ') ?? '--',
+              })}
+            </p>
+          </section>
+          <section className={styles.billWaiverDescription}>
+            <label className={styles.label}>{t('billTotal', 'Bill total')}</label>
+            <p className={styles.value}>{convertToCurrency(totalAmount)}</p>
+          </section>
+
+          <Layer className={styles.formControlLayer}>
+            <NumberInput
+              label={t('amountToWaiveLabel', 'Amount to Waive')}
+              helperText={t('amountToWaiveHelper', 'Specify the amount to be deducted from the bill')}
+              aria-label={t('amountToWaiveAriaLabel', 'Enter amount to waive')}
+              hideSteppers
+              disableWheel
+              min={0}
+              max={totalAmount}
+              invalidText={t('invalidWaiverAmount', 'Invalid waiver amount')}
+              value={waiverAmount}
+              onChange={(event) => setWaiverAmount(event.target.value)}
+            />
+          </Layer>
+        </FormGroup>
+        <div className={styles.buttonContainer}>
+          <Button kind="tertiary" renderIcon={TaskAdd} onClick={handleProcessPayment}>
+            {t('postWaiver', 'Post waiver')}
+          </Button>
+        </div>
+      </Stack>
+    </Form>
+  );
+};
+
+export default BillWaiverForm;

package/src/billable-services/bill-waiver/bill-waiver-form.scss

@@ -0,0 +1,34 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.billWaiverForm {
+  margin-top: layout.$spacing-05;
+  padding: 0 layout.$spacing-05;
+}
+
+.buttonContainer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: -1rem;
+}
+
+.formControlLayer {
+  padding: layout.$spacing-05 0;
+}
+
+.billWaiverDescription {
+  display: grid;
+  grid-template-columns: 5rem 1fr;
+  column-gap: 1rem;
+  align-items: center;
+  margin-top: 0.125rem;
+  margin-bottom: 0.5rem;
+}
+
+.label {
+  @include type.type-style('heading-compact-01');
+}
+
+.value {
+  @include type.type-style('body-01');
+}

package/src/billable-services/bill-waiver/bill-waiver.component.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { ExtensionSlot, UserHasAccess } from '@openmrs/esm-framework';
+import PatientBills from './patient-bills.component';
+import { useBills } from '../../billing.resource';
+import styles from './bill-waiver.scss';
+
+type BillWaiverProps = {};
+
+const BillWaiver: React.FC<BillWaiverProps> = () => {
+  const [patientUuid, setPatientUuid] = useState<string>('');
+  const { bills } = useBills(patientUuid);
+  const filterBills = bills.filter((bill) => bill.status !== 'PAID' && patientUuid === bill.patientUuid) ?? [];
+  return (
+    <UserHasAccess privilege="coreapps.systemAdministration">
+      <div className={styles.billWaiverContainer}>
+        <ExtensionSlot
+          name="patient-search-bar-slot"
+          state={{
+            selectPatientAction: (patientUuid) => setPatientUuid(patientUuid),
+            buttonProps: {
+              kind: 'primary',
+            },
+          }}
+        />
+
+        <PatientBills patientUuid={patientUuid} bills={filterBills} setPatientUuid={setPatientUuid} />
+      </div>
+    </UserHasAccess>
+  );
+};
+
+export default BillWaiver;

package/src/billable-services/bill-waiver/bill-waiver.scss

@@ -0,0 +1,10 @@
+@use '@carbon/layout';
+
+.billWaiverContainer {
+  margin: layout.$layout-01;
+  row-gap: layout.$layout-01;
+}
+
+.billListContainer {
+  background-color: white;
+}

package/src/billable-services/bill-waiver/patient-bills.component.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import {
+  DataTable,
+  Layer,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import { type MappedBill } from '../../types';
+import { convertToCurrency } from '../../helpers';
+import PatientBillsSelections from './bill-selection.component';
+import styles from '../../bills-table/bills-table.scss';
+
+type PatientBillsProps = {
+  patientUuid: string;
+  bills: Array<MappedBill>;
+  setPatientUuid: (patientUuid: string) => void;
+};
+
+const PatientBills: React.FC<PatientBillsProps> = ({ patientUuid, bills, setPatientUuid }) => {
+  const { t } = useTranslation();
+
+  if (!patientUuid) {
+    return;
+  }
+
+  const tableHeaders = [
+    { header: 'Date', key: 'date' },
+    { header: 'Billable Service', key: 'billableService' },
+    { header: 'Total Amount', key: 'totalAmount' },
+  ];
+
+  const tableRows = bills.map((bill) => ({
+    id: `${bill.uuid}`,
+    date: bill.dateCreated,
+    billableService: bill.billingService,
+    totalAmount: convertToCurrency(bill.totalAmount),
+  }));
+
+  if (bills.length === 0 && patientUuid !== '') {
+    return (
+      <>
+        <div style={{ marginTop: '0.625rem' }}>
+          <Layer className={styles.emptyStateContainer}>
+            <Tile className={styles.tile}>
+              <div className={styles.illo}>
+                <EmptyDataIllustration />
+              </div>
+              <p className={styles.content}>{t('noBilltoDisplay', 'There are no bills to display for this patient')}</p>
+            </Tile>
+          </Layer>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <div style={{ marginTop: '1rem' }}>
+      <DataTable
+        rows={tableRows}
+        headers={tableHeaders}
+        size="sm"
+        useZebraStyles
+        render={({
+          rows,
+          headers,
+          getHeaderProps,
+          getExpandHeaderProps,
+          getRowProps,
+          getExpandedRowProps,
+          getTableProps,
+          getTableContainerProps,
+        }) => (
+          <TableContainer
+            title={t('patientBills', 'Patient bill')}
+            description={t('patientBillsDescription', 'List of patient bills')}
+            {...getTableContainerProps()}>
+            <Table {...getTableProps()} aria-label="sample table">
+              <TableHead>
+                <TableRow>
+                  <TableExpandHeader enableToggle={true} {...getExpandHeaderProps()} />
+                  {headers.map((header, i) => (
+                    <TableHeader
+                      key={i}
+                      {...getHeaderProps({
+                        header,
+                      })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, index) => (
+                  <React.Fragment key={row.id}>
+                    <TableExpandRow
+                      {...getRowProps({
+                        row,
+                      })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableExpandRow>
+                    <TableExpandedRow
+                      colSpan={headers.length + 1}
+                      className="demo-expanded-td"
+                      {...getExpandedRowProps({
+                        row,
+                      })}>
+                      <div>
+                        <PatientBillsSelections bills={bills[index]} setPatientUuid={setPatientUuid} />
+                      </div>
+                    </TableExpandedRow>
+                  </React.Fragment>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      />
+    </div>
+  );
+};
+
+export default PatientBills;