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

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;
+}

package/src/invoice/payments/payment-form/payment-form.component.tsx

@@ -0,0 +1,105 @@
+import React, { useCallback } from 'react';
+import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { TrashCan, Add } from '@carbon/react/icons';
+import { Button, Dropdown, NumberInputSkeleton, TextInput, NumberInput } from '@carbon/react';
+import { ErrorState } from '@openmrs/esm-patient-common-lib';
+import { type PaymentFormValue } from '../payments.component';
+import { usePaymentModes } from '../payment.resource';
+import styles from './payment-form.scss';
+
+type PaymentFormProps = { disablePayment: boolean; amountDue: number };
+
+const DEFAULT_PAYMENT = { method: '', amount: 0, referenceCode: '' };
+
+const PaymentForm: React.FC<PaymentFormProps> = ({ disablePayment, amountDue }) => {
+  const { t } = useTranslation();
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext<PaymentFormValue>();
+  const { paymentModes, isLoading, error } = usePaymentModes();
+  const { fields, remove, append } = useFieldArray({ name: 'payment', control: control });
+
+  const handleAppendPaymentMode = useCallback(() => append(DEFAULT_PAYMENT), [append]);
+  const handleRemovePaymentMode = useCallback((index) => remove(index), [remove]);
+
+  if (isLoading) {
+    return <NumberInputSkeleton />;
+  }
+
+  if (error) {
+    return (
+      <div className={styles.errorPaymentContainer}>
+        <ErrorState headerTitle={t('errorLoadingPaymentModes', 'Payment modes error')} error={error} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      {fields.map((field, index) => (
+        <div key={field.id} className={styles.paymentMethodContainer}>
+          <Controller
+            control={control}
+            name={`payment.${index}.method`}
+            render={({ field }) => (
+              <Dropdown
+                id="paymentMethod"
+                onChange={({ selectedItem }) => field.onChange(selectedItem?.uuid)}
+                titleText={t('paymentMethod', 'Payment method')}
+                label={t('selectPaymentMethod', 'Select payment method')}
+                items={paymentModes}
+                itemToString={(item) => (item ? item.name : '')}
+                invalid={!!errors?.payment?.[index]?.method}
+                invalidText={errors?.payment?.[index]?.method?.message}
+              />
+            )}
+          />
+          <Controller
+            control={control}
+            name={`payment.${index}.amount`}
+            render={({ field }) => (
+              <NumberInput
+                id="paymentAmount"
+                {...field}
+                onChange={(e) => field.onChange(Number(e.target.value))}
+                invalid={!!errors?.payment?.[index]?.amount}
+                invalidText={errors?.payment?.[index]?.amount?.message}
+                label={t('amount', 'Amount')}
+                placeholder={t('enterAmount', 'Enter amount')}
+              />
+            )}
+          />
+          <Controller
+            name={`payment.${index}.referenceCode`}
+            control={control}
+            render={({ field }) => (
+              <TextInput
+                id="paymentReferenceCode"
+                {...field}
+                labelText={t('referenceNumber', 'Reference number')}
+                placeholder={t('enterReferenceNumber', 'Enter ref. number')}
+                type="text"
+              />
+            )}
+          />
+          <div className={styles.removeButtonContainer}>
+            <TrashCan onClick={handleRemovePaymentMode} className={styles.removeButton} size={20} />
+          </div>
+        </div>
+      ))}
+      <Button
+        disabled={disablePayment}
+        size="md"
+        onClick={handleAppendPaymentMode}
+        className={styles.paymentButtons}
+        renderIcon={(props) => <Add size={24} {...props} />}
+        iconDescription="Add">
+        {t('addPaymentOptions', 'Add payment option')}
+      </Button>
+    </div>
+  );
+};
+
+export default PaymentForm;

package/src/invoice/payments/payment-form/payment-form.scss

@@ -0,0 +1,54 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  margin: 1rem;
+}
+
+.paymentContainer {
+  margin: layout.$layout-01;
+  padding: layout.$layout-01;
+  width: 70%;
+  border-right: 1px solid colors.$cool-gray-40;
+}
+
+.paymentButtons {
+  margin: layout.$layout-01 0;
+}
+
+.paymentMethodContainer {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(auto, 1fr));
+  align-items: flex-start;
+  column-gap: 1rem;
+  margin: 0.625rem 0;
+  width: 100%;
+}
+
+.paymentTotals {
+  margin-top: layout.$spacing-01;
+}
+
+.processPayments {
+  display: flex;
+  justify-content: flex-end;
+  margin: layout.$spacing-05;
+  column-gap: layout.$spacing-04;
+}
+
+.errorPaymentContainer {
+  margin: layout.$spacing-04;
+  min-height: layout.$spacing-09;
+}
+
+.removeButtonContainer {
+  display: flex;
+  align-self: center;
+  cursor: pointer;
+  margin-left: layout.$spacing-07;
+}
+
+.removeButton {
+  color: colors.$red-60;
+}

