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

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
@@ -25,6 +25,7 @@ import {
   EmptyCardIllustration,
   ErrorState,
   formatDate,
+  getCoreTranslation,
   launchWorkspace2,
   parseDate,
   useConfig,
@@ -33,7 +34,9 @@ import {
 } from '@openmrs/esm-framework';
 import { useBills } from '../billing.resource';
 import { convertToCurrency } from '../helpers';
+import BillActionMenu from './bill-action-menu.component';
 import InvoiceTable from '../invoice/invoice-table.component';
+import { BillStatus } from '../types';
 import styles from './bill-history.scss';
 
 interface BillHistoryProps {
@@ -47,6 +50,7 @@ const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
   const { pageSize, defaultCurrency } = useConfig();
   const [currentPageSize, setCurrentPageSize] = useState(pageSize);
   const { pageSizes } = usePaginationInfo(pageSize, bills?.length, currentPage, results?.length);
+  const billsByUuid = useMemo(() => new Map(bills?.map((bill) => [bill.uuid, bill])), [bills]);
 
   const headerData = [
     {
@@ -116,7 +120,7 @@ const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
               })
             }
             kind="ghost">
-            {t('addBillItems', 'Add bill items')}
+            {t('createBill', 'Create bill')}
           </Button>
         </Tile>
       </Layer>
@@ -140,7 +144,7 @@ const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
             })
           }
           renderIcon={Add}>
-          {t('addBillItems', 'Add bill items')}
+          {t('createBill', 'Create bill')}
         </Button>
       </CardHeader>
       <div className={styles.billHistoryContainer}>
@@ -168,11 +172,12 @@ const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
                         {header.header}
                       </TableHeader>
                     ))}
