@openmrs/esm-billing-app 1.0.2-pre.74 → 1.0.2-pre.749

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

@@ -1,10 +1,10 @@
 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 PaymentForm from './payment-form.component';
 
-// Mock the payment resource
 jest.mock('../payment.resource', () => ({
   usePaymentModes: jest.fn(),
 }));
@@ -21,10 +21,6 @@ const Wrapper: React.FC<WrapperProps> = ({ children }) => {
 };
 
 describe('PaymentForm Component', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   test('should render skeleton while loading payment modes', () => {
     usePaymentModes.mockReturnValue({
       paymentModes: [],
@@ -35,12 +31,7 @@ describe('PaymentForm Component', () => {
 
     render(
       <Wrapper>
-        <PaymentForm
-          disablePayment={false}
-          clientBalance={100}
-          isSingleLineItemSelected={false}
-          isSingleLineItem={false}
-        />
+        <PaymentForm disablePayment={false} isSingleLineItem={false} />
       </Wrapper>,
     );
 
@@ -57,12 +48,7 @@ describe('PaymentForm Component', () => {
 
     render(
       <Wrapper>
-        <PaymentForm
-          disablePayment={false}
-          clientBalance={100}
-          isSingleLineItemSelected={false}
-          isSingleLineItem={false}
-        />
+        <PaymentForm disablePayment={false} isSingleLineItem={false} />
       </Wrapper>,
     );
 
@@ -79,12 +65,7 @@ describe('PaymentForm Component', () => {
 
     render(
       <Wrapper>
-        <PaymentForm
-          disablePayment={false}
-          clientBalance={100}
-          isSingleLineItemSelected={false}
-          isSingleLineItem={true}
-        />
+        <PaymentForm disablePayment={false} isSingleLineItem={true} />
       </Wrapper>,
     );
 
@@ -96,7 +77,8 @@ describe('PaymentForm Component', () => {
     expect(screen.getByPlaceholderText(/enter amount/i)).toBeInTheDocument();
   });
 
-  test('should append a payment field when add payment option button is clicked', () => {
+  test('should append a payment field when add payment option button is clicked', async () => {
+    const user = userEvent.setup();
     usePaymentModes.mockReturnValue({
       paymentModes: [{ uuid: '1', name: 'Credit Card' }],
       isLoading: false,
@@ -106,17 +88,12 @@ 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);
+    await user.click(addButton);
     const paymentMethodElements = screen.getAllByLabelText(/payment method/i);
     expect(paymentMethodElements).toHaveLength(2);
   });
@@ -131,12 +108,7 @@ describe('PaymentForm Component', () => {
 
     render(
       <Wrapper>
-        <PaymentForm
-          disablePayment={true}
-          clientBalance={100}
-          isSingleLineItemSelected={true}
-          isSingleLineItem={false}
-        />
+        <PaymentForm disablePayment={true} isSingleLineItem={false} />
       </Wrapper>,
     );
 
@@ -144,6 +116,7 @@ describe('PaymentForm Component', () => {
   });
 
   test('should remove payment field when trash can icon is clicked', async () => {
+    const user = userEvent.setup();
     usePaymentModes.mockReturnValue({
       paymentModes: [{ uuid: '1', name: 'Credit Card' }],
       isLoading: false,
@@ -153,19 +126,14 @@ 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 option/i));
 
     const trashCanIcon = screen.getByTestId('trash-can-icon');
-    fireEvent.click(trashCanIcon);
+    await user.click(trashCanIcon);
 
     await waitFor(() => {
       expect(screen.queryByPlaceholderText(/enter amount/i)).not.toBeInTheDocument();

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();
   });

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

@@ -6,20 +6,19 @@ 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 { convertToCurrency } from '../../helpers';
+import { createPaymentPayload } from './utils';
+import { processBillPayment } from '../../billing.resource';
+import { useBillableServices } from '../../billable-services/billable-service.resource';
 import { updateBillVisitAttribute } from './payment.resource';
+import { type MappedBill } from '../../types';
 import styles from './payments.scss';
-import { useBillableServices } from '../../billable-services/billable-service.resource';
 
 type PaymentProps = {
   bill: MappedBill;
-  selectedLineItems: Array<LineItem>;
   mutate: () => void;
 };
 
@@ -29,7 +28,7 @@ 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 paymentSchema = z.object({
@@ -54,25 +53,23 @@ 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 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,
-        amountDue,
+        amountRemaining,
         billableServices,
-        selectedLineItems,
       );
       paymentPayload.payments.forEach((payment) => {
         payment.dateCreated = new Date(payment.dateCreated);
@@ -103,9 +100,6 @@ const Payments: React.FC<PaymentProps> = ({ bill, mutate, selectedLineItems }) =
     return null;
   }
 
-  const amountDueLabel = selectedLineItems.length ? t('amountDue', 'Amount Due') : t('clientBalance', 'Client Balance');
-  const amountDueValue = selectedLineItems.length ? amountDue : clientBalance;
-
   return (
     <FormProvider {...methods}>
       <div className={styles.wrapper}>
@@ -115,12 +109,7 @@ const Payments: React.FC<PaymentProps> = ({ bill, mutate, selectedLineItems }) =
           </CardHeader>
           <div>
             {bill && <PaymentHistory bill={bill} />}
-            <PaymentForm
-              disablePayment={clientBalance <= 0}
-              clientBalance={clientBalance}
-              isSingleLineItemSelected={selectedLineItems.length > 0}
-              isSingleLineItem={bill.lineItems.length === 1}
-            />
+            <PaymentForm disablePayment={amountDue <= 0} isSingleLineItem={bill.lineItems.length === 1} />
           </div>
         </div>
         <div className={styles.divider} />
@@ -131,13 +120,13 @@ const Payments: React.FC<PaymentProps> = ({ bill, mutate, selectedLineItems }) =
           />
           <InvoiceBreakDown
             label={t('totalTendered', 'Total Tendered')}
-            value={convertToCurrency(bill?.tenderedAmount + totalAmountTendered, defaultCurrency)}
+            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">

package/src/invoice/payments/{payments.component.test.tsx → payments.test.tsx}

@@ -1,12 +1,21 @@
 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 {
+  useVisit,
+  useConfig,
+  navigate,
+  getDefaultsFromConfigSchema,
+  type VisitReturnType,
+} from '@openmrs/esm-framework';
 import { useBillableServices } from '../../billable-services/billable-service.resource';
 import { type MappedBill, type LineItem } from '../../types';
+import { configSchema, type BillingConfig } from '../../config-schema';
 import Payments from './payments.component';
 
-// Add this mock for currency formatting
+const mockUseVisit = jest.mocked(useVisit);
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
+const mockUseBillableServices = jest.mocked(useBillableServices);
 const mockFormatToParts = jest.fn().mockReturnValue([{ type: 'integer', value: '1000' }]);
 const mockFormat = jest.fn().mockReturnValue('$1000.00');
 global.Intl.NumberFormat = jest.fn().mockImplementation(() => ({
@@ -87,21 +96,26 @@ describe('Payments', () => {
   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 });
+    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(),
+    });
   });
 
   it('renders payment form and history', () => {
-    render(<Payments bill={mockBill} mutate={mockMutate} selectedLineItems={mockSelectedLineItems} />);
+    render(<Payments bill={mockBill} mutate={mockMutate} />);
     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} />);
+    render(<Payments bill={mockBill} mutate={mockMutate} />);
     const amountElements = screen.getAllByText('$1000.00');
     expect(amountElements[amountElements.length - 3]).toBeInTheDocument();
     expect(amountElements[amountElements.length - 2]).toBeInTheDocument();
@@ -109,12 +123,12 @@ describe('Payments', () => {
   });
 
   it('disables Process Payment button when form is invalid', () => {
-    render(<Payments bill={mockBill} mutate={mockMutate} selectedLineItems={mockSelectedLineItems} />);
+    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} selectedLineItems={mockSelectedLineItems} />);
+    render(<Payments bill={mockBill} mutate={mockMutate} />);
     await userEvent.click(screen.getByText('Discard'));
     expect(navigate).toHaveBeenCalled();
   });

package/src/invoice/payments/utils.ts

@@ -1,24 +1,15 @@
-import { type LineItem, type MappedBill } from '../../types';
+import { type MappedBill } 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>,
 ) => {
   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,
@@ -37,30 +28,21 @@ export const createPaymentPayload = (
   }));
 
   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;

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>;
   }
 

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

@@ -3,28 +3,19 @@ import { screen, render } from '@testing-library/react';
 import { useDefaultFacility } from '../../billing.resource';
 import PrintableFooter from './printable-footer.component';
 
-const mockUseDefaultFacility = useDefaultFacility as jest.MockedFunction<typeof useDefaultFacility>;
+const mockUseDefaultFacility = jest.mocked<typeof useDefaultFacility>(useDefaultFacility);
 
 jest.mock('../../billing.resource', () => ({
   useDefaultFacility: jest.fn(),
 }));
 
 describe('PrintableFooter', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   test('should render PrintableFooter component', () => {
-    mockUseDefaultFacility.mockReturnValue({ data: { display: 'MTRH', uuid: 'mtrh-uuid' }, isLoading: false });
+    mockUseDefaultFacility.mockReturnValue({
+      data: { display: 'MTRH', uuid: 'mtrh-uuid', links: [] },
+    });
     render(<PrintableFooter />);
     const footer = screen.getByText('MTRH');
     expect(footer).toBeInTheDocument();
   });
-
-  test('should show placeholder text when facility isLoading', () => {
-    mockUseDefaultFacility.mockReturnValue({ data: { display: 'MTRH', uuid: 'mtrh-uuid' }, isLoading: true });
-    render(<PrintableFooter />);
-    const footer = screen.getByText('--');
-    expect(footer).toBeInTheDocument();
-  });
 });

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

@@ -1,27 +1,28 @@
 import React from 'react';
 import { type PatientDetails } from '../../types';
-import { useConfig } from '@openmrs/esm-framework';
+import { type SessionLocation, useConfig, interpolateUrl } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
-import { useDefaultFacility } from '../../billing.resource';
+import type { BillingConfig } from '../../config-schema';
 import styles from './printable-invoice-header.scss';
+import isEmpty from 'lodash/isEmpty';
 
 interface PrintableInvoiceHeaderProps {
   patientDetails: PatientDetails;
+  defaultFacility: SessionLocation | null;
 }
 
-const PrintableInvoiceHeader: React.FC<PrintableInvoiceHeaderProps> = ({ patientDetails }) => {
+const PrintableInvoiceHeader: React.FC<PrintableInvoiceHeaderProps> = ({ patientDetails, defaultFacility }) => {
   const { t } = useTranslation();
-  const { logo } = useConfig();
-  const { data } = useDefaultFacility();
+  const { logo, country } = useConfig<BillingConfig>();
 
   return (
     <div className={styles.container}>
       <div className={styles.printableHeader}>
         <p className={styles.heading}>{t('invoice', 'Invoice')}</p>
-        {logo?.src ? (
-          <img className={styles.img} src={logo.src} alt={logo.alt} />
-        ) : logo?.name ? (
-          logo.name
+        {logo?.src && !isEmpty(logo.src) ? (
+          <img className={styles.img} src={interpolateUrl(logo.src)} alt={logo.alt} />
+        ) : logo?.alt && !isEmpty(logo.alt) ? (
+          logo.alt
         ) : (
           // OpenMRS Logo
           <svg
@@ -52,8 +53,8 @@ const PrintableInvoiceHeader: React.FC<PrintableInvoiceHeaderProps> = ({ patient
         </div>
 
         <div className={styles.facilityDetails}>
-          <p className={styles.facilityName}>{data?.display}</p>
-          <p className={styles.itemLabel}>Kenya</p>
+          <p className={styles.facilityName}>{defaultFacility?.display}</p>
+          <p className={styles.itemLabel}>{country}</p>
         </div>
       </div>
     </div>