@openmrs/esm-billing-app 1.1.2-pre.9 → 1.2.0

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

@@ -1,10 +1,12 @@
 import React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSWRConfig } from 'swr';
 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 { BillLineItemStatus, BillStatus } from '../types';
+import { patientPaymentStatusCacheKey } from '../billing.resource';
 import styles from './billing-checkin-form.scss';
 
 type BillingCheckInFormProps = {
@@ -14,6 +16,7 @@ type BillingCheckInFormProps = {
 
 const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, setExtraVisitInfo }) => {
   const { t } = useTranslation();
+  const { mutate } = useSWRConfig();
   const { categoryConcepts } = useConfig();
 
   const { lastVisitInfo, isLoading: isLoadingLastVisitInfo, error: lastVisitError } = useLastVisitInfo(patientUuid);
@@ -66,6 +69,7 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
     async (createBillPayload) => {
       try {
         await createPatientBill(createBillPayload);
+        mutate(patientPaymentStatusCacheKey(patientUuid));
         showSnackbar({
           title: t('patientBill', 'Patient bill'),
           subtitle: t('billCreatedSuccessfully', 'Bill created successfully'),
@@ -79,7 +83,7 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
         });
       }
     },
-    [t],
+    [mutate, t, patientUuid],
   );
 
   const handleBillingService = useCallback(
@@ -102,7 +106,7 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
             priceName: 'Default',
             priceUuid: priceForPaymentMode ? priceForPaymentMode.uuid : '',
             lineItemOrder: 0,
-            paymentStatus: BillStatus.PENDING,
+            status: BillLineItemStatus.PENDING,
           },
         ],
         cashPoint: cashPointUuid,

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import { screen, render } from '@testing-library/react';
 import { useConfig } from '@openmrs/esm-framework';
@@ -6,11 +7,11 @@ import { type BillingConfig } from '../config-schema';
 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 mockUseConfig = vi.mocked(useConfig<BillingConfig>);
