@openmrs/esm-billing-app 1.0.2-pre.669 → 1.0.2-pre.673

package/dist/openmrs-esm-billing-app.js.buildmanifest.json

@@ -330,7 +330,7 @@
       "auxiliaryFiles": [
         "2352.js.map"
       ],
-      "hash": "422ac1657e297fb7",
+      "hash": "808a51d03d0ca1dd",
       "childrenByOrder": {}
     },
     {
@@ -571,9 +571,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 7316,
+      "size": 7097,
       "sizes": {
-        "javascript": 7316
+        "javascript": 7097
       },
       "names": [],
       "idHints": [],
@@ -585,7 +585,7 @@
         "4300.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "dc04fbea0153fdc8",
+      "hash": "88f7c7e8c98a95c1",
       "childrenByOrder": {}
     },
     {
@@ -659,9 +659,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 30526,
+      "size": 24140,
       "sizes": {
-        "javascript": 30526
+        "javascript": 24140
       },
       "names": [],
       "idHints": [],
@@ -675,7 +675,7 @@
       "auxiliaryFiles": [
         "4739.js.map"
       ],
-      "hash": "68eb58321499a73c",
+      "hash": "b0822fd2d079ef17",
       "childrenByOrder": {}
     },
     {
@@ -1236,9 +1236,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 1091132,
+      "size": 1090617,
       "sizes": {
-        "javascript": 1091090,
+        "javascript": 1090575,
         "consume-shared": 42
       },
       "names": [],
@@ -1252,7 +1252,7 @@
       "auxiliaryFiles": [
         "8638.js.map"
       ],
-      "hash": "4d595aa084ef0f34",
+      "hash": "fc1d72a2976f2aa3",
       "childrenByOrder": {}
     },
     {
@@ -1260,10 +1260,10 @@
       "initial": true,
       "entry": true,
       "recorded": false,
-      "size": 5111703,
+      "size": 5111188,
       "sizes": {
         "consume-shared": 210,
-        "javascript": 5089051,
+        "javascript": 5088536,
         "share-init": 336,
         "runtime": 22106
       },
@@ -1280,7 +1280,7 @@
       "auxiliaryFiles": [
         "main.js.map"
       ],
-      "hash": "13be6e7d9188253f",
+      "hash": "27f78dd3200a3e70",
       "childrenByOrder": {}
     },
     {

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":">=2.24.0","fhir2":">=1.2"},"pages":[{"component":"billableServicesHome","route":"billable-services"}],"extensions":[{"component":"billingDashboardLink","name":"billing-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"billing","title":"billing","slot":"billing-dashboard-slot"},"featureFlag":"billing"},{"component":"root","name":"billing-dashboard-root","slot":"billing-dashboard-slot"},{"name":"billing-patient-summary","component":"billingPatientSummary","slot":"patient-chart-billing-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"billing-summary-dashboard-link","component":"billingSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-billing-dashboard-slot","path":"Billing history"},"featureFlag":"billing"},{"name":"billable-services-app-menu-item","component":"billableServicesAppMenuItem","slot":"app-menu-item-slot","meta":{"name":"Billable Services"}},{"name":"billing-checkin-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm","featureFlag":"billing"},{"slot":"system-admin-page-card-link-slot","component":"billableServicesCardLink","name":"billable-services-admin-card-link"},{"name":"patient-banner-billing-tags","component":"visitAttributeTags","slot":"patient-banner-tags-slot","order":2},{"name":"billing-home-tiles-ext","slot":"billing-home-tiles-slot","component":"serviceMetrics"},{"name":"edit-bill-line-item-dialog","component":"editBillLineItemDialog","online":true,"offline":true}],"modals":[{"name":"require-billing-modal","component":"requirePaymentModal"}],"workspaces":[{"name":"billing-form-workspace","title":"billingForm","component":"billingFormWorkspace","type":"form"}],"featureFlags":[{"flagName":"billing","label":"Billing module","description":"This feature introduces navigation links on the patient chart and home page to allow accessing the billing module features"}],"version":"1.0.2-pre.669"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":">=2.24.0","fhir2":">=1.2"},"pages":[{"component":"billableServicesHome","route":"billable-services"}],"extensions":[{"component":"billingDashboardLink","name":"billing-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"billing","title":"billing","slot":"billing-dashboard-slot"},"featureFlag":"billing"},{"component":"root","name":"billing-dashboard-root","slot":"billing-dashboard-slot"},{"name":"billing-patient-summary","component":"billingPatientSummary","slot":"patient-chart-billing-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"billing-summary-dashboard-link","component":"billingSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-billing-dashboard-slot","path":"Billing history"},"featureFlag":"billing"},{"name":"billable-services-app-menu-item","component":"billableServicesAppMenuItem","slot":"app-menu-item-slot","meta":{"name":"Billable Services"}},{"name":"billing-checkin-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm","featureFlag":"billing"},{"slot":"system-admin-page-card-link-slot","component":"billableServicesCardLink","name":"billable-services-admin-card-link"},{"name":"patient-banner-billing-tags","component":"visitAttributeTags","slot":"patient-banner-tags-slot","order":2},{"name":"billing-home-tiles-ext","slot":"billing-home-tiles-slot","component":"serviceMetrics"},{"name":"edit-bill-line-item-dialog","component":"editBillLineItemDialog","online":true,"offline":true}],"modals":[{"name":"require-billing-modal","component":"requirePaymentModal"}],"workspaces":[{"name":"billing-form-workspace","title":"billingForm","component":"billingFormWorkspace","type":"form"}],"featureFlags":[{"flagName":"billing","label":"Billing module","description":"This feature introduces navigation links on the patient chart and home page to allow accessing the billing module features"}],"version":"1.0.2-pre.673"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-billing-app",
-  "version": "1.0.2-pre.669",
+  "version": "1.0.2-pre.673",
   "description": "O3 frontend module for handling billing concerns in healthcare settings",
   "browser": "dist/openmrs-esm-billing-app.js",
   "main": "src/index.ts",

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

