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

package/src/invoice/invoice-table.scss

@@ -0,0 +1,91 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.filterEmptyState {
+  align-items: center;
+  background-color: white;
+  display: flex;
+  justify-content: center;
+  padding: layout.$spacing-09 !important;
+  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;
+}
+
+.headerContainer {
+  background-color: colors.$gray-10;
+}
+
+.invoiceContainer {
+  margin: layout.$spacing-09 layout.$spacing-05 0;
+  border: 1px solid $ui-03;
+}
+
+.searchbox {
+  input:focus {
+    outline: 2px solid colors.$orange-40 !important;
+  }
+}
+
+.table {
+  td {
+    border-bottom: none !important;
+  }
+}
+
+.tableDescription {
+  display: flex;
+  align-items: flex-start;
+  margin-top: layout.$spacing-02;
+  column-gap: layout.$spacing-01;
+
+  ::after {
+    content: '';
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+
+  & > span {
+    @include type.type-style('body-01');
+  }
+}
+
+.tableToolbar {
+  width: 20%;
+  min-width: 12.5rem;
+}
+
+.toolbarWrapper {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .toolbarWrapper {
+    height: layout.$spacing-09;
+  }
+}
+
+:global(.omrs-breakpoint-gt-tablet) {
+  .toolbarWrapper {
+    height: layout.$spacing-07;
+  }
+}

package/src/invoice/invoice.component.tsx

@@ -0,0 +1,138 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, InlineLoading } from '@carbon/react';
+import { Printer } from '@carbon/react/icons';
+import { useParams } from 'react-router-dom';
+import { useReactToPrint } from 'react-to-print';
+import { useTranslation } from 'react-i18next';
+import { ExtensionSlot, usePatient } from '@openmrs/esm-framework';
+import { ErrorState } from '@openmrs/esm-patient-common-lib';
+import { convertToCurrency } from '../helpers';
+import { type LineItem } from '../types';
+import { useBill } from '../billing.resource';
+import InvoiceTable from './invoice-table.component';
+import Payments from './payments/payments.component';
+import PrintReceipt from './printable-invoice/print-receipt.component';
+import PrintableInvoice from './printable-invoice/printable-invoice.component';
+import styles from './invoice.scss';
+
+interface InvoiceDetailsProps {
+  label: string;
+  value: string | number;
+}
+
+const Invoice: React.FC = () => {
+  const { t } = useTranslation();
+  const { billUuid, patientUuid } = useParams();
+  const { patient, isLoading: isLoadingPatient } = usePatient(patientUuid);
+  const { bill, isLoading: isLoadingBill, error } = useBill(billUuid);
+  const [isPrinting, setIsPrinting] = useState(false);
+  const [selectedLineItems, setSelectedLineItems] = useState([]);
+  const componentRef = useRef<HTMLDivElement>(null);
+  const onBeforeGetContentResolve = useRef<(() => void) | null>(null);
+  const handleSelectItem = (lineItems: Array<LineItem>) => {
+    setSelectedLineItems(lineItems);
+  };
+
+  const handleAfterPrint = useCallback(() => {
+    onBeforeGetContentResolve.current = null;
+    setIsPrinting(false);
+  }, []);
+
+  const reactToPrintContent = useCallback(() => componentRef.current, []);
+
+  const handleOnBeforeGetContent = useCallback(() => {
+    return new Promise<void>((resolve) => {
+      if (patient && bill) {
+        setIsPrinting(true);
+        onBeforeGetContentResolve.current = resolve;
+      }
+    });
+  }, [bill, patient]);
+
+  const handlePrint = useReactToPrint({
+    content: reactToPrintContent,
+    documentTitle: `Invoice ${bill?.receiptNumber} - ${patient?.name?.[0]?.given?.join(' ')} ${
+      patient?.name?.[0].family
+    }`,
+    onBeforeGetContent: handleOnBeforeGetContent,
+    onAfterPrint: handleAfterPrint,
+    removeAfterPrint: true,
+  });
+
+  useEffect(() => {
+    if (isPrinting && onBeforeGetContentResolve.current) {
+      onBeforeGetContentResolve.current();
+    }
+  }, [isPrinting]);
+
+  const invoiceDetails = {
+    'Total Amount': convertToCurrency(bill?.totalAmount),
+    'Amount Tendered': convertToCurrency(bill?.tenderedAmount),
+    'Invoice Number': bill.receiptNumber,
+    'Date And Time': bill?.dateCreated,
+    'Invoice Status': bill?.status,
+  };
+
+  if (isLoadingPatient && isLoadingBill) {
+    return (
+      <div className={styles.invoiceContainer}>
+        <InlineLoading
+          className={styles.loader}
+          status="active"
+          iconDescription="Loading"
+          description="Loading patient header..."
+        />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.errorContainer}>
+        <ErrorState headerTitle={t('invoiceError', 'Invoice error')} error={error} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.invoiceContainer}>
+      {patient && patientUuid && <ExtensionSlot name="patient-header-slot" state={{ patient, patientUuid }} />}
+      <div className={styles.detailsContainer}>
+        <section className={styles.details}>
+          {Object.entries(invoiceDetails).map(([key, val]) => (
+            <InvoiceDetails key={key} label={key} value={val} />
+          ))}
+        </section>
+        <div>
+          <Button
+            disabled={isPrinting}
+            onClick={handlePrint}
+            renderIcon={(props) => <Printer size={24} {...props} />}
+            iconDescription="Print bill"
+            size="md">
+            {t('printBill', 'Print bill')}
+          </Button>
+          {bill.status === 'PAID' ? <PrintReceipt billId={bill?.id} /> : null}
+        </div>
+      </div>
+
+      <InvoiceTable bill={bill} isLoadingBill={isLoadingBill} onSelectItem={handleSelectItem} />
+      <Payments bill={bill} selectedLineItems={selectedLineItems} />
+
+      <div className={styles.printContainer} ref={componentRef}>
+        {isPrinting && <PrintableInvoice bill={bill} patient={patient} isLoading={isLoadingPatient} />}
+      </div>
+    </div>
+  );
+};
+
+function InvoiceDetails({ label, value }: InvoiceDetailsProps) {
+  return (
+    <div>
+      <h1 className={styles.label}>{label}</h1>
+      <span className={styles.value}>{value}</span>
+    </div>
+  );
+}
+
+export default Invoice;

