@openmrs/esm-billing-app 1.0.2-pre.84 → 1.0.2-pre.849

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

@@ -6,37 +6,42 @@ 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 { type LineItem, type MappedBill } from '../../types';
 import { convertToCurrency } from '../../helpers';
 import { createPaymentPayload } from './utils';
-import { processBillPayment } from '../../billing.resource';
 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 { processBillPayment } from '../../billing.resource';
+import { type MappedBill } from '../../types';
 import { updateBillVisitAttribute } from './payment.resource';
-import styles from './payments.scss';
 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 = {
   bill: MappedBill;
-  selectedLineItems: Array<LineItem>;
   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>;
 };
 
-const Payments: React.FC<PaymentProps> = ({ bill, mutate, selectedLineItems }) => {
+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(),
   });
 
@@ -54,57 +59,45 @@ const Payments: React.FC<PaymentProps> = ({ bill, mutate, selectedLineItems }) =
     control: methods.control,
   });
 
-  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 = bill ? bill.totalAmount - selectedLineItemsTotal : 0;
-  const clientBalance = bill ? bill.totalAmount - (bill.tenderedAmount + totalAmountTendered) : 0;
-
   const handleNavigateToBillingDashboard = () =>
     navigate({
       to: window.getOpenmrsSpaBase() + 'home/billing',
     });
 
-  const handleProcessPayment = () => {
-    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 });
-        },
-      );
-    }
-  };
-
   if (!bill) {
     return null;
   }
 
-  const amountDueLabel = selectedLineItems.length ? t('amountDue', 'Amount Due') : t('clientBalance', 'Client Balance');
-  const amountDueValue = selectedLineItems.length ? amountDue : clientBalance;
+  const amountDue = bill.totalAmount - bill.tenderedAmount;
+
+  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);
+    });
+
+    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: null, referenceCode: '' }] });
+      mutate();
+    } catch (error) {
+      showSnackbar({
+        title: t('errorProcessingPayment', 'Error processing payment'),
+        kind: 'error',
+        subtitle: error?.message,
+      });
+    }
+  };
 
   return (
     <FormProvider {...methods}>
@@ -114,36 +107,31 @@ const Payments: React.FC<PaymentProps> = ({ bill, mutate, selectedLineItems }) =
             <span></span>
           </CardHeader>
           <div>
-            {bill && <PaymentHistory bill={bill} />}
-            <PaymentForm
-              disablePayment={clientBalance <= 0}
-              clientBalance={clientBalance}
-              isSingleLineItemSelected={selectedLineItems.length > 0}
-              isSingleLineItem={bill.lineItems.length === 1}
-            />
+            <PaymentHistory bill={bill} />
+            <PaymentForm disablePayment={amountDue <= 0} isSingleLineItem={bill.lineItems.length === 1} />
           </div>
         </div>
         <div className={styles.divider} />
         <div className={styles.paymentTotals}>
           <InvoiceBreakDown
-            label={t('totalAmount', 'Total Amount')}
+            label={t('totalAmount', 'Total amount')}
             value={convertToCurrency(bill.totalAmount, defaultCurrency)}
           />
           <InvoiceBreakDown
-            label={t('totalTendered', 'Total Tendered')}
-            value={convertToCurrency(bill?.tenderedAmount + totalAmountTendered, defaultCurrency)}
+            label={t('totalTendered', 'Total tendered')}
+            value={convertToCurrency(bill.tenderedAmount, defaultCurrency)}
           />
           <InvoiceBreakDown label={t('discount', 'Discount')} value={'--'} />
           <InvoiceBreakDown
-            hasBalance={amountDueValue < 0}
-            label={amountDueLabel}
-            value={convertToCurrency(amountDueValue < 0 ? -amountDueValue : amountDueValue, defaultCurrency)}
+            hasBalance={amountDue < 0}
+            label={t('amountDue', 'Amount due')}
+            value={convertToCurrency(amountDue < 0 ? -amountDue : amountDue, defaultCurrency)}
           />
           <div className={styles.processPayments}>
             <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.scss

@@ -15,7 +15,7 @@
 
 .paymentContainer {
   margin: layout.$layout-01 0;
-  padding: layout.$layout-01;
+  padding: layout.$layout-01 0;
   width: 70%;
 }
 
@@ -32,14 +32,15 @@
 }
 
 .paymentTotals {
-  margin: layout.$spacing-05 0;
+  margin: layout.$spacing-05 auto;
   padding: layout.$spacing-07 layout.$spacing-05;
+  max-width: 90%;
 }
 
 .processPayments {
   display: flex;
   justify-content: flex-end;
-  margin: layout.$spacing-05;
+  margin: layout.$spacing-05 0;
   padding-top: layout.$spacing-05;
   column-gap: layout.$spacing-04;
   border-top: 1px solid colors.$cool-gray-40;

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

@@ -0,0 +1,282 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import {
+  useVisit,
+  useConfig,
+  navigate,
+  getDefaultsFromConfigSchema,
+  type VisitReturnType,
+} from '@openmrs/esm-framework';
+import { useBillableServices } from '../../billable-services/billable-service.resource';
+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;
+
+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(),
+}));
+
+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();
+
+  beforeEach(() => {
+    mockUseVisit.mockReturnValue({ currentVisit: null } as unknown as VisitReturnType);
+    mockUseConfig.mockReturnValue({ ...getDefaultsFromConfigSchema(configSchema), defaultCurrency: 'USD' });
+    mockUseBillableServices.mockReturnValue({
+      billableServices: [],
+      isLoading: false,
+      isValidating: false,
+      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', () => {
+    render(<Payments bill={mockBill} mutate={mockMutate} />);
+    expect(screen.getByText(/payments/i)).toBeInTheDocument();
+    expect(screen.getByText(/total amount:/i)).toBeInTheDocument();
+    expect(screen.getByText(/total tendered:/i)).toBeInTheDocument();
+  });
+
+  it('displays formatted currency amounts', () => {
+    render(<Payments bill={mockBill} mutate={mockMutate} />);
+    // 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', () => {
+    render(<Payments bill={mockBill} mutate={mockMutate} />);
+    expect(screen.getByText('Process Payment')).toBeDisabled();
+  });
+
+  it('navigates to billing dashboard when Discard is clicked', async () => {
+    render(<Payments bill={mockBill} mutate={mockMutate} />);
+    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:/i)).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:/i)).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).toBeEmptyDOMElement();
+  });
+
+  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)).toBeEnabled();
+  });
+
+  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

