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

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

@@ -0,0 +1,199 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { isDesktop, useConfig, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import {
+  CardHeader,
+  EmptyDataIllustration,
+  ErrorState,
+  launchPatientWorkspace,
+  usePaginationInfo,
+} from '@openmrs/esm-patient-common-lib';
+import { useBills } from '../billing.resource';
+import InvoiceTable from '../invoice/invoice-table.component';
+import styles from './bill-history.scss';
+import { Add } from '@carbon/react/icons';
+import { convertToCurrency } from '../helpers';
+
+interface BillHistoryProps {
+  patientUuid: string;
+}
+
+const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const { bills, isLoading, error } = useBills(patientUuid);
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
+  const { paginated, goTo, results, currentPage } = usePagination(bills);
+  const { pageSize, defaultCurrency } = useConfig();
+  const [currentPageSize, setCurrentPageSize] = React.useState(pageSize);
+  const { pageSizes } = usePaginationInfo(pageSize, bills?.length, currentPage, results?.length);
+
+  const headerData = [
+    {
+      header: t('visitTime', 'Visit time'),
+      key: 'visitTime',
+    },
+    {
+      header: t('identifier', 'Identifier'),
+      key: 'identifier',
+    },
+    {
+      header: t('billedItems', 'Billed Items'),
+      key: 'billedItems',
+    },
+    {
+      header: t('billTotal', 'Bill total'),
+      key: 'billTotal',
+    },
+  ];
+
+  const setBilledItems = (bill) =>
+    bill?.lineItems?.reduce((acc, item) => acc + (acc ? ' & ' : '') + (item?.billableService || item?.item || ''), '');
+
+  const rowData = results?.map((bill) => ({
+    id: bill.uuid,
+    uuid: bill.uuid,
+    billTotal: convertToCurrency(bill?.totalAmount, defaultCurrency),
+    visitTime: bill.dateCreated,
+    identifier: bill.identifier,
+    billedItems: setBilledItems(bill),
+  }));
+
+  if (isLoading) {
+    return (
+      <div className={styles.loaderContainer}>
+        <DataTableSkeleton showHeader={false} showToolbar={false} zebra size={responsiveSize} />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.errorContainer}>
+        <Layer>
+          <ErrorState error={error} headerTitle={t('billsList', 'Bill list')} />
+        </Layer>
+      </div>
+    );
+  }
+
+  if (bills.length === 0) {
+    return (
+      <Layer className={styles.emptyStateContainer}>
+        <Tile className={styles.tile}>
+          <div className={styles.illo}>
+            <EmptyDataIllustration />
+          </div>
+          <p className={styles.content}>There are no bills to display.</p>
+          <Button onClick={() => launchPatientWorkspace('billing-form-workspace')} kind="ghost">
+            {t('launchBillForm', 'Launch bill form')}
+          </Button>
+        </Tile>
+      </Layer>
+    );
+  }
+
+  return (
+    <>
+      <CardHeader title={t('billingHistory', 'Billing History')}>
+        <Button renderIcon={Add} onClick={() => launchPatientWorkspace('billing-form-workspace', {})} kind="ghost">
+          {t('addBill', 'Add bill item(s)')}
+        </Button>
+      </CardHeader>
+      <div className={styles.billHistoryContainer}>
+        <DataTable isSortable rows={rowData} headers={headerData} size={responsiveSize} useZebraStyles>
+          {({
+            rows,
+            headers,
+            getExpandHeaderProps,
+            getTableProps,
+            getTableContainerProps,
+            getHeaderProps,
+            getRowProps,
+          }) => (
+            <TableContainer {...getTableContainerProps}>
+              <Table className={styles.table} {...getTableProps()} aria-label="Bill list">
+                <TableHead>
+                  <TableRow>
+                    <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+                    {headers.map((header, i) => (
+                      <TableHeader
+                        key={i}
+                        {...getHeaderProps({
+                          header,
+                        })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row, i) => {
+                    const currentBill = bills?.find((bill) => bill.uuid === row.id);
+
+                    return (
+                      <React.Fragment key={row.id}>
+                        <TableExpandRow {...getRowProps({ row })}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>{cell.value}</TableCell>
+                          ))}
+                        </TableExpandRow>
+                        {row.isExpanded ? (
+                          <TableExpandedRow className={styles.expandedRow} colSpan={headers.length + 1}>
+                            <div className={styles.container} key={i}>
+                              <InvoiceTable bill={currentBill} isSelectable={false} />
+                            </div>
+                          </TableExpandedRow>
+                        ) : (
+                          <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                        )}
+                      </React.Fragment>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </DataTable>
+        {paginated && (
+          <Pagination
+            forwardText={t('nextPage', 'Next page')}
+            backwardText={t('previousPage', 'Previous page')}
+            page={currentPage}
+            pageSize={currentPageSize}
+            pageSizes={pageSizes}
+            totalItems={bills.length}
+            className={styles.pagination}
+            size={responsiveSize}
+            onChange={({ page: newPage, pageSize }) => {
+              if (newPage !== currentPage) {
+                goTo(newPage);
+              }
+              setCurrentPageSize(pageSize);
+            }}
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+export default BillHistory;

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,76 @@
+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';
+import { useConfig } from '@openmrs/esm-framework';
+
+const PatientBillsSelections: React.FC<{ bills: MappedBill; setPatientUuid: (patientUuid) => void }> = ({
+  bills,
+  setPatientUuid,
+}) => {
+  const { t } = useTranslation();
+  const [selectedBills, setSelectedBills] = React.useState<Array<LineItem>>([]);
+  const { defaultCurrency } = useConfig();
+
+  const checkBoxLabel = (lineItem) => {
+    return `${lineItem.item === '' ? lineItem.billableService : lineItem.item} ${convertToCurrency(lineItem.price, defaultCurrency)}`;
+  };
+
+  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, defaultCurrency)}</StructuredListCell>
+              <StructuredListCell>
+                {convertToCurrency(lineItem.price * lineItem.quantity, defaultCurrency)}
+              </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,110 @@
+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 { restBaseUrl, showSnackbar, useConfig } 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';
+import { apiBasePath } from '../../constants';
+
+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);
+  const { defaultCurrency } = useConfig();
+
+  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(`${apiBasePath}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, defaultCurrency)}</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');
+}