package/src/invoice/invoice.scss

@@ -0,0 +1,93 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.invoiceContainer {
+  background-color: colors.$gray-10;
+  height: calc(100vh - 3rem);
+}
+
+.errorContainer {
+  margin: layout.$spacing-05;
+}
+
+.loader {
+  display: flex;
+  min-height: layout.$spacing-09;
+  justify-content: center;
+}
+
+.detailsContainer {
+  display: flex;
+}
+
+.details {
+  display: flex;
+  flex: 3;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-between;
+  margin: layout.$spacing-05;
+  row-gap: 1.5rem;
+}
+
+.label {
+  @include type.type-style('body-compact-02');
+  color: colors.$gray-70;
+  margin: layout.$spacing-01;
+}
+
+.value {
+  @include type.type-style('heading-03');
+  display: inline-block;
+  margin-top: layout.$spacing-04;
+}
+
+.backButton {
+  margin: layout.$spacing-04;
+
+  button {
+    display: flex;
+    padding-left: 0 !important;
+
+    svg {
+      order: 1;
+      margin-right: layout.$spacing-03;
+      margin-left: 0 !important;
+    }
+
+    span {
+      order: 2;
+    }
+  }
+}
+
+.invoicePaymentsContainer {
+  display: flex;
+  flex-direction: column;
+  margin: layout.$spacing-05;
+}
+
+.paymentSection {
+  display: flex;
+  flex-direction: row;
+}
+
+.billDetail {
+  font-weight: bold;
+  color: colors.$cool-gray-90;
+}
+
+@media screen {
+  .printContainer {
+    background-color: colors.$white;
+    display: none;
+  }
+}
+
+@media print {
+  html,
+  body {
+    background-color: colors.$white !important;
+  }
+}

package/src/invoice/invoice.test.tsx