package/src/invoice/payments/payment-history/payment-history.component.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { DataTable, Table, TableHead, TableRow, TableHeader, TableBody, TableCell } from '@carbon/react';
+import { type MappedBill } from '../../../types';
+import { formatDate, useConfig } from '@openmrs/esm-framework';
+import { convertToCurrency } from '../../../helpers';
+
+type PaymentHistoryProps = {
+  bill: MappedBill;
+};
+
+const PaymentHistory: React.FC<PaymentHistoryProps> = ({ bill }) => {
+  const { defaultCurrency } = useConfig();
+  const headers = [
+    {
+      key: 'dateCreated',
+      header: 'Date of payment',
+    },
+    {
+      key: 'amount',
+      header: 'Bill amount',
+    },
+    {
+      key: 'amountTendered',
+      header: 'Amount tendered',
+    },
+    {
+      key: 'paymentMethod',
+      header: 'Payment method',
+    },
+  ];
+  const rows = bill?.payments?.map((payment) => ({
+    id: `${payment.uuid}`,
+    dateCreated: formatDate(new Date(payment.dateCreated)),
+    amountTendered: convertToCurrency(payment.amountTendered, defaultCurrency),
+    amount: convertToCurrency(payment.amount, defaultCurrency),
+    paymentMethod: payment.instanceType.name,
+  }));
+
+  if (Object.values(bill?.payments ?? {}).length === 0) {
+    return;
+  }
+
+  return (
+    <DataTable size="sm" rows={rows} headers={headers}>
+      {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+        <Table {...getTableProps()}>
+          <TableHead>
+            <TableRow>
+              {headers.map((header) => (
+                <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow {...getRowProps({ row })}>
+                {row.cells.map((cell) => (
+                  <TableCell key={cell.id}>{cell.value}</TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </DataTable>
+  );
+};
+
+export default PaymentHistory;

package/src/invoice/payments/payment.resource.ts

@@ -0,0 +1,44 @@
+import useSWR from 'swr';
+import { type Visit, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { apiBasePath } from '../../constants';
+
+type PaymentMethod = {
+  uuid: string;
+  description: string;
+  name: string;
+  retired: boolean;
+};
+
+const swrOption = {
+  errorRetryCount: 2,
+};
+
+export const usePaymentModes = () => {
+  const url = `${apiBasePath}paymentMode`;
+  const { data, isLoading, error, mutate } = useSWR<{ data: { results: Array<PaymentMethod> } }>(
+    url,
+    openmrsFetch,
+    swrOption,
+  );
+
+  return {
+    paymentModes: data?.data?.results ?? [],
+    isLoading,
+    mutate,
+    error,
+  };
+};
+
+export const updateBillVisitAttribute = async (visit: Visit) => {
+  const { uuid, attributes } = visit;
+  const pendingPaymentAtrributeUuid = attributes?.find(
+    (attribute) => attribute.attributeType.uuid === '919b51c9-8e2e-468f-8354-181bf3e55786',
+  )?.uuid;
+  return openmrsFetch(`${restBaseUrl}/visit/${uuid}/attribute/${pendingPaymentAtrributeUuid}`, {
+    body: { value: false },
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+  });
+};