@openmrs/esm-billing-app 1.0.1-pre.98 → 1.0.2-pre.58

package/src/invoice/invoice.test.tsx

@@ -2,67 +2,142 @@ 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 { 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);
+// Mock convertToCurrency
+jest.mock('../helpers/functions', () => ({
+  convertToCurrency: jest.fn((amount) => `USD ${amount}`),
+}));
+
+// Mock i18next
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
 
+// Set window.i18next
+window.i18next = {
+  language: 'en',
+} as any;
+
+// Mock InvoiceTable component
+jest.mock('./invoice-table.component', () =>
+  jest.fn(({ bill }) => <div data-testid="mock-invoice-table">Invoice Table Mock</div>),
+);
+
+// Mock payments component
+jest.mock('./payments/payments.component', () =>
+  jest.fn(({ bill, mutate, selectedLineItems }) => (
+    <div data-testid="mock-payments">
+      <h2>Payments</h2>
+      <button>Add payment option</button>
+    </div>
+  )),
+);
+
+// Mock PrintReceipt component
+jest.mock('./printable-invoice/print-receipt.component', () =>
+  jest.fn(({ billId }) => <div data-testid="mock-print-receipt">Print Receipt Mock</div>),
+);
+
+// Mock PrintableInvoice component
+jest.mock('./printable-invoice/printable-invoice.component', () =>
+  jest.fn(({ bill, patient }) => <div data-testid="mock-printable-invoice">Printable Invoice Mock</div>),
+);
+
+// Mock payment resource
 jest.mock('./payments/payment.resource', () => ({
   usePaymentModes: jest.fn(),
   updateBillVisitAttribute: jest.fn(),
 }));
 
+// Mock billing resource
 jest.mock('../billing.resource', () => ({
   useBill: jest.fn(),
   processBillPayment: jest.fn(),
-  useDefaultFacility: jest.fn().mockReturnValue({ uuid: '54065383-b4d4-42d2-af4d-d250a1fd2590', display: 'MTRH' }),
+  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' }),
-  };
-});
+// Mock react-router-dom
+jest.mock('react-router-dom', () => ({
+  useParams: jest.fn().mockReturnValue({
+    patientUuid: 'patientUuid',
+    billUuid: 'billUuid',
+  }),
+}));
 
-jest.mock('react-to-print', () => {
-  const originalModule = jest.requireActual('react-to-print');
+// Mock react-to-print
+jest.mock('react-to-print', () => ({
+  useReactToPrint: jest.fn(),
+}));
 
-  return {
-    ...originalModule,
-    useReactToPrint: jest.fn(),
-  };
-});
+// Mock OpenMRS framework
+jest.mock('@openmrs/esm-framework', () => ({
+  showSnackbar: jest.fn(),
+  useLayoutType: jest.fn(() => 'desktop'),
+  isDesktop: jest.fn(() => true),
+  useConfig: jest.fn(() => ({
+    defaultCurrency: 'USD',
+  })),
+  formatDate: jest.fn((date) => date?.toString() ?? ''),
+  ExtensionSlot: jest.fn(({ children }) => <div data-testid="extension-slot">{children}</div>),
+  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,
+  }),
+  createGlobalStore: jest.fn(),
+  getGlobalStore: jest.fn(() => ({
+    subscribe: jest.fn(),
+    getState: jest.fn(),
+    setState: jest.fn(),
+  })),
+}));
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
+// Mock patient common lib
+jest.mock('@openmrs/esm-patient-common-lib', () => ({
+  ErrorState: jest.fn(({ error }) => <div data-testid="error-state">Error: {error?.message || error}</div>),
+}));
 
