@openmrs/esm-billing-app 1.0.2-pre.657 → 1.0.2-pre.661

package/dist/openmrs-esm-billing-app.js.buildmanifest.json

@@ -24,7 +24,7 @@
       "auxiliaryFiles": [
         "590.js.map"
       ],
-      "hash": "3c5ed56e493a8ddc",
+      "hash": "414e99f458bbc26a",
       "childrenByOrder": {}
     },
     {
@@ -330,7 +330,7 @@
       "auxiliaryFiles": [
         "2352.js.map"
       ],
-      "hash": "efb884001d4b67ef",
+      "hash": "422ac1657e297fb7",
       "childrenByOrder": {}
     },
     {
@@ -379,7 +379,7 @@
       "auxiliaryFiles": [
         "2747.js.map"
       ],
-      "hash": "d795cc85f8b0dbb4",
+      "hash": "c47b184600598dfd",
       "childrenByOrder": {}
     },
     {
@@ -571,9 +571,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 7331,
+      "size": 7298,
       "sizes": {
-        "javascript": 7331
+        "javascript": 7298
       },
       "names": [],
       "idHints": [],
@@ -585,7 +585,7 @@
         "4300.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "32beaf3352e19df1",
+      "hash": "a8ba7d5cab1cf5ae",
       "childrenByOrder": {}
     },
     {
@@ -675,7 +675,7 @@
       "auxiliaryFiles": [
         "4739.js.map"
       ],
-      "hash": "442e36091b68bbb9",
+      "hash": "53528d1cc7772c75",
       "childrenByOrder": {}
     },
     {
@@ -1135,7 +1135,7 @@
       "auxiliaryFiles": [
         "7692.js.map"
       ],
-      "hash": "bb9f8a0c5a09d441",
+      "hash": "7c2f626c815f585d",
       "childrenByOrder": {}
     },
     {
@@ -1236,9 +1236,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 1096884,
+      "size": 1091132,
       "sizes": {
-        "javascript": 1096842,
+        "javascript": 1091090,
         "consume-shared": 42
       },
       "names": [],
@@ -1252,7 +1252,7 @@
       "auxiliaryFiles": [
         "8638.js.map"
       ],
-      "hash": "17dbec089b5e8c96",
+      "hash": "d7b8b1033eef7f90",
       "childrenByOrder": {}
     },
     {
@@ -1260,10 +1260,10 @@
       "initial": true,
       "entry": true,
       "recorded": false,
-      "size": 5117455,
+      "size": 5111703,
       "sizes": {
         "consume-shared": 210,
-        "javascript": 5094803,
+        "javascript": 5089051,
         "share-init": 336,
         "runtime": 22106
       },
@@ -1280,7 +1280,7 @@
       "auxiliaryFiles": [
         "main.js.map"
       ],
-      "hash": "0dfe3aad437c29d2",
+      "hash": "fc6ad4df4d9516ac",
       "childrenByOrder": {}
     },
     {

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":">=2.24.0","fhir2":">=1.2"},"pages":[{"component":"billableServicesHome","route":"billable-services"}],"extensions":[{"component":"billingDashboardLink","name":"billing-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"billing","title":"billing","slot":"billing-dashboard-slot"},"featureFlag":"billing"},{"component":"root","name":"billing-dashboard-root","slot":"billing-dashboard-slot"},{"name":"billing-patient-summary","component":"billingPatientSummary","slot":"patient-chart-billing-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"billing-summary-dashboard-link","component":"billingSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-billing-dashboard-slot","path":"Billing history"},"featureFlag":"billing"},{"name":"billable-services-app-menu-item","component":"billableServicesAppMenuItem","slot":"app-menu-item-slot","meta":{"name":"Billable Services"}},{"name":"billing-checkin-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm","featureFlag":"billing"},{"slot":"system-admin-page-card-link-slot","component":"billableServicesCardLink","name":"billable-services-admin-card-link"},{"name":"patient-banner-billing-tags","component":"visitAttributeTags","slot":"patient-banner-tags-slot","order":2},{"name":"billing-home-tiles-ext","slot":"billing-home-tiles-slot","component":"serviceMetrics"},{"name":"edit-bill-line-item-dialog","component":"editBillLineItemDialog","online":true,"offline":true}],"modals":[{"name":"require-billing-modal","component":"requirePaymentModal"}],"workspaces":[{"name":"billing-form-workspace","title":"billingForm","component":"billingFormWorkspace","type":"form"}],"featureFlags":[{"flagName":"billing","label":"Billing module","description":"This feature introduces navigation links on the patient chart and home page to allow accessing the billing module features"}],"version":"1.0.2-pre.657"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":">=2.24.0","fhir2":">=1.2"},"pages":[{"component":"billableServicesHome","route":"billable-services"}],"extensions":[{"component":"billingDashboardLink","name":"billing-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"billing","title":"billing","slot":"billing-dashboard-slot"},"featureFlag":"billing"},{"component":"root","name":"billing-dashboard-root","slot":"billing-dashboard-slot"},{"name":"billing-patient-summary","component":"billingPatientSummary","slot":"patient-chart-billing-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"billing-summary-dashboard-link","component":"billingSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-billing-dashboard-slot","path":"Billing history"},"featureFlag":"billing"},{"name":"billable-services-app-menu-item","component":"billableServicesAppMenuItem","slot":"app-menu-item-slot","meta":{"name":"Billable Services"}},{"name":"billing-checkin-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm","featureFlag":"billing"},{"slot":"system-admin-page-card-link-slot","component":"billableServicesCardLink","name":"billable-services-admin-card-link"},{"name":"patient-banner-billing-tags","component":"visitAttributeTags","slot":"patient-banner-tags-slot","order":2},{"name":"billing-home-tiles-ext","slot":"billing-home-tiles-slot","component":"serviceMetrics"},{"name":"edit-bill-line-item-dialog","component":"editBillLineItemDialog","online":true,"offline":true}],"modals":[{"name":"require-billing-modal","component":"requirePaymentModal"}],"workspaces":[{"name":"billing-form-workspace","title":"billingForm","component":"billingFormWorkspace","type":"form"}],"featureFlags":[{"flagName":"billing","label":"Billing module","description":"This feature introduces navigation links on the patient chart and home page to allow accessing the billing module features"}],"version":"1.0.2-pre.661"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-billing-app",
-  "version": "1.0.2-pre.657",
+  "version": "1.0.2-pre.661",
   "description": "O3 frontend module for handling billing concerns in healthcare settings",
   "browser": "dist/openmrs-esm-billing-app.js",
   "main": "src/index.ts",