@@ -1,24 +1,15 @@
-import { type LineItem, type MappedBill } from '../../types';
+import { type MappedBill, type BillableService } from '../../types';
 import { type Payment } from './payments.component';
 
-const hasLineItem = (lineItems: Array<LineItem>, item: LineItem) => {
-  if (lineItems?.length === 0) {
-    return false;
-  }
-  const foundItem = lineItems.find((lineItem) => lineItem.uuid === item.uuid);
-  return Boolean(foundItem);
-};
-
 export const createPaymentPayload = (
   bill: MappedBill,
   patientUuid: string,
   formValues: Array<Payment>,
   amountDue: number,
-  billableServices: Array<any>,
-  selectedLineItems: Array<LineItem>,
+  billableServices: Array<BillableService>,
 ) => {
   const { cashier } = bill;
-  const totalAmount = bill?.totalAmount;
+  const totalAmount = bill.totalAmount ?? 0;
   const paymentStatus = amountDue <= 0 ? 'PAID' : 'PENDING';
   const previousPayments = bill?.payments.map((payment) => ({
     amount: payment.amount,
@@ -30,43 +21,40 @@ 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(),
   }));
 
   const updatedPayments = [...newPayments, ...previousPayments];
-  const totalAmountRendered = updatedPayments.reduce((acc, payment) => acc + payment.amountTendered, 0);
 
   const updatedLineItems = bill?.lineItems.map((lineItem) => ({
     ...lineItem,
     billableService: getBillableServiceUuid(billableServices, lineItem.billableService),
     item: processBillItem?.(lineItem),
-    paymentStatus:
-      bill?.lineItems.length > 1
-        ? hasLineItem(selectedLineItems ?? [], lineItem) && totalAmountRendered >= lineItem.price * lineItem.quantity
-          ? 'PAID'
-          : 'PENDING'
-        : paymentStatus,
+    paymentStatus: lineItem.paymentStatus === 'PAID' ? 'PAID' : paymentStatus,
   }));
 
-  const allItemsBillPaymentStatus =
-    updatedLineItems.filter((item) => item.paymentStatus === 'PENDING').length === 0 ? 'PAID' : 'PENDING';
-
   const processedPayment = {
     cashPoint: bill?.cashPointUuid,
     cashier: cashier.uuid,
     lineItems: updatedLineItems,
     payments: [...updatedPayments],
     patient: patientUuid,
-    status: selectedLineItems?.length > 0 ? allItemsBillPaymentStatus : paymentStatus,
+    status: paymentStatus,
   };
 
   return processedPayment;
 };
 
