@openmrs/esm-billing-app 1.0.1-pre.100

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

@@ -0,0 +1,147 @@
+import React from 'react';
+import { FormProvider, useForm, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+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 { updateBillVisitAttribute } from './payment.resource';
+import styles from './payments.scss';
+import { useBillableServices } from '../../billable-services/billable-service.resource';
+
+type PaymentProps = {
+  bill: MappedBill;
+  selectedLineItems: Array<LineItem>;
+};
+
+export type Payment = { method: string; amount: string | number; referenceCode?: number | string };
+
+export type PaymentFormValue = {
+  payment: Array<Payment>;
+};
+
+const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems }) => {
+  const { t } = useTranslation();
+  const { defaultCurrency } = useConfig();
+  const { billableServices, isLoading, isValidating, error, mutate } = 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' }),
+    referenceCode: z.union([z.number(), z.string()]).optional(),
+  });
+
+  const paymentFormSchema = z.object({ payment: z.array(paymentSchema) });
+  const { currentVisit } = useVisit(bill?.patientUuid);
+  const methods = useForm<PaymentFormValue>({
+    mode: 'all',
+    defaultValues: {},
+    resolver: zodResolver(paymentFormSchema),
+  });
+
+  const formValues = useWatch({
+    name: 'payment',
+    control: methods.control,
+  });
+
+  const hasMoreThanOneLineItem = bill?.lineItems?.length > 1;
+  const computedTotal = hasMoreThanOneLineItem ? computeTotalPrice(selectedLineItems) : bill?.totalAmount ?? 0;
+  const totalAmountTendered = formValues?.reduce((curr: number, prev) => curr + Number(prev.amount) ?? 0, 0) ?? 0;
+  const amountDue = Number(computedTotal) - (Number(bill?.tenderedAmount) + Number(totalAmountTendered));
+  const newAmountDue = Number(bill?.totalAmount - bill?.tenderedAmount);
+
+  const handleNavigateToBillingDashboard = () =>
+    navigate({
+      to: window.getOpenmrsSpaBase() + 'home/billing',
+    });
+
+  const handleProcessPayment = () => {
+    const paymentPayload = createPaymentPayload(bill, bill.patientUuid, formValues, amountDue, billableServices, selectedLineItems);
+    processBillPayment(paymentPayload, bill.uuid).then(
+      (res) => {
+        showSnackbar({
+          title: t('billPayment', 'Bill payment'),
+          subtitle: 'Bill payment processing has been successful',
+          kind: 'success',
+          timeoutInMs: 3000,
+        });
+        if (currentVisit) {
+          updateBillVisitAttribute(currentVisit);
+        }
+        window.location.reload();
+      },
+      (error) => {
+        showSnackbar({ title: 'Bill payment error', kind: 'error', subtitle: error?.message });
+      },
+    );
+  };
+
+  const amountDueDisplay = (amount: number) => (amount < 0 ? 'Client balance' : 'Amount Due');
+
+  return (
+    <FormProvider {...methods}>
+      <div className={styles.wrapper}>
+        <div className={styles.paymentContainer}>
+          <CardHeader title={t('payments', 'Payments')}>
+            <span></span>
+          </CardHeader>
+          <div>
+            {bill && <PaymentHistory bill={bill} />}
+            <PaymentForm disablePayment={computedTotal <= 0} amountDue={amountDue} />
+          </div>
+        </div>
+        <div className={styles.divider} />
+        <div className={styles.paymentTotals}>
+          <InvoiceBreakDown
+            label={t('totalAmount', 'Total Amount')}
+            value={convertToCurrency(bill?.totalAmount, defaultCurrency)}
+          />
+          <InvoiceBreakDown
+            label={t('totalTendered', 'Total Tendered')}
+            value={convertToCurrency(bill?.tenderedAmount, defaultCurrency)}
+          />
+          <InvoiceBreakDown label={t('discount', 'Discount')} value={'--'} />
+          <InvoiceBreakDown
+            hasBalance={amountDue < 0 ?? false}
+            label={amountDueDisplay(amountDue)}
+            value={convertToCurrency(bill?.totalAmount - bill?.tenderedAmount, defaultCurrency)}
+          />
+          <div className={styles.processPayments}>
+            <Button onClick={handleNavigateToBillingDashboard} kind="secondary">
+              {t('discard', 'Discard')}
+            </Button>
+            <Button onClick={() => handleProcessPayment()} disabled={!formValues?.length || !methods.formState.isValid}>
+              {t('processPayment', 'Process Payment')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </FormProvider>
+  );
+};
+
+const computeTotalPrice = (items) => {
+  if (items && !items.length) {
+    return 0;
+  }
+
+  let totalPrice = 0;
+
+  items?.forEach((item) => {
+    const { price, quantity } = item;
+    totalPrice += price * quantity;
+  });
+
+  return totalPrice;
+};
+
+export default Payments;