+const mockUseCashPoint = vi.mocked(useCashPoint);
+const mockUseBillableItems = vi.mocked(useBillableItems);
+const mockUsePaymentMethods = vi.mocked(usePaymentMethods);
+const mockUseLastVisitInfo = vi.mocked(useLastVisitInfo);
 
 const mockCashPoints = [
   {
@@ -85,19 +86,19 @@ const mockPaymentMethods = [
   },
 ];
 
-jest.mock('./billing-form.resource', () => ({
-  useBillableItems: jest.fn(),
-  useCashPoint: jest.fn(),
-  createPatientBill: jest.fn(),
-  usePaymentMethods: jest.fn(),
-  useLastVisitInfo: jest.fn(),
+vi.mock('./billing-form.resource', () => ({
+  useBillableItems: vi.fn(),
+  useCashPoint: vi.fn(),
+  createPatientBill: vi.fn(),
+  usePaymentMethods: vi.fn(),
+  useLastVisitInfo: vi.fn(),
 }));
 
-const testProps = { patientUuid: 'some-patient-uuid', setExtraVisitInfo: jest.fn() };
+const testProps = { patientUuid: 'some-patient-uuid', setExtraVisitInfo: vi.fn() };
 
 describe('BillingCheckInForm', () => {
   beforeEach(() => {
-    jest.resetAllMocks();
+    vi.resetAllMocks();
     mockUseConfig.mockReturnValue({
       patientCategory: {
         paymentDetails: 'fbc0702d-b4c9-4968-be63-af8ad3ad6239',
@@ -121,7 +122,7 @@ describe('BillingCheckInForm', () => {
     mockUseLastVisitInfo.mockReturnValue({ lastVisitInfo: null, isLoading: false, error: null });
   });
 
-  test('should show the loading spinner while retrieving data', () => {
+  it('should show the loading spinner while retrieving data', () => {
     mockUseBillableItems.mockReturnValueOnce({ lineItems: [], isLoading: true, error: null });
     mockUseCashPoint.mockReturnValueOnce({ cashPoints: [], isLoading: true, error: null });
     renderBillingCheckinForm();
@@ -129,7 +130,7 @@ describe('BillingCheckInForm', () => {
     expect(screen.getByText(/Loading billing services.../)).toBeInTheDocument();
   });
 
-  test('should show error state when an error occurs while fetching data', () => {
+  it('should show error state when an error occurs while fetching data', () => {
     const error = new Error('Internal server error');
     mockUseBillableItems.mockReturnValueOnce({ lineItems: [], isLoading: false, error });
     mockUseCashPoint.mockReturnValueOnce({ cashPoints: [], isLoading: false, error });
@@ -139,7 +140,7 @@ describe('BillingCheckInForm', () => {
     expect(screen.getByText(/error loading bill services/i)).toBeInTheDocument();
   });
 
-  test('should show the last visit banner when last visit info is available', () => {
+  it('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({
@@ -153,7 +154,7 @@ describe('BillingCheckInForm', () => {
     expect(screen.getByText(/3 days ago/i)).toBeInTheDocument();
   });
 
-  test('should not show the last visit banner when there is no recent visit', () => {
+  it('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 });
@@ -162,7 +163,7 @@ describe('BillingCheckInForm', () => {
     expect(screen.queryByText(/Last Visit Information/i)).not.toBeInTheDocument();
   });
 
-  test('should show billable service dropdown when a paying method is selected', async () => {
+  it('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 });
@@ -176,7 +177,7 @@ describe('BillingCheckInForm', () => {
     expect(screen.getByRole('combobox', { name: /billable service/i })).toBeInTheDocument();
   });
 
-  test('should hide billable service dropdown when switched to non-paying', async () => {
+  it('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 });
@@ -186,7 +187,7 @@ describe('BillingCheckInForm', () => {
     expect(screen.queryByRole('combobox', { name: /billable service/i })).not.toBeInTheDocument();
   });
 
-  test('should render the form correctly and generate the required payload', async () => {
+  it('should render the form correctly and generate the required payload', async () => {
     const user = userEvent.setup();
     mockUseCashPoint.mockReturnValue({ cashPoints: mockCashPoints, isLoading: false, error: null });
     mockUseBillableItems.mockReturnValue({ lineItems: mockBillableItems, isLoading: false, error: null });
@@ -229,7 +230,7 @@ describe('BillingCheckInForm', () => {
             priceName: 'Default',
             priceUuid: 'price-2',
             lineItemOrder: 0,
-            paymentStatus: 'PENDING',
+            status: 'PENDING',
           },
         ],
         cashPoint: '54065383-b4d4-42d2-af4d-d250a1fd2590',

package/src/billing-form/billing-form.resource.test.ts

@@ -1,21 +1,22 @@
-import { renderHook } from '@testing-library/react';
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
 import useSWR from 'swr';
+import { renderHook } from '@testing-library/react';
 import { useLastVisitInfo } from './billing-form.resource';
 
-jest.mock('swr');
-const mockUseSWR = jest.mocked(useSWR);
+vi.mock('swr');
+const mockUseSWR = vi.mocked(useSWR);
 
 // Pin "now" so diffDays calculations are deterministic
 const FIXED_NOW = new Date('2026-01-10T12:00:00Z').getTime();
 
 describe('useLastVisitInfo', () => {
   beforeAll(() => {
-    jest.useFakeTimers();
-    jest.setSystemTime(FIXED_NOW);
+    vi.useFakeTimers();
+    vi.setSystemTime(FIXED_NOW);
   });
 
   afterAll(() => {
-    jest.useRealTimers();
+    vi.useRealTimers();
   });
 
   it('returns null lastVisitInfo when there is no visit data yet', () => {

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

@@ -1,42 +1,46 @@
 import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import { render, screen, waitFor } from '@testing-library/react';
-import { getDefaultsFromConfigSchema, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { getDefaultsFromConfigSchema, showSnackbar, useConfig, useVisit } from '@openmrs/esm-framework';
 import { configSchema, type BillingConfig } from '../config-schema';
 import { processBillItems, updateBillItems, useBill, useBillableServices } from '../billing.resource';
+import { type BillLineItemStatus, type BillStatus } from '../types';
 import { useBillableServices as useBillableServicesList } from '../billable-services/billable-service.resource';
 import { getBillableServiceUuid } from '../invoice/payments/utils';
 import BillingForm from './billing-form.workspace';
 
-const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
-const mockUseBillableServices = jest.mocked(useBillableServices);
-const mockUseBill = jest.mocked(useBill);
-const mockUseBillableServicesList = jest.mocked(useBillableServicesList);
-const mockProcessBillItems = jest.mocked(processBillItems);
-const mockUpdateBillItems = jest.mocked(updateBillItems);
-const mockGetBillableServiceUuid = jest.mocked(getBillableServiceUuid);
-const mockShowSnackbar = jest.mocked(showSnackbar);
-
-jest.mock('../billing.resource', () => ({
-  processBillItems: jest.fn().mockResolvedValue({}),
-  updateBillItems: jest.fn().mockResolvedValue({}),
-  useBill: jest.fn(),
-  useBillableServices: jest.fn(),
+const mockUseConfig = vi.mocked(useConfig<BillingConfig>);
+const mockUseVisit = vi.mocked(useVisit);
+const mockUseBillableServices = vi.mocked(useBillableServices);
+const mockUseBill = vi.mocked(useBill);
+const mockUseBillableServicesList = vi.mocked(useBillableServicesList);
+const mockProcessBillItems = vi.mocked(processBillItems);
+const mockUpdateBillItems = vi.mocked(updateBillItems);
+const mockGetBillableServiceUuid = vi.mocked(getBillableServiceUuid);
+const mockShowSnackbar = vi.mocked(showSnackbar);
+
+vi.mock('../billing.resource', () => ({
+  processBillItems: vi.fn().mockResolvedValue({}),
+  updateBillItems: vi.fn().mockResolvedValue({}),
+  useBill: vi.fn(),
+  useBillableServices: vi.fn(),
+  patientPaymentStatusCacheKey: vi.fn().mockReturnValue('mocked-cache-key'),
 }));
 
-jest.mock('../billable-services/billable-service.resource', () => ({
-  useBillableServices: jest.fn(),
+vi.mock('../billable-services/billable-service.resource', () => ({
+  useBillableServices: vi.fn(),
 }));
 
-jest.mock('../invoice/payments/utils', () => ({
-  getBillableServiceUuid: jest.fn(),
+vi.mock('../invoice/payments/utils', () => ({
+  getBillableServiceUuid: vi.fn(),
 }));
 
-jest.mock('../helpers/functions', () => ({
-  calculateTotalAmount: jest.fn((items) =>
+vi.mock('../helpers/functions', () => ({
+  calculateTotalAmount: vi.fn((items) =>
     Array.isArray(items) ? items.reduce((sum, item) => sum + item.price * item.quantity, 0) : 0,
   ),
-  convertToCurrency: jest.fn((amount) => `KES ${amount}`),
+  convertToCurrency: vi.fn((amount) => `KES ${amount}`),
 }));
 
 window.i18next = {
@@ -65,7 +69,7 @@ const mockExistingBill = {
   uuid: 'bill-123',
   patientUuid: 'patient-uuid',
   patientName: 'John Doe',
-  status: 'PENDING',
+  status: 'PENDING' as BillStatus,
   cashPointUuid: 'cashpoint-uuid',
   cashPointName: 'Main Cashier',
   cashPointLocation: 'Main Hospital',
@@ -80,7 +84,7 @@ const mockExistingBill = {
       display: 'Hemoglobin',
       quantity: 1,
       price: 100,
-      paymentStatus: 'PENDING',
+      status: 'PENDING' as BillLineItemStatus,
       lineItemOrder: 0,
       voided: false,
       voidReason: null,
@@ -97,8 +101,8 @@ const mockExistingBill = {
   id: 1,
 };
 
-const closeWorkspace = jest.fn();
-const onMutate = jest.fn();
+const closeWorkspace = vi.fn();
+const onMutate = vi.fn();
 
 const defaultCreateProps = {
   workspaceProps: { patientUuid: 'patient-uuid', onMutate },
@@ -112,7 +116,7 @@ const editModeProps = {
 
 describe('BillingForm', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
     mockUseConfig.mockReturnValue({
       ...getDefaultsFromConfigSchema(configSchema),
       defaultCurrency: 'KES',
@@ -127,16 +131,17 @@ describe('BillingForm', () => {
       error: null,
       isLoading: false,
       isValidating: false,
-      mutate: jest.fn(),
+      mutate: vi.fn(),
     });
     mockUseBillableServicesList.mockReturnValue({
       billableServices: [{ uuid: 'bs-uuid-1', name: 'Hemoglobin' }],
       isLoading: false,
       isValidating: false,
       error: null,
-      mutate: jest.fn(),
+      mutate: vi.fn(),
     } as any);
     mockGetBillableServiceUuid.mockReturnValue('bs-uuid-1');
+    mockUseVisit.mockReturnValue({ activeVisit: null } as any);
   });
 
   describe('Create mode (no billUuid)', () => {
@@ -178,7 +183,7 @@ describe('BillingForm', () => {
                 billableService: 'service-1',
                 quantity: 1,
                 price: 500,
-                paymentStatus: 'PENDING',
+                status: 'PENDING',
               }),
             ]),
           }),
@@ -200,7 +205,7 @@ describe('BillingForm', () => {
         error: null,
         isLoading: false,
         isValidating: false,
-        mutate: jest.fn(),
+        mutate: vi.fn(),
       });
     });
 
@@ -227,7 +232,7 @@ describe('BillingForm', () => {
         error: null,
         isLoading: true,
         isValidating: false,
-        mutate: jest.fn(),
+        mutate: vi.fn(),
       });
       render(<BillingForm {...editModeProps} />);
       expect(screen.getByText(/loading\.\.\./i)).toBeInTheDocument();
@@ -239,7 +244,7 @@ describe('BillingForm', () => {
         error: new Error('Failed to load'),
         isLoading: false,
         isValidating: false,
-        mutate: jest.fn(),
+        mutate: vi.fn(),
       });
       render(<BillingForm {...editModeProps} />);
       expect(screen.getByText(/error loading bill/i)).toBeInTheDocument();
@@ -277,7 +282,7 @@ describe('BillingForm', () => {
                 billableService: 'service-2',
                 quantity: 1,
                 price: 1000,
-                paymentStatus: 'PENDING',
+                status: 'PENDING',
               }),
             ]),
           }),
@@ -411,7 +416,7 @@ describe('BillingForm', () => {
         error: null,
         isLoading: false,
         isValidating: false,
-        mutate: jest.fn(),
+        mutate: vi.fn(),
       });
       const user = userEvent.setup();
       render(<BillingForm {...editModeProps} />);
@@ -430,7 +435,7 @@ describe('BillingForm', () => {
         error: null,
         isLoading: false,
         isValidating: false,
-        mutate: jest.fn(),
+        mutate: vi.fn(),
       });
       const user = userEvent.setup();
       render(<BillingForm {...defaultCreateProps} />);
@@ -460,7 +465,7 @@ describe('BillingForm', () => {
         error: null,
         isLoading: false,
         isValidating: false,
-        mutate: jest.fn(),
+        mutate: vi.fn(),
       });
 
       const user = userEvent.setup();
@@ -484,7 +489,7 @@ describe('BillingForm', () => {
         isLoading: true,
         isValidating: false,
         error: null,
-        mutate: jest.fn(),
+        mutate: vi.fn(),
       } as any);
 
       render(<BillingForm {...editModeProps} />);
@@ -498,7 +503,7 @@ describe('BillingForm', () => {
         isLoading: false,
         isValidating: false,
         error: new Error('Failed to load services'),
-        mutate: jest.fn(),
+        mutate: vi.fn(),
       } as any);
 
       render(<BillingForm {...editModeProps} />);
@@ -511,7 +516,7 @@ describe('BillingForm', () => {
         isLoading: false,
         isValidating: false,
         error: new Error('Failed to load services'),
-        mutate: jest.fn(),
+        mutate: vi.fn(),
       } as any);
 
       // The error notification replaces the form content, so we can't select items.
@@ -544,4 +549,36 @@ describe('BillingForm', () => {
       expect(mockUpdateBillItems).not.toHaveBeenCalled();
     });
   });
+
+  describe('active visit in create-bill payload', () => {
+    it('should include visit UUID in payload when an active visit exists', async () => {
+      mockUseVisit.mockReturnValue({ activeVisit: { uuid: 'visit-uuid-789' } } as any);
+      const user = userEvent.setup();
+      render(<BillingForm {...defaultCreateProps} />);
+
+      const combobox = screen.getByRole('combobox');
+      await user.click(combobox);
+      await user.click(screen.getByText('Consultation'));
+      await user.click(screen.getByRole('button', { name: /save and close/i }));
+
+      await waitFor(() => {
+        expect(mockProcessBillItems).toHaveBeenCalledWith(expect.objectContaining({ visit: 'visit-uuid-789' }));
+      });
+    });
+
+    it('should not include visit field in payload when no active visit exists', async () => {
+      mockUseVisit.mockReturnValue({ activeVisit: null } as any);
+      const user = userEvent.setup();
+      render(<BillingForm {...defaultCreateProps} />);
+
+      const combobox = screen.getByRole('combobox');
+      await user.click(combobox);
+      await user.click(screen.getByText('Consultation'));
+      await user.click(screen.getByRole('button', { name: /save and close/i }));
+
+      await waitFor(() => {
+        expect(mockProcessBillItems).toHaveBeenCalledWith(expect.not.objectContaining({ visit: expect.anything() }));
+      });
+    });
+  });
 });

package/src/billing-form/billing-form.workspace.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSWRConfig } from 'swr';
 import {
   Button,
   ButtonSet,
@@ -13,18 +14,32 @@ import {
 import {
   useConfig,
   useLayoutType,
+  useVisit,
   showSnackbar,
   getCoreTranslation,
   TrashCanIcon,
   type Workspace2DefinitionProps,
   Workspace2,
 } from '@openmrs/esm-framework';
-import { processBillItems, updateBillItems, useBill, useBillableServices } from '../billing.resource';
+import {
+  processBillItems,
+  updateBillItems,
+  useBill,
+  useBillableServices,
+  patientPaymentStatusCacheKey,
+} from '../billing.resource';
 import { useBillableServices as useBillableServicesList } from '../billable-services/billable-service.resource';
 import { getBillableServiceUuid } from '../invoice/payments/utils';
 import { calculateTotalAmount, convertToCurrency } from '../helpers/functions';
 import type { BillingConfig } from '../config-schema';
-import { BillStatus, type BillableItem, type LineItem, type ServicePrice } from '../types';
+import {
+  BillLineItemStatus,
+  BillStatus,
+  type CreateBillPayload,
+  type BillableItem,
+  type LineItem,
+  type ServicePrice,
+} from '../types';
 import styles from './billing-form.scss';
 
 interface ExtendedLineItem extends LineItem {
@@ -45,6 +60,7 @@ const BillingForm: React.FC<Workspace2DefinitionProps<BillingFormProps>> = ({
 }) => {
   const isTablet = useLayoutType() === 'tablet';
   const { t } = useTranslation();
+  const { mutate: swrMutate } = useSWRConfig();
   const { defaultCurrency, postBilledItems } = useConfig<BillingConfig>();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [selectedItems, setSelectedItems] = useState<ExtendedLineItem[]>([]);
@@ -56,6 +72,7 @@ const BillingForm: React.FC<Workspace2DefinitionProps<BillingFormProps>> = ({
     error: billableServicesError,
   } = useBillableServicesList();
   const isEditMode = !!billUuid && !!bill;
+  const { activeVisit } = useVisit(patientUuid);
   const existingItemsTotal = useMemo(
     () => (isEditMode ? calculateTotalAmount(bill.lineItems) : 0),
     [isEditMode, bill?.lineItems],
@@ -101,7 +118,7 @@ const BillingForm: React.FC<Workspace2DefinitionProps<BillingFormProps>> = ({
       quantity: 1,
       price: defaultPrice,
       billableService: item.uuid,
-      paymentStatus: BillStatus.PENDING,
+      status: BillLineItemStatus.PENDING,
       lineItemOrder: 0,
       selectedPaymentMethod: selectedPaymentMethod,
       availablePaymentMethods: availablePaymentMethods,
@@ -172,7 +189,7 @@ const BillingForm: React.FC<Workspace2DefinitionProps<BillingFormProps>> = ({
       quantity: item.quantity,
       price: item.price,
       lineItemOrder: 0,
-      paymentStatus: BillStatus.PENDING,
+      status: BillLineItemStatus.PENDING,
       billableService: item.uuid,
     }));
 
@@ -192,7 +209,7 @@ const BillingForm: React.FC<Workspace2DefinitionProps<BillingFormProps>> = ({
             quantity: item.quantity,
             price: item.price,
             lineItemOrder: item.lineItemOrder,
-            paymentStatus: item.paymentStatus,
+            status: item.status,
             billableService: serviceUuid,
             priceName: item.priceName,
             priceUuid: item.priceUuid,
@@ -210,13 +227,14 @@ const BillingForm: React.FC<Workspace2DefinitionProps<BillingFormProps>> = ({
 
         await updateBillItems(payload);
       } else {
-        const payload = {
+        const payload: CreateBillPayload = {
           cashPoint: postBilledItems.cashPoint,
           cashier: postBilledItems.cashier,
           lineItems: newLineItems,
           payments: [],
           patient: patientUuid,
           status: BillStatus.PENDING,
+          ...(activeVisit?.uuid && { visit: activeVisit.uuid }),
         };
 
         await processBillItems(payload);
@@ -224,6 +242,7 @@ const BillingForm: React.FC<Workspace2DefinitionProps<BillingFormProps>> = ({
 
       closeWorkspace({ discardUnsavedChanges: true });
       onMutate?.();
+      swrMutate(patientPaymentStatusCacheKey(patientUuid));
 
       showSnackbar({
         title: isEditMode ? t('itemsAddedToBill', 'Items added to bill') : t('billProcessed', 'Bill processed'),

package/src/billing-form/visit-attributes/visit-attributes-form.component.tsx

@@ -148,11 +148,15 @@ const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes
             name="payment-details"
             onChange={(selected) => field.onChange(selected)}
             orientation="vertical">
-            <RadioButton labelText={t('paying', 'Paying')} value={categoryConcepts.payingDetails} id="radio-1" />
+            <RadioButton
+              labelText={t('paying', 'Paying')}
+              value={categoryConcepts.payingDetails}
+              id="payment-details-paying"
+            />
             <RadioButton
               labelText={t('nonPaying', 'Non paying')}
               value={categoryConcepts.nonPayingDetails}
-              id="radio-2"
+              id="payment-details-non-paying"
             />
           </RadioButtonGroup>
         )}