@openmrs/esm-billing-app 1.0.2-pre.90 → 1.0.2-pre.905

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 {
@@ -85,3 +88,143 @@
 .spacer {
   margin-top: layout.$spacing-05;
 }
+
+.selectedItemsContainer {
+  margin-top: layout.$spacing-05;
+  
+  h4 {
+    margin-bottom: layout.$spacing-05;
+    color: $text-02;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+  
+  .itemCard {
+    border: 1px solid $ui-03;
+    border-radius: layout.$spacing-02;
+    padding: layout.$spacing-05;
+    margin-bottom: layout.$spacing-05;
+    background-color: $ui-01;
+    
+    .itemHeader {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: layout.$spacing-05;
+      
+      .itemName {
+        font-weight: 600;
+        font-size: 1rem;
+        color: $text-02;
+      }
+    }
+    
+      .itemControls {
+      display: flex;
+      flex-wrap: wrap;
+      gap: layout.$spacing-05;
+      margin-top: layout.$spacing-03;
+      align-items: flex-end;      .controlSection {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        
+        &:first-child {
+          flex: 1 1 auto;
+          min-width: 250px;
+        }
+        
+        &:nth-child(2) {
+          flex: 0 0 140px;
+          width: 140px;
+        }
+        
+        &:last-child {
+          flex: 0 0 180px;
+          width: 180px;
+          margin-left: auto;
+          text-align: right;
+        }
+        
+        label {
+          font-size: 0.875rem;
+          font-weight: 500;
+          margin-bottom: layout.$spacing-03;
+          color: $text-02;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        
+        :global(.cds--list-box),
+        :global(.cds--number),
+        :global(.cds--combo-box),
+        :global(.cds--list-box__wrapper),
+        :global(.cds--list-box__field) {
+          width: 100% !important;
+          max-width: 100% !important;
+          min-width: 0 !important;
+        }
+        
+        .priceDisplay,
+        .totalDisplay {
+          font-size: 0.875rem;
+          font-size: 0.875rem;
+          font-weight: 600;
+          color: $text-02;
+          padding: layout.$spacing-03 0;
+          word-break: break-word;
+        }
+      }
+    }
+  }
+  
+  .grandTotal {
+    text-align: right;
+    padding: layout.$spacing-05;
+    border-top: 2px solid $interactive-01;
+    margin-top: layout.$spacing-05;
+    background-color: $ui-01;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: $text-02;
+  }
+}
+
+@media (max-width: 1056px) {
+  .selectedItemsContainer {
+    .itemCard {
+      .itemControls {
+        .controlSection {
+          &:nth-child(2) {
+            flex: 1 1 100%;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .selectedItemsContainer {
+    .itemCard {
+      padding: layout.$spacing-04;
+      
+      .itemControls {
+        flex-direction: column;
+        gap: layout.$spacing-03;
+        
+        .controlSection {
+          &:first-child,
+          &:nth-child(2),
+          &:last-child {
+            flex: 1 1 100%;
+            width: 100%;
+            max-width: 100%;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -100,7 +100,7 @@ const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes
       <InlineLoading
         status="active"
         iconDescription={t('loadingDescription', 'Loading')}
-        description={t('loading', 'Loading data...')}
+        description={t('loading', 'Loading data') + '...'}
       />
     );
   }

package/src/billing.resource.ts

@@ -1,48 +1,79 @@
-import { useContext } from 'react';
-import dayjs from 'dayjs';
-import isEmpty from 'lodash-es/isEmpty';
-import sortBy from 'lodash-es/sortBy';
 import useSWR from 'swr';
-import { formatDate, parseDate, openmrsFetch, useSession, useVisit, restBaseUrl } from '@openmrs/esm-framework';
-import { apiBasePath, omrsDateFormat } from './constants';
-import type { FacilityDetail, MappedBill, PatientInvoice } from './types';
-import SelectedDateContext from './hooks/selectedDateContext';
-
-export const useBills = (patientUuid: string = '', billStatus: string = '') => {
-  const { selectedDate } = useContext(SelectedDateContext);
-  const endDate = dayjs().endOf('day').format(omrsDateFormat);
-  const url = `${apiBasePath}bill?q=&v=full`;
-
-  const patientUrl = `${apiBasePath}bill?patientUuid=${patientUuid}&v=full`;
-
-  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Array<PatientInvoice> } }>(
-    isEmpty(patientUuid) ? url : patientUrl,
-    openmrsFetch,
-  );
+import sortBy from 'lodash-es/sortBy';
+import {
+  formatDate,
+  parseDate,
+  openmrsFetch,
+  useSession,
+  useVisit,
+  type SessionLocation,
+  useOpenmrsFetchAll,
+} from '@openmrs/esm-framework';
+import { apiBasePath } from './constants';
+import type {
+  MappedBill,
+  PatientInvoice,
+  BillableItem,
+  BillPaymentPayload,
+  CreateBillPayload,
+  UpdateBillPayload,
+} from './types';
+
+const mapBillProperties = (bill: PatientInvoice): MappedBill => {
+  const activeLineItems = bill?.lineItems?.filter((item) => !item.voided) || [];
+
+  const status =
+    activeLineItems.length > 1
+      ? activeLineItems.some((item) => item.paymentStatus === 'PENDING')
+        ? 'PENDING'
+        : 'PAID'
+      : bill.status;
 
-  const mapBillProperties = (bill: PatientInvoice): MappedBill => ({
+  return {
     id: bill?.id,
     uuid: bill?.uuid,
     patientName: bill?.patient?.display.split('-')?.[1],
     identifier: bill?.patient?.display.split('-')?.[0],
     patientUuid: bill?.patient?.uuid,
-    status: bill.lineItems.some((item) => item.paymentStatus === 'PENDING') ? 'PENDING' : 'PAID',
+    status,
     receiptNumber: bill?.receiptNumber,
     cashier: bill?.cashier,
     cashPointUuid: bill?.cashPoint?.uuid,
     cashPointName: bill?.cashPoint?.name,
     cashPointLocation: bill?.cashPoint?.location?.display,
     dateCreated: bill?.dateCreated ? formatDate(parseDate(bill.dateCreated), { mode: 'wide' }) : '--',
-    lineItems: bill?.lineItems,
-    billingService: bill?.lineItems.map((bill) => bill?.item || bill?.billableService || '--').join('  '),
-    payments: bill?.payments,
+    lineItems: activeLineItems,
+    billingService: activeLineItems.map((lineItem) => lineItem?.item || lineItem?.billableService || '--').join('  '),
+    payments: bill.payments,
     display: bill?.display,
-    totalAmount: bill?.lineItems?.map((item) => item.price * item.quantity).reduce((prev, curr) => prev + curr, 0),
-  });
+    totalAmount: activeLineItems?.map((item) => item.price * item.quantity).reduce((prev, curr) => prev + curr, 0),
+    tenderedAmount: bill?.payments?.map((item) => item.amountTendered).reduce((prev, curr) => prev + curr, 0),
+  };
+};
+
+export const useBills = (patientUuid: string = '', billStatus: string = '') => {
+  // Build URL with status parameter if provided
+  const buildUrl = () => {
+    let url = `${apiBasePath}bill?v=full`;
+
+    if (patientUuid) {
+      url += `&patientUuid=${patientUuid}`;
+    }
+
+    if (billStatus) {
+      url += `&status=${billStatus}`;
+    }
+
+    return url;
+  };
+
+  const { data, error, isLoading, isValidating, mutate } = useSWR<{ data: { results: Array<PatientInvoice> } }>(
+    buildUrl(),
+    openmrsFetch,
+  );
 
   const sortedBills = sortBy(data?.data?.results ?? [], ['dateCreated']).reverse();
-  const filteredBills = billStatus === '' ? sortedBills : sortedBills?.filter((bill) => bill?.status === billStatus);
-  const mappedResults = filteredBills?.map((bill) => mapBillProperties(bill));
+  const mappedResults = sortedBills?.map((bill) => mapBillProperties(bill));
 
   return {
     bills: mappedResults,
@@ -60,31 +91,6 @@ export const useBill = (billUuid: string) => {
     openmrsFetch,
   );
 
-  const mapBillProperties = (bill: PatientInvoice): MappedBill => ({
-    id: bill?.id,
-    uuid: bill?.uuid,
-    patientName: bill?.patient?.display.split('-')?.[1],
-    identifier: bill?.patient?.display.split('-')?.[0],
-    patientUuid: bill?.patient?.uuid,
-    status:
-      bill.lineItems.length > 1
-        ? bill.lineItems.some((item) => item.paymentStatus === 'PENDING')
-          ? 'PENDING'
-          : 'PAID'
-        : bill.status,
-    receiptNumber: bill?.receiptNumber,
-    cashier: bill?.cashier,
-    cashPointUuid: bill?.cashPoint?.uuid,
-    cashPointName: bill?.cashPoint?.name,
-    cashPointLocation: bill?.cashPoint?.location?.display,
-    dateCreated: bill?.dateCreated ? formatDate(parseDate(bill.dateCreated), { mode: 'wide' }) : '--',
-    lineItems: bill?.lineItems,
-    billingService: bill?.lineItems.map((bill) => bill.item).join(' '),
-    payments: bill.payments,
-    totalAmount: bill?.lineItems?.map((item) => item.price * item.quantity).reduce((prev, curr) => prev + curr, 0),
-    tenderedAmount: bill?.payments?.map((item) => item.amountTendered).reduce((prev, curr) => prev + curr, 0),
-  });
-
   const formattedBill = data?.data ? mapBillProperties(data?.data) : null;
 
   return {
@@ -96,7 +102,7 @@ export const useBill = (billUuid: string) => {
   };
 };
 
-export const processBillPayment = (payload, billUuid: string) => {
+export const processBillPayment = (payload: BillPaymentPayload, billUuid: string) => {
   const url = `${apiBasePath}bill/${billUuid}`;
 
   return openmrsFetch(url, {
@@ -108,13 +114,9 @@ export const processBillPayment = (payload, billUuid: string) => {
   });
 };
 
-export function useDefaultFacility() {
-  const url = `${restBaseUrl}/kenyaemr/default-facility`;
-  const { authenticated } = useSession();
-
-  const { data, isLoading } = useSWR<{ data: FacilityDetail }>(authenticated ? url : null, openmrsFetch);
-
-  return { data: data?.data, isLoading: isLoading };
+export function useDefaultFacility(): { data: SessionLocation | null } {
+  const { sessionLocation } = useSession();
+  return { data: sessionLocation };
 }
 
 export const usePatientPaymentInfo = (patientUuid: string) => {
@@ -130,19 +132,12 @@ 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) => {
+export const processBillItems = (payload: CreateBillPayload) => {
   const url = `${apiBasePath}bill`;
   return openmrsFetch(url, {
     method: 'POST',
@@ -153,7 +148,7 @@ export const processBillItems = (payload) => {
   });
 };
 
-export const updateBillItems = (payload) => {
+export const updateBillItems = (payload: UpdateBillPayload) => {
   const url = `${apiBasePath}bill/${payload.uuid}`;
   return openmrsFetch(url, {
     method: 'POST',

package/src/bills-table/bills-table.component.tsx

@@ -149,7 +149,7 @@ const BillsTable = () => {
     return (
       <div className={styles.errorContainer}>
         <Layer>
-          <ErrorState error={error} headerTitle={t('billsList', 'Bill list')} />
+          <ErrorState error={error} headerTitle={t('billList', 'Bill list')} />
         </Layer>
       </div>
     );
@@ -168,7 +168,7 @@ const BillsTable = () => {
           label=""
           onChange={handleFilterChange}
           size={responsiveSize}
-          titleText={t('filterBy', 'Filter by') + ':'}
+          titleText={t('filterBy', 'Filter by:')}
           type="inline"
         />
       </div>
@@ -190,7 +190,7 @@ const BillsTable = () => {
             useZebraStyles={rowData?.length > 1 ? true : false}>
             {({ rows, headers, getRowProps, getTableProps }) => (
               <TableContainer>
-                <Table {...getTableProps()} aria-label="bill list">
+                <Table {...getTableProps()} aria-label={t('billList', 'Bill list')}>
                   <TableHead>
                     <TableRow>
                       {headers.map((header) => (

package/src/bills-table/bills-table.test.tsx

@@ -4,91 +4,126 @@ import { render, screen, waitFor } from '@testing-library/react';
 import { useBills } from '../billing.resource';
 import BillsTable from './bills-table.component';
 
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
+jest.mock('@openmrs/esm-framework', () => {
+  const actual = jest.requireActual('@openmrs/esm-framework');
+  return {
+    ...actual,
+    ConfigurableLink: ({ children, to, templateParams }: any) => {
+      let resolvedTo = to as string;
+      if (templateParams) {
+        resolvedTo = resolvedTo
+          .replace('${patientUuid}', templateParams.patientUuid)
+          .replace('${uuid}', templateParams.uuid)
+          .replace('${openmrsSpaBase}', '/openmrs/spa');
+      }
+      resolvedTo = resolvedTo.replace(/^\/openmrs\/spa/, '');
+      return <a href={resolvedTo}>{children}</a>;
+    },
+  };
+});
+
+jest.mock('../billing.resource', () => ({
+  useBills: jest.fn(() => ({
+    bills: mockBillsData,
+    isLoading: false,
+    isValidating: false,
+    error: null,
+  })),
 }));
 
+const mockBills = jest.mocked(useBills);
+
 const mockBillsData = [
   {
     uuid: '1',
+    id: 1,
     patientName: 'John Doe',
     identifier: '12345678',
     visitType: 'Checkup',
     patientUuid: 'uuid1',
     dateCreated: '2024-01-01',
-    lineItems: [{ billableService: 'Service 1' }],
+    lineItems: [
+      {
+        uuid: 'line-item-1',
+        display: 'Service 1 Line Item',
+        voided: false,
+        voidReason: null,
+        item: 'Service 1',
+        billableService: 'Service 1',
+        quantity: 1,
+        price: 100,
+        priceName: 'Standard Price',
+        priceUuid: 'price-1',
+        lineItemOrder: 1,
+        resourceVersion: '1.0',
+        paymentStatus: 'PENDING',
+      },
+    ],
     status: 'PENDING',
+    cashPointUuid: 'cash-point-1',
+    cashPointName: 'Main Cash Point',
+    cashPointLocation: 'Main Hospital',
+    cashier: { uuid: 'cashier-1', display: 'Jane Cashier', links: [] },
+    receiptNumber: 'RCP-001',
+    billingService: 'Service 1',
+    payments: [],
+    totalAmount: 100,
+    tenderedAmount: 0,
   },
   {
     uuid: '2',
+    id: 2,
     patientName: 'Mary Smith',
     identifier: '98765432',
     visitType: 'Wake up',
     patientUuid: 'uuid2',
     dateCreated: '2024-01-02',
-    lineItems: [{ billableService: 'Service 2' }],
+    lineItems: [
+      {
+        uuid: 'line-item-2',
+        display: 'Service 2 Line Item',
+        voided: false,
+        voidReason: null,
+        item: 'Service 2',
+        billableService: 'Service 2',
+        quantity: 1,
+        price: 200,
+        priceName: 'Standard Price',
+        priceUuid: 'price-1',
+        lineItemOrder: 1,
+        resourceVersion: '1.0',
+        paymentStatus: 'PENDING',
+      },
+    ],
     status: 'PENDING',
+    cashPointUuid: 'cash-point-1',
+    cashPointName: 'Main Cash Point',
+    cashPointLocation: 'Main Hospital',
+    cashier: { uuid: 'cashier-1', display: 'Jane Cashier', links: [] },
+    receiptNumber: 'RCP-002',
+    billingService: 'Service 2',
+    payments: [],
+    totalAmount: 200,
+    tenderedAmount: 200,
   },
 ];
 
-jest.mock('../billing.resource', () => ({
-  useBills: jest.fn(() => ({
-    bills: mockBillsData,
-    isLoading: false,
-    isValidating: false,
-    error: null,
-  })),
-}));
-
-jest.mock('@openmrs/esm-patient-common-lib', () => ({
-  EmptyDataIllustration: jest.fn(() => <div>Empty state illustration</div>),
-}));
-
-jest.mock('@openmrs/esm-framework', () => ({
-  useLayoutType: jest.fn(() => 'desktop'),
-  isDesktop: jest.fn(() => true),
-  ErrorState: jest.fn(({ error }) => <div data-testid="error-state">{error?.message || error}</div>),
-  useConfig: jest.fn(() => ({
-    bills: {
-      pageSizes: [10, 20, 30, 40, 50],
-      pageSize: 10,
-    },
-  })),
-  usePagination: jest.fn().mockImplementation((data) => ({
-    currentPage: 1,
-    goTo: jest.fn(),
-    results: data,
-    paginated: true,
-  })),
-  ConfigurableLink: jest.fn(({ children, to, templateParams }) => {
-    const resolvedTo = '/home/billing/patient/' + templateParams.patientUuid + '/' + templateParams.uuid;
-    return <a href={resolvedTo}>{children}</a>;
-  }),
-  openmrsSpaBase: '',
-}));
-
 describe('BillsTable', () => {
-  const mockBills = useBills as jest.Mock;
-  let user;
-
   beforeEach(() => {
-    user = userEvent.setup();
     mockBills.mockImplementation(() => ({
       bills: mockBillsData,
       isLoading: false,
       isValidating: false,
       error: null,
+      mutate: jest.fn(),
     }));
   });
 
   test('renders data table with pending bills', () => {
     render(<BillsTable />);
 
-    expect(screen.getByText('visitTime')).toBeInTheDocument();
-    expect(screen.getByText('identifier')).toBeInTheDocument();
-
+    expect(screen.getByText('Visit time')).toBeInTheDocument();
+    expect(screen.getByText('Identifier')).toBeInTheDocument();
     expect(screen.getByText(/John Doe/)).toBeInTheDocument();
     expect(screen.getByText('12345678')).toBeInTheDocument();
   });
@@ -99,6 +134,7 @@ describe('BillsTable', () => {
       isLoading: false,
       isValidating: false,
       error: null,
+      mutate: jest.fn(),
     }));
 
     render(<BillsTable />);
@@ -111,28 +147,33 @@ describe('BillsTable', () => {
       isLoading: true,
       isValidating: false,
       error: null,
+      mutate: jest.fn(),
     }));
 
     render(<BillsTable />);
+
     const dataTableSkeleton = screen.getByRole('table');
     expect(dataTableSkeleton).toBeInTheDocument();
     expect(dataTableSkeleton).toHaveClass('cds--skeleton cds--data-table cds--data-table--zebra');
   });
 
-  test('should display the error state when there is error', () => {
+  test('should display an error state if there is a problem loading bill data', () => {
     mockBills.mockImplementationOnce(() => ({
       bills: undefined,
       isLoading: false,
       isValidating: false,
       error: new Error('Error in fetching data'),
+      mutate: jest.fn(),
     }));
 
     render(<BillsTable />);
-    expect(screen.getByTestId('error-state')).toBeInTheDocument();
+
+    expect(screen.getByText(/error state/i)).toBeInTheDocument();
     expect(screen.queryByRole('table')).not.toBeInTheDocument();
   });
 
   test('should filter bills by search term', async () => {
+    const user = userEvent.setup();
     render(<BillsTable />);
 
     const searchInput = screen.getByRole('searchbox');
@@ -142,7 +183,6 @@ describe('BillsTable', () => {
     expect(screen.getByText('Mary Smith')).toBeInTheDocument();
 
     await user.type(searchInput, 'John Doe');
-
     await waitFor(() => {
       expect(screen.queryByText('Mary Smith')).not.toBeInTheDocument();
     });
@@ -156,15 +196,18 @@ describe('BillsTable', () => {
     const patientNameLink = screen.getByRole('link', { name: 'John Doe' });
     expect(patientNameLink).toBeInTheDocument();
 
-    expect(patientNameLink.getAttribute('href')).toEqual('/home/billing/patient/uuid1/1');
+    expect(patientNameLink).toHaveAttribute('href', '/home/billing/patient/uuid1/1');
   });
 
   test('should filter bills by payment status', async () => {
+    const user = userEvent.setup();
+
     mockBills.mockImplementationOnce(() => ({
       bills: mockBillsData.map((bill) => ({ ...bill, status: 'PENDING' })),
       isLoading: false,
       isValidating: false,
       error: null,
+      mutate: jest.fn(),
     }));
 
     render(<BillsTable />);
@@ -175,7 +218,7 @@ describe('BillsTable', () => {
     const paidBillsOption = screen.getAllByText('Paid bills')[0];
     await user.click(paidBillsOption);
 
-    expect(screen.getByText('noMatchingBillsToDisplay')).toBeInTheDocument();
+    expect(screen.getByText('No matching bills to display')).toBeInTheDocument();
   });
 
   test('should show loading state during background updates', () => {
@@ -184,6 +227,7 @@ describe('BillsTable', () => {
       isLoading: false,
       isValidating: true,
       error: null,
+      mutate: jest.fn(),
     }));
 
     render(<BillsTable />);