@openmrs/esm-billing-app 1.0.2-pre.749 → 1.0.2-pre.758

package/src/billable-services/create-edit/add-billable-service.scss

@@ -6,7 +6,6 @@
 .form {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   height: 100%;
   margin: layout.$spacing-05;
 }
@@ -132,3 +131,6 @@
   font-size: 0.875rem;
 }
 
+.serviceNameLabel {
+  @include type.type-style('body-compact-02');
+}

package/src/billable-services/create-edit/add-billable-service.test.tsx

@@ -1,26 +1,29 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import { type FetchResponse, navigate } from '@openmrs/esm-framework';
+import { navigate, type FetchResponse } from '@openmrs/esm-framework';
 import {
+  createBillableService,
   useBillableServices,
+  useConceptsSearch,
   usePaymentModes,
   useServiceTypes,
-  createBillableService,
 } from '../billable-service.resource';
 import AddBillableService from './add-billable-service.component';
 
-const mockUseBillableServices = useBillableServices as jest.MockedFunction<typeof useBillableServices>;
-const mockUsePaymentModes = usePaymentModes as jest.MockedFunction<typeof usePaymentModes>;
-const mockUseServiceTypes = useServiceTypes as jest.MockedFunction<typeof useServiceTypes>;
-const mockcreateBillableService = createBillableService as jest.MockedFunction<typeof createBillableService>;
-const mockNavigate = navigate as jest.MockedFunction<typeof navigate>;
+const mockUseBillableServices = jest.mocked(useBillableServices);
+const mockUsePaymentModes = jest.mocked(usePaymentModes);
+const mockUseServiceTypes = jest.mocked(useServiceTypes);
+const mockCreateBillableService = jest.mocked(createBillableService);
+const mockUseConceptsSearch = jest.mocked(useConceptsSearch);
 
 jest.mock('../billable-service.resource', () => ({
   useBillableServices: jest.fn(),
   usePaymentModes: jest.fn(),
   useServiceTypes: jest.fn(),
   createBillableService: jest.fn(),
+  updateBillableService: jest.fn(),
+  useConceptsSearch: jest.fn(),
 }));
 
 const mockPaymentModes = [
@@ -49,11 +52,7 @@ const mockServiceTypes = [
   { uuid: 'a487a743-62ce-4f93-a66b-c5154ee8987d', display: 'Adherence counselling  service' },
 ];
 
-xdescribe('AddBillableService', () => {
-  beforeEach(() => {
-    jest.resetAllMocks();
-  });
-
+describe('AddBillableService', () => {
   test('should render billable services form and generate correct payload', async () => {
     const user = userEvent.setup();
     const mockOnClose = jest.fn();
@@ -64,8 +63,9 @@ xdescribe('AddBillableService', () => {
       mutate: jest.fn(),
       isValidating: false,
     });
-    mockUsePaymentModes.mockReturnValue({ paymentModes: mockPaymentModes, error: null, isLoading: false });
-    mockUseServiceTypes.mockReturnValue({ serviceTypes: mockServiceTypes, error: false, isLoading: false });
+    mockUsePaymentModes.mockReturnValue({ paymentModes: mockPaymentModes, error: null, isLoadingPaymentModes: false });
+    mockUseServiceTypes.mockReturnValue({ serviceTypes: mockServiceTypes, error: false, isLoadingServiceTypes: false });
+    mockUseConceptsSearch.mockReturnValue({ searchResults: [], isSearching: false, error: null });
 
     render(<AddBillableService onClose={mockOnClose} />);
 
@@ -84,50 +84,50 @@ xdescribe('AddBillableService', () => {
     expect(serviceNameTextInp).toHaveValue('Test Service Name');
     expect(serviceShortNameTextInp).toHaveValue('Test Short Name');
 
-    const serviceTypeComboBox = screen.getByRole('combobox', { name: /Service Type/i });
+    const serviceTypeComboBox = screen.getByRole('combobox', { name: /Service type/i });
     expect(serviceTypeComboBox).toBeInTheDocument();
     await user.click(serviceTypeComboBox);
     const serviceTypeOptions = screen.getByRole('option', { name: /Lab service/i });
     expect(serviceTypeOptions).toBeInTheDocument();
     await user.click(serviceTypeOptions);
 
-    const addPaymentMethodBtn = screen.getByRole('button', { name: /Add payment option/i });
-    expect(addPaymentMethodBtn).toBeInTheDocument();
-
-    await user.click(addPaymentMethodBtn);
-
-    const paymentMethodComboBox = screen.getByRole('combobox', { name: /Payment Mode/i });
-    expect(paymentMethodComboBox).toBeInTheDocument();
-    await user.click(paymentMethodComboBox);
+    // Fill in the default payment option (first one)
+    const paymentMethodComboBoxes = screen.getAllByRole('combobox', { name: /Payment mode/i });
+    expect(paymentMethodComboBoxes).toHaveLength(1); // Should have one default
+    await user.click(paymentMethodComboBoxes[0]);
     const paymentMethodOptions = screen.getByRole('option', { name: /Cash/i });
     expect(paymentMethodOptions).toBeInTheDocument();
     await user.click(paymentMethodOptions);
 
-    const priceTextInp = screen.getByRole('textbox', { name: /Price/i });
+    const priceTextInps = screen.getAllByRole('textbox', { name: /Selling Price/i });
+    expect(priceTextInps).toHaveLength(1); // Should have one price input for the default payment method
+    const priceTextInp = priceTextInps[0];
     expect(priceTextInp).toBeInTheDocument();
     await user.type(priceTextInp, '1000');
 
-    mockcreateBillableService.mockReturnValue(Promise.resolve({} as FetchResponse<any>));
-    const saveBtn = screen.getByRole('button', { name: /Save/i });
+    mockCreateBillableService.mockReturnValue(Promise.resolve({} as FetchResponse<any>));
+    const saveBtn = screen.getAllByRole('button').find((btn) => btn.getAttribute('type') === 'submit');
     expect(saveBtn).toBeInTheDocument();
+
     await user.click(saveBtn);
 
-    expect(mockcreateBillableService).toHaveBeenCalledTimes(1);
-    expect(mockcreateBillableService).toHaveBeenCalledWith({
+    expect(mockCreateBillableService).toHaveBeenCalledTimes(1);
+    expect(mockCreateBillableService).toHaveBeenCalledWith({
       name: 'Test Service Name',
       shortName: 'Test Short Name',
-      serviceType: undefined,
+      serviceType: 'c9604249-db0a-4d03-b074-fc6bc2fa13e6',
       servicePrices: [
         {
           paymentMode: '63eff7a4-6f82-43c4-a333-dbcc58fe9f74',
-          price: '01000',
+          price: 1000,
           name: 'Cash',
         },
       ],
       serviceStatus: 'ENABLED',
+      concept: undefined,
     });
-    expect(mockNavigate).toHaveBeenCalledTimes(1);
-    expect(mockNavigate).toHaveBeenCalledWith({ to: '/openmrs/spa/billable-services' });
+    expect(navigate).toHaveBeenCalledTimes(1);
+    expect(navigate).toHaveBeenCalledWith({ to: '/openmrs/spa/billable-services' });
   });
 
   test("should navigate back to billable services dashboard when 'Cancel' button is clicked", async () => {
@@ -140,12 +140,13 @@ xdescribe('AddBillableService', () => {
       mutate: jest.fn(),
       isValidating: false,
     });
-    mockUsePaymentModes.mockReturnValue({ paymentModes: mockPaymentModes, error: null, isLoading: false });
-    mockUseServiceTypes.mockReturnValue({ serviceTypes: mockServiceTypes, error: false, isLoading: false });
+    mockUsePaymentModes.mockReturnValue({ paymentModes: mockPaymentModes, error: null, isLoadingPaymentModes: false });
+    mockUseServiceTypes.mockReturnValue({ serviceTypes: mockServiceTypes, error: false, isLoadingServiceTypes: false });
+    mockUseConceptsSearch.mockReturnValue({ searchResults: [], isSearching: false, error: null });
 
     render(<AddBillableService onClose={mockOnClose} />);
 
-    const cancelBtn = screen.getByRole('button', { name: /Cancel/i });
+    const cancelBtn = screen.getAllByRole('button').find((btn) => btn.className.includes('cds--btn--secondary'));
     expect(cancelBtn).toBeInTheDocument();
     await user.click(cancelBtn);
 

package/src/billable-services/create-edit/edit-billable-service.modal.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
-import AddBillableService from './add-billable-service.component';
 import { getCoreTranslation } from '@openmrs/esm-framework';
+import { type BillableService } from '../../types';
+import AddBillableService from './add-billable-service.component';
 
 interface EditBillableServiceModalProps {
   closeModal: () => void;
-  editingService?: any;
   onServiceUpdated: () => void;
+  serviceToEdit?: BillableService;
 }
 
 const EditBillableServiceModal: React.FC<EditBillableServiceModalProps> = ({
   closeModal,
-  editingService,
+  serviceToEdit,
   onServiceUpdated,
 }) => {
   const { t } = useTranslation();
@@ -22,10 +23,10 @@ const EditBillableServiceModal: React.FC<EditBillableServiceModalProps> = ({
       <ModalHeader closeModal={closeModal} title={t('billableService', 'Billable Service')} />
       <ModalBody>
         <AddBillableService
-          editingService={editingService}
+          serviceToEdit={serviceToEdit}
+          isModal
           onClose={closeModal}
           onServiceUpdated={onServiceUpdated}
-          isModal={true}
         />
       </ModalBody>
       <ModalFooter>

package/src/billable-services/payment-modes/payment-modes-config.component.tsx

@@ -41,16 +41,18 @@ const PaymentModesConfig: React.FC = () => {
   }, [fetchPaymentModes]);
 
   const handleAddPaymentMode = () => {
-    showModal('add-payment-mode-modal', {
+    const dispose = showModal('add-payment-mode-modal', {
       onPaymentModeAdded: fetchPaymentModes,
+      closeModal: () => dispose(),
     });
   };
 
   const handleDeletePaymentMode = (paymentMode) => {
-    showModal('delete-payment-mode-modal', {
+    const dispose = showModal('delete-payment-mode-modal', {
       paymentModeUuid: paymentMode.uuid,
       paymentModeName: paymentMode.name,
       onPaymentModeDeleted: fetchPaymentModes,
+      closeModal: () => dispose(),
     });
   };
 
@@ -74,49 +76,47 @@ const PaymentModesConfig: React.FC = () => {
             {t('addNewPaymentMode', 'Add New Payment Mode')}
           </Button>
         </CardHeader>
-        <div className={styles.historyContainer}>
-          <DataTable rows={rowData} headers={headerData} isSortable size="lg">
-            {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
-              <TableContainer>
-                <Table className={styles.table} {...getTableProps()}>
-                  <TableHead>
-                    <TableRow>
-                      {headers.map((header) => (
-                        <TableHeader key={header.key} {...getHeaderProps({ header })}>
-                          {header.header}
-                        </TableHeader>
-                      ))}
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {rows.map((row) => (
-                      <TableRow key={row.id} {...getRowProps({ row })}>
-                        {row.cells.map((cell) =>
-                          cell.info.header !== 'actions' ? (
-                            <TableCell key={cell.id}>{cell.value}</TableCell>
-                          ) : (
-                            <TableCell key={cell.id}>
-                              <OverflowMenu>
-                                <OverflowMenuItem
-                                  className={styles.menuItem}
-                                  itemText={getCoreTranslation('delete')}
-                                  onClick={() => {
-                                    const selected = paymentModes.find((p) => p.uuid === row.id);
-                                    handleDeletePaymentMode(selected);
-                                  }}
-                                />
-                              </OverflowMenu>
-                            </TableCell>
-                          ),
-                        )}
-                      </TableRow>
+        <DataTable rows={rowData} headers={headerData} isSortable size="lg">
+          {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+            <TableContainer>
+              <Table className={styles.table} {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                      <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
                     ))}
-                  </TableBody>
-                </Table>
-              </TableContainer>
-            )}
-          </DataTable>
-        </div>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow key={row.id} {...getRowProps({ row })}>
+                      {row.cells.map((cell) =>
+                        cell.info.header !== 'actions' ? (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ) : (
+                          <TableCell key={cell.id}>
+                            <OverflowMenu>
+                              <OverflowMenuItem
+                                className={styles.menuItem}
+                                itemText={getCoreTranslation('delete')}
+                                onClick={() => {
+                                  const selected = paymentModes.find((p) => p.uuid === row.id);
+                                  handleDeletePaymentMode(selected);
+                                }}
+                              />
+                            </OverflowMenu>
+                          </TableCell>
+                        ),
+                      )}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </DataTable>
       </div>
     </div>
   );

package/src/billable-services/payment-modes/payment-modes-config.scss

@@ -13,9 +13,6 @@
   padding: layout.$spacing-05;
 }
 
-.historyContainer {
-  margin-top: layout.$spacing-05;
-}
 
 .table {
   width: 100%;

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

@@ -1,9 +1,16 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { screen, render } from '@testing-library/react';
-import { useBillableItems, useCashPoint, createPatientBill, usePaymentMethods } from './billing-form.resource';
+import { useConfig } from '@openmrs/esm-framework';
+import { type BillingConfig } from '../config-schema';
+import { useBillableItems, useCashPoint, usePaymentMethods } 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 mockCashPoints = [
   {
     uuid: '54065383-b4d4-42d2-af4d-d250a1fd2590',
@@ -16,6 +23,7 @@ const mockCashPoints = [
 const mockBillableItems = [
   {
     uuid: 'b37dddd6-4490-4bf7-b694-43bf19d04059',
+    name: 'Consultation',
     conceptUuid: '1926AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
     conceptName: 'Consultation billable item',
     hasExpiration: false,
@@ -25,9 +33,21 @@ const mockBillableItems = [
     categoryName: 'Non Drug',
     commonName: 'Consultation',
     acronym: 'CONSULT',
+    servicePrices: [
+      {
+        uuid: 'price-1',
+        name: 'Default',
+        price: '100.00',
+        paymentMode: {
+          uuid: '1c30ee58-82d4-4ea4-a8c1-4bf2f9dfc8cf',
+          name: 'Insurance',
+        },
+      },
+    ],
   },
   {
     uuid: 'b47dddd6-4490-4bf7-b694-43bf19d04059',
+    name: 'Lab Testing',
     conceptUuid: '1926AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
     conceptName: 'Lab Testing billable item',
     hasExpiration: false,
@@ -37,23 +57,65 @@ const mockBillableItems = [
     categoryName: 'Non Drug',
     commonName: 'Lab Testing',
     acronym: 'CONSULT',
+    servicePrices: [
+      {
+        uuid: 'price-2',
+        name: 'Default',
+        price: '500.00001',
+        paymentMode: {
+          uuid: '1c30ee58-82d4-4ea4-a8c1-4bf2f9dfc8cf',
+          name: 'Insurance',
+        },
+      },
+    ],
   },
 ];
 
-const mockUseCashPoint = useCashPoint as jest.MockedFunction<typeof useCashPoint>;
-const mockUseBillableItems = useBillableItems as jest.MockedFunction<typeof useBillableItems>;
+const mockPaymentMethods = [
+  {
+    uuid: '1c30ee58-82d4-4ea4-a8c1-4bf2f9dfc8cf',
+    name: 'Insurance',
+    description: 'Insurance payment',
+  },
+  {
+    uuid: '2c30ee58-82d4-4ea4-a8c1-4bf2f9dfc8cf',
+    name: 'Cash',
+    description: 'Cash payment',
+  },
+];
 
 jest.mock('./billing-form.resource', () => ({
   useBillableItems: jest.fn(),
   useCashPoint: jest.fn(),
   createPatientBill: jest.fn(),
+  usePaymentMethods: jest.fn(),
 }));
 
 const testProps = { patientUuid: 'some-patient-uuid', setExtraVisitInfo: jest.fn() };
 
-xdescribe('BillingCheckInForm', () => {
+describe('BillingCheckInForm', () => {
   beforeEach(() => {
     jest.resetAllMocks();
+    mockUseConfig.mockReturnValue({
+      patientCatergory: {
+        paymentDetails: 'fbc0702d-b4c9-4968-be63-af8ad3ad6239',
+        paymentMethods: '8553afa0-bdb9-4d3c-8a98-05fa9350aa85',
+        policyNumber: '3a988e33-a6c0-4b76-b924-01abb998944b',
+        insuranceScheme: 'aac48226-d143-4274-80e0-264db4e368ee',
+        patientCategory: '3b9dfac8-9e4d-11ee-8c90-0242ac120002',
+        formPayloadPending: '919b51c9-8e2e-468f-8354-181bf3e55786',
+      },
+      catergoryConcepts: {
+        payingDetails: '44b34972-6630-4e5a-a9f6-a6eb0f109650',
+        nonPayingDetails: 'f3fb2d88-cccd-422c-8766-be101ba7bd2e',
+        insuranceDetails: 'beac329b-f1dc-4a33-9e7c-d95821a137a6',
+      },
+      nonPayingPatientCategories: {
+        childUnder5: '1528AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        student: '159465AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      },
+    } as BillingConfig);
+    mockUsePaymentMethods.mockReturnValue({ paymentModes: mockPaymentMethods, isLoading: false, error: null });
   });
 
   test('should show the loading spinner while retrieving data', () => {
@@ -76,53 +138,66 @@ xdescribe('BillingCheckInForm', () => {
 
   test('should render the form correctly and generate the required payload', async () => {
     const user = userEvent.setup();
-    mockUseCashPoint.mockReturnValue({ cashPoints: [], isLoading: false, error: null });
+    mockUseCashPoint.mockReturnValue({ cashPoints: mockCashPoints, isLoading: false, error: null });
     mockUseBillableItems.mockReturnValue({ lineItems: mockBillableItems, isLoading: false, error: null });
     renderBillingCheckinForm();
 
     const paymentTypeSelect = screen.getByRole('group', { name: 'Payment Details' });
     expect(paymentTypeSelect).toBeInTheDocument();
 
+    // Select "Paying" radio button
     const paymentTypeRadio = screen.getByRole('radio', { name: 'Paying' });
     expect(paymentTypeRadio).toBeInTheDocument();
     await user.click(paymentTypeRadio);
 
-    const billiableSelect = screen.getByRole('combobox', { name: 'Billable service' });
-    expect(billiableSelect).toBeInTheDocument();
-    await user.click(screen.getByRole('combobox', { name: 'Billable service' }));
+    // Wait for payment methods dropdown to appear and select a payment method
+    const paymentMethodsDropdown = await screen.findByRole('combobox', { name: /Payment methods/i });
+    expect(paymentMethodsDropdown).toBeInTheDocument();
+    await user.click(paymentMethodsDropdown);
 
-    await user.click(screen.getByText('Lab Testing'));
+    // Select "Insurance" payment method
+    const insuranceOption = await screen.findByText('Insurance');
+    await user.click(insuranceOption);
+
+    // Now select billable service
+    const billableSelect = screen.getByRole('combobox', { name: 'Billable service' });
+    expect(billableSelect).toBeInTheDocument();
+    await user.click(billableSelect);
+
+    // Click on Lab Testing option
+    const labTestingOption = await screen.findByText(/Lab Testing \(Default:500\.00001\)/);
+    await user.click(labTestingOption);
 
     expect(testProps.setExtraVisitInfo).toHaveBeenCalled();
     expect(testProps.setExtraVisitInfo).toHaveBeenCalledWith({
       createBillPayload: {
         lineItems: [
           {
-            item: 'b47dddd6-4490-4bf7-b694-43bf19d04059',
+            billableService: 'b47dddd6-4490-4bf7-b694-43bf19d04059',
             quantity: 1,
-            price: 500.00001,
+            price: '500.00001',
             priceName: 'Default',
-            priceUuid: '',
+            priceUuid: 'price-2',
             lineItemOrder: 0,
             paymentStatus: 'PENDING',
           },
         ],
-        cashPoint: '',
+        cashPoint: '54065383-b4d4-42d2-af4d-d250a1fd2590',
         patient: 'some-patient-uuid',
         status: 'PENDING',
         payments: [],
       },
       handleCreateExtraVisitInfo: expect.anything(),
-      attributes: [
-        {
-          attributeType: 'caf2124f-00a9-4620-a250-efd8535afd6d',
+      attributes: expect.arrayContaining([
+        expect.objectContaining({
+          attributeType: 'fbc0702d-b4c9-4968-be63-af8ad3ad6239',
+          value: '44b34972-6630-4e5a-a9f6-a6eb0f109650',
+        }),
+        expect.objectContaining({
+          attributeType: '8553afa0-bdb9-4d3c-8a98-05fa9350aa85',
           value: '1c30ee58-82d4-4ea4-a8c1-4bf2f9dfc8cf',
-        },
-        {
-          attributeType: '919b51c9-8e2e-468f-8354-181bf3e55786',
-          value: true,
-        },
-      ],
+        }),
+      ]),
     });
   });
 });

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

@@ -60,7 +60,8 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
     let selectedPaymentMethod = null;
 
     if (availablePaymentMethods.length === 1) {
-      defaultPrice = parseFloat(availablePaymentMethods[0].price);
+      const price = availablePaymentMethods[0].price;
+      defaultPrice = typeof price === 'number' ? price : parseFloat(price);
       selectedPaymentMethod = availablePaymentMethods[0];
     }
 
@@ -95,7 +96,7 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
         ? {
             ...item,
             selectedPaymentMethod: paymentMethod,
-            price: parseFloat(paymentMethod.price),
+            price: typeof paymentMethod.price === 'number' ? paymentMethod.price : parseFloat(paymentMethod.price),
             priceName: paymentMethod.name,
             priceUuid: paymentMethod.uuid,
           }
@@ -156,7 +157,6 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
           title: t('saveBill', 'Save Bill'),
           subtitle: t('billProcessingSuccess', 'Bill processing has been successful'),
           kind: 'success',
-          timeoutInMs: 3000,
         });
       },
       (error) => {
@@ -217,7 +217,10 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
                         size="md"
                         itemToString={(method: ServicePrice) =>
                           method
-                            ? `${method.name} - ${convertToCurrency(parseFloat(method.price), defaultCurrency)}`
+                            ? `${method.name} - ${convertToCurrency(
+                                typeof method.price === 'number' ? method.price : parseFloat(method.price),
+                                defaultCurrency,
+                              )}`
                             : ''
                         }
                         selectedItem={item.selectedPaymentMethod}

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

@@ -81,7 +81,6 @@ const Payments: React.FC<PaymentProps> = ({ bill, mutate }) => {
             title: t('billPayment', 'Bill payment'),
             subtitle: 'Bill payment processing has been successful',
             kind: 'success',
-            timeoutInMs: 3000,
           });
           if (currentVisit) {
             updateBillVisitAttribute(currentVisit);

package/src/modal/require-payment-modal.test.tsx

@@ -43,8 +43,8 @@ describe('RequirePaymentModal', () => {
       {
         status: 'UNPAID',
         lineItems: [
-          { billableService: 'Service 1', quantity: 1, price: 100 },
-          { item: 'Item 1', quantity: 2, price: 50 },
+          { billableService: 'Service 1', quantity: 1, price: 100, uuid: 'billable-service-1' },
+          { item: 'Item 1', quantity: 2, price: 50, uuid: 'billable-item-1' },
         ],
       },
     ];

package/src/types/index.ts

@@ -177,8 +177,17 @@ export type BillableItem = {
 };
 
 export type ServicePrice = {
-  name: string;
-  price: string;
+  itemPriceId?: number;
+  name?: string;
+  price: string | number;
+  paymentMode?: {
+    paymentModeId?: number;
+    uuid: string;
+    name: string;
+    description?: string;
+    sortOrder?: number;
+  };
+  billableService?: BillableService;
   uuid: string;
 };
 
@@ -188,10 +197,9 @@ export interface BillableService {
   shortName: string;
   serviceStatus: string;
   serviceType?: {
+    uuid: string;
     display: string;
   };
-  servicePrices: Array<{
-    name: string;
-    price: number;
-  }>;
+  concept?: ServiceConcept;
+  servicePrices: Array<ServicePrice>;
 }