@@ -1,31 +1,28 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import fuzzy from 'fuzzy';
-import isEmpty from 'lodash-es/isEmpty';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { mutate } from 'swr';
 import {
   Button,
   ButtonSet,
+  ComboBox,
   Form,
+  NumberInput,
   InlineLoading,
-  RadioButton,
-  RadioButtonGroup,
-  Search,
-  Stack,
+  InlineNotification,
   Table,
-  TableBody,
-  TableCell,
   TableHead,
-  TableHeader,
+  TableBody,
   TableRow,
+  TableHeader,
+  TableCell,
 } from '@carbon/react';
 import { TrashCan } from '@carbon/react/icons';
-import { mutate } from 'swr';
-import { useTranslation } from 'react-i18next';
-import { z } from 'zod';
-import { showSnackbar, showToast, useConfig, useDebounce, useLayoutType } from '@openmrs/esm-framework';
+import { useConfig, useLayoutType, showSnackbar } from '@openmrs/esm-framework';
+import { processBillItems, useBillableServices } from '../billing.resource';
+import { calculateTotalAmount, convertToCurrency } from '../helpers/functions';
+import type { BillingConfig } from '../config-schema';
+import type { BillableItem, LineItem } from '../types';
 import { apiBasePath } from '../constants';
-import { convertToCurrency } from '../helpers';
-import { type BillabeItem } from '../types';
-import { useFetchSearchResults, processBillItems } from '../billing.resource';
 import styles from './billing-form.scss';
 
 type BillingFormProps = {
@@ -34,150 +31,47 @@ type BillingFormProps = {
 };
 
 const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }) => {
-  const { t } = useTranslation();
-  const { defaultCurrency, postBilledItems } = useConfig();
   const isTablet = useLayoutType() === 'tablet';
-
-  const [grandTotal, setGrandTotal] = useState(0);
-  const [searchOptions, setSearchOptions] = useState([]);
-  const [billItems, setBillItems] = useState([]);
-  const [category, setCategory] = useState('');
-  const [saveDisabled, setSaveDisabled] = useState<boolean>(false);
+  const { t } = useTranslation();
+  const { defaultCurrency, postBilledItems } = useConfig<BillingConfig>();
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [addedItems, setAddedItems] = useState([]);
-  const [searchTerm, setSearchTerm] = useState('');
-  const debouncedSearchTerm = useDebounce(searchTerm);
-  const [disableSearch, setDisableSearch] = useState<boolean>(true);
-
-  const toggleSearch = (choiceSelected) => {
-    if (!isEmpty(choiceSelected)) {
-      setDisableSearch(false);
-    }
-    setCategory(choiceSelected === 'Stock Item' ? 'Stock Item' : 'Service');
-  };
-
-  const billItemSchema = z.object({
-    Qnty: z.number().min(1, t('quantityGreaterThanZero', 'Quantity must be at least one for all items.')), // zod logic
-  });
-
-  const calculateTotal = (event, itemName) => {
-    const quantity = parseInt(event.target.value);
-    let isValid = true;
-
-    try {
-      billItemSchema.parse({ Qnty: quantity });
-    } catch (error) {
-      isValid = false;
-      const parsedErrorMessage = JSON.parse(error.message);
-      showToast({
-        title: t('saveBill', 'Save Bill'),
-        kind: 'error',
-        description: parsedErrorMessage[0].message,
-      });
+  const [selectedItems, setSelectedItems] = useState<LineItem[]>([]);
+  const { data, error, isLoading } = useBillableServices();
+
+  const selectBillableItem = (item: BillableItem) => {
+    if (!item) return;
+    const existingItem = selectedItems.find((selectedItem) => selectedItem.uuid === item.uuid);
+
+    if (existingItem) {
+      const updatedItem = { ...existingItem, quantity: existingItem.quantity + 1 };
+      setSelectedItems(
+        [...selectedItems].map((selectedItem) => (selectedItem.uuid === item.uuid ? updatedItem : selectedItem)),
+      );
+      return;
     }
 
-    const updatedItems = billItems.map((item) => {
-      if (item.Item.toLowerCase().includes(itemName.toLowerCase())) {
-        return { ...item, Qnty: quantity, Total: quantity > 0 ? item.Price * quantity : 0 };
-      }
-      return item;
-    });
-
-    const anyInvalidQuantity = updatedItems.some((item) => item.Qnty <= 0);
-
-    setSaveDisabled(!isValid || anyInvalidQuantity);
-
-    setBillItems(updatedItems);
-
-    const updatedGrandTotal = updatedItems.reduce((acc, item) => acc + item.Total, 0);
-    setGrandTotal(updatedGrandTotal);
-  };
-
-  const calculateTotalAfterAddBillItem = (items) => {
-    const sum = items.reduce((acc, item) => acc + item.Price * item.Qnty, 0);
-    setGrandTotal(sum);
+    const mappedItem: LineItem = {
+      uuid: item.uuid,
+      display: item.name,
+      quantity: 1,
+      price: item.servicePrices?.length > 0 ? parseFloat(item.servicePrices?.[0]?.price) : 0,
+      billableService: item.uuid,
+      paymentStatus: 'PENDING',
+      lineItemOrder: 0,
+    };
+    setSelectedItems([...selectedItems, mappedItem]);
   };
 
-  const addItemToBill = (event, itemid, itemname, itemcategory, itemPrice) => {
-    const existingItemIndex = billItems.findIndex((item) => item.uuid === itemid);
-
-    let updatedItems = [];
-    if (existingItemIndex >= 0) {
-      updatedItems = billItems.map((item, index) => {
-        if (index === existingItemIndex) {
-          const updatedQuantity = item.Qnty + 1;
-          return { ...item, Qnty: updatedQuantity, Total: updatedQuantity * item.Price };
-        }
-        return item;
-      });
-    } else {
-      const newItem = {
-        uuid: itemid,
-        Item: itemname,
-        Qnty: 1,
-        Price: itemPrice,
-        Total: itemPrice,
-        category: itemcategory,
-      };
-      updatedItems = [...billItems, newItem];
-      setAddedItems([...addedItems, newItem]);
-    }
-
-    setBillItems(updatedItems);
-    calculateTotalAfterAddBillItem(updatedItems);
-    (document.getElementById('searchField') as HTMLInputElement).value = '';
+  const updateQuantity = (uuid: string, quantity: number) => {
+    const updatedItems = [...selectedItems].map((item) => (item.uuid === uuid ? { ...item, quantity } : item));
+    setSelectedItems(updatedItems);
   };
 
-  const removeItemFromBill = (uuid) => {
-    const updatedItems = billItems.filter((item) => item.uuid !== uuid);
-    setBillItems(updatedItems);
-
-    // Update the list of added items
-    setAddedItems(addedItems.filter((item) => item.uuid !== uuid));
-
-    const updatedGrandTotal = updatedItems.reduce((acc, item) => acc + item.Total, 0);
-    setGrandTotal(updatedGrandTotal);
+  const removeSelectedBillableItem = (uuid: string) => {
+    const updatedItems = [...selectedItems].filter((item) => item.uuid !== uuid);
+    setSelectedItems(updatedItems);
   };
 
-  const { data, error, isLoading, isValidating } = useFetchSearchResults(debouncedSearchTerm, category);
-
-  const handleSearchTermChange = (e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value);
-
-  const filterItems = useMemo(() => {
-    if (!debouncedSearchTerm || isLoading || error) {
-      return [];
-    }
-
-    const res = data as { results: BillabeItem[] };
-    const existingItemUuids = new Set(billItems.map((item) => item.uuid));
-
-    const preprocessedData = res?.results
-      ?.map((item) => {
-        return {
-          uuid: item.uuid || '',
-          Item: item.commonName ? item.commonName : item.name,
-          Qnty: 1,
-          Price: item.commonName ? 10 : item.servicePrices[0]?.price,
-          Total: item.commonName ? 10 : item.servicePrices[0]?.price,
-          category: item.commonName ? 'StockItem' : 'Service',
-        };
-      })
-      .filter((item) => !existingItemUuids.has(item.uuid));
-
-    return debouncedSearchTerm
-      ? fuzzy
-          .filter(debouncedSearchTerm, preprocessedData, {
-            extract: (o) => `${o.Item}`,
-          })
-          .sort((r1, r2) => r1.score - r2.score)
-          .map((result) => result.original)
-      : searchOptions;
-  }, [debouncedSearchTerm, isLoading, error, data, billItems, searchOptions]);
-
-  useEffect(() => {
-    setSearchOptions(filterItems);
-  }, [filterItems]);
-
   const postBillItems = () => {
     setIsSubmitting(true);
     const bill = {
@@ -189,23 +83,16 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
       status: 'PENDING',
     };
 
-    billItems.forEach((item) => {
-      const lineItem: any = {
-        quantity: parseInt(item.Qnty),
-        price: item.Price,
-        priceName: 'Default',
-        priceUuid: postBilledItems.priceUuid,
+    selectedItems.forEach((item) => {
+      const lineItem: LineItem = {
+        quantity: item.quantity,
+        price: item.price,
         lineItemOrder: 0,
         paymentStatus: 'PENDING',
+        billableService: item.uuid,
       };
 
-      if (item.category === 'StockItem') {
-        lineItem.item = item.uuid;
-      } else {
-        lineItem.billableService = item.uuid;
-      }
-
-      bill?.lineItems.push(lineItem);
+      bill.lineItems.push(lineItem);
     });
 
     const url = `${apiBasePath}bill`;
@@ -233,57 +120,28 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
     );
   };
 
-  const handleClearSearchTerm = () => {
-    setSearchOptions([]);
-  };
-
   return (
     <Form className={styles.form}>
       <div className={styles.grid}>
-        <Stack>
-          <RadioButtonGroup
-            legendText={t('selectCategory', 'Select category')}
-            name="radio-button-group"
-            defaultSelected="radio-1"
-            className={styles.mt2}
-            onChange={toggleSearch}>
-            <RadioButton labelText={t('stockItem', 'Stock Item')} value="Stock Item" id="stockItem" />
-            <RadioButton labelText={t('service', 'Service')} value="Service" id="service" />
-          </RadioButtonGroup>
-        </Stack>
-        <Stack>
-          <Search
-            size="lg"
-            id="searchField"
-            disabled={disableSearch}
-            closeButtonLabelText={t('clearSearchInput', 'Clear search input')}
-            className={styles.mt2}
-            placeholder={t('searchItems', 'Search items and services')}
-            labelText={t('searchItems', 'Search items and services')}
-            onKeyUp={handleSearchTermChange}
-            onClear={handleClearSearchTerm}
+        {isLoading ? (
+          <InlineLoading description={t('loading', 'Loading') + '...'} />
+        ) : error ? (
+          <InlineNotification
+            kind="error"
+            lowContrast
+            title={t('billErrorService', 'Bill service error')}
+            subtitle={t('errorLoadingBillServices', 'Error loading bill services')}
           />
-        </Stack>
-        <Stack>
-          <ul className={styles.searchContent}>
-            {searchOptions?.length > 0 &&
-              searchOptions?.map((row) => (
-                <li key={row.uuid} className={styles.searchItem}>
-                  <Button
-                    id={row.uuid}
-                    onClick={(e) => addItemToBill(e, row.uuid, row.Item, row.category, row.Price)}
-                    style={{ background: 'inherit', color: 'black' }}>
-                    {row.Item} Qnty.{row.Qnty} {defaultCurrency}.{row.Price}
-                  </Button>
-                </li>
-              ))}
-
-            {searchOptions?.length === 0 && !isLoading && !!debouncedSearchTerm && (
-              <p>{t('noResultsFound', 'No results found')}</p>
-            )}
-          </ul>
-        </Stack>
-        <Stack>
+        ) : (
+          <ComboBox
+            id="searchItems"
+            onChange={({ selectedItem: item }: { selectedItem: BillableItem }) => selectBillableItem(item)}
+            itemToString={(item: BillableItem) => item?.name || ''}
+            items={data ?? []}
+            titleText={t('searchItems', 'Search items and services')}
+          />
+        )}
+        {selectedItems && selectedItems.length > 0 && (
           <Table aria-label="sample table" className={styles.mt2}>
             <TableHead>
               <TableRow>
@@ -295,63 +153,53 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
               </TableRow>
             </TableHead>
             <TableBody>
-              {billItems && Array.isArray(billItems) ? (
-                billItems.map((row) => (
-                  <TableRow>
-                    <TableCell>{row.Item}</TableCell>
-                    <TableCell>
-                      <input
-                        type="number"
-                        className={`form-control ${row.Qnty <= 0 ? styles.invalidInput : ''}`}
-                        id={row.Item}
-                        min={0}
-                        max={100}
-                        value={row.Qnty}
-                        onChange={(e) => {
-                          calculateTotal(e, row.Item);
-                          row.Qnty = e.target.value;
-                        }}
-                      />
-                    </TableCell>
-                    <TableCell id={row.Item + 'Price'}>{row.Price}</TableCell>
-                    <TableCell id={row.Item + 'Total'} className="totalValue">
-                      {row.Total}
-                    </TableCell>
-                    <TableCell>
-                      <TrashCan onClick={() => removeItemFromBill(row.uuid)} className={styles.removeButton} />
-                    </TableCell>
-                  </TableRow>
-                ))
-              ) : (
-                <p>{t('loading', 'Loading...')}</p>
-              )}
+              {selectedItems.map((row) => (
+                <TableRow>
+                  <TableCell>{row.display}</TableCell>
+                  <TableCell>
+                    <NumberInput
+                      id={row.uuid}
+                      min={1}
+                      value={row.quantity}
+                      onChange={(_, { value }) => {
+                        const number = parseFloat(String(value));
+                        updateQuantity(row.uuid, isNaN(number) ? 1 : number);
+                      }}
+                    />
+                  </TableCell>
+                  <TableCell id={row.uuid + 'Price'}>{row.price}</TableCell>
+                  <TableCell id={row.uuid + 'Total'} className="totalValue">
+                    {row.price * row.quantity}
+                  </TableCell>
+                  <TableCell>
+                    <TrashCan className={styles.removeButton} onClick={() => removeSelectedBillableItem(row.uuid)} />
+                  </TableCell>
+                </TableRow>
+              ))}
               <TableRow>
                 <TableCell colSpan={3}></TableCell>
                 <TableCell style={{ fontWeight: 'bold' }}>{t('grandTotal', 'Grand total')}:</TableCell>
-                <TableCell id="GrandTotalSum">{convertToCurrency(grandTotal, defaultCurrency)}</TableCell>
+                <TableCell id="GrandTotalSum">
+                  {convertToCurrency(calculateTotalAmount(selectedItems), defaultCurrency)}
+                </TableCell>
               </TableRow>
             </TableBody>
           </Table>
-        </Stack>
-
-        <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
-          <Button className={styles.button} kind="secondary" disabled={isSubmitting} onClick={closeWorkspace}>
-            {t('discard', 'Discard')}
-          </Button>
-          <Button
-            className={styles.button}
-            kind="primary"
-            onClick={postBillItems}
-            disabled={isSubmitting || saveDisabled}
-            type="submit">
-            {isSubmitting ? (
-              <InlineLoading description={t('saving', 'Saving') + '...'} />
-            ) : (
-              t('saveAndClose', 'Save and close')
-            )}
-          </Button>
-        </ButtonSet>
+        )}
       </div>
+
+      <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+        <Button className={styles.button} kind="secondary" disabled={isSubmitting || selectedItems.length === 0} onClick={closeWorkspace}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button className={styles.button} kind="primary" onClick={postBillItems} disabled={isSubmitting} type="submit">
+          {isSubmitting ? (
+            <InlineLoading description={t('saving', 'Saving') + '...'} />
+          ) : (
+            t('saveAndClose', 'Save and close')
+          )}
+        </Button>
+      </ButtonSet>
     </Form>
   );
 };

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

@@ -73,6 +73,9 @@
 
 .grid {
   margin: layout.$spacing-05;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
 }
 
 .row {

package/src/billing.resource.ts

@@ -9,11 +9,11 @@ import {
   openmrsFetch,
   useSession,
   useVisit,
-  restBaseUrl,
   type SessionLocation,
+  useOpenmrsFetchAll,
 } from '@openmrs/esm-framework';
 import { apiBasePath, omrsDateFormat } from './constants';
-import type { MappedBill, PatientInvoice } from './types';
+import type { MappedBill, PatientInvoice, BillableItem } from './types';
 import SelectedDateContext from './hooks/selectedDateContext';
 
 export const useBills = (patientUuid: string = '', billStatus: string = '') => {
@@ -134,16 +134,9 @@ export const usePatientPaymentInfo = (patientUuid: string) => {
   return paymentInformation;
 };
 
-export function useFetchSearchResults(searchVal, category) {
-  let url = ``;
-  if (category == 'Stock Item') {
-    url = `${restBaseUrl}/stockmanagement/stockitem?v=default&limit=10&q=${searchVal}`;
-  } else {
-    url = `${apiBasePath}billableService?v=custom:(uuid,name,shortName,serviceStatus,serviceType:(display),servicePrices:(uuid,name,price,paymentMode))`;
-  }
-  const { data, error, isLoading, isValidating } = useSWR(searchVal ? url : null, openmrsFetch, {});
-
-  return { data: data?.data, error, isLoading: isLoading, isValidating };
+export function useBillableServices() {
+  const url = `${apiBasePath}billableService?v=custom:(uuid,name,shortName,serviceStatus,serviceType:(display),servicePrices:(uuid,name,price,paymentMode))`;
+  return useOpenmrsFetchAll<BillableItem>(url);
 }
 
 export const processBillItems = (payload) => {

package/src/types/index.ts

@@ -52,19 +52,19 @@ interface Provider {
 }
 
 export interface LineItem {
-  uuid: string;
-  display: string;
-  voided: boolean;
-  voidReason: string | null;
-  item: string;
-  billableService: string;
+  uuid?: string;
+  item?: string;
+  paymentStatus: string;
+  billableService?: string;
   quantity: number;
   price: number;
-  priceName: string;
-  priceUuid: string;
-  lineItemOrder: number;
-  resourceVersion: string;
-  paymentStatus: string;
+  priceName?: string;
+  priceUuid?: string;
+  lineItemOrder?: number;
+  resourceVersion?: string;
+  display?: string;
+  voided?: boolean;
+  voidReason?: string | null;
 }
 
 interface PatientLink {
@@ -168,7 +168,7 @@ export type ServiceConcept = {
   display: string;
 };
 
-export type BillabeItem = {
+export type BillableItem = {
   uuid: string;
   id?: number;
   name?: string;
@@ -177,6 +177,7 @@ export type BillabeItem = {
 };
 
 export type ServicePrice = {
+  name: string;
   price: string;
   uuid: string;
 };