@openmrs/esm-billing-app 1.0.2-pre.86 → 1.0.2-pre.863

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

@@ -1,22 +1,29 @@
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { showSnackbar } from '@openmrs/esm-framework';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
+import { type FetchResponse, getDefaultsFromConfigSchema, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { configSchema, type BillingConfig } from '../config-schema';
 import { type MappedBill } from '../types';
 import { updateBillItems } from '../billing.resource';
-import ChangeStatus from './edit-bill-item.component';
+import EditBillLineItemModal from './edit-bill-item.modal';
 
-// Mock external dependencies
-jest.mock('../billing.resource', () => ({
-  updateBillItems: jest.fn(() => Promise.resolve({})),
-}));
+const mockUpdateBillItems = jest.mocked(updateBillItems);
+const mockShowSnackbar = jest.mocked(showSnackbar);
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
 
-jest.mock('@openmrs/esm-framework', () => ({
-  showSnackbar: jest.fn(),
+const mockBillableServices = [
+  { name: 'X-Ray Service', uuid: 'xray-uuid-123' },
+  { name: 'Lab Test Service', uuid: 'lab-uuid-456' },
+  { name: 'Consultation Service', uuid: 'consult-uuid-789' },
+];
+
+jest.mock('../billing.resource', () => ({
+  updateBillItems: jest.fn().mockResolvedValue({}),
 }));
 
 jest.mock('../billable-services/billable-service.resource', () => ({
   useBillableServices: jest.fn(() => ({
-    billableServices: [],
+    billableServices: mockBillableServices,
   })),
 }));
 
@@ -41,7 +48,7 @@ const mockBill: MappedBill = {
       voided: false,
       voidReason: null,
       priceName: 'Service Price',
-      billableService: 'service-uuid',
+      billableService: 'X-Ray Service',
       priceUuid: 'price-uuid',
       lineItemOrder: 1,
       resourceVersion: '1.0',
@@ -62,7 +69,7 @@ const mockItem = {
   uuid: 'item-uuid',
   quantity: 2,
   price: 100,
-  billableService: 'service-uuid',
+  billableService: 'X-Ray Service',
   paymentStatus: 'UNPAID',
   item: 'Test Service',
   display: 'Test Service',
@@ -74,64 +81,231 @@ const mockItem = {
   resourceVersion: '1.0',
 };
 
-describe('ChangeStatus component', () => {
-  const closeModalMock = jest.fn();
-
+describe('EditBillItem', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      defaultCurrency: 'USD',
+    });
   });
 
+  const mockCloseModal = jest.fn();
+
   test('renders the form with correct fields and default values', () => {
-    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
 
-    expect(screen.getByText('Edit bill line item?')).toBeInTheDocument();
-    expect(screen.getByText('John Doe · Main Cashpoint · 123456')).toBeInTheDocument();
-    expect(screen.getByRole('spinbutton', { name: /Quantity/ })).toHaveValue(2);
-    expect(screen.getByLabelText(/Unit Price/)).toHaveValue('100');
-    expect(screen.getByText(/Total/)).toHaveTextContent('200');
+    expect(screen.getByText(/edit bill line item/i)).toBeInTheDocument();
+    expect(screen.getByText(/John Doe/)).toBeInTheDocument();
+    expect(screen.getByText(/Main Cashpoint/)).toBeInTheDocument();
+    expect(screen.getByText(/123456/)).toBeInTheDocument();
+    expect(screen.getByRole('spinbutton', { name: /quantity/i })).toHaveValue(2);
+    expect(screen.getByLabelText(/unit price/i)).toHaveValue('100');
+    expect(screen.getByText(/total/i)).toHaveTextContent(/200/);
   });
 
-  test('updates total when quantity is changed', () => {
-    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+  test('updates total when quantity is changed', async () => {
+    const user = userEvent.setup();
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
 
-    const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
-    fireEvent.change(quantityInput, { target: { value: 3 } });
+    const quantityInput = screen.getByRole('spinbutton', { name: /quantity/i });
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '3');
 
-    expect(screen.getByText(/Total/)).toHaveTextContent('300');
+    expect(screen.getByText(/total/i)).toHaveTextContent(/300/);
   });
 
   test('submits the form and shows a success notification', async () => {
-    (updateBillItems as jest.Mock).mockResolvedValueOnce({});
+    const user = userEvent.setup();
+    mockUpdateBillItems.mockResolvedValueOnce({} as FetchResponse<any>);
 
-    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
 
-    fireEvent.click(screen.getByText(/Save/));
+    await user.click(screen.getByText(/save/i));
 
     await waitFor(() => {
-      expect(updateBillItems).toHaveBeenCalled();
+      expect(mockUpdateBillItems).toHaveBeenCalled();
       expect(showSnackbar).toHaveBeenCalledWith({
-        title: 'Save Bill',
-        subtitle: 'Bill processing has been successful',
+        title: 'Line item updated',
+        subtitle: 'The bill line item has been updated successfully',
         kind: 'success',
-        timeoutInMs: 3000,
       });
-      expect(closeModalMock).toHaveBeenCalled();
+      expect(mockCloseModal).toHaveBeenCalled();
     });
   });
 
   test('shows error notification when submission fails', async () => {
-    (updateBillItems as jest.Mock).mockRejectedValueOnce({ message: 'Error occurred' });
+    const user = userEvent.setup();
+    mockUpdateBillItems.mockRejectedValueOnce({ message: 'Error occurred' });
 
-    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
 
-    fireEvent.click(screen.getByText(/Save/));
+    await user.click(screen.getByText(/Save/));
 
     await waitFor(() => {
-      expect(showSnackbar).toHaveBeenCalledWith({
-        title: 'Bill processing error',
+      expect(mockShowSnackbar).toHaveBeenCalledWith({
+        title: 'Failed to update line item',
         kind: 'error',
         subtitle: 'Error occurred',
       });
     });
   });
+
+  test('preserves billable service UUIDs for other line items when editing', async () => {
+    const user = userEvent.setup();
+    mockUpdateBillItems.mockResolvedValueOnce({} as FetchResponse<any>);
+
+    // Bill with multiple line items with different billable services
+    const billWithMultipleItems: MappedBill = {
+      ...mockBill,
+      lineItems: [
+        {
+          uuid: 'item-1',
+          quantity: 1,
+          price: 100,
+          billableService: 'X-Ray Service',
+          paymentStatus: 'PENDING',
+          item: 'X-Ray',
+          display: 'X-Ray',
+          voided: false,
+          voidReason: null,
+          priceName: 'X-Ray Price',
+          priceUuid: 'xray-price-uuid',
+          lineItemOrder: 1,
+          resourceVersion: '1.0',
+        },
+        {
+          uuid: 'item-2',
+          quantity: 2,
+          price: 50,
+          billableService: 'Lab Test Service',
+          paymentStatus: 'PENDING',
+          item: 'Lab Test',
+          display: 'Lab Test',
+          voided: false,
+          voidReason: null,
+          priceName: 'Lab Price',
+          priceUuid: 'lab-price-uuid',
+          lineItemOrder: 2,
+          resourceVersion: '1.0',
+        },
+        {
+          uuid: 'item-3',
+          quantity: 1,
+          price: 200,
+          billableService: 'Consultation Service',
+          paymentStatus: 'PENDING',
+          item: 'Consultation',
+          display: 'Consultation',
+          voided: false,
+          voidReason: null,
+          priceName: 'Consult Price',
+          priceUuid: 'consult-price-uuid',
+          lineItemOrder: 3,
+          resourceVersion: '1.0',
+        },
+      ],
+    };
+
+    // Editing the Lab Test item (item-2)
+    const itemToEdit = billWithMultipleItems.lineItems[1];
+
+    render(<EditBillLineItemModal bill={billWithMultipleItems} item={itemToEdit} closeModal={mockCloseModal} />);
+
+    await user.click(screen.getByText(/Save/));
+
+    await waitFor(() => {
+      expect(mockUpdateBillItems).toHaveBeenCalled();
+      const payload = mockUpdateBillItems.mock.calls[0][0];
+
+      // Verify that each line item has the correct billable service UUID
+      const xrayItem = payload.lineItems.find((li) => li.uuid === 'item-1');
+      const consultItem = payload.lineItems.find((li) => li.uuid === 'item-3');
+
+      // These should NOT have the Lab Test UUID (lab-uuid-456)
+      // They should keep their original UUIDs
+      expect(xrayItem?.billableService).toBe('xray-uuid-123');
+      expect(consultItem?.billableService).toBe('consult-uuid-789');
+
+      // The edited item should have the Lab Test UUID
+      const labItem = payload.lineItems.find((li) => li.uuid === 'item-2');
+      expect(labItem?.billableService).toBe('lab-uuid-456');
+    });
+  });
+
+  test('shows validation error for quantity less than 1', async () => {
+    const user = userEvent.setup();
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
+
+    const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '0');
+
+    // Try to submit
+    await user.click(screen.getByText(/Save/));
+
+    // Should show validation error
+    await waitFor(() => {
+      expect(screen.getByText(/Quantity must be at least 1/)).toBeInTheDocument();
+    });
+
+    // Should NOT call the update function
+    expect(mockUpdateBillItems).not.toHaveBeenCalled();
+  });
+
+  test('shows validation error for quantity greater than 100', async () => {
+    const user = userEvent.setup();
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
+
+    const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '101');
+
+    await user.click(screen.getByText(/Save/));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Quantity cannot exceed 100/)).toBeInTheDocument();
+    });
+    expect(mockUpdateBillItems).not.toHaveBeenCalled();
+  });
+
+  test('shows validation error for non-integer quantity', async () => {
+    const user = userEvent.setup();
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
+
+    const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '2.5');
+
+    await user.click(screen.getByText(/Save/));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Quantity must be a whole number/)).toBeInTheDocument();
+    });
+    expect(mockUpdateBillItems).not.toHaveBeenCalled();
+  });
+
+  test('clears validation error when valid quantity is entered', async () => {
+    const user = userEvent.setup();
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
+
+    const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
+
+    // Enter invalid value
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '0');
+    await user.click(screen.getByText(/Save/));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Quantity must be at least 1/)).toBeInTheDocument();
+    });
+
+    // Fix it
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '5');
+
+    // Error should disappear
+    await waitFor(() => {
+      expect(screen.queryByText(/Quantity must be at least 1/)).not.toBeInTheDocument();
+    });
+  });
 });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Checkbox,
   Layer,