@@ -0,0 +1,242 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useReactToPrint } from 'react-to-print';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { mockPayments, mockBill } from '../../__mocks__/bills.mock';
+import { useBill, processBillPayment } from '../billing.resource';
+import { usePaymentModes } from './payments/payment.resource';
+import Invoice from './invoice.component';
+
+const mockedBill = jest.mocked(useBill);
+const mockedProcessBillPayment = jest.mocked(processBillPayment);
+const mockedUsePaymentModes = jest.mocked(usePaymentModes);
+const mockedUseReactToPrint = jest.mocked(useReactToPrint);
+
+jest.mock('./payments/payment.resource', () => ({
+  usePaymentModes: jest.fn(),
+  updateBillVisitAttribute: jest.fn(),
+}));
+
+jest.mock('../billing.resource', () => ({
+  useBill: jest.fn(),
+  processBillPayment: jest.fn(),
+  useDefaultFacility: jest.fn().mockReturnValue({ uuid: '54065383-b4d4-42d2-af4d-d250a1fd2590', display: 'MTRH' }),
+}));
+
+jest.mock('react-router-dom', () => {
+  const originalModule = jest.requireActual('react-router-dom');
+
+  return {
+    ...originalModule,
+    useParams: jest.fn().mockReturnValue({ patientUuid: 'patientUuid', billUuid: 'billUuid' }),
+  };
+});
+
+jest.mock('react-to-print', () => {
+  const originalModule = jest.requireActual('react-to-print');
+
+  return {
+    ...originalModule,
+    useReactToPrint: jest.fn(),
+  };
+});
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+  return {
+    ...originalModule,
+    usePatient: jest.fn().mockReturnValue({
+      patient: {
+        id: 'b2fcf02b-7ee3-4d16-a48f-576be2b103aa',
+        name: [{ given: ['John'], family: 'Doe' }],
+      },
+      patientUuid: 'b2fcf02b-7ee3-4d16-a48f-576be2b103aa',
+      isLoading: false,
+      error: null,
+    }),
+  };
+});
+
+xdescribe('Invoice', () => {
+  beforeEach(() => {
+    mockedBill.mockReturnValue({
+      bill: mockBill,
+      isLoading: false,
+      error: null,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
+
+    mockedUsePaymentModes.mockReturnValue({
+      paymentModes: [
+        { uuid: 'uuid', name: 'Cash', description: 'Cash Method', retired: false },
+        { uuid: 'uuid1', name: 'MPESA', description: 'MPESA Method', retired: false },
+      ],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+  });
+
+  afterEach(() => jest.clearAllMocks());
+
+  test('should be able to search through the invoice table and settle a bill', async () => {
+    const user = userEvent.setup();
+
+    renderInvoice();
+
+    const expectedHeaders = [
+      /Total amount/i,
+      /Amount tendered/i,
+      /Date and time/i,
+      /Invoice status/i,
+      /Invoice number/i,
+    ];
+
+    expectedHeaders.forEach((header) => {
+      expect(screen.getByRole('heading', { name: header })).toBeInTheDocument();
+    });
+
+    const printButton = screen.getByRole('button', { name: /Print bill/i });
+    expect(printButton).toBeInTheDocument();
+
+    // Should show the line items table with the correct headers
+    const expectedColumnHeaders = [/No/i, /Bill item/i, /Bill code/i, /Status/i, /Quantity/i, /Price/i, /Total/i];
+
+    expectedColumnHeaders.forEach((columnHeader) => {
+      expect(screen.getByRole('columnheader', { name: columnHeader })).toBeInTheDocument();
+    });
+
+    expect(screen.getByRole('heading', { name: /Line items/i })).toBeInTheDocument();
+    expect(screen.getByText(/Items to be billed/i)).toBeInTheDocument();
+
+    // Should be able to search the line items table
+    const searchInput = screen.getByRole('searchbox');
+    expect(searchInput).toBeInTheDocument();
+    await user.type(searchInput, 'Hemoglobin');
+    expect(screen.getByText('Hemoglobin')).toBeInTheDocument();
+
+    await user.type(searchInput, 'Some random text');
+    expect(screen.queryByText('Hemoglobin')).not.toBeInTheDocument();
+    expect(screen.getByText(/No matching items to display/i)).toBeInTheDocument();
+    await user.clear(searchInput);
+
+    const row = mockBill.lineItems[0].item + ' ' + mockBill.receiptNumber + ' ' + mockBill.status.toUpperCase();
+
+    expect(screen.getByRole('row', { name: new RegExp(row, 'i') })).toBeInTheDocument();
+
+    // should be able to handle payments
+    const paymentSection = await screen.findByRole('heading', { name: /Payments/i });
+    expect(paymentSection).toBeInTheDocument();
+
+    const addPaymentOptionButton = await screen.findByRole('button', { name: /Add payment option/i });
+    expect(addPaymentOptionButton).toBeInTheDocument();
+    await user.click(addPaymentOptionButton);
+    const paymentModeInput = screen.getByRole('combobox', { name: /Payment method/i });
+    expect(paymentModeInput).toBeInTheDocument();
+    await user.click(paymentModeInput);
+
+    // select cash payment mode
+    const cashPaymentMode = await screen.findByText('Cash');
+    expect(cashPaymentMode).toBeInTheDocument();
+    await user.click(cashPaymentMode);
+
+    // enter payment amount
+    const paymentAmountInput = screen.getByPlaceholderText('Enter amount');
+    expect(paymentAmountInput).toBeInTheDocument();
+    await user.type(paymentAmountInput, '100');
+
+    // enter payment reference number
+    const paymentReferenceNumberInput = screen.getByRole('textbox', { name: /Reference number/ });
+    expect(paymentReferenceNumberInput).toBeInTheDocument();
+    await user.type(paymentReferenceNumberInput, '123456');
+
+    expect(addPaymentOptionButton).toBeDisabled();
+
+    // should process payment
+    mockedProcessBillPayment.mockResolvedValueOnce(Promise.resolve({} as any));
+    const processPaymentButton = screen.getByRole('button', { name: /Process Payment/i });
+    expect(processPaymentButton).toBeInTheDocument();
+    await user.click(processPaymentButton);
+
+    expect(processBillPayment).toHaveBeenCalledTimes(1);
+    expect(processBillPayment).toHaveBeenCalledWith(
+      {
+        cashPoint: '54065383-b4d4-42d2-af4d-d250a1fd2590',
+        cashier: 'fe00dd43-4c39-4ce9-9832-bc3620c80c6c',
+        patient: 'b2fcf02b-7ee3-4d16-a48f-576be2b103aa',
+        payments: [{ amount: 100, amountTendered: 100, attributes: [], instanceType: 'uuid' }],
+        status: 'PAID',
+      },
+      '6eb8d678-514d-46ad-9554-51e48d96d567',
+    );
+    expect(showSnackbar).toHaveBeenCalled();
+    expect(showSnackbar).toHaveBeenCalledWith({
+      kind: 'success',
+      subtitle: 'Bill payment processing has been successful',
+      timeoutInMs: 3000,
+      title: 'Bill payment',
+    });
+  });
+
+  test('should show print preview when print button is clicked', async () => {
+    const user = userEvent.setup();
+
+    renderInvoice();
+
+    const printButton = screen.getByRole('button', { name: /Print bill/i });
+    expect(printButton).toBeInTheDocument();
+    await user.click(printButton);
+    expect(mockedUseReactToPrint).toHaveBeenCalledTimes(1);
+    expect(mockedUseReactToPrint).toHaveBeenCalledWith(
+      expect.objectContaining({
+        documentTitle: 'Invoice 0035-6 - John Doe',
+      }),
+    );
+  });
+
+  test('should show payment history if bill is paid and disable adding more payments', async () => {
+    const user = userEvent.setup();
+    mockedBill.mockReturnValue({
+      bill: {
+        ...mockBill,
+        status: 'PAID',
+        payments: mockPayments,
+        tenderedAmount: 100,
+      },
+      isLoading: false,
+      error: null,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
+
+    mockedUsePaymentModes.mockReturnValue({
+      paymentModes: [
+        { uuid: 'uuid', name: 'Cash', description: 'Cash Method', retired: false },
+        { uuid: 'uuid1', name: 'MPESA', description: 'MPESA Method', retired: false },
+      ],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    renderInvoice();
+    const paymentHistorySection = screen.getByRole('heading', { name: /Payments/i });
+    expect(paymentHistorySection).toBeInTheDocument();
+
+    const expectedColumnHeaders = [/Date of payment/, /Bill amount/, /Amount tendered/, /Payment method/];
+    expectedColumnHeaders.forEach((header) => {
+      expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
+    });
+
+    const addPaymentOptionButton = await screen.findByRole('button', { name: /Add payment option/i });
+    expect(addPaymentOptionButton).toBeInTheDocument();
+    expect(addPaymentOptionButton).toBeDisabled();
+  });
+});
+
+function renderInvoice() {
+  return render(<Invoice />);
+}

package/src/invoice/payments/invoice-breakdown/invoice-breakdown.component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from './invoice-breakdown.scss';
+
+type InvoiceBreakDownProps = {
+  label: string;
+  value: string;
+  hasBalance?: Boolean;
+};
+
+export const InvoiceBreakDown: React.FC<InvoiceBreakDownProps> = ({ label, value, hasBalance }) => {
+  return (
+    <div className={styles.invoiceBreakdown}>
+      <span className={hasBalance ? styles.extendedLabel : styles.label}>{label}: </span>
+      <span className={styles.value}>{value}</span>
+    </div>
+  );
+};

package/src/invoice/payments/invoice-breakdown/invoice-breakdown.scss

@@ -0,0 +1,29 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.invoiceBreakdown {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: flex-end;
+  margin: layout.$spacing-02 0;
+}
+
+.label {
+  @include type.type-style('heading-03');
+  color: colors.$gray-100;
+  text-align: end;
+}
+
+.value {
+  @extend .label;
+  font-weight: bold;
+  margin-left: layout.$spacing-03;
+  text-align: start;
+}
+
+.extendedLabel {
+  @extend .label;
+  font-weight: bold;
+  color: crimson;
+}