@openmrs/esm-billing-app 1.0.2-pre.78 → 1.0.2-pre.786

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

@@ -2,7 +2,7 @@ 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';
-import { Button, Dropdown, NumberInputSkeleton, TextInput, NumberInput } from '@carbon/react';
+import { Button, IconButton, 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';
@@ -10,26 +10,19 @@ import styles from './payment-form.scss';
 
 type PaymentFormProps = {
   disablePayment: boolean;
-  clientBalance: number;
-  isSingleLineItemSelected: boolean;
   isSingleLineItem: boolean;
 };
 
-const DEFAULT_PAYMENT = { method: '', amount: 0, referenceCode: '' };
+const DEFAULT_PAYMENT = { method: '', amount: undefined, referenceCode: '' };
 
-const PaymentForm: React.FC<PaymentFormProps> = ({
-  disablePayment,
-  clientBalance,
-  isSingleLineItemSelected,
-  isSingleLineItem,
-}) => {
+const PaymentForm: React.FC<PaymentFormProps> = ({ disablePayment, isSingleLineItem }) => {
   const { t } = useTranslation();
   const {
     control,
     formState: { errors },
   } = useFormContext<PaymentFormValue>();
   const { paymentModes, isLoading, error } = usePaymentModes();
-  const { fields, remove, append } = useFieldArray({ name: 'payment', control: control });
+  const { fields, remove, append } = useFieldArray({ name: 'payment', control });
   const [isFormVisible, setIsFormVisible] = useState(isSingleLineItem);
 
   useEffect(() => {
@@ -45,10 +38,11 @@ const PaymentForm: React.FC<PaymentFormProps> = ({
     setIsFormVisible(true);
     append(DEFAULT_PAYMENT);
   }, [append]);
-  const handleRemovePaymentMode = useCallback((index) => remove(index), [remove]);
+
+  const handleRemovePaymentMode = useCallback((index: number) => remove(index), [remove]);
 
   if (isLoading) {
-    return <NumberInputSkeleton data-testid="number-input-skeleton" />;
+    return <NumberInputSkeleton />;
   }
 
   if (error) {
@@ -62,8 +56,8 @@ const PaymentForm: React.FC<PaymentFormProps> = ({
   return (
     <div className={styles.container}>
       {isFormVisible &&
-        fields.map((field, index) => (
-          <div key={field.id} className={styles.paymentMethodContainer}>
+        fields.map((fieldItem, index) => (
+          <div key={fieldItem.id} className={styles.paymentMethodContainer}>
             <Controller
               control={control}
               name={`payment.${index}.method`}
@@ -85,13 +79,19 @@ const PaymentForm: React.FC<PaymentFormProps> = ({
               name={`payment.${index}.amount`}
               render={({ field }) => (
                 <NumberInput
+                  allowEmpty
+                  disableWheel
+                  hideSteppers
                   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')}
+                  onChange={(_, { value }) => {
+                    const numValue = value === '' || value === undefined ? undefined : Number(value);
+                    field.onChange(numValue);
+                  }}
                   placeholder={t('enterAmount', 'Enter amount')}
+                  value={field.value ?? ''}
                 />
               )}
             />
@@ -101,31 +101,33 @@ const PaymentForm: React.FC<PaymentFormProps> = ({
               render={({ field }) => (
                 <TextInput
                   id="paymentReferenceCode"
-                  {...field}
                   labelText={t('referenceNumber', 'Reference number')}
-                  placeholder={t('enterReferenceNumber', 'Enter ref. number')}
+                  name={field.name}
+                  onBlur={field.onBlur}
+                  onChange={field.onChange}
+                  placeholder={t('enterReferenceNumber', 'Enter reference number')}
                   type="text"
+                  value={field.value ?? ''}
                 />
               )}
             />
             <div className={styles.removeButtonContainer}>
-              <TrashCan
-                onClick={() => handleRemovePaymentMode(index)}
-                className={styles.removeButton}
-                size={20}
-                data-testid="trash-can-icon"
-              />
+              <IconButton
+                kind="danger--tertiary"
+                label={t('removePaymentMethod', 'Remove payment method')}
+                onClick={() => handleRemovePaymentMode(index)}>
+                <TrashCan />
+              </IconButton>
             </div>
           </div>
         ))}
       <Button
-        disabled={disablePayment || (!isSingleLineItem && !isSingleLineItemSelected)}
-        size="md"
+        disabled={disablePayment}
         onClick={handleAppendPaymentMode}
         className={styles.paymentButtons}
         renderIcon={(props) => <Add size={24} {...props} />}
-        iconDescription="Add">
-        {t('addPaymentOptions', 'Add payment option')}
+        iconDescription={t('add', 'Add')}>
+        {t('addPaymentMethod', 'Add payment method')}
       </Button>
     </div>
   );

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

@@ -3,7 +3,8 @@
 @use '@carbon/type';
 
 .container {
-  margin: 1rem;
+  margin: layout.$spacing-05;
+  gap: layout.$spacing-06;
 }
 
 .paymentContainer {
@@ -19,10 +20,10 @@
 
 .paymentMethodContainer {
   display: grid;
-  grid-template-columns: repeat(4, minmax(auto, 1fr));
+  grid-template-columns: 1fr 1fr 1fr auto;
   align-items: flex-start;
-  column-gap: 1rem;
-  margin: 0.625rem 0;
+  gap: layout.$spacing-05;
+  margin: layout.$spacing-05 0;
   width: 100%;
 }
 
@@ -45,8 +46,6 @@
 .removeButtonContainer {
   display: flex;
   align-self: center;
-  cursor: pointer;
-  margin-left: layout.$spacing-07;
 }
 
 .removeButton {

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

@@ -1,32 +1,33 @@
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
 import { FormProvider, useForm } from 'react-hook-form';
 import type { PaymentFormValue } from '../payments.component';
+import { usePaymentModes } from '../payment.resource';
 import PaymentForm from './payment-form.component';
 
-// Mock the payment resource
 jest.mock('../payment.resource', () => ({
   usePaymentModes: jest.fn(),
 }));
 
-const { usePaymentModes } = jest.requireMock('../payment.resource');
+const mockUsePaymentModes = jest.mocked(usePaymentModes);
 
 type WrapperProps = {
   children: React.ReactNode;
+  defaultValues?: Partial<PaymentFormValue>;
 };
 
-const Wrapper: React.FC<WrapperProps> = ({ children }) => {
-  const methods = useForm<PaymentFormValue>();
+const Wrapper: React.FC<WrapperProps> = ({ children, defaultValues }) => {
+  const methods = useForm<PaymentFormValue>({
+    mode: 'all',
+    defaultValues: defaultValues || { payment: [] },
+  });
   return <FormProvider {...methods}>{children}</FormProvider>;
 };
 
 describe('PaymentForm Component', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   test('should render skeleton while loading payment modes', () => {
-    usePaymentModes.mockReturnValue({
+    mockUsePaymentModes.mockReturnValue({
       paymentModes: [],
       isLoading: true,
       error: null,
@@ -35,20 +36,17 @@ describe('PaymentForm Component', () => {
 
     render(
       <Wrapper>
-        <PaymentForm
-          disablePayment={false}
-          clientBalance={100}
-          isSingleLineItemSelected={false}
-          isSingleLineItem={false}
-        />
+        <PaymentForm disablePayment={false} isSingleLineItem={false} />
       </Wrapper>,
     );
 
-    expect(screen.getByTestId('number-input-skeleton')).toBeInTheDocument();
+    // When loading, payment method elements should not be present
+    expect(screen.queryByText(/select payment method/i)).not.toBeInTheDocument();
+    expect(screen.queryByPlaceholderText(/enter amount/i)).not.toBeInTheDocument();
   });
 
   test('should render error message when payment modes fail to load', () => {
-    usePaymentModes.mockReturnValue({
+    mockUsePaymentModes.mockReturnValue({
       paymentModes: [],
       isLoading: false,
       error: new Error('Failed to load payment modes'),
@@ -57,12 +55,7 @@ describe('PaymentForm Component', () => {
 
     render(
       <Wrapper>
-        <PaymentForm
-          disablePayment={false}
-          clientBalance={100}
-          isSingleLineItemSelected={false}
-          isSingleLineItem={false}
-        />
+        <PaymentForm disablePayment={false} isSingleLineItem={false} />
       </Wrapper>,
     );
 
@@ -70,8 +63,8 @@ describe('PaymentForm Component', () => {
   });
 
   test('should append default payment when isSingleLineItem is true', () => {
-    usePaymentModes.mockReturnValue({
-      paymentModes: [{ uuid: '1', name: 'Credit Card' }],
+    mockUsePaymentModes.mockReturnValue({
+      paymentModes: [{ uuid: '1', name: 'Credit Card', description: 'Credit Card', retired: false }],
       isLoading: false,
       error: null,
       mutate: jest.fn(),
@@ -79,12 +72,7 @@ describe('PaymentForm Component', () => {
 
     render(
       <Wrapper>
-        <PaymentForm
-          disablePayment={false}
-          clientBalance={100}
-          isSingleLineItemSelected={false}
-          isSingleLineItem={true}
-        />
+        <PaymentForm disablePayment={false} isSingleLineItem={true} />
       </Wrapper>,
     );
 
@@ -96,9 +84,10 @@ describe('PaymentForm Component', () => {
     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' }],
+  test('should append a payment field when add payment method button is clicked', async () => {
+    const user = userEvent.setup();
+    mockUsePaymentModes.mockReturnValue({
+      paymentModes: [{ uuid: '1', name: 'Credit Card', description: 'Credit Card', retired: false }],
       isLoading: false,
       error: null,
       mutate: jest.fn(),
@@ -106,24 +95,25 @@ describe('PaymentForm Component', () => {
 
     render(
       <Wrapper>
-        <PaymentForm
-          disablePayment={false}
-          clientBalance={100}
-          isSingleLineItemSelected={true}
-          isSingleLineItem={false}
-        />
+        <PaymentForm disablePayment={false} 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);
+    // Initially no payment fields are shown
+    expect(screen.queryByPlaceholderText(/enter amount/i)).not.toBeInTheDocument();
+
+    const addButton = screen.getByText(/add payment method/i);
+    await user.click(addButton);
+
+    // After clicking, payment fields should be visible
+    expect(screen.getByPlaceholderText(/enter amount/i)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/enter reference number/i)).toBeInTheDocument();
+    expect(screen.getByText(/select payment method/i)).toBeInTheDocument();
   });
 
   test('should disable add payment button when disablePayment is true', () => {
-    usePaymentModes.mockReturnValue({
-      paymentModes: [{ uuid: '1', name: 'Credit Card' }],
+    mockUsePaymentModes.mockReturnValue({
+      paymentModes: [{ uuid: '1', name: 'Credit Card', description: 'Credit Card', retired: false }],
       isLoading: false,
       error: null,
       mutate: jest.fn(),
@@ -131,21 +121,17 @@ describe('PaymentForm Component', () => {
 
     render(
       <Wrapper>
-        <PaymentForm
-          disablePayment={true}
-          clientBalance={100}
-          isSingleLineItemSelected={true}
-          isSingleLineItem={false}
-        />
+        <PaymentForm disablePayment={true} isSingleLineItem={false} />
       </Wrapper>,
     );
 
-    expect(screen.getByText(/add payment option/i)).toBeDisabled();
+    expect(screen.getByText(/add payment method/i)).toBeDisabled();
   });
 
-  test('should remove payment field when trash can icon is clicked', async () => {
-    usePaymentModes.mockReturnValue({
-      paymentModes: [{ uuid: '1', name: 'Credit Card' }],
+  test('should remove payment field when remove button is clicked', async () => {
+    const user = userEvent.setup();
+    mockUsePaymentModes.mockReturnValue({
+      paymentModes: [{ uuid: '1', name: 'Credit Card', description: 'Credit Card', retired: false }],
       isLoading: false,
       error: null,
       mutate: jest.fn(),
@@ -153,22 +139,186 @@ describe('PaymentForm Component', () => {
 
     render(
       <Wrapper>
-        <PaymentForm
-          disablePayment={false}
-          clientBalance={100}
-          isSingleLineItemSelected={true}
-          isSingleLineItem={false}
-        />
+        <PaymentForm disablePayment={false} isSingleLineItem={false} />
       </Wrapper>,
     );
 
-    fireEvent.click(screen.getByText(/add payment option/i));
+    await user.click(screen.getByText(/add payment method/i));
 
-    const trashCanIcon = screen.getByTestId('trash-can-icon');
-    fireEvent.click(trashCanIcon);
+    const removeButton = screen.getByRole('button', { name: /remove payment method/i });
+    await user.click(removeButton);
 
     await waitFor(() => {
       expect(screen.queryByPlaceholderText(/enter amount/i)).not.toBeInTheDocument();
     });
   });
+
+  test('should render amount input without leading zero', () => {
+    mockUsePaymentModes.mockReturnValue({
+      paymentModes: [{ uuid: '1', name: 'Credit Card', description: 'Credit Card', retired: false }],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    render(
+      <Wrapper>
+        <PaymentForm disablePayment={false} isSingleLineItem={true} />
+      </Wrapper>,
+    );
+
+    const amountInput = screen.getByPlaceholderText(/enter amount/i) as HTMLInputElement;
+    expect(amountInput.value).toBe('');
+  });
+
+  test('should allow user to clear amount input without reverting to zero', async () => {
+    const user = userEvent.setup();
+    mockUsePaymentModes.mockReturnValue({
+      paymentModes: [{ uuid: '1', name: 'Credit Card', description: 'Credit Card', retired: false }],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    render(
+      <Wrapper>
+        <PaymentForm disablePayment={false} isSingleLineItem={true} />
+      </Wrapper>,
+    );
+
+    const amountInput = screen.getByPlaceholderText(/enter amount/i) as HTMLInputElement;
+
+    await user.type(amountInput, '100');
+    expect(amountInput.value).toBe('100');
+
+    await user.clear(amountInput);
+    expect(amountInput.value).toBe('');
+  });
+
+  test('should handle amount input with decimal values', async () => {
+    const user = userEvent.setup();
+    mockUsePaymentModes.mockReturnValue({
+      paymentModes: [{ uuid: '1', name: 'Credit Card', description: 'Credit Card', retired: false }],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    render(
+      <Wrapper>
+        <PaymentForm disablePayment={false} isSingleLineItem={true} />
+      </Wrapper>,
+    );
+
+    const amountInput = screen.getByPlaceholderText(/enter amount/i) as HTMLInputElement;
+
+    await user.type(amountInput, '10.50');
+    expect(amountInput.value).toBe('10.5');
+  });
+
+  test('should not auto-focus reference number input on mount', () => {
+    mockUsePaymentModes.mockReturnValue({
+      paymentModes: [{ uuid: '1', name: 'Credit Card', description: 'Credit Card', retired: false }],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    render(
+      <Wrapper>
+        <PaymentForm disablePayment={false} isSingleLineItem={true} />
+      </Wrapper>,
+    );
+
+    const referenceInput = screen.getByPlaceholderText(/enter reference number/i);
+    expect(referenceInput).not.toHaveFocus();
+  });
+
+  test('should allow adding multiple payment methods', async () => {
+    const user = userEvent.setup();
+    mockUsePaymentModes.mockReturnValue({
+      paymentModes: [
+        { uuid: '1', name: 'Cash', description: 'Cash', retired: false },
+        { uuid: '2', name: 'Credit Card', description: 'Credit Card', retired: false },
+      ],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    render(
+      <Wrapper>
+        <PaymentForm disablePayment={false} isSingleLineItem={false} />
+      </Wrapper>,
+    );
+
+    const addButton = screen.getByText(/add payment method/i);
+
+    await user.click(addButton);
+    await user.click(addButton);
+
+    const amountInputs = screen.getAllByPlaceholderText(/enter amount/i);
+    expect(amountInputs).toHaveLength(2);
+  });
+
+  test('should preserve entered values when adding new payment method', async () => {
+    const user = userEvent.setup();
+    mockUsePaymentModes.mockReturnValue({
+      paymentModes: [{ uuid: '1', name: 'Cash', description: 'Cash', retired: false }],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    render(
+      <Wrapper>
+        <PaymentForm disablePayment={false} isSingleLineItem={false} />
+      </Wrapper>,
+    );
+
+    const addButton = screen.getByText(/add payment method/i);
+    await user.click(addButton);
+
+    const firstAmountInput = screen.getByPlaceholderText(/enter amount/i) as HTMLInputElement;
+    await user.type(firstAmountInput, '50');
+
+    await user.click(addButton);
+
+    const amountInputs = screen.getAllByPlaceholderText(/enter amount/i) as HTMLInputElement[];
+    expect(amountInputs[0].value).toBe('50');
+    expect(amountInputs[1].value).toBe('');
+  });
+
+  test('should handle removing payment method without affecting other fields', async () => {
+    const user = userEvent.setup();
+    mockUsePaymentModes.mockReturnValue({
+      paymentModes: [{ uuid: '1', name: 'Cash', description: 'Cash', retired: false }],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    render(
+      <Wrapper>
+        <PaymentForm disablePayment={false} isSingleLineItem={false} />
+      </Wrapper>,
+    );
+
+    const addButton = screen.getByText(/add payment method/i);
+    await user.click(addButton);
+    await user.click(addButton);
+
+    const amountInputs = screen.getAllByPlaceholderText(/enter amount/i) as HTMLInputElement[];
+    await user.type(amountInputs[0], '50');
+    await user.type(amountInputs[1], '75');
+
+    const removeButtons = screen.getAllByRole('button', { name: /remove payment method/i });
+    await user.click(removeButtons[0]);
+
+    await waitFor(() => {
+      const remainingInputs = screen.getAllByPlaceholderText(/enter amount/i) as HTMLInputElement[];
+      expect(remainingInputs).toHaveLength(1);
+      expect(remainingInputs[0].value).toBe('75');
+    });
+  });
 });

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { DataTable, Table, TableHead, TableRow, TableHeader, TableBody, TableCell } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
 import { type MappedBill } from '../../../types';
 import { formatDate, useConfig } from '@openmrs/esm-framework';
 import { convertToCurrency } from '../../../helpers';
@@ -9,23 +10,24 @@ type PaymentHistoryProps = {
 };
 
 const PaymentHistory: React.FC<PaymentHistoryProps> = ({ bill }) => {
+  const { t } = useTranslation();
   const { defaultCurrency } = useConfig();
   const headers = [
     {
       key: 'dateCreated',
-      header: 'Date of payment',
+      header: t('dateOfPayment', 'Date of payment'),
     },
     {
       key: 'amount',
-      header: 'Bill amount',
+      header: t('billAmount', 'Bill amount'),
     },
     {
       key: 'amountTendered',
-      header: 'Amount tendered',
+      header: t('amountTendered', 'Amount tendered'),
     },
     {
       key: 'paymentMethod',
-      header: 'Payment method',
+      header: t('paymentMethod', 'Payment method'),
     },
   ];
   const rows = bill?.payments?.map((payment, index) => {

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

@@ -1,24 +1,19 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { useConfig } from '@openmrs/esm-framework';
-import PaymentHistory from './payment-history.component';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { type BillingConfig, configSchema } from '../../../config-schema';
 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]),
-}));
+import PaymentHistory from './payment-history.component';
 
 jest.mock('../../../helpers', () => ({
   convertToCurrency: jest.fn((amount, currency) => `${currency} ${amount.toFixed(2)}`),
 }));
 
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
+
 describe('PaymentHistory Component', () => {
   beforeEach(() => {
-    (useConfig as jest.Mock).mockReturnValue({
-      defaultCurrency: 'USD',
-    });
+    mockUseConfig.mockReturnValue({ ...getDefaultsFromConfigSchema(configSchema), defaultCurrency: 'USD' });
   });
 
   const mockBill: MappedBill = {
@@ -129,12 +124,12 @@ describe('PaymentHistory Component', () => {
   test('renders correct data in the rows', () => {
     render(<PaymentHistory bill={mockBill} />);
 
-    expect(screen.getByText('2023-09-01')).toBeInTheDocument();
+    expect(screen.getByText('01-Sept-2023')).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('05-Sept-2023')).toBeInTheDocument();
     expect(screen.getByText('USD 180.00')).toBeInTheDocument();
     expect(screen.getByText('USD 200.00')).toBeInTheDocument();
     expect(screen.getByText('Cash')).toBeInTheDocument();
@@ -153,7 +148,7 @@ describe('PaymentHistory Component', () => {
   test('formats dates and converts amounts correctly', () => {
     render(<PaymentHistory bill={mockBill} />);
 
-    expect(screen.getByText('2023-09-01')).toBeInTheDocument();
+    expect(screen.getByText('01-Sept-2023')).toBeInTheDocument();
     expect(screen.getByText('USD 80.00')).toBeInTheDocument();
     expect(screen.getByText('USD 100.00')).toBeInTheDocument();
   });