@openmrs/esm-billing-app 1.1.1 → 1.1.2-pre.1

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

@@ -31,6 +31,7 @@ import {
   type LayoutType,
 } from '@openmrs/esm-framework';
 import { usePaginatedBills } from '../billing.resource';
+import { BillStatus } from '../types';
 import type { MappedBill } from '../types';
 import type { BillingConfig } from '../config-schema';
 import styles from './bills-table.scss';
@@ -42,9 +43,9 @@ interface BillDisplayItem extends Omit<MappedBill, 'id'> {
 }
 
 interface BillPaymentStatusFilterItem {
-  id: string;
+  id: BillStatus | '';
   text: string;
-  status: string;
+  status: BillStatus | '';
 }
 
 const mapLineItems = (bill: MappedBill) =>
@@ -64,13 +65,20 @@ const BillsTable: React.FC = () => {
   const billPaymentStatusFilterItems: BillPaymentStatusFilterItem[] = useMemo(
     () => [
       { id: '', text: t('allBills', 'All bills'), status: '' },
-      { id: 'PENDING', text: t('pendingBills', 'Pending bills'), status: 'PENDING,POSTED' },
-      { id: 'PAID', text: t('paidBills', 'Paid bills'), status: 'PAID' },
+      {
+        id: BillStatus.PENDING,
+        text: t('pendingConfirmationBills', 'Pending confirmation'),
+        status: BillStatus.PENDING,
+      },
+      { id: BillStatus.POSTED, text: t('pendingPaymentBills', 'Pending payment'), status: BillStatus.POSTED },
+      { id: BillStatus.PAID, text: t('paidBills', 'Paid bills'), status: BillStatus.PAID },
     ],
     [t],
   );
+
+  // Default to 'POSTED' (pending payment) so cashiers see bills awaiting payment on load
   const [billPaymentStatus, setBillPaymentStatus] = useState<BillPaymentStatusFilterItem>(
-    billPaymentStatusFilterItems[1],
+    () => billPaymentStatusFilterItems.find((item) => item.id === BillStatus.POSTED) ?? billPaymentStatusFilterItems[0],
   );
   const [searchString, setSearchString] = useState('');
   const debouncedSearchString = useDebounce(searchString, 500);
@@ -127,9 +135,6 @@ const BillsTable: React.FC = () => {
     return mappedBills;
   }, [bills]);
 
-  // Server-side search is now handled by the API, so we just use the bills directly
-  const searchResults = billList;
-
   // Check if user has applied any filters (not "All bills") or search
   const hasActiveFiltersOrSearch = searchString.trim() !== '' || billPaymentStatus.id !== '';
 