package/src/invoice/payments/payments.scss

@@ -0,0 +1,46 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.wrapper {
+  display: flex;
+}
+
+.divider {
+  background: colors.$gray-20;
+  height: 12rem;
+  margin: 2rem;
+  width: 1px;
+}
+
+.paymentContainer {
+  margin: layout.$layout-01 0;
+  padding: layout.$layout-01;
+  width: 70%;
+}
+
+.paymentButtons {
+  margin: layout.$layout-01 0;
+}
+
+.paymentMethodContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  align-items: flex-end;
+  column-gap: 1rem;
+  margin: 0.625rem 0;
+}
+
+.paymentTotals {
+  margin: layout.$spacing-05 0;
+  padding: layout.$spacing-07 layout.$spacing-05;
+}
+
+.processPayments {
+  display: flex;
+  justify-content: flex-end;
+  margin: layout.$spacing-05;
+  padding-top: layout.$spacing-05;
+  column-gap: layout.$spacing-04;
+  border-top: 1px solid colors.$cool-gray-40;
+}

package/src/invoice/payments/utils.ts

@@ -0,0 +1,68 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+import { type LineItem, 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 totalPaymentStatus = amountDue <= 0 ? 'PAID' : 'PENDING';
+  const previousPayments = bill.payments.map((payment) => ({
+    amount: payment.amount,
+    amountTendered: payment.amountTendered,
+    attributes: [],
+    instanceType: payment.instanceType.uuid,
+  }));
+
+  const newPayments = formValues.map((formValue) => ({
+    amount: parseFloat(totalAmount.toFixed(2)),
+    amountTendered: parseFloat(Number(formValue.amount).toFixed(2)),
+    attributes: [],
+    instanceType: formValue.method,
+  }));
+
+  const updatedPayments = newPayments.concat(previousPayments);
+  const totalAmountRendered = updatedPayments.reduce((acc, payment) => acc + payment.amountTendered, 0);
+  const updatedLineItems = bill?.lineItems.map((lineItem) => ({
+    ...lineItem,
+    billableService: getBillableServiceUuid(billableServices, lineItem.billableService),
+    item: lineItem?.item,
+    paymentStatus: hasLineItem(selectedLineItems ?? [], lineItem)
+      ? totalAmountRendered >= lineItem.price * lineItem.quantity
+        ? 'PAID'
+        : 'PENDING'
+      : lineItem.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 : totalPaymentStatus,
+  };
+
+  return processedPayment;
+};
+
+const getBillableServiceUuid = (billableServices: Array<any>, serviceName: string) => {
+  return billableServices.length ? billableServices.find((service) => service.name === serviceName).uuid : null;
+};

package/src/invoice/payments/visit-tags/visit-attribute.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Tag } from '@carbon/react';
+import { usePatientPaymentInfo } from '../../../billing.resource';
+
+type VisitAttributeTagsProps = { patientUuid: string };
+
+const VisitAttributeTags: React.FC<VisitAttributeTagsProps> = ({ patientUuid }) => {
+  const patientBillingInfo = usePatientPaymentInfo(patientUuid);
+  return (
+    <div>
+      {patientBillingInfo?.map((tag) => (
+        <React.Fragment key={tag.name}>
+          <Tag type="gray">{tag.name}</Tag>
+          <Tag type="cool-gray">{tag.value}</Tag>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default VisitAttributeTags;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Button } from '@carbon/react';
+import { Printer } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import styles from './print-receipt.scss';
+import { apiBasePath } from '../../constants';
+
+interface PrintReceiptProps {
+  billId: number;
+}
+const PrintReceipt: React.FC<PrintReceiptProps> = ({ billId }) => {
+  const { t } = useTranslation();
+  return (
+    <Button
+      kind="secondary"
+      className={styles.button}
+      size="md"
+      renderIcon={(props) => <Printer size={24} {...props} />}>
+      <ConfigurableLink
+        className={styles.configurableLink}
+        to={`\${openmrsBase}${apiBasePath}receipt?billId=${billId}`}>
+        {t('printReceipt', 'Print receipt')}
+      </ConfigurableLink>{' '}
+    </Button>
+  );
+};
+
+export default PrintReceipt;

package/src/invoice/printable-invoice/print-receipt.scss

@@ -0,0 +1,14 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.configurableLink {
+  color: colors.$white;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+}
+
+.button {
+  margin-left: layout.$spacing-04;
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useDefaultFacility } from '../../billing.resource';
+import styles from './printable-footer.scss';
+
+const PrintableFooter = () => {
+  const { data, isLoading } = useDefaultFacility();
+
+  if (isLoading) {
+    return <div>--</div>;
+  }
+
+  return (
+    <div className={styles.container}>
+      <p className={styles.itemFooter}>{data?.display}</p>
+    </div>
+  );
+};
+
+export default PrintableFooter;

package/src/invoice/printable-invoice/printable-footer.scss

@@ -0,0 +1,17 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+}
+
+.itemFooter {
+  padding: 1rem;
+  @include type.type-style('body-compact-02');
+  color: colors.$cool-gray-90;
+}

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

@@ -0,0 +1,30 @@
+import React from 'react';
+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>;
+
+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 });
+    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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { type PatientDetails } from '../../types';
+import { useConfig } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { useDefaultFacility } from '../../billing.resource';
+import styles from './printable-invoice-header.scss';
+
+interface PrintableInvoiceHeaderProps {
+  patientDetails: PatientDetails;
+}
+
+const PrintableInvoiceHeader: React.FC<PrintableInvoiceHeaderProps> = ({ patientDetails }) => {
+  const { t } = useTranslation();
+  const { logo } = useConfig();
+  const { data } = useDefaultFacility();
+
+  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
+        ) : (
+          // OpenMRS Logo
+          <svg
+            className={styles.img}
+            role="img"
+            width={110}
+            height={40}
+            viewBox="0 0 380 119"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M40.29 40.328a27.755 27.755 0 0 1 19.688-8.154c7.669 0 14.613 3.102 19.647 8.116l.02-18.54A42.835 42.835 0 0 0 59.978 17c-7.089 0-13.813 1.93-19.709 4.968l.021 18.36ZM79.645 79.671a27.744 27.744 0 0 1-19.684 8.154c-7.67 0-14.614-3.101-19.651-8.116l-.02 18.54A42.857 42.857 0 0 0 59.96 103a42.833 42.833 0 0 0 19.672-4.751l.013-18.578ZM40.328 79.696c-5.038-5.037-8.154-11.995-8.154-19.685 0-7.669 3.102-14.612 8.116-19.65l-18.54-.02A42.85 42.85 0 0 0 17 60.012a42.819 42.819 0 0 0 4.752 19.672l18.576.013ZM79.634 40.289a27.753 27.753 0 0 1 8.154 19.688 27.744 27.744 0 0 1-8.117 19.646l18.542.02a42.842 42.842 0 0 0 4.749-19.666c0-7.09-1.714-13.779-4.751-19.675l-18.577-.013ZM156.184 60.002c0-8.748-6.118-15.776-15.025-15.776-8.909 0-15.025 7.028-15.025 15.776 0 8.749 6.116 15.78 15.025 15.78 8.907 0 15.025-7.031 15.025-15.78Zm-34.881 0c0-11.482 8.318-19.958 19.856-19.958 11.536 0 19.855 8.477 19.855 19.959 0 11.484-8.319 19.964-19.855 19.964-11.538 0-19.856-8.48-19.856-19.965ZM179.514 75.54c5.507 0 9.05-4.14 9.05-9.482 0-5.341-3.543-9.483-9.05-9.483-5.505 0-9.046 4.142-9.046 9.483 0 5.342 3.541 9.482 9.046 9.482ZM166.22 53.306h4.248v3.704h.11c2.344-2.725 5.449-4.36 9.154-4.36 8.014 0 13.408 5.67 13.408 13.408 0 7.63-5.613 13.406-12.752 13.406-4.58 0-8.231-2.29-9.81-5.178h-.11V90.87h-4.248V53.306ZM217.773 63.768c-.163-4.305-3-7.193-7.686-7.193-4.685 0-7.79 2.888-8.335 7.193h16.021Zm3.653 10.412c-3.001 3.868-6.596 5.284-11.339 5.284-8.01 0-12.914-5.993-12.914-13.406 0-7.901 5.559-13.407 13.08-13.407 7.196 0 12.096 4.906 12.096 13.354v1.362h-20.597c.325 4.413 3.704 8.173 8.335 8.173 3.65 0 6.105-1.307 8.12-3.868l3.219 2.508ZM227.854 59.356c0-2.346-.216-4.36-.216-6.05h4.031c0 1.363.11 2.777.11 4.195h.11c1.144-2.505 4.306-4.85 8.5-4.85 6.705 0 9.699 4.252 9.699 10.41v15.748h-4.248v-15.31c0-4.253-1.856-6.924-5.833-6.924-5.503 0-7.903 3.979-7.903 9.811V78.81h-4.25V59.356ZM259.211 41.008h6.708L278.8 70.791h.107l12.982-29.782h6.549v37.99h-4.506V47.124h-.106L280.192 79h-2.738l-13.629-31.875h-.107V79h-4.507V41.01ZM312.392 57.752h4.023c4.992 0 11.487 0 11.487-6.282 0-5.47-4.776-6.276-9.177-6.276h-6.333v12.558Zm-4.506-16.744h9.711c7.352 0 15.132 1.072 15.132 10.462 0 5.527-3.594 9.125-9.495 10.037L334.018 79h-5.525l-10.304-17.063h-5.797V79h-4.506V41.01ZM358.123 47.712c-1.506-2.413-4.187-3.486-6.926-3.486-3.973 0-8.1 1.88-8.1 6.385 0 3.49 1.931 5.047 7.994 6.98 5.903 1.878 11.377 3.809 11.377 11.267 0 7.567-6.495 11.11-13.36 11.11-4.402 0-9.125-1.45-11.7-5.262l3.862-3.165c1.61 2.794 4.83 4.24 8.105 4.24 3.862 0 8.263-2.253 8.263-6.601 0-4.669-3.165-5.474-9.928-7.728-5.366-1.771-9.442-4.134-9.442-10.463 0-7.298 6.277-10.945 12.929-10.945 4.241 0 7.836 1.178 10.625 4.45l-3.699 3.218Z"
+            />
+          </svg>
+        )}
+      </div>
+
+      <div className={styles.printableBody}>
+        <div className={styles.billDetails}>
+          <p className={styles.itemHeading}>{t('billedTo', 'Billed to')}</p>
+          <p className={styles.itemLabel}>{patientDetails?.name}</p>
+          <p className={styles.itemLabel}>{patientDetails?.county}</p>
+          <p className={styles.itemLabel}>
+            {patientDetails?.subCounty}
+            {patientDetails?.city ? `, ${patientDetails?.city}` : null}
+          </p>
+        </div>
+
+        <div className={styles.facilityDetails}>
+          <p className={styles.facilityName}>{data?.display}</p>
+          <p className={styles.itemLabel}>Kenya</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PrintableInvoiceHeader;

package/src/invoice/printable-invoice/printable-invoice-header.scss

@@ -0,0 +1,61 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  padding: 0 1rem 2rem;
+  border-bottom: 1px solid #ebedf2;
+  margin-bottom: 2rem;
+}
+
+.printableBody {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.printableHeader {
+  display: flex;
+  flex-direction: row;
+}
+
+.img {
+  display: flex;
+  margin-left: auto;
+}
+
+.billDetails {
+  display: flex;
+  width: 50%;
+  flex-direction: column;
+}
+
+.facilityDetails {
+  display: flex;
+  flex-flow: column wrap;
+  text-align: right;
+}
+
+.heading {
+  font-size: 40px;
+  text-transform: uppercase;
+  margin-bottom: layout.$spacing-05;
+}
+
+.facilityName {
+  @include type.type-style('heading-compact-02');
+  font-weight: bold;
+  color: colors.$green-70;
+}
+
+.itemHeading {
+  @include type.type-style('body-compact-02');
+  margin-bottom: 0.25rem;
+  font-weight: bold;
+  color: colors.$cool-gray-90;
+}
+
+.itemLabel {
+  @include type.type-style('body-compact-02');
+  color: colors.$cool-gray-90;
+}

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { useConfig } from '@openmrs/esm-framework';
+import { useDefaultFacility } from '../../billing.resource';
+import PrintableInvoiceHeader from './printable-invoice-header.component';
+
+const mockUseDefaultFacility = useDefaultFacility as jest.MockedFunction<typeof useDefaultFacility>;
+const mockUseConfig = useConfig as jest.MockedFunction<typeof useConfig>;
+
+jest.mock('../../billing.resource', () => ({
+  useDefaultFacility: jest.fn(),
+}));
+
+jest.mock('@openmrs/esm-framework', () => ({
+  useConfig: jest.fn(),
+}));
+const testProps = {
+  patientDetails: {
+    name: 'John Doe',
+    county: 'Nairobi',
+    subCounty: 'Westlands',
+    city: 'Nairobi',
+    age: '45',
+    gender: 'Male',
+  },
+};
+
+describe('PrintableInvoiceHeader', () => {
+  test('should render PrintableInvoiceHeader component', () => {
+    mockUseConfig.mockReturnValue({ logo: { src: 'logo.png', alt: 'logo' } });
+    mockUseDefaultFacility.mockReturnValue({ data: { display: 'MTRH', uuid: 'mtrh-uuid' }, isLoading: false });
+    render(<PrintableInvoiceHeader {...testProps} />);
+    const header = screen.getByText('Invoice');
+    expect(header).toBeInTheDocument();
+
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('Nairobi')).toBeInTheDocument();
+    expect(screen.getByText('Westlands, Nairobi')).toBeInTheDocument();
+    expect(screen.getByText('MTRH')).toBeInTheDocument();
+    expect(screen.getByText('Kenya')).toBeInTheDocument();
+  });
+
+  test('should display the logo when logo is provided', () => {
+    mockUseConfig.mockReturnValue({ logo: { src: 'logo.png', alt: 'logo' } });
+    mockUseDefaultFacility.mockReturnValue({ data: { display: 'MTRH', uuid: 'mtrh-uuid' }, isLoading: false });
+    render(<PrintableInvoiceHeader {...testProps} />);
+    const logo = screen.getByAltText('logo');
+    expect(logo).toBeInTheDocument();
+  });
+
+  test('should display the default logo when logo is not provided', () => {
+    mockUseConfig.mockReturnValue({ logo: {} });
+    mockUseDefaultFacility.mockReturnValue({ data: { display: 'MTRH', uuid: 'mtrh-uuid' }, isLoading: false });
+    render(<PrintableInvoiceHeader {...testProps} />);
+    const logo = screen.getByRole('img');
+    expect(logo).toBeInTheDocument();
+  });
+});