package/src/bill-history/bill-history.component.tsx

@@ -155,7 +155,7 @@ const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
                         {row.isExpanded ? (
                           <TableExpandedRow className={styles.expandedRow} colSpan={headers.length + 1}>
                             <div className={styles.container} key={i}>
-                              <InvoiceTable bill={currentBill} isSelectable={false} />
+                              <InvoiceTable bill={currentBill} />
                             </div>
                           </TableExpandedRow>
                         ) : (

package/src/invoice/invoice-table.component.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import fuzzy from 'fuzzy';
 import {
@@ -13,7 +13,6 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-  TableSelectRow,
   TableToolbarSearch,
   Tile,
   type DataTableRow,
@@ -22,33 +21,23 @@ import { Edit } from '@carbon/react/icons';
 import { isDesktop, showModal, useConfig, useDebounce, useLayoutType } from '@openmrs/esm-framework';
 import { type LineItem, type MappedBill } from '../types';
 import { convertToCurrency } from '../helpers';
+import type { BillingConfig } from '../config-schema';
 import styles from './invoice-table.scss';
 
 type InvoiceTableProps = {
   bill: MappedBill;
-  isSelectable?: boolean;
   isLoadingBill?: boolean;
-  onSelectItem?: (selectedLineItems: LineItem[]) => void;
 };
 
-const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true, isLoadingBill, onSelectItem }) => {
+const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isLoadingBill }) => {
   const { t } = useTranslation();
-  const { defaultCurrency, showEditBillButton } = useConfig();
+  const { defaultCurrency, showEditBillButton } = useConfig<BillingConfig>();
   const layout = useLayoutType();
   const lineItems = useMemo(() => bill?.lineItems ?? [], [bill?.lineItems]);
-  const paidLineItems = useMemo(() => lineItems?.filter((item) => item.paymentStatus === 'PAID') ?? [], [lineItems]);
   const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
-
-  const [selectedLineItems, setSelectedLineItems] = useState(paidLineItems ?? []);
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearchTerm = useDebounce(searchTerm);
 
-  useEffect(() => {
-    if (onSelectItem) {
-      onSelectItem(selectedLineItems);
-    }
-  }, [selectedLineItems, onSelectItem]);
-
   const filteredLineItems = useMemo(() => {
     if (!debouncedSearchTerm) {
       return lineItems;
@@ -135,23 +124,10 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
     );
   }
 
-  const handleRowSelection = (row: typeof DataTableRow, checked: boolean) => {
-    const matchingRow = filteredLineItems.find((item) => item.uuid === row.id);
-    let newSelectedLineItems;
-
-    if (checked) {
-      newSelectedLineItems = [...selectedLineItems, matchingRow];
-    } else {
-      newSelectedLineItems = selectedLineItems.filter((item) => item.uuid !== row.id);
-    }
-    setSelectedLineItems(newSelectedLineItems);
-    onSelectItem(newSelectedLineItems);
-  };
-
   return (
     <>
-      <DataTable headers={tableHeaders} isSortable rows={tableRows} size={responsiveSize} useZebraStyles>
-        {({ rows, headers, getRowProps, getSelectionProps, getTableProps, getToolbarProps }) => (
+      <DataTable headers={tableHeaders} rows={tableRows} size={responsiveSize} useZebraStyles>
+        {({ rows, headers, getRowProps, getTableProps }) => (
           <TableContainer
             description={
               <span className={styles.tableDescription}>
@@ -172,7 +148,6 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
               className={`${styles.invoiceTable} billingTable`}>
               <TableHead>
                 <TableRow>
-                  {rows.length > 1 && isSelectable ? <TableHeader /> : null}
                   {headers.map((header) => (
                     <TableHeader key={header.key}>{header.header}</TableHeader>
                   ))}
@@ -186,18 +161,6 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
                       {...getRowProps({
                         row,
                       })}>
-                      {rows.length > 1 && isSelectable && (
-                        <TableSelectRow
-                          aria-label="Select row"
-                          {...getSelectionProps({ row })}
-                          disabled={tableRows[index].status === 'PAID'}
-                          onChange={(checked: boolean) => handleRowSelection(row, checked)}
-                          checked={
-                            tableRows[index].status === 'PAID' ||
-                            Boolean(selectedLineItems?.find((item) => item?.uuid === row?.id))
-                          }
-                        />
-                      )}
                       {row.cells.map((cell) => (
                         <TableCell key={cell.id}>{cell.value}</TableCell>
                       ))}

package/src/invoice/invoice-table.test.tsx

@@ -110,17 +110,6 @@ describe('InvoiceTable', () => {
     expect(screen.getByText('Item 2')).toBeInTheDocument();
   });
 
-  it('correctly handles row selection', async () => {
-    const user = userEvent.setup();
-    const onSelectItem = jest.fn();
-    render(<InvoiceTable bill={bill} onSelectItem={onSelectItem} />);
-
-    const checkboxes = screen.getAllByLabelText('Select row');
-    await user.click(checkboxes[0]);
-
-    expect(onSelectItem).toHaveBeenCalledWith([bill.lineItems[0]]);
-  });
-
   it('resets isRedirecting to false after timeout', async () => {
     const user = userEvent.setup();
     render(<InvoiceTable bill={bill} />);

package/src/invoice/invoice.component.tsx

@@ -12,7 +12,6 @@ import PrintableInvoice from './printable-invoice/printable-invoice.component';
 import { ErrorState } from '@openmrs/esm-patient-common-lib';
 import { convertToCurrency } from '../helpers';
 import { useBill, useDefaultFacility } from '../billing.resource';
-import { type LineItem } from '../types';
 import type { BillingConfig } from '../config-schema';
 import styles from './invoice.scss';
 
@@ -28,13 +27,9 @@ const Invoice: React.FC = () => {
   const { patient, isLoading: isLoadingPatient } = usePatient(patientUuid);
   const { bill, isLoading: isLoadingBill, error, mutate } = useBill(billUuid);
   const [isPrinting, setIsPrinting] = useState(false);
-  const [selectedLineItems, setSelectedLineItems] = useState<LineItem[]>([]);
   const componentRef = useRef<HTMLDivElement>(null);
   const onBeforeGetContentResolve = useRef<(() => void) | null>(null);
   const { defaultCurrency } = useConfig<BillingConfig>();
-  const handleSelectItem = (lineItems: LineItem[]) => {
-    setSelectedLineItems(lineItems);
-  };
 
   const handleAfterPrint = useCallback(() => {
     onBeforeGetContentResolve.current = null;
@@ -66,11 +61,6 @@ const Invoice: React.FC = () => {
     }
   }, [isPrinting]);
 
-  useEffect(() => {
-    const unPaidLineItems = bill?.lineItems?.filter((item) => item.paymentStatus === 'PENDING') ?? [];
-    setSelectedLineItems(unPaidLineItems);
-  }, [bill?.lineItems]);
-
   // Do not remove this comment. Adds the translation keys for the invoice details
   /**
    * t('totalAmount', 'Total Amount')
@@ -130,12 +120,14 @@ const Invoice: React.FC = () => {
         </div>
       </div>
 
-      <InvoiceTable bill={bill} isLoadingBill={isLoadingBill} onSelectItem={handleSelectItem} />
-      <Payments bill={bill} mutate={mutate} selectedLineItems={selectedLineItems} />
+      <InvoiceTable bill={bill} isLoadingBill={isLoadingBill} />
+      <Payments bill={bill} mutate={mutate} />
 
-      <div className={styles.printContainer}>
-        <PrintableInvoice bill={bill} patient={patient} defaultFacility={data} componentRef={componentRef} />
-      </div>
+      {bill && patient && (
+        <div className={styles.printContainer}>
+          <PrintableInvoice bill={bill} patient={patient} defaultFacility={data} componentRef={componentRef} />
+        </div>
+      )}
     </div>
   );
 };

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

@@ -10,19 +10,12 @@ import styles from './payment-form.scss';
 
 type PaymentFormProps = {
   disablePayment: boolean;
-  clientBalance: number;
-  isSingleLineItemSelected: boolean;
   isSingleLineItem: boolean;
 };
 
 const DEFAULT_PAYMENT = { method: '', amount: 0, referenceCode: '' };
 
-const PaymentForm: React.FC<PaymentFormProps> = ({
-  disablePayment,
-  clientBalance,
-  isSingleLineItemSelected,
-  isSingleLineItem,
-}) => {
+const PaymentForm: React.FC<PaymentFormProps> = ({ disablePayment, isSingleLineItem }) => {
   const { t } = useTranslation();
   const {
     control,
@@ -119,7 +112,7 @@ const PaymentForm: React.FC<PaymentFormProps> = ({
           </div>
         ))}
       <Button
-        disabled={disablePayment || (!isSingleLineItem && !isSingleLineItemSelected)}
+        disabled={disablePayment}
         size="md"
         onClick={handleAppendPaymentMode}
         className={styles.paymentButtons}

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

@@ -31,12 +31,7 @@ describe('PaymentForm Component', () => {
 
     render(
       <Wrapper>
-        <PaymentForm
-          disablePayment={false}
-          clientBalance={100}
-          isSingleLineItemSelected={false}
-          isSingleLineItem={false}
-        />
+        <PaymentForm disablePayment={false} isSingleLineItem={false} />
       </Wrapper>,
     );
 
@@ -53,12 +48,7 @@ describe('PaymentForm Component', () => {
 
     render(
       <Wrapper>
-        <PaymentForm
-          disablePayment={false}
-          clientBalance={100}
-          isSingleLineItemSelected={false}
-          isSingleLineItem={false}
-        />
+        <PaymentForm disablePayment={false} isSingleLineItem={false} />
       </Wrapper>,
     );
 
@@ -75,12 +65,7 @@ describe('PaymentForm Component', () => {
 
     render(
       <Wrapper>
-        <PaymentForm
-          disablePayment={false}
-          clientBalance={100}
-          isSingleLineItemSelected={false}
-          isSingleLineItem={true}
-        />
+        <PaymentForm disablePayment={false} isSingleLineItem={true} />
       </Wrapper>,
     );
 
@@ -103,12 +88,7 @@ describe('PaymentForm Component', () => {
 
     render(
       <Wrapper>
-        <PaymentForm
-          disablePayment={false}
-          clientBalance={100}
-          isSingleLineItemSelected={true}
-          isSingleLineItem={false}
-        />
+        <PaymentForm disablePayment={false} isSingleLineItem={false} />
       </Wrapper>,
     );
 
@@ -128,12 +108,7 @@ describe('PaymentForm Component', () => {
 
     render(
       <Wrapper>
-        <PaymentForm
-          disablePayment={true}
-          clientBalance={100}
-          isSingleLineItemSelected={true}
-          isSingleLineItem={false}
-        />
+        <PaymentForm disablePayment={true} isSingleLineItem={false} />
       </Wrapper>,
     );
 
@@ -151,12 +126,7 @@ describe('PaymentForm Component', () => {
 
     render(
       <Wrapper>
-        <PaymentForm
-          disablePayment={false}
-          clientBalance={100}
-          isSingleLineItemSelected={true}
-          isSingleLineItem={false}
-        />
+        <PaymentForm disablePayment={false} isSingleLineItem={false} />
       </Wrapper>,
     );
 

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}

@@ -108,14 +108,14 @@ describe('Payments', () => {
   });
 
   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();
@@ -123,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/printable-invoice-header.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type PatientDetails } from '../../types';
-import { type SessionLocation, useConfig } from '@openmrs/esm-framework';
+import { type SessionLocation, useConfig, interpolateUrl } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import type { BillingConfig } from '../../config-schema';
 import styles from './printable-invoice-header.scss';
@@ -20,7 +20,7 @@ const PrintableInvoiceHeader: React.FC<PrintableInvoiceHeaderProps> = ({ patient
       <div className={styles.printableHeader}>
         <p className={styles.heading}>{t('invoice', 'Invoice')}</p>
         {logo?.src && !isEmpty(logo.src) ? (
-          <img className={styles.img} src={logo.src} alt={logo.alt} />
+          <img className={styles.img} src={interpolateUrl(logo.src)} alt={logo.alt} />
         ) : logo?.alt && !isEmpty(logo.alt) ? (
           logo.alt
         ) : (

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

@@ -39,7 +39,7 @@ const PrintableInvoice: React.FC<PrintableInvoiceProps> = ({ bill, patient, comp
     bill?.lineItems?.map((item) => {
       return {
         id: `${item.uuid}`,
-        billItem: item.item,
+        billItem: item.billableService ?? item.item,
         quantity: item.quantity,
         price: item.price,
         total: item.price * item.quantity,

package/translations/en.json

@@ -54,7 +54,6 @@
   "cashPointUuidPlaceholder": "Enter UUID",
   "checkFilters": "Check the filters above",
   "clearSearchInput": "Clear search input",
-  "clientBalance": "Client Balance",
   "confirmDeleteMessage": "Are you sure you want to delete this payment mode? Proceed cautiously.",
   "createdSuccessfully": "Billable service created successfully",
   "currentPrice": "Current price",