-export const getBillableServiceUuid = (billableServices: Array<any>, serviceName: string) => {
-  return billableServices.length ? billableServices.find((service) => service.name === serviceName).uuid : null;
+export const getBillableServiceUuid = (billableServices: Array<BillableService>, serviceName: string) => {
+  if (!billableServices.length) {
+    return null;
+  }
+  const service = billableServices.find((service) => service.name === serviceName);
+  return service?.uuid ?? null;
 };
-const processBillItem = (item) => (item.item || item.billableService)?.split(':')[0];
+
+const processBillItem = (item: { item?: string; billableService?: string }) =>
+  (item.item || item.billableService)?.split(':')[0];

package/src/invoice/printable-invoice/print-receipt.component.tsx

@@ -2,8 +2,9 @@ import React, { useState } from 'react';
 import { Button } from '@carbon/react';
 import { Printer } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
-import styles from './print-receipt.scss';
+import { getCoreTranslation } from '@openmrs/esm-framework';
 import { apiBasePath } from '../../constants';
+import styles from './print-receipt.scss';
 
 interface PrintReceiptProps {
   billId: number;
@@ -36,7 +37,7 @@ const PrintReceipt: React.FC<PrintReceiptProps> = ({ billId }) => {
       renderIcon={(props) => <Printer size={24} {...props} />}
       onClick={handlePrintReceiptClick}
       disabled={isRedirecting}>
-      {isRedirecting ? t('loading', 'Loading') : t('printReceipt', 'Print receipt')}
+      {isRedirecting ? getCoreTranslation('loading') : t('printReceipt', 'Print receipt')}
     </Button>
   );
 };

package/src/invoice/printable-invoice/print-receipt.test.tsx

@@ -1,50 +1,39 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { useTranslation } from 'react-i18next';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import PrintReceipt from './print-receipt.component';
 
-jest.mock('react-i18next', () => ({
-  useTranslation: jest.fn(),
-}));
-
-jest.mock('@carbon/react/icons', () => ({
-  Printer: jest.fn(() => <div data-testid="printer-icon" />),
-}));
-
 describe('PrintReceipt', () => {
-  const mockT = jest.fn((key) => key);
-
   beforeEach(() => {
-    (useTranslation as jest.Mock).mockReturnValue({ t: mockT });
-    jest.useFakeTimers();
     window.URL.createObjectURL = jest.fn();
   });
 
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
   it('renders button with correct text and icon', () => {
     render(<PrintReceipt billId={123} />);
-    expect(screen.getByText('printReceipt')).toBeInTheDocument();
-    expect(screen.getByTestId('printer-icon')).toBeInTheDocument();
+    expect(screen.getByText('Print receipt')).toBeInTheDocument();
   });
 
-  it('displays "Loading" and disables button when isRedirecting is true', () => {
+  it('displays "Loading" and disables button when isRedirecting is true', async () => {
+    const user = userEvent.setup();
+
     render(<PrintReceipt billId={123} />);
+
     const button = screen.getByRole('button');
-    fireEvent.click(button);
-    expect(screen.getByText('loading')).toBeInTheDocument();
+
+    await user.click(button);
+    expect(screen.getByText(/loading/i)).toBeInTheDocument();
     expect(button).toBeDisabled();
   });
 
-  it('applies correct CSS class to button', () => {
+  it('applies correct CSS class to button', async () => {
+    const user = userEvent.setup();
+
     render(<PrintReceipt billId={123} />);
     expect(screen.getByRole('button')).toHaveClass('button');
   });
 
   it('translates button text correctly', () => {
     render(<PrintReceipt billId={123} />);
-    expect(mockT).toHaveBeenCalledWith('printReceipt', 'Print receipt');
+    expect(screen.getByText('Print receipt')).toBeInTheDocument();
   });
 });

package/src/invoice/printable-invoice/printable-footer.component.tsx

@@ -3,9 +3,9 @@ import { useDefaultFacility } from '../../billing.resource';
 import styles from './printable-footer.scss';
 
 const PrintableFooter = () => {
-  const { data, isLoading } = useDefaultFacility();
+  const { data } = useDefaultFacility();
 
-  if (isLoading) {
+  if (!data) {
     return <div>--</div>;
   }