+                    <TableHeader aria-label={getCoreTranslation('actions')} />
                   </TableRow>
                 </TableHead>
                 <TableBody>
                   {rows.map((row, i) => {
-                    const currentBill = bills?.find((bill) => bill.uuid === row.id);
+                    const currentBill = billsByUuid.get(row.id);
 
                     return (
                       <React.Fragment key={row.id}>
@@ -182,9 +187,14 @@ const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
                               {cell.value}
                             </TableCell>
                           ))}
+                          <TableCell className="cds--table-column-menu">
+                            {currentBill?.status === BillStatus.PENDING && (
+                              <BillActionMenu bill={currentBill} patientUuid={patientUuid} onMutate={mutate} />
+                            )}
+                          </TableCell>
                         </TableExpandRow>
                         {row.isExpanded ? (
-                          <TableExpandedRow colSpan={headers.length + 1}>
+                          <TableExpandedRow colSpan={headers.length + 2}>
                             <div className={styles.container} key={i}>
                               <InvoiceTable bill={currentBill} onMutate={mutate} isLoadingBill={isValidating} />
                             </div>

package/src/bill-history/bill-history.scss

@@ -55,7 +55,6 @@
 
 .table {
   width: 100%;
-  table-layout: fixed; // This helps with uniform column sizing
   border-collapse: collapse;
 
   td:has(:global(.billingTable)) {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { getDefaultsFromConfigSchema, launchWorkspace2, useConfig } from '@openmrs/esm-framework';
 import { configSchema, type BillingConfig } from '../config-schema';
 import { useBills } from '../billing.resource';
 import BillHistory from './bill-history.component';
@@ -120,4 +120,81 @@ describe('BillHistory', () => {
     const emptyState = screen.getByText(/There are no bills to display./);
     expect(emptyState).toBeInTheDocument();
   });
+
+  test('should show overflow menu with "Add items to bill" for PENDING bills', async () => {
+    const user = userEvent.setup();
+    const pendingBill = {
+      ...mockBillData[0],
+      status: 'PENDING',
+      dateCreated: '2024-01-01',
+      receiptNumber: 'REC-001',
+      lineItems: [{ uuid: 'item-1', item: 'Test', quantity: 1, price: 100, paymentStatus: 'PENDING' }],
+    };
+    mockUseBills.mockReturnValueOnce({
+      isLoading: false,
+      isValidating: false,
+      error: null,
+      bills: [pendingBill] as any,
+      mutate: jest.fn(),
+    });
+    render(<BillHistory {...testProps} />);
+
+    const overflowMenu = screen.getByTestId('action-menu-1');
+    await user.click(overflowMenu);
+
+    expect(screen.getByText(/add items to bill/i)).toBeInTheDocument();
+  });
+
+  test('should not show overflow menu for PAID bills', () => {
+    const paidBill = {
+      ...mockBillData[0],
+      status: 'PAID',
+      dateCreated: '2024-01-01',
+      receiptNumber: 'REC-001',
+      lineItems: [{ uuid: 'item-1', item: 'Test', quantity: 1, price: 100, paymentStatus: 'PAID' }],
+    };
+    mockUseBills.mockReturnValueOnce({
+      isLoading: false,
+      isValidating: false,
+      error: null,
+      bills: [paidBill] as any,
+      mutate: jest.fn(),
+    });
+    render(<BillHistory {...testProps} />);
+
+    expect(screen.queryByTestId('action-menu-1')).not.toBeInTheDocument();
+  });
+
+  test('should launch workspace with billUuid when "Add items to bill" is clicked', async () => {
+    const user = userEvent.setup();
+    const mockMutate = jest.fn();
+    const mockLaunchWorkspace2 = jest.mocked(launchWorkspace2);
+    const pendingBill = {
+      ...mockBillData[0],
+      status: 'PENDING',
+      dateCreated: '2024-01-01',
+      receiptNumber: 'REC-001',
+      lineItems: [{ uuid: 'item-1', item: 'Test', quantity: 1, price: 100, paymentStatus: 'PENDING' }],
+    };
+    mockUseBills.mockReturnValueOnce({
+      isLoading: false,
+      isValidating: false,
+      error: null,
+      bills: [pendingBill] as any,
+      mutate: mockMutate,
+    });
+    render(<BillHistory {...testProps} />);
+
+    const overflowMenu = screen.getByTestId('action-menu-1');
+    await user.click(overflowMenu);
+
+    const addItemsMenuItem = screen.getByText(/add items to bill/i);
+    await user.click(addItemsMenuItem);
+
+    expect(mockLaunchWorkspace2).toHaveBeenCalledWith('billing-form-workspace', {
+      patientUuid: 'some-uuid',
+      billUuid: '1',
+      onMutate: mockMutate,
+    });
+  });
 });

package/src/bill-item-actions/edit-bill-item.modal.tsx

@@ -55,7 +55,7 @@ const EditBillLineItemModal: React.FC<EditBillLineItemModalProps> = ({ bill, clo
             required_error: t('priceIsRequired', 'Price is required'),
             invalid_type_error: t('priceMustBeNumber', 'Price must be a valid number'),
           })
-          .positive(t('priceMustBePositive', 'Price must be greater than 0')),
+          .min(0, t('priceMustBeNonNegative', 'Price must be 0 or greater')),
       }),
     [t],
   );

package/src/bill-item-actions/edit-bill-item.test.tsx

@@ -334,6 +334,46 @@ describe('EditBillItem', () => {
     });
   });
 