@@ -9,7 +9,7 @@ import {
   StructuredListWrapper,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { useConfig } from '@openmrs/esm-framework';
+import { getCoreTranslation, useConfig } from '@openmrs/esm-framework';
 import { convertToCurrency } from '../../helpers';
 import { type MappedBill, type LineItem } from '../../types';
 import BillWaiverForm from './bill-waiver-form.component';
@@ -20,7 +20,7 @@ const PatientBillsSelections: React.FC<{ bills: MappedBill; setPatientUuid: (pat
   setPatientUuid,
 }) => {
   const { t } = useTranslation();
-  const [selectedBills, setSelectedBills] = React.useState<Array<LineItem>>([]);
+  const [selectedBills, setSelectedBills] = useState<Array<LineItem>>([]);
   const { defaultCurrency } = useConfig();
 
   const checkBoxLabel = (lineItem) => {
@@ -42,9 +42,9 @@ const PatientBillsSelections: React.FC<{ bills: MappedBill; setPatientUuid: (pat
           <StructuredListRow head>
             <StructuredListCell head>{t('billItem', 'Bill item')}</StructuredListCell>
             <StructuredListCell head>{t('quantity', 'Quantity')}</StructuredListCell>
-            <StructuredListCell head>{t('unitPrice', 'Unit Price')}</StructuredListCell>
+            <StructuredListCell head>{t('unitPrice', 'Unit price')}</StructuredListCell>
             <StructuredListCell head>{t('total', 'Total')}</StructuredListCell>
-            <StructuredListCell head>{t('actions', 'Actions')}</StructuredListCell>
+            <StructuredListCell head>{getCoreTranslation('actions')}</StructuredListCell>
           </StructuredListRow>
         </StructuredListHead>
         <StructuredListBody>

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

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Form, Stack, FormGroup, Layer, Button, NumberInput } from '@carbon/react';
 import { TaskAdd } from '@carbon/react/icons';
 import { mutate } from 'swr';
 import { useTranslation } from 'react-i18next';
 import { showSnackbar, useConfig } from '@openmrs/esm-framework';
 import { createBillWaiverPayload } from './utils';
-import { convertToCurrency } from '../../helpers';
+import { calculateTotalAmount, convertToCurrency } from '../../helpers';
 import { processBillPayment } from '../../billing.resource';
 import { useBillableItems } from '../../billing-form/billing-form.resource';
 import type { LineItem, MappedBill } from '../../types';
@@ -20,16 +20,16 @@ type BillWaiverFormProps = {
 
 const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPatientUuid }) => {
   const { t } = useTranslation();
-  const [waiverAmount, setWaiverAmount] = React.useState(0);
-  const { lineItems: billableLineItems, isLoading: isLoadingLineItems, error: lineError } = useBillableItems();
-  const totalAmount = lineItems.reduce((acc, curr) => acc + curr.price * curr.quantity, 0);
+  const [waiverAmount, setWaiverAmount] = useState(0);
+  const { lineItems: billableLineItems } = useBillableItems();
+  const totalAmount = calculateTotalAmount(lineItems);
   const { defaultCurrency } = useConfig();
 
   if (lineItems?.length === 0) {
     return null;
   }
 
-  const handleProcessPayment = (event) => {
+  const handleProcessPayment = async () => {
     const waiverEndPointPayload = createBillWaiverPayload(
       bill,
       waiverAmount,
@@ -38,30 +38,26 @@ const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPat
       billableLineItems,
     );
 
-    processBillPayment(waiverEndPointPayload, bill.uuid).then(
-      (resp) => {
-        showSnackbar({
-          title: t('billWaiver', 'Bill waiver'),
-          subtitle: t('billWaiverSuccess', 'Bill waiver successful'),
-          kind: 'success',
-          timeoutInMs: 3500,
-          isLowContrast: true,
-        });
-        setPatientUuid('');
-        mutate((key) => typeof key === 'string' && key.startsWith(`${apiBasePath}bill?v=full`), undefined, {
-          revalidate: true,
-        });
-      },
-      (err) => {
-        showSnackbar({
-          title: t('billWaiver', 'Bill waiver'),
-          subtitle: t('billWaiverError', 'Bill waiver failed {{error}}', { error: err.message }),
-          kind: 'error',
-          timeoutInMs: 3500,
-          isLowContrast: true,
-        });
-      },
-    );
+    try {
+      await processBillPayment(waiverEndPointPayload, bill.uuid);
+      showSnackbar({
+        title: t('billWaiver', 'Bill waiver'),
+        subtitle: t('billWaiverSuccess', 'Bill waiver successful'),
+        kind: 'success',
+        isLowContrast: true,
+      });
+      setPatientUuid('');
+      mutate((key) => typeof key === 'string' && key.startsWith(`${apiBasePath}bill?v=full`), undefined, {
+        revalidate: true,
+      });
+    } catch (error) {
+      showSnackbar({
+        title: t('billWaiver', 'Bill waiver'),
+        subtitle: t('billWaiverError', 'Bill waiver failed {{error}}', { error: error?.message }),
+        kind: 'error',
+        isLowContrast: true,
+      });
+    }
   };
 
   return (
@@ -72,7 +68,7 @@ const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPat
           <section className={styles.billWaiverDescription}>
             <label className={styles.label}>{t('billItems', 'Bill Items')}</label>
             <p className={styles.value}>
-              {t('billName', ' {{billName}} ', {
+              {t('billName', '{{billName}}', {
                 billName: lineItems.map((item) => item.item || item.billableService).join(', ') ?? '--',
               })}
             </p>
@@ -84,7 +80,7 @@ const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPat
 
           <Layer className={styles.formControlLayer}>
             <NumberInput
-              label={t('amountToWaiveLabel', 'Amount to Waive')}
+              label={t('amountToWaiveLabel', 'Amount to waive')}
               helperText={t('amountToWaiveHelper', 'Specify the amount to be deducted from the bill')}
               aria-label={t('amountToWaiveAriaLabel', 'Enter amount to waive')}
               hideSteppers

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

@@ -37,9 +37,9 @@ const PatientBills: React.FC<PatientBillsProps> = ({ patientUuid, bills, setPati
   }
 
   const tableHeaders = [
-    { header: 'Date', key: 'date' },
-    { header: 'Billable Service', key: 'billableService' },
-    { header: 'Total Amount', key: 'totalAmount' },
+    { header: t('date', 'Date'), key: 'date' },
+    { header: t('billableService', 'Billable service'), key: 'billableService' },
+    { header: t('totalAmount', 'Total amount'), key: 'totalAmount' },
   ];
 
   const tableRows = bills.map((bill) => ({
@@ -58,7 +58,7 @@ const PatientBills: React.FC<PatientBillsProps> = ({ patientUuid, bills, setPati
               <div className={styles.illo}>
                 <EmptyDataIllustration />
               </div>
-              <p className={styles.content}>{t('noBilltoDisplay', 'There are no bills to display for this patient')}</p>
+              <p className={styles.content}>{t('noBillToDisplay', 'There are no bills to display for this patient')}</p>
             </Tile>
           </Layer>
         </div>
@@ -84,13 +84,13 @@ const PatientBills: React.FC<PatientBillsProps> = ({ patientUuid, bills, setPati
           getTableContainerProps,
         }) => (
           <TableContainer
-            title={t('patientBills', 'Patient bill')}
+            title={t('patientBills', 'Patient bills')}
             description={t('patientBillsDescription', 'List of patient bills')}
             {...getTableContainerProps()}>
-            <Table {...getTableProps()} aria-label="sample table">
+            <Table {...getTableProps()} aria-label={t('billsTable', 'Bills table')}>
               <TableHead>
                 <TableRow>
-                  <TableExpandHeader enableToggle={true} {...getExpandHeaderProps()} />
+                  <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
                   {headers.map((header, i) => (
                     <TableHeader
                       key={i}

package/src/billable-services/bill-waiver/utils.ts

@@ -1,6 +1,7 @@
 import { type OpenmrsResource } from '@openmrs/esm-framework';
-import type { LineItem, MappedBill } from '../../types';
+import type { LineItem, MappedBill, PaymentPayload } from '../../types';
 
+// TODO: Move this UUID to the config schema
 const WAIVER_UUID = 'eb6173cb-9678-4614-bbe1-0ccf7ed9d1d4';
 
 export const createBillWaiverPayload = (
@@ -12,7 +13,7 @@ export const createBillWaiverPayload = (
 ) => {
   const { cashier } = bill;
 
-  const billPayment = {
+  const billPayment: PaymentPayload = {
     amount: parseFloat(totalAmount.toFixed(2)),
     amountTendered: parseFloat(Number(amountWaived).toFixed(2)),
     attributes: [],
@@ -25,11 +26,20 @@ export const createBillWaiverPayload = (
     paymentStatus: 'PAID',
   }));
 
+  // Transform existing payments to PaymentPayload format
+  const existingPayments: PaymentPayload[] = bill.payments.map((payment) => ({
+    amount: payment.amount,
+    amountTendered: payment.amountTendered,
+    attributes: payment.attributes,
+    instanceType: payment.instanceType.uuid,
+    dateCreated: payment.dateCreated,
+  }));
+
   const processedPayment = {
     cashPoint: bill.cashPointUuid,
     cashier: cashier.uuid,
     lineItems: processedLineItems,
-    payments: [...bill.payments, billPayment],
+    payments: [...existingPayments, billPayment],
     patient: bill.patientUuid,
   };
 

package/src/billable-services/billable-service.resource.ts

@@ -1,16 +1,21 @@
 import useSWR from 'swr';
 import { type OpenmrsResource, openmrsFetch, restBaseUrl, useOpenmrsFetchAll, useConfig } from '@openmrs/esm-framework';
-import { type ServiceConcept } from '../types';
 import { apiBasePath } from '../constants';
-import { type BillableService } from '../types/index';
+import type {
+  BillableService,
+  ConceptSearchResult,
+  CreateBillableServicePayload,
+  UpdateBillableServicePayload,
+} from '../types';
+import type { BillingConfig } from '../config-schema';
 
 type ResponseObject = {
   results: Array<OpenmrsResource>;
 };
 
 export const useBillableServices = () => {
-  const url = `${apiBasePath}billableService?v=custom:(uuid,name,shortName,serviceStatus,concept:(uuid,display,name:(name)),serviceType:(display),servicePrices:(uuid,name,price,paymentMode:(uuid,name)))`;
-  const { data, isLoading, isValidating, error, mutate } = useOpenmrsFetchAll<BillableService[]>(url);
+  const url = `${apiBasePath}billableService?v=custom:(uuid,name,shortName,serviceStatus,concept:(uuid,display,name:(name)),serviceType:(display,uuid),servicePrices:(uuid,name,price,paymentMode:(uuid,name)))`;
+  const { data, isLoading, isValidating, error, mutate } = useOpenmrsFetchAll<BillableService>(url);
 
   return {
     billableServices: data ?? [],
@@ -22,16 +27,23 @@ export const useBillableServices = () => {
 };
 
 export function useServiceTypes() {
-  const config = useConfig();
-  const serviceConceptUuid = config.serviceTypes.billableService;
+  const { serviceTypes } = useConfig<BillingConfig>();
+  const serviceConceptUuid = serviceTypes.billableService;
   const url = `${restBaseUrl}/concept/${serviceConceptUuid}?v=custom:(setMembers:(uuid,display))`;
 
-  const { data, error, isLoading } = useSWR<{ data }>(url, openmrsFetch);
+  const { data, error, isLoading } = useSWR<{ data: { setMembers: Array<{ uuid: string; display: string }> } }>(
+    url,
+    openmrsFetch,
+  );
+
+  const sortedServiceTypes = data?.data.setMembers
+    ? [...data.data.setMembers].sort((a, b) => a.display.localeCompare(b.display))
+    : [];
 
   return {
-    serviceTypes: data?.data.setMembers ?? [],
+    serviceTypes: sortedServiceTypes,
     error,
-    isLoading,
+    isLoadingServiceTypes: isLoading,
   };
 }
 
@@ -40,28 +52,21 @@ export const usePaymentModes = () => {
 
   const { data, error, isLoading } = useSWR<{ data: ResponseObject }>(url, openmrsFetch);
 
+  const sortedPaymentModes = data?.data.results
+    ? [...data.data.results].sort((a, b) => a.name.localeCompare(b.name))
+    : [];
+
   return {
-    paymentModes: data?.data.results ?? [],
+    paymentModes: sortedPaymentModes,
     error,
-    isLoading,
+    isLoadingPaymentModes: isLoading,
   };
 };
 
-export const createBillableSerice = (payload: any) => {
-  const url = `${apiBasePath}api/billable-service`;
-  return openmrsFetch(url, {
-    method: 'POST',
-    body: payload,
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-};
-
 export function useConceptsSearch(conceptToLookup: string) {
   const conditionsSearchUrl = `${restBaseUrl}/conceptsearch?q=${conceptToLookup}`;
 
-  const { data, error, isLoading } = useSWR<{ data: { results: Array<ServiceConcept> } }, Error>(
+  const { data, error, isLoading } = useSWR<{ data: { results: Array<ConceptSearchResult> } }, Error>(
     conceptToLookup ? conditionsSearchUrl : null,
     openmrsFetch,
   );
@@ -73,11 +78,22 @@ export function useConceptsSearch(conceptToLookup: string) {
   };
 }
 
-export const updateBillableService = (uuid: string, payload: any) => {
-  const url = `${apiBasePath}/billableService/${uuid}`;
+export const createBillableService = (payload: CreateBillableServicePayload) => {
+  const url = `${apiBasePath}api/billable-service`;
   return openmrsFetch(url, {
     method: 'POST',
-    body: JSON.stringify(payload),
+    body: payload,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
+export const updateBillableService = (uuid: string, payload: UpdateBillableServicePayload) => {
+  const url = `${apiBasePath}billableService/${uuid}`;
+  return openmrsFetch(url, {
+    method: 'POST',
+    body: payload,
     headers: {
       'Content-Type': 'application/json',
     },