@openmrs/esm-billing-app 1.0.2-pre.758 → 1.0.2-pre.759

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

@@ -6,15 +6,15 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { navigate, showSnackbar, useConfig, useVisit } from '@openmrs/esm-framework';
 import { Button } from '@carbon/react';
 import { CardHeader } from '@openmrs/esm-patient-common-lib';
-import { InvoiceBreakDown } from './invoice-breakdown/invoice-breakdown.component';
-import PaymentHistory from './payment-history/payment-history.component';
-import PaymentForm from './payment-form/payment-form.component';
 import { convertToCurrency } from '../../helpers';
 import { createPaymentPayload } from './utils';
+import { InvoiceBreakDown } from './invoice-breakdown/invoice-breakdown.component';
 import { processBillPayment } from '../../billing.resource';
-import { useBillableServices } from '../../billable-services/billable-service.resource';
-import { updateBillVisitAttribute } from './payment.resource';
 import { type MappedBill } from '../../types';
+import { updateBillVisitAttribute } from './payment.resource';
+import { useBillableServices } from '../../billable-services/billable-service.resource';
+import PaymentForm from './payment-form/payment-form.component';
+import PaymentHistory from './payment-history/payment-history.component';
 import styles from './payments.scss';
 
 type PaymentProps = {
@@ -22,7 +22,7 @@ type PaymentProps = {
   mutate: () => void;
 };
 
-export type Payment = { method: string; amount: string | number; referenceCode?: number | string };
+export type Payment = { method: string; amount: number | undefined; referenceCode?: number | string };
 
 export type PaymentFormValue = {
   payment: Array<Payment>;
@@ -30,12 +30,18 @@ export type PaymentFormValue = {
 
 const Payments: React.FC<PaymentProps> = ({ bill, mutate }) => {
   const { t } = useTranslation();
-  const { billableServices, isLoading, isValidating, error } = useBillableServices();
+  const { billableServices } = useBillableServices();
   const paymentSchema = z.object({
     method: z.string().refine((value) => !!value, 'Payment method is required'),
     amount: z
-      .number()
-      .lte(bill?.totalAmount - bill?.tenderedAmount, { message: 'Amount paid should not be greater than amount due' }),
+      .number({
+        required_error: t('amountRequired', 'Amount is required'),
+        invalid_type_error: t('amountRequired', 'Amount is required'),
+      })
+      .positive({ message: t('amountMustBePositive', 'Amount must be greater than 0') })
+      .max(bill?.totalAmount - bill?.tenderedAmount, {
+        message: t('paymentAmountCannotExceedAmountDue', 'Payment amount cannot exceed amount due'),
+      }),
     referenceCode: z.union([z.number(), z.string()]).optional(),
   });
 
@@ -58,47 +64,41 @@ const Payments: React.FC<PaymentProps> = ({ bill, mutate }) => {
       to: window.getOpenmrsSpaBase() + 'home/billing',
     });
 
+  if (!bill) {
+    return null;
+  }
+
   const amountDue = bill.totalAmount - bill.tenderedAmount;
 
-  const handleProcessPayment = () => {
-    if (bill) {
-      const amountBeingTendered = formValues?.reduce((acc, curr) => acc + Number(curr.amount), 0);
-      const amountRemaining = amountDue - amountBeingTendered;
-      const paymentPayload = createPaymentPayload(
-        bill,
-        bill?.patientUuid,
-        formValues,
-        amountRemaining,
-        billableServices,
-      );
-      paymentPayload.payments.forEach((payment) => {
-        payment.dateCreated = new Date(payment.dateCreated);
-      });
+  const handleProcessPayment = async () => {
+    const amountBeingTendered = formValues?.reduce((acc, curr) => acc + (curr.amount || 0), 0);
+    const amountRemaining = amountDue - amountBeingTendered;
+    const paymentPayload = createPaymentPayload(bill, bill?.patientUuid, formValues, amountRemaining, billableServices);
+    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',
-          });
-          if (currentVisit) {
-            updateBillVisitAttribute(currentVisit);
-          }
-          methods.reset({ payment: [{ method: '', amount: '0', referenceCode: '' }] });
-          mutate();
-        },
-        (error) => {
-          showSnackbar({ title: 'Bill payment error', kind: 'error', subtitle: error?.message });
-        },
-      );
+    try {
+      await processBillPayment(paymentPayload, bill.uuid);
+      showSnackbar({
+        title: t('billPayment', 'Bill payment'),
+        subtitle: t('paymentProcessedSuccessfully', 'Payment processed successfully'),
+        kind: 'success',
+      });
+      if (currentVisit) {
+        updateBillVisitAttribute(currentVisit);
+      }
+      methods.reset({ payment: [{ method: '', amount: undefined, referenceCode: '' }] });
+      mutate();
+    } catch (error) {
+      showSnackbar({
+        title: t('errorProcessingPayment', 'Error processing payment'),
+        kind: 'error',
+        subtitle: error?.message,
+      });
     }
   };
 
-  if (!bill) {
-    return null;
-  }
-
   return (
     <FormProvider {...methods}>
       <div className={styles.wrapper}>
@@ -107,7 +107,7 @@ const Payments: React.FC<PaymentProps> = ({ bill, mutate }) => {
             <span></span>
           </CardHeader>
           <div>
-            {bill && <PaymentHistory bill={bill} />}
+            <PaymentHistory bill={bill} />
             <PaymentForm disablePayment={amountDue <= 0} isSingleLineItem={bill.lineItems.length === 1} />
           </div>
         </div>
@@ -131,7 +131,7 @@ const Payments: React.FC<PaymentProps> = ({ bill, mutate }) => {
             <Button onClick={handleNavigateToBillingDashboard} kind="secondary">
               {t('discard', 'Discard')}
             </Button>
-            <Button onClick={() => handleProcessPayment()} disabled={!formValues?.length || !methods.formState.isValid}>
+            <Button onClick={handleProcessPayment} disabled={!formValues?.length || !methods.formState.isValid}>
               {t('processPayment', 'Process Payment')}
             </Button>
           </div>

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

@@ -9,25 +9,42 @@ import {
   type VisitReturnType,
 } from '@openmrs/esm-framework';
 import { useBillableServices } from '../../billable-services/billable-service.resource';
-import { type MappedBill, type LineItem } from '../../types';
+import { type MappedBill } from '../../types';
 import { configSchema, type BillingConfig } from '../../config-schema';
+import { usePaymentModes } from './payment.resource';
 import Payments from './payments.component';
 
 const mockUseVisit = jest.mocked(useVisit);
 const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
 const mockUseBillableServices = jest.mocked(useBillableServices);
+const mockUsePaymentModes = jest.mocked(usePaymentModes);
 const mockFormatToParts = jest.fn().mockReturnValue([{ type: 'integer', value: '1000' }]);
 const mockFormat = jest.fn().mockReturnValue('$1000.00');
+const mockResolvedOptions = jest.fn().mockReturnValue({
+  locale: 'en-US',
+  numberingSystem: 'latn',
+  style: 'currency',
+  currency: 'USD',
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+global.Intl.NumberFormat.supportedLocalesOf = jest.fn().mockReturnValue(['en-US']);
 global.Intl.NumberFormat = jest.fn().mockImplementation(() => ({
   formatToParts: mockFormatToParts,
   format: mockFormat,
+  resolvedOptions: mockResolvedOptions,
 })) as any;
-global.Intl.NumberFormat.supportedLocalesOf = jest.fn().mockReturnValue(['en-US']);
 
 jest.mock('../../billing.resource', () => ({
   processBillPayment: jest.fn(),
 }));
 
+jest.mock('./payment.resource', () => ({
+  updateBillVisitAttribute: jest.fn(),
+  usePaymentModes: jest.fn(),
+}));
+
 jest.mock('../../billable-services/billable-service.resource', () => ({
   useBillableServices: jest.fn(),
 }));
@@ -93,7 +110,6 @@ describe('Payments', () => {
   };
 
   const mockMutate = jest.fn();
-  const mockSelectedLineItems: LineItem[] = [];
 
   beforeEach(() => {
     mockUseVisit.mockReturnValue({ currentVisit: null } as unknown as VisitReturnType);
@@ -105,6 +121,15 @@ describe('Payments', () => {
       error: null,
       mutate: jest.fn(),
     });
+    mockUsePaymentModes.mockReturnValue({
+      paymentModes: [
+        { uuid: '1', name: 'Cash', description: 'Cash payment', retired: false },
+        { uuid: '2', name: 'Credit Card', description: 'Credit Card payment', retired: false },
+      ],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+    });
   });
 
   it('renders payment form and history', () => {
@@ -114,12 +139,11 @@ describe('Payments', () => {
     expect(screen.getByText('Total Tendered:')).toBeInTheDocument();
   });
 
-  it('calculates and displays correct amounts', () => {
+  it('displays formatted currency amounts', () => {
     render(<Payments bill={mockBill} mutate={mockMutate} />);
-    const amountElements = screen.getAllByText('$1000.00');
-    expect(amountElements[amountElements.length - 3]).toBeInTheDocument();
-    expect(amountElements[amountElements.length - 2]).toBeInTheDocument();
-    expect(amountElements[amountElements.length - 1]).toBeInTheDocument();
+    // Verify that currency formatting is applied (mocked to return '$1000.00')
+    const formattedAmounts = screen.getAllByText('$1000.00');
+    expect(formattedAmounts.length).toBeGreaterThan(0);
   });
 
   it('disables Process Payment button when form is invalid', () => {
@@ -132,4 +156,127 @@ describe('Payments', () => {
     await userEvent.click(screen.getByText('Discard'));
     expect(navigate).toHaveBeenCalled();
   });
+
+  it('should validate amount is required', () => {
+    const billWithAmountDue: MappedBill = {
+      ...mockBill,
+      totalAmount: 100,
+      tenderedAmount: 0,
+    };
+
+    render(<Payments bill={billWithAmountDue} mutate={mockMutate} />);
+
+    // Process Payment button should be disabled when no amount is entered
+    expect(screen.getByText('Process Payment')).toBeDisabled();
+  });
+
+  it('should handle undefined amount values correctly', () => {
+    const billWithAmountDue: MappedBill = {
+      ...mockBill,
+      totalAmount: 100,
+      tenderedAmount: 0,
+    };
+
+    render(<Payments bill={billWithAmountDue} mutate={mockMutate} />);
+
+    expect(screen.getByText('Process Payment')).toBeDisabled();
+  });
+
+  it('should display amount due when there is a balance', () => {
+    const billWithBalance: MappedBill = {
+      ...mockBill,
+      totalAmount: 500,
+      tenderedAmount: 200,
+    };
+
+    render(<Payments bill={billWithBalance} mutate={mockMutate} />);
+
+    expect(screen.getByText('Amount Due:')).toBeInTheDocument();
+    // The amount due section should be visible for bills with remaining balance
+    const formattedAmounts = screen.getAllByText('$1000.00');
+    expect(formattedAmounts.length).toBeGreaterThan(0);
+  });
+
+  it('should display amount due as absolute value when overpaid', () => {
+    const billWithOverpayment: MappedBill = {
+      ...mockBill,
+      totalAmount: 100,
+      tenderedAmount: 150,
+    };
+
+    render(<Payments bill={billWithOverpayment} mutate={mockMutate} />);
+
+    // Even with negative amount due (overpayment), the display should show positive value
+    expect(screen.getByText('Amount Due:')).toBeInTheDocument();
+    const formattedAmounts = screen.getAllByText('$1000.00');
+    expect(formattedAmounts.length).toBeGreaterThan(0);
+  });
+
+  it('should disable adding payment methods when amount due is zero or less', () => {
+    const fullyPaidBill: MappedBill = {
+      ...mockBill,
+      totalAmount: 100,
+      tenderedAmount: 100,
+    };
+
+    render(<Payments bill={fullyPaidBill} mutate={mockMutate} />);
+
+    expect(screen.getByText(/add payment method/i)).toBeDisabled();
+  });
+
+  it('should return null when bill is not provided', () => {
+    const { container } = render(<Payments bill={null} mutate={mockMutate} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render add payment method button for bills with amount due', () => {
+    const billWithAmountDue: MappedBill = {
+      ...mockBill,
+      totalAmount: 100,
+      tenderedAmount: 0,
+      lineItems: [],
+    };
+
+    render(<Payments bill={billWithAmountDue} mutate={mockMutate} />);
+
+    // Verify add payment method button is available
+    expect(screen.getByText(/add payment method/i)).toBeInTheDocument();
+    expect(screen.getByText(/add payment method/i)).not.toBeDisabled();
+  });
+
+  it('should display process payment button', () => {
+    const billWithAmountDue: MappedBill = {
+      ...mockBill,
+      totalAmount: 100,
+      tenderedAmount: 0,
+      lineItems: [],
+    };
+
+    render(<Payments bill={billWithAmountDue} mutate={mockMutate} />);
+
+    // Process payment button should be visible
+    expect(screen.getByText('Process Payment')).toBeInTheDocument();
+    // Button should be disabled when no payment methods are added
+    expect(screen.getByText('Process Payment')).toBeDisabled();
+  });
+
+  it('should allow adding multiple payment methods for split payments', async () => {
+    const user = userEvent.setup();
+    const billWithAmountDue: MappedBill = {
+      ...mockBill,
+      totalAmount: 100,
+      tenderedAmount: 0,
+    };
+
+    render(<Payments bill={billWithAmountDue} mutate={mockMutate} />);
+
+    // Add first payment method
+    await user.click(screen.getByText(/add payment method/i));
+    expect(screen.getByPlaceholderText(/enter amount/i)).toBeInTheDocument();
+
+    // Add second payment method
+    await user.click(screen.getByText(/add payment method/i));
+    const amountInputs = screen.getAllByPlaceholderText(/enter amount/i);
+    expect(amountInputs).toHaveLength(2);
+  });
 });

package/src/invoice/payments/utils.ts

@@ -21,7 +21,7 @@ export const createPaymentPayload = (
 
   const newPayments = formValues.map((formValue) => ({
     amount: parseFloat(totalAmount.toFixed(2)),
-    amountTendered: parseFloat(Number(formValue.amount).toFixed(2)),
+    amountTendered: parseFloat(Number(formValue.amount || 0).toFixed(2)),
     attributes: [],
     instanceType: formValue.method,
     dateCreated: new Date(),

package/translations/en.json

@@ -8,11 +8,14 @@
   "addNewCashPoint": "Add New Cash Point",
   "addNewPaymentMode": "Add New Payment Mode",
   "addNewService": "Add new service",
+  "addPaymentMethod": "Add payment method",
   "addPaymentMode": "Add Payment Mode",
   "addPaymentOption": "Add payment option",
   "addPaymentOptions": "Add payment option",
   "amount": "Amount",
   "amountDue": "Amount Due",
+  "amountMustBePositive": "Amount must be greater than 0",
+  "amountRequired": "Amount is required",
   "amountTendered": "Amount Tendered",
   "amountToWaiveAriaLabel": "Enter amount to waive",
   "amountToWaiveHelper": "Specify the amount to be deducted from the bill",
@@ -76,7 +79,7 @@
   "editThisBillItem": "Edit this bill item",
   "enterAmount": "Enter amount",
   "enterConcept": "Associated concept",
-  "enterReferenceNumber": "Enter ref. number",
+  "enterReferenceNumber": "Enter reference number",
   "enterSellingPrice": "Enter selling price",
   "enterServiceName": "Enter service name",
   "enterServiceShortName": "Enter service short name",
@@ -88,6 +91,7 @@
   "errorLoadingBillServices": "Error loading bill services",
   "errorLoadingPaymentModes": "Payment modes error",
   "errorPrintingInvoice": "Error printing invoice",
+  "errorProcessingPayment": "Error processing payment",
   "errorSavingCashPoint": "An error occurred while saving the cash point.",
   "errorSavingPaymentMode": "An error occurred while saving the payment mode.",
   "filterBy": "Filter by",
@@ -130,6 +134,7 @@
   "patientBills": "Patient bill",
   "patientBillsDescription": "List of patient bills",
   "patientCategory": "Patient category",
+  "paymentAmountCannotExceedAmountDue": "Payment amount cannot exceed amount due",
   "paymentDetails": "Payment Details",
   "paymentMethod": "Payment method",
   "paymentMethods": "Payment methods",
@@ -143,6 +148,7 @@
   "paymentModeSaved": "Payment mode was successfully saved.",
   "paymentModesConfig": "Payment Modes Config",
   "paymentOptionRequired": "At least one payment option is required",
+  "paymentProcessedSuccessfully": "Payment processed successfully",
   "payments": "Payments",
   "pleaseRequiredFields": "Please fill all required fields",
   "policyNumber": "Policy number",
@@ -159,6 +165,8 @@
   "quantity": "Quantity",
   "quantityRequired": "Quantity is required",
   "referenceNumber": "Reference number",
+  "remove": "Remove",
+  "removePaymentMethod": "Remove payment method",
   "saveAndClose": "Save and close",
   "saveBill": "Save Bill",
   "saving": "Saving",
@@ -167,11 +175,14 @@
   "searchItems": "Search items and services",
   "searchThisTable": "Search this table",
   "selectBillableService": "Select a billable service...",
+  "selectedItems": "Selected Items",
   "selectLocation": "Select Location",
   "selectPatientCategory": "Select patient category",
   "selectPaymentMethod": "Select payment method",
+  "selectPaymentMethodRequired": "Please select a payment method for all items",
   "selectPaymentMode": "Select payment mode",
   "selectServiceType": "Select service type",
+  "sellingAmount": "Enter selling price",
   "sellingPrice": "Selling Price",
   "serviceMetrics": "Service Metrics",
   "serviceName": "Service Name",
@@ -195,6 +206,7 @@
   "updatedSuccessfully": "Billable service updated successfully",
   "uuid": "UUID",
   "uuidRequired": "UUID is required",
+  "validationError": "Validation Error",
   "visitTime": "Visit time",
   "waiverForm": "Waiver form"
 }