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

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

@@ -0,0 +1,174 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { FormProvider, useForm } from 'react-hook-form';
+import type { PaymentFormValue } from '../payments.component';
+import PaymentForm from './payment-form.component';
+
+// Mock the payment resource
+jest.mock('../payment.resource', () => ({
+  usePaymentModes: jest.fn(),
+}));
+
+const { usePaymentModes } = jest.requireMock('../payment.resource');
+
+type WrapperProps = {
+  children: React.ReactNode;
+};
+
+const Wrapper: React.FC<WrapperProps> = ({ children }) => {
+  const methods = useForm<PaymentFormValue>();
+  return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
+describe('PaymentForm Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('should render skeleton while loading payment modes', () => {
+    usePaymentModes.mockReturnValue({
+      paymentModes: [],
+      isLoading: true,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    render(
+      <Wrapper>
+        <PaymentForm
+          disablePayment={false}
+          clientBalance={100}
+          isSingleLineItemSelected={false}
+          isSingleLineItem={false}
+        />
+      </Wrapper>,
+    );
+
+    expect(screen.getByTestId('number-input-skeleton')).toBeInTheDocument();
+  });
+
+  test('should render error message when payment modes fail to load', () => {
+    usePaymentModes.mockReturnValue({
+      paymentModes: [],
+      isLoading: false,
+      error: new Error('Failed to load payment modes'),
+      mutate: jest.fn(),
+    });
+
+    render(
+      <Wrapper>
+        <PaymentForm
+          disablePayment={false}
+          clientBalance={100}
+          isSingleLineItemSelected={false}
+          isSingleLineItem={false}
+        />
+      </Wrapper>,
+    );
+
+    expect(screen.getByText(/payment modes error/i)).toBeInTheDocument();
+  });
+
+  test('should append default payment when isSingleLineItem is true', () => {
+    usePaymentModes.mockReturnValue({
+      paymentModes: [{ uuid: '1', name: 'Credit Card' }],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    render(
+      <Wrapper>
+        <PaymentForm
+          disablePayment={false}
+          clientBalance={100}
+          isSingleLineItemSelected={false}
+          isSingleLineItem={true}
+        />
+      </Wrapper>,
+    );
+
+    const paymentMethodElements = screen.getAllByText(/payment method/i);
+
+    expect(paymentMethodElements.length).toBeGreaterThan(0);
+    expect(paymentMethodElements[0]).toBeInTheDocument();
+
+    expect(screen.getByPlaceholderText(/enter amount/i)).toBeInTheDocument();
+  });
+
+  test('should append a payment field when add payment option button is clicked', () => {
+    usePaymentModes.mockReturnValue({
+      paymentModes: [{ uuid: '1', name: 'Credit Card' }],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    render(
+      <Wrapper>
+        <PaymentForm
+          disablePayment={false}
+          clientBalance={100}
+          isSingleLineItemSelected={true}
+          isSingleLineItem={false}
+        />
+      </Wrapper>,
+    );
+
+    const addButton = screen.getByText(/add payment option/i);
+    fireEvent.click(addButton);
+    const paymentMethodElements = screen.getAllByLabelText(/payment method/i);
+    expect(paymentMethodElements).toHaveLength(2);
+  });
+
+  test('should disable add payment button when disablePayment is true', () => {
+    usePaymentModes.mockReturnValue({
+      paymentModes: [{ uuid: '1', name: 'Credit Card' }],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    render(
+      <Wrapper>
+        <PaymentForm
+          disablePayment={true}
+          clientBalance={100}
+          isSingleLineItemSelected={true}
+          isSingleLineItem={false}
+        />
+      </Wrapper>,
+    );
+
+    expect(screen.getByText(/add payment option/i)).toBeDisabled();
+  });
+
+  test('should remove payment field when trash can icon is clicked', async () => {
+    usePaymentModes.mockReturnValue({
+      paymentModes: [{ uuid: '1', name: 'Credit Card' }],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    render(
+      <Wrapper>
+        <PaymentForm
+          disablePayment={false}
+          clientBalance={100}
+          isSingleLineItemSelected={true}
+          isSingleLineItem={false}
+        />
+      </Wrapper>,
+    );
+
+    fireEvent.click(screen.getByText(/add payment option/i));
+
+    const trashCanIcon = screen.getByTestId('trash-can-icon');
+    fireEvent.click(trashCanIcon);
+
+    await waitFor(() => {
+      expect(screen.queryByPlaceholderText(/enter amount/i)).not.toBeInTheDocument();
+    });
+  });
+});

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

@@ -28,13 +28,15 @@ const PaymentHistory: React.FC<PaymentHistoryProps> = ({ bill }) => {
       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,
-  }));
+  const rows = bill?.payments?.map((payment, index) => {
+    return {
+      id: `${payment.uuid}-${index}`,
+      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;

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

@@ -0,0 +1,160 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { useConfig } from '@openmrs/esm-framework';
+import PaymentHistory from './payment-history.component';
+import { type MappedBill } from '../../../types';
+
+// Mocking useConfig to return a default currency
+jest.mock('@openmrs/esm-framework', () => ({
+  useConfig: jest.fn(),
+  formatDate: jest.fn((date) => date.toISOString().split('T')[0]),
+}));
+
+jest.mock('../../../helpers', () => ({
+  convertToCurrency: jest.fn((amount, currency) => `${currency} ${amount.toFixed(2)}`),
+}));
+
+describe('PaymentHistory Component', () => {
+  beforeEach(() => {
+    (useConfig as jest.Mock).mockReturnValue({
+      defaultCurrency: 'USD',
+    });
+  });
+
+  const mockBill: MappedBill = {
+    uuid: 'bill-uuid',
+    id: 1,
+    patientUuid: 'patient-uuid',
+    patientName: 'John Doe',
+    cashPointUuid: 'cash-point-uuid',
+    cashPointName: 'Main Cash Point',
+    cashPointLocation: 'Main Hospital',
+    cashier: {
+      uuid: 'provider-1',
+      display: 'Jane Doe',
+      links: [
+        {
+          rel: 'self',
+          uri: 'http://example.com/provider/1',
+          resourceAlias: 'Jane Doe',
+        },
+      ],
+    },
+    payments: [
+      {
+        uuid: 'payment-1',
+        dateCreated: new Date('2023-09-01T12:00:00Z').getTime(),
+        amountTendered: 100,
+        amount: 80,
+        instanceType: {
+          uuid: 'instance-1',
+          name: 'Credit Card',
+          description: 'Credit Card payment',
+          retired: false,
+        },
+        attributes: [],
+        voided: false,
+        resourceVersion: '1.0',
+      },
+      {
+        uuid: 'payment-2',
+        dateCreated: new Date('2023-09-05T14:00:00Z').getTime(),
+        amountTendered: 200,
+        amount: 180,
+        instanceType: {
+          uuid: 'instance-2',
+          name: 'Cash',
+          description: 'Cash payment',
+          retired: false,
+        },
+        attributes: [],
+        voided: false,
+        resourceVersion: '1.0',
+      },
+    ],
+    receiptNumber: '12345',
+    status: 'PAID',
+    identifier: 'invoice-123',
+    dateCreated: '2023-09-01T12:00:00Z',
+    lineItems: [],
+    billingService: 'Billing Service',
+  };
+
+  const emptyBill: MappedBill = {
+    uuid: 'bill-uuid',
+    id: 1,
+    patientUuid: 'patient-uuid',
+    patientName: 'John Doe',
+    cashPointUuid: 'cash-point-uuid',
+    cashPointName: 'Main Cash Point',
+    cashPointLocation: 'Main Hospital',
+    cashier: {
+      uuid: 'provider-2',
+      display: 'John Smith',
+      links: [
+        {
+          rel: 'self',
+          uri: 'http://example.com/provider/2',
+          resourceAlias: 'John Smith',
+        },
+      ],
+    },
+    payments: [],
+    receiptNumber: '12346',
+    status: 'PENDING',
+    identifier: 'invoice-124',
+    dateCreated: '2023-09-02T10:00:00Z',
+    lineItems: [],
+    billingService: 'Billing Service',
+  };
+
+  test('renders without crashing', () => {
+    render(<PaymentHistory bill={mockBill} />);
+  });
+
+  test('renders correct table headers', () => {
+    render(<PaymentHistory bill={mockBill} />);
+    expect(screen.getByText('Date of payment')).toBeInTheDocument();
+    expect(screen.getByText('Bill amount')).toBeInTheDocument();
+    expect(screen.getByText('Amount tendered')).toBeInTheDocument();
+    expect(screen.getByText('Payment method')).toBeInTheDocument();
+  });
+
+  test('renders the correct number of rows', () => {
+    render(<PaymentHistory bill={mockBill} />);
+    const rows = screen.getAllByRole('row');
+    expect(rows).toHaveLength(3);
+  });
+
+  test('renders correct data in the rows', () => {
+    render(<PaymentHistory bill={mockBill} />);
+
+    expect(screen.getByText('2023-09-01')).toBeInTheDocument();
+    expect(screen.getByText('USD 80.00')).toBeInTheDocument();
+    expect(screen.getByText('USD 100.00')).toBeInTheDocument();
+    expect(screen.getByText('Credit Card')).toBeInTheDocument();
+
+    expect(screen.getByText('2023-09-05')).toBeInTheDocument();
+    expect(screen.getByText('USD 180.00')).toBeInTheDocument();
+    expect(screen.getByText('USD 200.00')).toBeInTheDocument();
+    expect(screen.getByText('Cash')).toBeInTheDocument();
+  });
+
+  test('handles empty payments gracefully', () => {
+    render(<PaymentHistory bill={emptyBill} />);
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+  });
+
+  test('does not render when bill is undefined', () => {
+    render(<PaymentHistory bill={undefined} />);
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+  });
+
+  test('formats dates and converts amounts correctly', () => {
+    render(<PaymentHistory bill={mockBill} />);
+
+    expect(screen.getByText('2023-09-01')).toBeInTheDocument();
+    expect(screen.getByText('USD 80.00')).toBeInTheDocument();
+    expect(screen.getByText('USD 100.00')).toBeInTheDocument();
+  });
+});

package/src/invoice/payments/payments.component.test.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { useVisit, useConfig, navigate } from '@openmrs/esm-framework';
+import { useBillableServices } from '../../billable-services/billable-service.resource';
+import { type MappedBill, type LineItem } from '../../types';
+import Payments from './payments.component';
+
+// Add this mock for currency formatting
+const mockFormatToParts = jest.fn().mockReturnValue([{ type: 'integer', value: '1000' }]);
+const mockFormat = jest.fn().mockReturnValue('$1000.00');
+global.Intl.NumberFormat = jest.fn().mockImplementation(() => ({
+  formatToParts: mockFormatToParts,
+  format: mockFormat,
+})) as any;
+global.Intl.NumberFormat.supportedLocalesOf = jest.fn().mockReturnValue(['en-US']);
+
+jest.mock('../../billing.resource', () => ({
+  processBillPayment: jest.fn(),
+}));
+
+jest.mock('../../billable-services/billable-service.resource', () => ({
+  useBillableServices: jest.fn(),
+}));
+
+describe('Payments', () => {
+  const mockBill: MappedBill = {
+    uuid: 'bill-uuid',
+    id: 1,
+    patientUuid: 'patient-uuid',
+    patientName: 'John Doe',
+    cashPointUuid: 'cash-point-uuid',
+    cashPointName: 'Main Cash Point',
+    cashPointLocation: 'Main Hospital',
+    cashier: {
+      uuid: 'provider-1',
+      display: 'Jane Doe',
+      links: [
+        {
+          rel: 'self',
+          uri: 'http://example.com/provider/1',
+          resourceAlias: 'Jane Doe',
+        },
+      ],
+    },
+    payments: [
+      {
+        uuid: 'payment-1',
+        dateCreated: new Date('2023-09-01T12:00:00Z').getTime(),
+        amountTendered: 100,
+        amount: 80,
+        instanceType: {
+          uuid: 'instance-1',
+          name: 'Credit Card',
+          description: 'Credit Card payment',
+          retired: false,
+        },
+        attributes: [],
+        voided: false,
+        resourceVersion: '1.0',
+      },
+      {
+        uuid: 'payment-2',
+        dateCreated: new Date('2023-09-05T14:00:00Z').getTime(),
+        amountTendered: 200,
+        amount: 180,
+        instanceType: {
+          uuid: 'instance-2',
+          name: 'Cash',
+          description: 'Cash payment',
+          retired: false,
+        },
+        attributes: [],
+        voided: false,
+        resourceVersion: '1.0',
+      },
+    ],
+    receiptNumber: '12345',
+    status: 'PAID',
+    identifier: 'invoice-123',
+    dateCreated: '2023-09-01T12:00:00Z',
+    lineItems: [],
+    billingService: 'Billing Service',
+  };
+
+  const mockMutate = jest.fn();
+  const mockSelectedLineItems: LineItem[] = [];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useVisit as jest.Mock).mockReturnValue({ currentVisit: null });
+    (useConfig as jest.Mock).mockReturnValue({ defaultCurrency: 'USD' });
+    (useBillableServices as jest.Mock).mockReturnValue({ billableServices: [], isLoading: false });
+  });
+
+  it('renders payment form and history', () => {
+    render(<Payments bill={mockBill} mutate={mockMutate} selectedLineItems={mockSelectedLineItems} />);
+    expect(screen.getByText('Payments')).toBeInTheDocument();
+    expect(screen.getByText('Total Amount:')).toBeInTheDocument();
+    expect(screen.getByText('Total Tendered:')).toBeInTheDocument();
+  });
+
+  it('calculates and displays correct amounts', () => {
+    render(<Payments bill={mockBill} mutate={mockMutate} selectedLineItems={mockSelectedLineItems} />);
+    const amountElements = screen.getAllByText('$1000.00');
+    expect(amountElements[amountElements.length - 3]).toBeInTheDocument();
+    expect(amountElements[amountElements.length - 2]).toBeInTheDocument();
+    expect(amountElements[amountElements.length - 1]).toBeInTheDocument();
+  });
+
+  it('disables Process Payment button when form is invalid', () => {
+    render(<Payments bill={mockBill} mutate={mockMutate} selectedLineItems={mockSelectedLineItems} />);
+    expect(screen.getByText('Process Payment')).toBeDisabled();
+  });
+
+  it('navigates to billing dashboard when Discard is clicked', async () => {
+    render(<Payments bill={mockBill} mutate={mockMutate} selectedLineItems={mockSelectedLineItems} />);
+    await userEvent.click(screen.getByText('Discard'));
+    expect(navigate).toHaveBeenCalled();
+  });
+});

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

@@ -20,6 +20,7 @@ import { useBillableServices } from '../../billable-services/billable-service.re
 type PaymentProps = {
   bill: MappedBill;
   selectedLineItems: Array<LineItem>;
+  mutate: () => void;
 };
 
 export type Payment = { method: string; amount: string | number; referenceCode?: number | string };
@@ -28,10 +29,9 @@ export type PaymentFormValue = {
   payment: Array<Payment>;
 };
 
-const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems }) => {
+const Payments: React.FC<PaymentProps> = ({ bill, mutate, selectedLineItems }) => {
   const { t } = useTranslation();
-  const { defaultCurrency } = useConfig();
-  const { billableServices, isLoading, isValidating, error, mutate } = useBillableServices();
+  const { billableServices, isLoading, isValidating, error } = useBillableServices();
   const paymentSchema = z.object({
     method: z.string().refine((value) => !!value, 'Payment method is required'),
     amount: z
@@ -42,9 +42,10 @@ const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems }) => {
 
   const paymentFormSchema = z.object({ payment: z.array(paymentSchema) });
   const { currentVisit } = useVisit(bill?.patientUuid);
+  const { defaultCurrency } = useConfig();
   const methods = useForm<PaymentFormValue>({
     mode: 'all',
-    defaultValues: {},
+    defaultValues: { payment: [] },
     resolver: zodResolver(paymentFormSchema),
   });
 
@@ -53,11 +54,10 @@ const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems }) => {
     control: methods.control,
   });
 
-  const hasMoreThanOneLineItem = bill?.lineItems?.length > 1;
-  const computedTotal = hasMoreThanOneLineItem ? computeTotalPrice(selectedLineItems) : bill?.totalAmount ?? 0;
+  const selectedLineItemsTotal = selectedLineItems.reduce((total, item) => total + item.price * item.quantity, 0);
   const totalAmountTendered = formValues?.reduce((curr: number, prev) => curr + Number(prev.amount) ?? 0, 0) ?? 0;
-  const amountDue = Number(computedTotal) - (Number(bill?.tenderedAmount) + Number(totalAmountTendered));
-  const newAmountDue = Number(bill?.totalAmount - bill?.tenderedAmount);
+  const amountDue = bill ? bill.totalAmount - selectedLineItemsTotal : 0;
+  const clientBalance = bill ? bill.totalAmount - (bill.tenderedAmount + totalAmountTendered) : 0;
 
   const handleNavigateToBillingDashboard = () =>
     navigate({
@@ -65,27 +65,46 @@ const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems }) => {
     });
 
   const handleProcessPayment = () => {
-    const paymentPayload = createPaymentPayload(bill, bill.patientUuid, formValues, amountDue, billableServices, selectedLineItems);
-    processBillPayment(paymentPayload, bill.uuid).then(
-      (res) => {
-        showSnackbar({
-          title: t('billPayment', 'Bill payment'),
-          subtitle: 'Bill payment processing has been successful',
-          kind: 'success',
-          timeoutInMs: 3000,
-        });
-        if (currentVisit) {
-          updateBillVisitAttribute(currentVisit);
-        }
-        window.location.reload();
-      },
-      (error) => {
-        showSnackbar({ title: 'Bill payment error', kind: 'error', subtitle: error?.message });
-      },
-    );
+    if (bill) {
+      const paymentPayload = createPaymentPayload(
+        bill,
+        bill?.patientUuid,
+        formValues,
+        amountDue,
+        billableServices,
+        selectedLineItems,
+      );
+      paymentPayload.payments.forEach((payment) => {
+        payment.dateCreated = new Date(payment.dateCreated);
+      });
+
+      processBillPayment(paymentPayload, bill.uuid).then(
+        (res) => {
+          showSnackbar({
+            title: t('billPayment', 'Bill payment'),
+            subtitle: 'Bill payment processing has been successful',
+            kind: 'success',
+            timeoutInMs: 3000,
+          });
+          if (currentVisit) {
+            updateBillVisitAttribute(currentVisit);
+          }
+          methods.reset({ payment: [{ method: '', amount: '0', referenceCode: '' }] });
+          mutate();
+        },
+        (error) => {
+          showSnackbar({ title: 'Bill payment error', kind: 'error', subtitle: error?.message });
+        },
+      );
+    }
   };
 
-  const amountDueDisplay = (amount: number) => (amount < 0 ? 'Client balance' : 'Amount Due');
+  if (!bill) {
+    return null;
+  }
+
+  const amountDueLabel = selectedLineItems.length ? t('amountDue', 'Amount Due') : t('clientBalance', 'Client Balance');
+  const amountDueValue = selectedLineItems.length ? amountDue : clientBalance;
 
   return (
     <FormProvider {...methods}>
@@ -96,24 +115,29 @@ const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems }) => {
           </CardHeader>
           <div>
             {bill && <PaymentHistory bill={bill} />}
-            <PaymentForm disablePayment={computedTotal <= 0} amountDue={amountDue} />
+            <PaymentForm
+              disablePayment={clientBalance <= 0}
+              clientBalance={clientBalance}
+              isSingleLineItemSelected={selectedLineItems.length > 0}
+              isSingleLineItem={bill.lineItems.length === 1}
+            />
           </div>
         </div>
         <div className={styles.divider} />
         <div className={styles.paymentTotals}>
           <InvoiceBreakDown
             label={t('totalAmount', 'Total Amount')}
-            value={convertToCurrency(bill?.totalAmount, defaultCurrency)}
+            value={convertToCurrency(bill.totalAmount, defaultCurrency)}
           />
           <InvoiceBreakDown
             label={t('totalTendered', 'Total Tendered')}
-            value={convertToCurrency(bill?.tenderedAmount, defaultCurrency)}
+            value={convertToCurrency(bill?.tenderedAmount + totalAmountTendered, defaultCurrency)}
           />
           <InvoiceBreakDown label={t('discount', 'Discount')} value={'--'} />
           <InvoiceBreakDown
-            hasBalance={amountDue < 0 ?? false}
-            label={amountDueDisplay(amountDue)}
-            value={convertToCurrency(bill?.totalAmount - bill?.tenderedAmount, defaultCurrency)}
+            hasBalance={amountDueValue < 0}
+            label={amountDueLabel}
+            value={convertToCurrency(amountDueValue < 0 ? -amountDueValue : amountDueValue, defaultCurrency)}
           />
           <div className={styles.processPayments}>
             <Button onClick={handleNavigateToBillingDashboard} kind="secondary">
@@ -129,19 +153,4 @@ const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems }) => {
   );
 };
 
-const computeTotalPrice = (items) => {
-  if (items && !items.length) {
-    return 0;
-  }
-
-  let totalPrice = 0;
-
-  items?.forEach((item) => {
-    const { price, quantity } = item;
-    totalPrice += price * quantity;
-  });
-
-  return totalPrice;
-};
-
 export default Payments;