-  return {
-    ...originalModule,
-    usePatient: jest.fn().mockReturnValue({
-      patient: {
-        id: 'b2fcf02b-7ee3-4d16-a48f-576be2b103aa',
-        name: [{ given: ['John'], family: 'Doe' }],
+describe('Invoice', () => {
+  const mockedBill = useBill as jest.Mock;
+  const mockedProcessBillPayment = processBillPayment as jest.Mock;
+  const mockedUsePaymentModes = usePaymentModes as jest.Mock;
+  const mockedUseReactToPrint = useReactToPrint as jest.Mock;
+
+  const defaultBillData = {
+    ...mockBill,
+    uuid: 'test-uuid',
+    status: 'PENDING',
+    totalAmount: 1000,
+    tenderedAmount: 0,
+    receiptNumber: 'RCPT-001',
+    dateCreated: '2024-01-01',
+    lineItems: [
+      {
+        uuid: 'item-1',
+        item: 'Test Service',
+        quantity: 1,
+        price: 1000,
+        paymentStatus: 'PENDING',
       },
-      patientUuid: 'b2fcf02b-7ee3-4d16-a48f-576be2b103aa',
-      isLoading: false,
-      error: null,
-    }),
+    ],
   };
-});
 
-xdescribe('Invoice', () => {
   beforeEach(() => {
     mockedBill.mockReturnValue({
-      bill: mockBill,
+      bill: defaultBillData,
       isLoading: false,
       error: null,
       isValidating: false,
@@ -71,172 +146,127 @@ xdescribe('Invoice', () => {
 
     mockedUsePaymentModes.mockReturnValue({
       paymentModes: [
-        { uuid: 'uuid', name: 'Cash', description: 'Cash Method', retired: false },
-        { uuid: 'uuid1', name: 'MPESA', description: 'MPESA Method', retired: false },
+        { uuid: 'cash-uuid', name: 'Cash', description: 'Cash Method', retired: false },
+        { uuid: 'mpesa-uuid', 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();
+    // Setup print handler mock
+    const printHandler = jest.fn();
+    mockedUseReactToPrint.mockReturnValue(printHandler);
+  });
 
-    // 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];
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
 
-    expectedColumnHeaders.forEach((columnHeader) => {
-      expect(screen.getByRole('columnheader', { name: columnHeader })).toBeInTheDocument();
+  it('should render error state correctly', () => {
+    mockedBill.mockReturnValue({
+      bill: null,
+      isLoading: false,
+      error: new Error('Test error'),
+      isValidating: false,
+      mutate: jest.fn(),
     });
 
-    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');
+    render(<Invoice />);
+    expect(screen.getByTestId('error-state')).toBeInTheDocument();
+    expect(screen.getByText(/Test error/i)).toBeInTheDocument();
+  });
 
-    // enter payment reference number
-    const paymentReferenceNumberInput = screen.getByRole('textbox', { name: /Reference number/ });
-    expect(paymentReferenceNumberInput).toBeInTheDocument();
-    await user.type(paymentReferenceNumberInput, '123456');
+  it('should render invoice details correctly', () => {
+    render(<Invoice />);
 
-    expect(addPaymentOptionButton).toBeDisabled();
+    // Check invoice details
+    expect(screen.getByText(/Total Amount/i)).toBeInTheDocument();
+    expect(screen.getByText(/Amount Tendered/i)).toBeInTheDocument();
+    expect(screen.getByText(/Invoice Number/i)).toBeInTheDocument();
+    expect(screen.getByText(/Date And Time/i)).toBeInTheDocument();
+    expect(screen.getByText(/Invoice Status/i)).toBeInTheDocument();
 
-    // 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);
+    // Check mock components
+    expect(screen.getByTestId('mock-invoice-table')).toBeInTheDocument();
+    expect(screen.getByTestId('mock-payments')).toBeInTheDocument();
+  });
 
-    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' }],
+  it('should show print receipt button for paid bills', () => {
+    mockedBill.mockReturnValue({
+      bill: {
+        ...defaultBillData,
         status: 'PAID',
+        tenderedAmount: 1000,
       },
-      '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',
+      isLoading: false,
+      error: null,
+      isValidating: false,
+      mutate: jest.fn(),
     });
-  });
 
-  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',
-      }),
-    );
+    render(<Invoice />);
+    expect(screen.getByTestId('mock-print-receipt')).toBeInTheDocument();
   });
 
-  test('should show payment history if bill is paid and disable adding more payments', async () => {
+  it('should handle bill payment processing', async () => {
     const user = userEvent.setup();
+    const mockMutate = jest.fn();
+
     mockedBill.mockReturnValue({
-      bill: {
-        ...mockBill,
-        status: 'PAID',
-        payments: mockPayments,
-        tenderedAmount: 100,
-      },
+      bill: defaultBillData,
       isLoading: false,
       error: null,
       isValidating: false,
-      mutate: jest.fn(),
+      mutate: mockMutate,
     });
 
-    mockedUsePaymentModes.mockReturnValue({
-      paymentModes: [
-        { uuid: 'uuid', name: 'Cash', description: 'Cash Method', retired: false },
-        { uuid: 'uuid1', name: 'MPESA', description: 'MPESA Method', retired: false },
+    mockedProcessBillPayment.mockResolvedValue({});
+
+    render(<Invoice />);
+
+    // Add payment flow would go here
+    // Note: Detailed payment interaction testing should be in the Payments component tests
+
+    expect(screen.getByText(/Payments/i)).toBeInTheDocument();
+  });
+
+  it('should update line items when bill data changes', () => {
+    const { rerender } = render(<Invoice />);
+
+    // Update bill with new line items
+    const updatedBill = {
+      ...defaultBillData,
+      lineItems: [
+        ...defaultBillData.lineItems,
+        {
+          uuid: 'item-2',
+          item: 'New Service',
+          quantity: 1,
+          price: 500,
+          paymentStatus: 'PENDING',
+        },
       ],
+    };
+
+    mockedBill.mockReturnValue({
+      bill: updatedBill,
       isLoading: false,
       error: null,
+      isValidating: false,
       mutate: jest.fn(),
     });
 
-    renderInvoice();
-    const paymentHistorySection = screen.getByRole('heading', { name: /Payments/i });
-    expect(paymentHistorySection).toBeInTheDocument();
+    rerender(<Invoice />);
 
-    const expectedColumnHeaders = [/Date of payment/, /Bill amount/, /Amount tendered/, /Payment method/];
-    expectedColumnHeaders.forEach((header) => {
-      expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
-    });
+    // The mock invoice table should receive updated props
+    expect(screen.getByTestId('mock-invoice-table')).toBeInTheDocument();
+  });
 
-    const addPaymentOptionButton = await screen.findByRole('button', { name: /Add payment option/i });
-    expect(addPaymentOptionButton).toBeInTheDocument();
-    expect(addPaymentOptionButton).toBeDisabled();
+  it('should show patient information correctly', () => {
+    render(<Invoice />);
+    expect(screen.getByTestId('extension-slot')).toBeInTheDocument();
   });
-});
 
-function renderInvoice() {
-  return render(<Invoice />);
-}
+  // Add more test cases as needed for specific features or edge cases
+});

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { TrashCan, Add } from '@carbon/react/icons';
@@ -8,11 +8,21 @@ import { type PaymentFormValue } from '../payments.component';
 import { usePaymentModes } from '../payment.resource';
 import styles from './payment-form.scss';
 
-type PaymentFormProps = { disablePayment: boolean; amountDue: number };
+type PaymentFormProps = {
+  disablePayment: boolean;
+  clientBalance: number;
+  isSingleLineItemSelected: boolean;
+  isSingleLineItem: boolean;
+};
 
 const DEFAULT_PAYMENT = { method: '', amount: 0, referenceCode: '' };
 
-const PaymentForm: React.FC<PaymentFormProps> = ({ disablePayment, amountDue }) => {
+const PaymentForm: React.FC<PaymentFormProps> = ({
+  disablePayment,
+  clientBalance,
+  isSingleLineItemSelected,
+  isSingleLineItem,
+}) => {
   const { t } = useTranslation();
   const {
     control,
@@ -20,12 +30,25 @@ const PaymentForm: React.FC<PaymentFormProps> = ({ disablePayment, amountDue })
   } = useFormContext<PaymentFormValue>();
   const { paymentModes, isLoading, error } = usePaymentModes();
   const { fields, remove, append } = useFieldArray({ name: 'payment', control: control });
+  const [isFormVisible, setIsFormVisible] = useState(isSingleLineItem);
+
+  useEffect(() => {
+    if (isSingleLineItem) {
+      setIsFormVisible(true);
+      if (fields.length === 0) {
+        append(DEFAULT_PAYMENT);
+      }
+    }
+  }, [isSingleLineItem, append, fields.length]);
 
-  const handleAppendPaymentMode = useCallback(() => append(DEFAULT_PAYMENT), [append]);
+  const handleAppendPaymentMode = useCallback(() => {
+    setIsFormVisible(true);
+    append(DEFAULT_PAYMENT);
+  }, [append]);
   const handleRemovePaymentMode = useCallback((index) => remove(index), [remove]);
 
   if (isLoading) {
-    return <NumberInputSkeleton />;
+    return <NumberInputSkeleton data-testid="number-input-skeleton" />;
   }
 
   if (error) {
@@ -38,59 +61,65 @@ const PaymentForm: React.FC<PaymentFormProps> = ({ disablePayment, amountDue })
 
   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"
+      {isFormVisible &&
+        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(index)}
+                className={styles.removeButton}
+                size={20}
+                data-testid="trash-can-icon"
               />
-            )}
-          />
-          <div className={styles.removeButtonContainer}>
-            <TrashCan onClick={handleRemovePaymentMode} className={styles.removeButton} size={20} />
+            </div>
           </div>
-        </div>
-      ))}
+        ))}
       <Button
-        disabled={disablePayment}
+        disabled={disablePayment || (!isSingleLineItem && !isSingleLineItemSelected)}
         size="md"
         onClick={handleAppendPaymentMode}
         className={styles.paymentButtons}