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

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.resource.ts

@@ -3,9 +3,17 @@ 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 {
+  formatDate,
+  parseDate,
+  openmrsFetch,
+  useSession,
+  useVisit,
+  type SessionLocation,
+  useOpenmrsFetchAll,
+} from '@openmrs/esm-framework';
 import { apiBasePath, omrsDateFormat } from './constants';
-import type { FacilityDetail, MappedBill, PatientInvoice } from './types';
+import type { MappedBill, PatientInvoice, BillableItem } from './types';
 import SelectedDateContext from './hooks/selectedDateContext';
 
 export const useBills = (patientUuid: string = '', billStatus: string = '') => {
@@ -108,13 +116,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,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/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();
     });
@@ -160,11 +200,14 @@ describe('BillsTable', () => {
   });
 
   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 />);

package/src/config-schema.ts

@@ -1,8 +1,25 @@
-import { Type } from '@openmrs/esm-framework';
-
-export interface BillingConfig {}
+import { Type, validators } from '@openmrs/esm-framework';
 
 export const configSchema = {
+  logo: {
+    src: {
+      _type: Type.String,
+      _default: '',
+      _description: 'The path or URL to the logo image. If set to an empty string, the alt text will be used.',
+      _validators: [validators.isUrl],
+    },
+    alt: {
+      _type: Type.String,
+      _default: '',
+      _description:
+        'The alternative text for the logo image, displayed when the image cannot be loaded or on hover. If not provided and src is empty, the default OpenMRS SVG sprite will be used.',
+    },
+  },
+  country: {
+    _type: Type.String,
+    _description: 'The text that gets printed on the top right of the invoice, typically the name of the country',
+    _default: 'Kenya',
+  },
   patientCatergory: {
     _type: Type.Object,
     _description: 'Patient Category Custom UUIDs',
@@ -15,7 +32,6 @@ export const configSchema = {
       formPayloadPending: '919b51c9-8e2e-468f-8354-181bf3e55786',
     },
   },
-
   catergoryConcepts: {
     _type: Type.Object,
     _description: 'Patient Category Concept UUIDs',
@@ -25,7 +41,6 @@ export const configSchema = {
       insuranceDetails: 'beac329b-f1dc-4a33-9e7c-d95821a137a6',
     },
   },
-
   nonPayingPatientCategories: {
     _type: Type.Object,
     _description: 'Concept UUIDs for non-paying patient categories',
@@ -34,7 +49,6 @@ export const configSchema = {
       student: '159465AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
     },
   },
-
   postBilledItems: {
     _type: Type.Object,
     _description: 'Post Bill Items such as cashPoints, cashier, priceUUid when submitting a bill',
@@ -44,7 +58,6 @@ export const configSchema = {
       priceUuid: '7b9171ac-d3c1-49b4-beff-c9902aee5245',
     },
   },
-
   serviceTypes: {
     _type: Type.Object,
     _description: 'Post Bill Items such as cashPoints, cashier, priceUUid when submitting a bill',
@@ -52,19 +65,16 @@ export const configSchema = {
       billableService: '21b8cf43-9f9f-4d02-9f4a-d710ece54261',
     },
   },
-
   defaultCurrency: {
     _type: Type.String,
     _description: 'The default currency for the application. Specify the currency code (e.g., KES, UGX, GBP).',
     _default: 'KES',
   },
-
   pageSize: {
     _type: Type.Number,
     _description: 'The default page size',
     _default: 10,
   },
-
   showEditBillButton: {
     _type: Type.Boolean,
     _description: 'Whether to show the edit bill button or not.',
@@ -72,14 +82,38 @@ export const configSchema = {
   },
 };
 
-export interface ConfigObject {
-  patientCatergory: Object;
+export interface BillingConfig {
+  logo: {
+    src: string;
+    alt: string;
+  };
+  country: string;
+  patientCatergory: {
+    paymentDetails: string;
+    paymentMethods: string;
+    policyNumber: string;
+    insuranceScheme: string;
+    patientCategory: string;
+    formPayloadPending: string;
+  };
+  catergoryConcepts: {
+    payingDetails: string;
+    nonPayingDetails: string;
+    insuranceDetails: string;
+  };
+  nonPayingPatientCategories: {
+    childUnder5: string;
+    student: string;
+  };
+  postBilledItems: {
+    cashPoint: string;
+    cashier: string;
+    priceUuid: string;
+  };
+  serviceTypes: {
+    billableService: string;
+  };
   defaultCurrency: string;
-  catergoryConcepts: Object;
-  pageSize;
-  object;
+  pageSize: number;
   showEditBillButton: boolean;
-  postBilledItems: Object;
-  serviceTypes: Object;
-  nonPayingPatientCategories: Object;
 }

package/src/dashboard.meta.ts

@@ -1,8 +1,10 @@
-export const dashboardMeta = {
+import { type DashboardLinkConfig } from '@openmrs/esm-patient-common-lib';
+
+export const dashboardMeta: DashboardLinkConfig & { slot: string; columns: number; hideDashboardTitle: boolean } = {
   slot: 'patient-chart-billing-dashboard-slot',
   columns: 1,
   title: 'Billing history',
   hideDashboardTitle: true,
-  icon: '',
+  icon: 'omrs-icon-money',
   path: 'Billing history',
 };

package/src/helpers/functions.ts

@@ -1,3 +1,4 @@
+import { getCoreTranslation } from '@openmrs/esm-framework';
 import { type Payment, type LineItem } from '../types';
 
 // amount already paid
@@ -51,13 +52,13 @@ export const convertToCurrency = (amountToConvert: number, currencyType?: string
 export const getGender = (gender: string, t) => {
   switch (gender) {
     case 'male':
-      return t('male', 'Male');
+      return getCoreTranslation('male');
     case 'female':
-      return t('female', 'Female');
+      return getCoreTranslation('female');
     case 'other':
-      return t('other', 'Other');
+      return getCoreTranslation('other');
     case 'unknown':
-      return t('unknown', 'Unknown');
+      return getCoreTranslation('unknown');
     default:
       return gender;
   }

package/src/index.ts

@@ -3,12 +3,17 @@ import { createDashboardLink } from '@openmrs/esm-patient-common-lib';
 import { createLeftPanelLink } from './left-panel-link.component';
 import { dashboardMeta } from './dashboard.meta';
 import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import AddCashPointModal from './billable-services/cash-point/add-cash-point.modal';
+import AddPaymentModeModal from './billable-services/payment-modes/add-payment-mode.modal';
 import appMenu from './billable-services/billable-services-menu-item/item.component';
 import BillableServiceHome from './billable-services/billable-services-home.component';
 import BillableServicesCardLink from './billable-services-admin-card-link.component';
 import BillHistory from './bill-history/bill-history.component';
 import BillingCheckInForm from './billing-form/billing-checkin-form.component';
-import RequirePaymentModal from './modal/require-payment-modal.component';
+import DeletePaymentModeModal from './billable-services/payment-modes/delete-payment-mode.modal';
+import EditBillableServiceModal from './billable-services/create-edit/edit-billable-service.modal';
+import EditBillLineItemModal from './bill-item-actions/edit-bill-item.modal';
+import RequirePaymentModal from './modal/require-payment.modal';
 import RootComponent from './root.component';
 import ServiceMetrics from './billable-services/dashboard/service-metrics.component';
 import VisitAttributeTags from './invoice/payments/visit-tags/visit-attribute.component';
@@ -35,6 +40,7 @@ export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }
 
+// t('billingHistory', 'Billing History')
 export const billingSummaryDashboardLink = getSyncLifecycle(
   createDashboardLink({ ...dashboardMeta, moduleName }),
   options,
@@ -52,16 +58,21 @@ export const billingPatientSummary = getSyncLifecycle(BillHistory, options);
 
 export const requirePaymentModal = getSyncLifecycle(RequirePaymentModal, options);
 
+export const addPaymentModeModal = getSyncLifecycle(AddPaymentModeModal, options);
+
+export const deletePaymentModeModal = getSyncLifecycle(DeletePaymentModeModal, options);
+
+export const addCashPointModal = getSyncLifecycle(AddCashPointModal, options);
+
+export const editBillableServiceModal = getSyncLifecycle(EditBillableServiceModal, options);
+
+export const editBillLineItemModal = getSyncLifecycle(EditBillLineItemModal, options);
+
 export const root = getSyncLifecycle(RootComponent, options);
 
 export const serviceMetrics = getSyncLifecycle(ServiceMetrics, options);
 
 export const visitAttributeTags = getSyncLifecycle(VisitAttributeTags, options);
 
-export const editBillLineItemDialog = getAsyncLifecycle(() => import('./bill-item-actions/edit-bill-item.component'), {
-  featureName: 'edit bill line item',
-  moduleName,
-});
-
 // t('billingForm', 'Billing form')
 export const billingFormWorkspace = getAsyncLifecycle(() => import('./billing-form/billing-form.component'), options);