+  test('allows updating the quantity of a zero-price (free) service while keeping price at zero', async () => {
+    const user = userEvent.setup();
+    mockUpdateBillItems.mockResolvedValueOnce({} as FetchResponse<any>);
+
+    const freeServiceItem = { ...mockItem, price: 0 };
+    const billWithFreeItem: MappedBill = {
+      ...mockBill,
+      lineItems: [{ ...mockBill.lineItems[0], price: 0 }],
+    };
+
+    render(
+      <EditBillLineItemModal
+        bill={billWithFreeItem}
+        item={freeServiceItem}
+        closeModal={mockCloseModal}
+        onMutate={mockOnMutate}
+      />,
+    );
+
+    expect(screen.getByLabelText(/unit price/i)).toHaveValue('0');
+
+    const quantityInput = screen.getByRole('spinbutton', { name: /quantity/i });
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '5');
+
+    expect(screen.getByText(/total/i)).toHaveTextContent(/0/);
+
+    await user.click(screen.getByText(/save/i));
+
+    await waitFor(() => {
+      expect(mockUpdateBillItems).toHaveBeenCalled();
+      const payload = mockUpdateBillItems.mock.calls[0][0];
+      const updatedItem = payload.lineItems.find((li) => li.uuid === freeServiceItem.uuid);
+      expect(updatedItem?.quantity).toBe(5);
+      expect(updatedItem?.price).toBe(0);
+      expect(mockShowSnackbar).toHaveBeenCalledWith(expect.objectContaining({ kind: 'success' }));
+      expect(mockCloseModal).toHaveBeenCalled();
+    });
+  });
+
   test('shows validation error when quantity field is left empty', async () => {
     const user = userEvent.setup();
     render(

package/src/billable-services/bill-waiver/bill-waiver.component.tsx

@@ -2,13 +2,15 @@ import React, { useState } from 'react';
 import { ExtensionSlot, UserHasAccess } from '@openmrs/esm-framework';
 import { useBills } from '../../billing.resource';
 import PatientBills from './patient-bills.component';
+import { BillStatus } from '../../types';
 import styles from './bill-waiver.scss';
 
 const BillWaiver: React.FC = () => {
   const [patientUuid, setPatientUuid] = useState<string>('');
   const { bills } = useBills(patientUuid);
 
-  const filterBills = bills.filter((bill) => bill?.status !== 'PAID' && patientUuid === bill.patientUuid) ?? [];
+  const filterBills =
+    bills.filter((bill) => bill?.status !== BillStatus.PAID && patientUuid === bill.patientUuid) ?? [];
 
   return (
     <UserHasAccess privilege="coreapps.systemAdministration">

package/src/billing-dashboard/billing-dashboard.component.tsx

@@ -1,27 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'react-router-dom';
-import dayjs from 'dayjs';
 import BillingHeader from '../billing-header/billing-header.component';
 import BillsTable from '../bills-table/bills-table.component';
-import SelectedDateContext from '../hooks/selectedDateContext';
-import { omrsDateFormat } from '../constants';
 import styles from './billing-dashboard.scss';
 
 export function BillingDashboard() {
   const { t } = useTranslation();
-  const [selectedDate, setSelectedDate] = useState<string>(dayjs().startOf('day').format(omrsDateFormat));
-
-  const params = useParams();
-
-  useEffect(() => {
-    if (params.date) {
-      setSelectedDate(dayjs(params.date).startOf('day').format(omrsDateFormat));
-    }
-  }, [params.date]);
 
   return (
-    <SelectedDateContext.Provider value={{ selectedDate, setSelectedDate }}>
+    <>
       <BillingHeader title={t('home', 'Home')} />
       {/**
        *
@@ -32,6 +19,6 @@ export function BillingDashboard() {
       <section className={styles.billsTableContainer}>
         <BillsTable />
       </section>
-    </SelectedDateContext.Provider>
+    </>
   );
 }

package/src/billing-form/billing-checkin-form.component.tsx

@@ -1,13 +1,12 @@
-import React, { useCallback, useState } from 'react';
-import { Dropdown, InlineLoading, InlineNotification } from '@carbon/react';
+import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { showSnackbar, getCoreTranslation } from '@openmrs/esm-framework';
-import { useCashPoint, useBillableItems, createPatientBill } from './billing-form.resource';
+import { Dropdown, InlineLoading, InlineNotification } from '@carbon/react';
+import { showSnackbar, getCoreTranslation, useConfig } from '@openmrs/esm-framework';
+import { useCashPoint, useBillableItems, createPatientBill, useLastVisitInfo } from './billing-form.resource';
 import VisitAttributesForm from './visit-attributes/visit-attributes-form.component';
+import { BillStatus } from '../types';
 import styles from './billing-checkin-form.scss';
 
-const PENDING_PAYMENT_STATUS = 'PENDING';
-
 type BillingCheckInFormProps = {
   patientUuid: string;
   setExtraVisitInfo: (state) => void;
@@ -15,11 +14,53 @@ type BillingCheckInFormProps = {
 
 const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, setExtraVisitInfo }) => {
   const { t } = useTranslation();
+  const { categoryConcepts } = useConfig();
+
+  const { lastVisitInfo, isLoading: isLoadingLastVisitInfo, error: lastVisitError } = useLastVisitInfo(patientUuid);
+
+  useEffect(() => {
+    if (lastVisitError) {
+      showSnackbar({
+        title: t('lastVisitError', 'Last visit error'),
+        subtitle: t('errorLoadingLastVisit', 'An error occurred while loading the last visit'),
+        kind: 'error',
+      });
+    }
+  }, [lastVisitError, t]);
+
   const { cashPoints, isLoading: isLoadingCashPoints, error: cashError } = useCashPoint();
   const { lineItems, isLoading: isLoadingLineItems, error: lineError } = useBillableItems();
+
   const [attributes, setAttributes] = useState([]);
-  const [paymentMethod, setPaymentMethod] = useState<any>();
-  let lineList = [];
+  const [paymentMethod, setPaymentMethod] = useState<string | null>(null);
+  const [selectedBillableItem, setSelectedBillableItem] = useState<any | null>(null);
+
+  const attributesRef = useRef(attributes);
+  useEffect(() => {
+    attributesRef.current = attributes;
+  }, [attributes]);
+
+  const isNonPaying = useMemo(() => {
+    if (!categoryConcepts?.nonPayingDetails || !attributes?.length) return false;
+    return attributes.some((attr) => attr.value === categoryConcepts.nonPayingDetails);
+  }, [attributes, categoryConcepts]);
+
+  const lineList = useMemo(() => {
+    if (isNonPaying) return [];
+    if (!paymentMethod || !lineItems?.length) return [];
+
+    return lineItems.filter((e) => e.servicePrices.some((p) => p.paymentMode?.uuid === paymentMethod));
+  }, [lineItems, paymentMethod, isNonPaying]);
+
+  // reset bill and selection when payment changes or on switching to non-paying
+  useEffect(() => {
+    setExtraVisitInfo({
+      createBillPayload: null,
+      handleCreateExtraVisitInfo: null,
+      attributes: attributesRef.current,
+    });
+    setSelectedBillableItem(null);
+  }, [paymentMethod, isNonPaying, setExtraVisitInfo]);
 
   const handleCreateExtraVisitInfo = useCallback(
     async (createBillPayload) => {
@@ -41,38 +82,42 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
     [t],
   );
 
-  const handleBillingService = ({ selectedItem }) => {
-    const cashPointUuid = cashPoints?.[0]?.uuid ?? '';
-    const itemUuid = selectedItem?.uuid ?? '';
-
-    // should default to first price if check returns empty. todo - update backend to return default price
-    const priceForPaymentMode =
-      selectedItem.servicePrices.find((p) => p.paymentMode?.uuid === paymentMethod) || selectedItem?.servicePrices[0];
-
-    const createBillPayload = {
-      lineItems: [
-        {
-          billableService: itemUuid,
-          quantity: 1,
-          price: priceForPaymentMode ? priceForPaymentMode.price : '0.000',
-          priceName: 'Default',
-          priceUuid: priceForPaymentMode ? priceForPaymentMode.uuid : '',
-          lineItemOrder: 0,
-          paymentStatus: PENDING_PAYMENT_STATUS,
-        },
-      ],
-      cashPoint: cashPointUuid,
-      patient: patientUuid,
-      status: PENDING_PAYMENT_STATUS,
-      payments: [],
-    };
+  const handleBillingService = useCallback(
+    ({ selectedItem }: { selectedItem }) => {
+      setSelectedBillableItem(selectedItem);
 
-    setExtraVisitInfo({
-      createBillPayload,
-      handleCreateExtraVisitInfo: () => handleCreateExtraVisitInfo(createBillPayload),
-      attributes,
-    });
-  };
+      const cashPointUuid = cashPoints?.[0]?.uuid ?? '';
+      const itemUuid = selectedItem?.uuid ?? '';
+
+      // should default to first price if check returns empty. todo - update backend to return default price
+      const priceForPaymentMode =
+        selectedItem.servicePrices.find((p) => p.paymentMode?.uuid === paymentMethod) || selectedItem?.servicePrices[0];
+
+      const createBillPayload = {
+        lineItems: [
+          {
+            billableService: itemUuid,
+            quantity: 1,
+            price: priceForPaymentMode ? priceForPaymentMode.price : '0.000',
+            priceName: 'Default',
+            priceUuid: priceForPaymentMode ? priceForPaymentMode.uuid : '',
+            lineItemOrder: 0,
+            paymentStatus: BillStatus.PENDING,
+          },
+        ],
+        cashPoint: cashPointUuid,
+        patient: patientUuid,
+        status: BillStatus.PENDING,
+        payments: [],
+      };
+      setExtraVisitInfo({
+        createBillPayload,
+        handleCreateExtraVisitInfo: () => handleCreateExtraVisitInfo(createBillPayload),
+        attributes,
+      });
+    },
+    [attributes, cashPoints, handleCreateExtraVisitInfo, paymentMethod, patientUuid, setExtraVisitInfo],
+  );
 
   if (isLoadingLineItems || isLoadingCashPoints) {
     return (
@@ -84,13 +129,6 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
     );
   }
 
-  if (paymentMethod) {
-    lineList = [];
-    lineList = lineItems.filter((e) =>
-      e.servicePrices.some((p) => p.paymentMode && p.paymentMode.uuid === paymentMethod),
-    );
-  }
-
   const setServicePrice = (prices) => {
     const matchingPrice = prices.find((p) => p.paymentMode?.uuid === paymentMethod);
     return matchingPrice ? `(${matchingPrice.name}: ${matchingPrice.price})` : '';
@@ -109,17 +147,38 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
 
   return (
     <section className={styles.sectionContainer}>
-      <VisitAttributesForm setAttributes={setAttributes} setPaymentMethod={setPaymentMethod} />
-      {
-        <Dropdown
-          id="billable-items"
-          items={lineList}
-          itemToString={(item) => (item ? `${item.name} ${setServicePrice(item.servicePrices)}` : '')}
-          label={t('selectBillableService', 'Select a billable service')}
-          onChange={handleBillingService}
-          titleText={t('billableService', 'Billable service')}
-        />
-      }
+      <h1 className={styles.sectionLabel}>{t('billingDetails', 'Billing details')}</h1>
+      <div className={styles.sectionField}>
+        {!isLoadingLastVisitInfo && !lastVisitError && lastVisitInfo && (
+          <div className={styles.lastVisitBanner}>
+            <InlineNotification
+              hideCloseButton
+              kind="info"
+              title={t('lastVisitInfo', 'Last Visit Information')}
+              subtitle={t('lastVisitMsg', 'The last visit was a {{type}} {{count}} days ago at {{location}}', {
+                count: lastVisitInfo.diffDays,
+                type: lastVisitInfo.type,
+                location: lastVisitInfo.location,
+              })}
+              lowContrast
+            />
+          </div>
+        )}
+        <VisitAttributesForm setAttributes={setAttributes} setPaymentMethod={setPaymentMethod} />
+
+        {lineList.length > 0 && (
+          <Dropdown
+            key={`billable-${paymentMethod}`}
+            id="billable-items"
+            items={lineList}
+            itemToString={(item) => (item ? `${item.name} ${setServicePrice(item.servicePrices)}` : '')}
+            label={t('selectBillableService', 'Select a billable service')}
+            onChange={handleBillingService}
+            selectedItem={selectedBillableItem}
+            titleText={t('billableService', 'Billable service')}
+          />
+        )}
+      </div>
     </section>
   );
 };

package/src/billing-form/billing-checkin-form.scss

@@ -1,6 +1,30 @@
 @use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
 
-.sectionContainer {
-  margin: 0 layout.$spacing-03;
+.sectionLabel {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin: 0 0 layout.$spacing-03 0;
+  min-width: 8rem;
 }
 
+.lastVisitBanner {
+  margin-bottom: layout.$spacing-05;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+    .sectionContainer {
+      display: flex;
+
+      .sectionLabel {
+        flex-basis: 30%;
+        min-width: 8rem;
+        text-align: left;
+      }
+
+      .sectionField {
+        flex-basis: 70%;
+      }
+  }
+}

package/src/billing-form/billing-checkin-form.test.tsx

@@ -3,13 +3,14 @@ import userEvent from '@testing-library/user-event';
 import { screen, render } from '@testing-library/react';
 import { useConfig } from '@openmrs/esm-framework';
 import { type BillingConfig } from '../config-schema';
-import { useBillableItems, useCashPoint, usePaymentMethods } from './billing-form.resource';
+import { useBillableItems, useCashPoint, usePaymentMethods, useLastVisitInfo } from './billing-form.resource';
 import BillingCheckInForm from './billing-checkin-form.component';
 
 const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
 const mockUseCashPoint = jest.mocked(useCashPoint);
 const mockUseBillableItems = jest.mocked(useBillableItems);
 const mockUsePaymentMethods = jest.mocked(usePaymentMethods);
+const mockUseLastVisitInfo = jest.mocked(useLastVisitInfo);
 
 const mockCashPoints = [
   {
@@ -89,6 +90,7 @@ jest.mock('./billing-form.resource', () => ({
   useCashPoint: jest.fn(),
   createPatientBill: jest.fn(),
   usePaymentMethods: jest.fn(),
+  useLastVisitInfo: jest.fn(),
 }));
 
 const testProps = { patientUuid: 'some-patient-uuid', setExtraVisitInfo: jest.fn() };
@@ -116,6 +118,7 @@ describe('BillingCheckInForm', () => {
       },
     } as BillingConfig);
     mockUsePaymentMethods.mockReturnValue({ paymentModes: mockPaymentMethods, isLoading: false, error: null });
+    mockUseLastVisitInfo.mockReturnValue({ lastVisitInfo: null, isLoading: false, error: null });
   });
 
   test('should show the loading spinner while retrieving data', () => {
@@ -136,6 +139,53 @@ describe('BillingCheckInForm', () => {
     expect(screen.getByText(/error loading bill services/i)).toBeInTheDocument();
   });
 
+  test('should show the last visit banner when last visit info is available', () => {
+    mockUseBillableItems.mockReturnValue({ lineItems: [], isLoading: false, error: null });
+    mockUseCashPoint.mockReturnValue({ cashPoints: [], isLoading: false, error: null });
+    mockUseLastVisitInfo.mockReturnValue({
+      lastVisitInfo: { diffDays: 3, type: 'Outpatient', location: 'Main Clinic' },
+      isLoading: false,
+      error: null,
+    });
+    renderBillingCheckinForm();
+
+    expect(screen.getByText(/Last Visit Information/i)).toBeInTheDocument();
+    expect(screen.getByText(/3 days ago/i)).toBeInTheDocument();
+  });
+
+  test('should not show the last visit banner when there is no recent visit', () => {
+    mockUseBillableItems.mockReturnValue({ lineItems: [], isLoading: false, error: null });
+    mockUseCashPoint.mockReturnValue({ cashPoints: [], isLoading: false, error: null });
+    mockUseLastVisitInfo.mockReturnValue({ lastVisitInfo: null, isLoading: false, error: null });
+    renderBillingCheckinForm();
+
+    expect(screen.queryByText(/Last Visit Information/i)).not.toBeInTheDocument();
+  });
+
+  test('should show billable service dropdown when a paying method is selected', async () => {
+    const user = userEvent.setup();
+    mockUseCashPoint.mockReturnValue({ cashPoints: mockCashPoints, isLoading: false, error: null });
+    mockUseBillableItems.mockReturnValue({ lineItems: mockBillableItems, isLoading: false, error: null });
+    renderBillingCheckinForm();
+
+    await user.click(screen.getByRole('radio', { name: 'Paying' }));
+    const paymentMethodDropdown = await screen.findByRole('combobox', { name: /payment method/i });
+    await user.click(paymentMethodDropdown);
+    await user.click(await screen.findByText('Insurance'));
+
+    expect(screen.getByRole('combobox', { name: /billable service/i })).toBeInTheDocument();
+  });
+
+  test('should hide billable service dropdown when switched to non-paying', async () => {
+    const user = userEvent.setup();
+    mockUseCashPoint.mockReturnValue({ cashPoints: mockCashPoints, isLoading: false, error: null });
+    mockUseBillableItems.mockReturnValue({ lineItems: mockBillableItems, isLoading: false, error: null });
+    renderBillingCheckinForm();
+
+    await user.click(screen.getByRole('radio', { name: /non paying/i }));
+    expect(screen.queryByRole('combobox', { name: /billable service/i })).not.toBeInTheDocument();
+  });
+
   test('should render the form correctly and generate the required payload', async () => {
     const user = userEvent.setup();
     mockUseCashPoint.mockReturnValue({ cashPoints: mockCashPoints, isLoading: false, error: null });