@@ -156,7 +161,6 @@ const BillsTable: React.FC = () => {
           className={styles.filterDropdown}
           direction="bottom"
           id="bill-payment-status-filter"
-          initialSelectedItem={billPaymentStatusFilterItems[1]}
           selectedItem={billPaymentStatus}
           items={billPaymentStatusFilterItems}
           itemToString={(item: BillPaymentStatusFilterItem) => (item ? item.text : '')}
@@ -196,10 +200,10 @@ const BillsTable: React.FC = () => {
           />
           <DataTable
             isSortable
-            rows={searchResults}
+            rows={billList}
             headers={headerData}
             size={responsiveSize}
-            useZebraStyles={searchResults?.length > 1 ? true : false}>
+            useZebraStyles={billList?.length > 1 ? true : false}>
             {({ rows, headers, getRowProps, getTableProps }) => (
               <TableContainer>
                 <Table {...getTableProps()} aria-label={t('billList', 'Bill list')}>
@@ -227,7 +231,7 @@ const BillsTable: React.FC = () => {
               </TableContainer>
             )}
           </DataTable>
-          {searchResults?.length === 0 && (
+          {billList?.length === 0 && (
             <div className={styles.filterEmptyState}>
               <Layer level={0}>
                 <Tile className={styles.filterEmptyStateTile}>

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

@@ -2,6 +2,7 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen, waitFor } from '@testing-library/react';
 import { usePaginatedBills } from '../billing.resource';
+import { BillStatus } from '../types';
 import BillsTable from './bills-table.component';
 
 jest.mock('../billing.resource', () => ({
@@ -42,7 +43,7 @@ const mockBillsData = [
         paymentStatus: 'PENDING',
       },
     ],
-    status: 'PENDING',
+    status: BillStatus.PENDING,
     cashPointUuid: 'cash-point-1',
     cashPointName: 'Main Cash Point',
     cashPointLocation: 'Main Hospital',
@@ -78,7 +79,7 @@ const mockBillsData = [
         paymentStatus: 'PENDING',
       },
     ],
-    status: 'PENDING',
+    status: BillStatus.PENDING,
     cashPointUuid: 'cash-point-1',
     cashPointName: 'Main Cash Point',
     cashPointLocation: 'Main Hospital',
@@ -151,7 +152,7 @@ describe('BillsTable', () => {
 
     expect(screen.getByRole('progressbar')).toBeInTheDocument();
     expect(screen.getByText(/filter by/i)).toBeInTheDocument();
-    expect(screen.getByText(/pending bills/i)).toBeInTheDocument();
+    expect(screen.getByText(/pending payment/i)).toBeInTheDocument();
   });
 
   test('should display an error state if there is a problem loading bill data', () => {
@@ -171,7 +172,7 @@ describe('BillsTable', () => {
     expect(screen.getByText(/error state/i)).toBeInTheDocument();
     expect(screen.queryByRole('table')).not.toBeInTheDocument();
     expect(screen.getByText(/filter by/i)).toBeInTheDocument();
-    expect(screen.getByText(/pending bills/i)).toBeInTheDocument();
+    expect(screen.getByText(/pending payment/i)).toBeInTheDocument();
   });
 
   test('should pass search term to backend API', async () => {
@@ -200,7 +201,7 @@ describe('BillsTable', () => {
     await user.type(searchInput, 'John');
 
     await waitFor(() => {
-      expect(mockBills).toHaveBeenCalledWith(10, 'PENDING,POSTED', 'John');
+      expect(mockBills).toHaveBeenCalledWith(10, 'POSTED', 'John');
     });
 
     expect(mockGoTo).toHaveBeenCalledWith(1);
@@ -220,7 +221,7 @@ describe('BillsTable', () => {
 
     // First call: initial render with PENDING filter (default)
     mockBills.mockImplementationOnce(() => ({
-      bills: mockBillsData.map((bill) => ({ ...bill, status: 'PENDING' })),
+      bills: mockBillsData.map((bill) => ({ ...bill, status: BillStatus.PENDING })),
       isLoading: false,
       isValidating: false,
       error: null,
@@ -244,7 +245,7 @@ describe('BillsTable', () => {
 
     render(<BillsTable />);
 
-    const filterDropdown = screen.getByText('Pending bills');
+    const filterDropdown = screen.getByText('Pending payment');
     await user.click(filterDropdown);
 
     const paidBillsOption = screen.getAllByText('Paid bills')[0];
@@ -325,6 +326,82 @@ describe('BillsTable', () => {
     });
   });
 
+  test('should default to "Pending payment" filter showing POSTED bills', () => {
+    render(<BillsTable />);
+
+    expect(screen.getByText('Pending payment')).toBeInTheDocument();
+    expect(mockBills).toHaveBeenCalledWith(expect.any(Number), 'POSTED', undefined);
+  });
+
+  test('should show "Pending confirmation" option in filter dropdown', async () => {
+    const user = userEvent.setup();
+    render(<BillsTable />);
+
+    const filterDropdown = screen.getByText('Pending payment');
+    await user.click(filterDropdown);
+
+    expect(screen.getByRole('option', { name: /pending confirmation/i })).toBeInTheDocument();
+  });
+
+  test('should filter by PENDING status when "Pending confirmation" is selected', async () => {
+    const user = userEvent.setup();
+    const mockGoTo = jest.fn();
+
+    mockBills.mockImplementation((_pageSize, status) => ({
+      bills: status === 'PENDING' ? [mockBillsData[0]] : mockBillsData,
+      isLoading: false,
+      isValidating: false,
+      error: null,
+      mutate: jest.fn(),
+      currentPage: 1,
+      totalCount: status === 'PENDING' ? 1 : 2,
+      goTo: mockGoTo,
+    }));
+
+    render(<BillsTable />);
+
+    const filterDropdown = screen.getByText('Pending payment');
+    await user.click(filterDropdown);
+
+    await user.click(screen.getByRole('option', { name: /pending confirmation/i }));
+
+    await waitFor(() => {
+      expect(mockBills).toHaveBeenCalledWith(expect.any(Number), 'PENDING', undefined);
+    });
+  });
+
+  test('should filter by POSTED status when "Pending payment" is selected', async () => {
+    const user = userEvent.setup();
+    const mockGoTo = jest.fn();
+
+    mockBills.mockImplementation((_pageSize, status) => ({
+      bills: status === 'POSTED' ? [mockBillsData[1]] : mockBillsData,
+      isLoading: false,
+      isValidating: false,
+      error: null,
+      mutate: jest.fn(),
+      currentPage: 1,
+      totalCount: 1,
+      goTo: mockGoTo,
+    }));
+
+    render(<BillsTable />);
+
+    // Navigate away from the default POSTED filter first, then select it again
+    const filterDropdown = screen.getByText('Pending payment');
+    await user.click(filterDropdown);
+    await user.click(screen.getByRole('option', { name: /all bills/i }));
+
+    mockBills.mockClear();
+
+    await user.click(screen.getByText('All bills'));
+    await user.click(screen.getByRole('option', { name: /pending payment/i }));
+
+    await waitFor(() => {
+      expect(mockBills).toHaveBeenCalledWith(expect.any(Number), 'POSTED', undefined);
+    });
+  });
+
   test('should keep data visible during subsequent loads', () => {
     mockBills.mockImplementationOnce(() => ({
       bills: mockBillsData,

package/src/index.ts

@@ -130,3 +130,8 @@ export const deleteLineItemConfirmationModal = getAsyncLifecycle(
   () => import('./modal/delete-line-item-confirmation.modal'),
   options,
 );
+
+export const finalizeBillConfirmationModal = getAsyncLifecycle(
+  () => import('./modal/finalize-bill-confirmation.modal'),
+  options,
+);

package/src/invoice/invoice.component.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, InlineLoading } from '@carbon/react';
-import { Printer } from '@carbon/react/icons';
+import { Add, Printer } from '@carbon/react/icons';
 import { useParams } from 'react-router-dom';
 import { useReactToPrint } from 'react-to-print';
 import { useTranslation } from 'react-i18next';
@@ -8,7 +8,9 @@ import {
   ErrorState,
   ExtensionSlot,
   formatDate,
+  launchWorkspace2,
   parseDate,
+  showModal,
   showSnackbar,
   useConfig,
   usePatient,
@@ -20,6 +22,7 @@ import InvoiceTable from './invoice-table.component';
 import Payments from './payments/payments.component';
 import PrintReceipt from './printable-invoice/print-receipt.component';
 import PrintableInvoice from './printable-invoice/printable-invoice.component';
+import { BillStatus } from '../types';
 import styles from './invoice.scss';
 
 interface InvoiceDetailsProps {
@@ -52,6 +55,14 @@ const Invoice: React.FC = () => {
     });
   }, [bill, patient]);
 
+  const handleFinalizeBill = () => {
+    const dispose = showModal('finalize-bill-confirmation-modal', {
+      bill,
+      onMutate: mutate,
+      closeModal: () => dispose(),
+    });
+  };
+
   const handlePrint = useReactToPrint({
     contentRef: componentRef,
     documentTitle: `Invoice ${bill?.receiptNumber} - ${patient?.name?.[0]?.given?.join(' ')} ${patient?.name?.[0].family}`,
@@ -112,27 +123,46 @@ const Invoice: React.FC = () => {
   return (
     <div className={styles.invoiceContainer}>
       {patient && patientUuid && <ExtensionSlot name="patient-header-slot" state={{ patient, patientUuid }} />}
+      <div className={styles.actionsContainer}>
+        {isValidating && (
+          <span>
+            <InlineLoading status="active" />
+          </span>
+        )}
+        {bill?.status === BillStatus.PENDING && (
+          <>
+            <Button
+              kind="ghost"
+              renderIcon={Add}
+              onClick={() =>
+                launchWorkspace2('billing-form-workspace', {
+                  patientUuid,
+                  billUuid: bill.uuid,
+                  onMutate: mutate,
+                })
+              }>
+              {t('addItemsToBill', 'Add items to bill')}
+            </Button>
+            <Button kind="primary" onClick={handleFinalizeBill}>
+              {t('finalizeBill', 'Finalize bill')}
+            </Button>
+          </>
+        )}
+        <Button
+          disabled={isPrinting || isLoadingPatient || isLoadingBill}
+          onClick={handlePrint}
+          renderIcon={(props) => <Printer size={24} {...props} />}
+          iconDescription={t('printBill', 'Print bill')}>
+          {t('printBill', 'Print bill')}
+        </Button>
+        {bill && (bill.status === BillStatus.PAID || bill.tenderedAmount > 0) && <PrintReceipt billUuid={bill.uuid} />}
+      </div>
       <div className={styles.detailsContainer}>
         <section className={styles.details}>
           {Object.entries(invoiceDetails).map(([key, val]) => (
             <InvoiceDetails key={key} label={key} value={val} />
           ))}
         </section>
-        <div className={styles.actionsContainer}>
-          {isValidating && (
-            <span>
-              <InlineLoading status="active" />
-            </span>
-          )}
-          <Button
-            disabled={isPrinting || isLoadingPatient || isLoadingBill}
-            onClick={handlePrint}
-            renderIcon={(props) => <Printer size={24} {...props} />}
-            iconDescription={t('printBill', 'Print bill')}>
-            {t('printBill', 'Print bill')}
-          </Button>
-          {(bill?.status === 'PAID' || bill?.tenderedAmount > 0) && <PrintReceipt billUuid={bill?.uuid} />}
-        </div>
       </div>
 
       <div className={styles.invoiceContent}>

package/src/invoice/invoice.scss

@@ -17,6 +17,14 @@
   justify-content: center;
 }
 
+.actionsContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: layout.$spacing-03;
+  padding: layout.$spacing-04 layout.$spacing-05;
+}
+
 .detailsContainer {
   display: flex;
 }
@@ -27,17 +35,10 @@
   flex-flow: row wrap;
   align-items: center;
   justify-content: space-between;
-  margin: layout.$spacing-05;
+  margin: layout.$spacing-05 layout.$spacing-06;
   row-gap: layout.$spacing-06;
 }
 
-.actionsContainer {
-  display: flex;
-  align-items: center;
-  gap: layout.$spacing-03;
-  margin: layout.$spacing-05;
-}
-
 .label {
   @include type.type-style('body-compact-02');
   color: colors.$gray-70;

package/src/invoice/invoice.test.tsx

@@ -2,8 +2,15 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen, waitFor } from '@testing-library/react';
 import { useReactToPrint } from 'react-to-print';
-import { getDefaultsFromConfigSchema, useConfig, usePatient } from '@openmrs/esm-framework';
+import {
+  getDefaultsFromConfigSchema,
+  launchWorkspace2,
+  showModal,
+  useConfig,
+  usePatient,
+} from '@openmrs/esm-framework';
 import { configSchema, type BillingConfig } from '../config-schema';
+import { BillStatus } from '../types';
 import { mockBill, mockPatient } from 'mocks/bills.mock';
 import { useBill } from '../billing.resource';
 import { usePaymentModes } from './payments/payment.resource';
@@ -15,6 +22,7 @@ const mockUseBill = jest.mocked(useBill);
 const mockUsePatient = jest.mocked(usePatient);
 const mockUsePaymentModes = jest.mocked(usePaymentModes);
 const mockUseReactToPrint = jest.mocked(useReactToPrint);
+const mockShowModal = jest.mocked(showModal);
 
 jest.mock('../helpers/functions', () => ({
   convertToCurrency: jest.fn((amount) => `USD ${amount}`),
@@ -62,7 +70,7 @@ describe('Invoice', () => {
   const defaultBillData = {
     ...mockBill,
     uuid: 'test-uuid',
-    status: 'PENDING',
+    status: BillStatus.PENDING,
     totalAmount: 1000,
     tenderedAmount: 0,
     receiptNumber: 'RCPT-001',
@@ -188,7 +196,7 @@ describe('Invoice', () => {
     mockUseBill.mockReturnValue({
       bill: {
         ...defaultBillData,
-        status: 'PAID',
+        status: BillStatus.PAID,
         tenderedAmount: 1000,
       },
       isLoading: false,
@@ -207,7 +215,7 @@ describe('Invoice', () => {
     mockUseBill.mockReturnValue({
       bill: {
         ...defaultBillData,
-        status: 'PENDING',
+        status: BillStatus.PENDING,
         tenderedAmount: 500,
       },
       isLoading: false,
@@ -336,7 +344,7 @@ describe('Invoice', () => {
 
     const updatedBill = {
       ...defaultBillData,
-      status: 'PAID',
+      status: BillStatus.PAID,
       tenderedAmount: 1000,
     };
 
@@ -456,7 +464,7 @@ describe('Invoice', () => {
     mockUseBill.mockReturnValue({
       bill: {
         ...defaultBillData,
-        status: 'PENDING',
+        status: BillStatus.PENDING,
         totalAmount: 1000,
         tenderedAmount: 500, // Partial payment
       },
@@ -485,7 +493,7 @@ describe('Invoice', () => {
     mockUseBill.mockReturnValue({
       bill: {
         ...defaultBillData,
-        status: 'PENDING',
+        status: BillStatus.PENDING,
         tenderedAmount: 0,
       },
       isLoading: false,
@@ -499,4 +507,117 @@ describe('Invoice', () => {
 
     expect(screen.queryByTestId('mock-print-receipt')).not.toBeInTheDocument();
   });
+
+  it('should show "Add items to bill" button for PENDING bills', async () => {
+    render(<Invoice />);
+    await waitForLoadingToFinish();
+
+    expect(screen.getByRole('button', { name: /add items to bill/i })).toBeInTheDocument();
+  });
+
+  it('should not show "Add items to bill" button for PAID bills', async () => {
+    mockUseBill.mockReturnValue({
+      bill: {
+        ...defaultBillData,
+        status: BillStatus.PAID,
+        tenderedAmount: 1000,
+      },
+      isLoading: false,
+      error: null,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
+
+    render(<Invoice />);
+    await waitForLoadingToFinish();
+
+    expect(screen.queryByRole('button', { name: /add items to bill/i })).not.toBeInTheDocument();
+  });
+
+  it('should show "Finalize bill" button for PENDING bills', async () => {
+    render(<Invoice />);
+    await waitForLoadingToFinish();
+
+    expect(screen.getByRole('button', { name: /finalize bill/i })).toBeInTheDocument();
+  });
+
+  it('should not show "Finalize bill" button for POSTED bills', async () => {
+    mockUseBill.mockReturnValue({
+      bill: { ...defaultBillData, status: BillStatus.POSTED },
+      isLoading: false,
+      error: null,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
+
+    render(<Invoice />);
+    await waitForLoadingToFinish();
+
+    expect(screen.queryByRole('button', { name: /finalize bill/i })).not.toBeInTheDocument();
+  });
+
+  it('should not show "Finalize bill" button for PAID bills', async () => {
+    mockUseBill.mockReturnValue({
+      bill: { ...defaultBillData, status: BillStatus.PAID, tenderedAmount: 1000 },
+      isLoading: false,
+      error: null,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
+
+    render(<Invoice />);
+    await waitForLoadingToFinish();
+
+    expect(screen.queryByRole('button', { name: /finalize bill/i })).not.toBeInTheDocument();
+  });
+
+  it('should open finalize confirmation modal when "Finalize bill" button is clicked', async () => {
+    const mockMutate = jest.fn();
+    const user = userEvent.setup();
+
+    mockUseBill.mockReturnValue({
+      bill: defaultBillData,
+      isLoading: false,
+      error: null,
+      isValidating: false,
+      mutate: mockMutate,
+    });
+
+    render(<Invoice />);
+    await waitForLoadingToFinish();
+
+    await user.click(screen.getByRole('button', { name: /finalize bill/i }));
+
+    expect(mockShowModal).toHaveBeenCalledWith('finalize-bill-confirmation-modal', {
+      bill: defaultBillData,
+      onMutate: mockMutate,
+      closeModal: expect.any(Function),
+    });
+  });
+
+  it('should launch workspace with billUuid when "Add items to bill" is clicked', async () => {
+    const mockMutate = jest.fn();
+    const mockLaunchWorkspace2 = jest.mocked(launchWorkspace2);
+
+    mockUseBill.mockReturnValue({
+      bill: defaultBillData,
+      isLoading: false,
+      error: null,
+      isValidating: false,
+      mutate: mockMutate,
+    });
+
+    const user = userEvent.setup();
+    render(<Invoice />);
+    await waitForLoadingToFinish();
+
+    const addItemsButton = screen.getByRole('button', { name: /add items to bill/i });
+    await user.click(addItemsButton);
+
+    expect(mockLaunchWorkspace2).toHaveBeenCalledWith('billing-form-workspace', {
+      patientUuid: 'patientUuid',
+      billUuid: 'test-uuid',
+      onMutate: mockMutate,
+    });
+  });
 });

package/src/invoice/line-item-action-menu.component.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { Layer, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { getCoreTranslation, isDesktop, showModal, useLayoutType } from '@openmrs/esm-framework';
-import { type LineItem, type MappedBill } from '../types';
+import { BillStatus, type LineItem, type MappedBill } from '../types';
 import styles from './line-item-action-menu.scss';
 
 type LineItemActionMenuProps = {
@@ -30,7 +30,7 @@ const LineItemActionMenu: React.FC<LineItemActionMenuProps> = ({ bill, item, onM
     });
   }, [item, onMutate]);
 
-  const isPending = bill?.status === 'PENDING';
+  const isPending = bill?.status === BillStatus.PENDING;
 
   return (
     <Layer>

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

@@ -11,7 +11,7 @@ import PaymentHistory from './payment-history/payment-history.component';
 import { processBillPayment } from '../../billing.resource';
 import { updateBillVisitAttribute } from './payment.resource';
 import { convertToCurrency } from '../../helpers';
-import type { MappedBill } from '../../types';
+import { BillStatus, type MappedBill } from '../../types';
 import styles from './payments.scss';
 
 type PaymentProps = {
@@ -113,7 +113,7 @@ const Payments: React.FC<PaymentProps> = ({ bill, mutate }) => {
           </CardHeader>
           <div>
             <PaymentHistory bill={bill} />
-            <PaymentForm disablePayment={amountDue <= 0} />
+            <PaymentForm disablePayment={amountDue <= 0 || bill.status === BillStatus.PENDING} />
           </div>
         </div>
         <div className={styles.divider} />

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

@@ -9,7 +9,7 @@ import {
   type VisitReturnType,
 } from '@openmrs/esm-framework';
 import { useBillableServices } from '../../billable-services/billable-service.resource';
-import { type MappedBill } from '../../types';
+import { BillStatus, type MappedBill } from '../../types';
 import { configSchema, type BillingConfig } from '../../config-schema';
 import { usePaymentModes } from './payment.resource';
 import Payments from './payments.component';
@@ -102,7 +102,7 @@ describe('Payments', () => {
       },
     ],
     receiptNumber: '12345',
-    status: 'PAID',
+    status: BillStatus.PAID,
     identifier: 'invoice-123',
     dateCreated: '2023-09-01T12:00:00Z',
     lineItems: [],
@@ -224,6 +224,34 @@ describe('Payments', () => {
     expect(screen.queryByPlaceholderText(/enter amount/i)).not.toBeInTheDocument();
   });
 
+  it('should not show payment form when bill is in PENDING state', () => {
+    const pendingBill: MappedBill = {
+      ...mockBill,
+      status: BillStatus.PENDING,
+      totalAmount: 100,
+      tenderedAmount: 0,
+    };
+
+    render(<Payments bill={pendingBill} mutate={mockMutate} />);
+
+    expect(screen.queryByPlaceholderText(/enter amount/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/select payment method/i)).not.toBeInTheDocument();
+  });
+
+  it('should show payment form when bill is in POSTED state', () => {
+    const postedBill: MappedBill = {
+      ...mockBill,
+      status: BillStatus.POSTED,
+      totalAmount: 100,
+      tenderedAmount: 0,
+    };
+
+    render(<Payments bill={postedBill} mutate={mockMutate} />);
+
+    expect(screen.getByPlaceholderText(/enter amount/i)).toBeInTheDocument();
+    expect(screen.getByText(/select payment method/i)).toBeInTheDocument();
+  });
+
   it('should return null when bill is not provided', () => {
     const { container } = render(<Payments bill={null} mutate={mockMutate} />);
     expect(container).toBeEmptyDOMElement();
@@ -232,6 +260,7 @@ describe('Payments', () => {
   it('should show payment form when there is amount due', () => {
     const billWithAmountDue: MappedBill = {
       ...mockBill,
+      status: BillStatus.POSTED,
       totalAmount: 100,
       tenderedAmount: 0,
       lineItems: [],