@openmrs/esm-billing-app 1.1.1 → 1.1.2-pre.1

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
@@ -19,10 +19,12 @@ import {
   type Workspace2DefinitionProps,
   Workspace2,
 } from '@openmrs/esm-framework';
-import { processBillItems, useBillableServices } from '../billing.resource';
+import { processBillItems, updateBillItems, useBill, useBillableServices } from '../billing.resource';
+import { useBillableServices as useBillableServicesList } from '../billable-services/billable-service.resource';
+import { getBillableServiceUuid } from '../invoice/payments/utils';
 import { calculateTotalAmount, convertToCurrency } from '../helpers/functions';
 import type { BillingConfig } from '../config-schema';
-import type { BillableItem, LineItem, ServicePrice } from '../types';
+import { BillStatus, type BillableItem, type LineItem, type ServicePrice } from '../types';
 import styles from './billing-form.scss';
 
 interface ExtendedLineItem extends LineItem {
@@ -34,10 +36,11 @@ type BillingFormProps = {
   patientUuid: string;
   closeWorkspace: () => void;
   onMutate?: () => void;
+  billUuid?: string;
 };
 
 const BillingForm: React.FC<Workspace2DefinitionProps<BillingFormProps>> = ({
-  workspaceProps: { patientUuid, onMutate },
+  workspaceProps: { patientUuid, onMutate, billUuid },
   closeWorkspace,
 }) => {
   const isTablet = useLayoutType() === 'tablet';
@@ -46,6 +49,27 @@ const BillingForm: React.FC<Workspace2DefinitionProps<BillingFormProps>> = ({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [selectedItems, setSelectedItems] = useState<ExtendedLineItem[]>([]);
   const { data, error, isLoading } = useBillableServices();
+  const { bill, isLoading: isLoadingBill, error: billError } = useBill(billUuid);
+  const {
+    billableServices,
+    isLoading: isLoadingBillableServices,
+    error: billableServicesError,
+  } = useBillableServicesList();
+  const isEditMode = !!billUuid && !!bill;
+  const existingItemsTotal = useMemo(
+    () => (isEditMode ? calculateTotalAmount(bill.lineItems) : 0),
+    [isEditMode, bill?.lineItems],
+  );
+
+  const availableBillableItems = useMemo(() => {
+    if (!data) return [];
+    if (!isEditMode) return data;
+    const lineItems = bill.lineItems ?? [];
+    const existingNames = new Set(
+      lineItems.flatMap((lineItem) => [lineItem.billableService, lineItem.item].filter(Boolean)),
+    );
+    return data.filter((item) => item.name && !existingNames.has(item.name));
+  }, [data, isEditMode, bill?.lineItems]);
 
   const selectBillableItem = (item: BillableItem) => {
     if (!item) {
@@ -77,7 +101,7 @@ const BillingForm: React.FC<Workspace2DefinitionProps<BillingFormProps>> = ({
       quantity: 1,
       price: defaultPrice,
       billableService: item.uuid,
-      paymentStatus: 'PENDING',
+      paymentStatus: BillStatus.PENDING,
       lineItemOrder: 0,
       selectedPaymentMethod: selectedPaymentMethod,
       availablePaymentMethods: availablePaymentMethods,
@@ -135,49 +159,84 @@ const BillingForm: React.FC<Workspace2DefinitionProps<BillingFormProps>> = ({
     if (isSubmitting || selectedItems.length === 0) {
       return;
     }
+    if (isEditMode && (isLoadingBillableServices || billableServicesError)) {
+      return;
+    }
     if (!validateSelectedItems()) {
       return;
     }
 
     setIsSubmitting(true);
-    const bill = {
-      cashPoint: postBilledItems.cashPoint,
-      cashier: postBilledItems.cashier,
-      lineItems: [],
-      payments: [],
-      patient: patientUuid,
-      status: 'PENDING',
-    };
 
-    selectedItems.forEach((item) => {
-      const lineItem: LineItem = {
-        quantity: item.quantity,
-        price: item.price,
-        lineItemOrder: 0,
-        paymentStatus: 'PENDING',
-        billableService: item.uuid,
-      };
-
-      bill.lineItems.push(lineItem);
-    });
+    const newLineItems: Array<LineItem> = selectedItems.map((item) => ({
+      quantity: item.quantity,
+      price: item.price,
+      lineItemOrder: 0,
+      paymentStatus: BillStatus.PENDING,
+      billableService: item.uuid,
+    }));
 
     try {
-      await processBillItems(bill);
-      closeWorkspace({ discardUnsavedChanges: true });
+      if (isEditMode) {
+        const existingLineItems = bill.lineItems.map((item) => {
+          const serviceUuid = getBillableServiceUuid(billableServices, item.billableService || item.item);
+          if (!serviceUuid) {
+            throw new Error(
+              t('serviceResolutionError', 'Could not resolve service "{{service}}"', {
+                service: item.billableService || item.item,
+              }),
+            );
+          }
+          return {
+            uuid: item.uuid,
+            quantity: item.quantity,
+            price: item.price,
+            lineItemOrder: item.lineItemOrder,
+            paymentStatus: item.paymentStatus,
+            billableService: serviceUuid,
+            priceName: item.priceName,
+            priceUuid: item.priceUuid,
+          };
+        });
 
-      // Call the mutate function from parent to revalidate bill list
+        const payload = {
+          cashPoint: bill.cashPointUuid,
+          cashier: bill.cashier.uuid,
+          lineItems: [...existingLineItems, ...newLineItems],
+          patient: bill.patientUuid,
+          status: bill.status,
+          uuid: bill.uuid,
+        };
+
+        await updateBillItems(payload);
+      } else {
+        const payload = {
+          cashPoint: postBilledItems.cashPoint,
+          cashier: postBilledItems.cashier,
+          lineItems: newLineItems,
+          payments: [],
+          patient: patientUuid,
+          status: BillStatus.PENDING,
+        };
+
+        await processBillItems(payload);
+      }
+
+      closeWorkspace({ discardUnsavedChanges: true });
       onMutate?.();
 
       showSnackbar({
-        title: t('billProcessed', 'Bill processed'),
-        subtitle: t('billProcessedSuccessfully', 'Bill processed successfully'),
+        title: isEditMode ? t('itemsAddedToBill', 'Items added to bill') : t('billProcessed', 'Bill processed'),
+        subtitle: isEditMode
+          ? t('itemsAddedToBillSuccessfully', 'Items have been added to the bill successfully')
+          : t('billProcessedSuccessfully', 'Bill processed successfully'),
         kind: 'success',
       });
-    } catch (error) {
+    } catch (err) {
       showSnackbar({
         title: t('billProcessingError', 'Bill processing error'),
         kind: 'error',
-        subtitle: error?.message,
+        subtitle: err instanceof Error ? err.message : t('unknownBillError', 'An unexpected error occurred'),
       });
     } finally {
       setIsSubmitting(false);
@@ -190,30 +249,76 @@ const BillingForm: React.FC<Workspace2DefinitionProps<BillingFormProps>> = ({
   };
 
   return (
-    <Workspace2 title={t('addBillItems', 'Add bill items')} hasUnsavedChanges={selectedItems.length > 0}>
+    <Workspace2
+      title={isEditMode ? t('addItemsToBill', 'Add items to bill') : t('addBillItems', 'Add bill items')}
+      hasUnsavedChanges={selectedItems.length > 0}>
       <Form className={styles.form} onSubmit={handleSubmit}>
         <div className={styles.grid}>
-          {isLoading ? (
+          {billUuid && isLoadingBill ? (
             <InlineLoading description={getCoreTranslation('loading') + '...'} />
-          ) : error ? (
+          ) : billUuid && billError ? (
+            <InlineNotification
+              kind="error"
+              lowContrast
+              title={t('errorLoadingBill', 'Error loading bill')}
+              subtitle={billError?.message}
+            />
+          ) : isEditMode && billableServicesError ? (
             <InlineNotification
               kind="error"
               lowContrast
               title={t('errorLoadingBillableServices', 'Error loading billable services')}
-              subtitle={error?.message}
+              subtitle={billableServicesError?.message}
             />
           ) : (
-            <ComboBox
-              id="searchItems"
-              onChange={({ selectedItem: item }: { selectedItem: BillableItem }) => selectBillableItem(item)}
-              itemToString={(item: BillableItem) => item?.name || ''}
-              items={data ?? []}
-              titleText={t('searchItems', 'Search items and services')}
-            />
+            <>
+              {isEditMode && (
+                <div className={styles.existingItemsContainer}>
+                  <h4 className={styles.sectionHeading}>{t('existingItems', 'Existing items')}</h4>
+                  {bill.lineItems.map((item) => (
+                    <div key={item.uuid} className={styles.existingItemRow}>
+                      <span className={styles.existingItemName}>
+                        {item.billableService || item.item || item.display}
+                      </span>
+                      <span className={styles.existingItemDetail}>
+                        {item.quantity} x {convertToCurrency(item.price, defaultCurrency)}
+                      </span>
+                      <span className={styles.existingItemTotal}>
+                        {convertToCurrency(item.price * item.quantity, defaultCurrency)}
+                      </span>
+                    </div>
+                  ))}
+                  <div className={styles.existingItemsSubtotal}>
+                    <strong>
+                      {t('subtotal', 'Subtotal')}: {convertToCurrency(existingItemsTotal, defaultCurrency)}
+                    </strong>
+                  </div>
+                </div>
+              )}
+              {isEditMode && <h4 className={styles.sectionHeading}>{t('newItems', 'New items')}</h4>}
+              {isLoading ? (
+                <InlineLoading description={getCoreTranslation('loading') + '...'} />
+              ) : error ? (
+                <InlineNotification
+                  kind="error"
+                  lowContrast
+                  title={t('errorLoadingBillableServices', 'Error loading billable services')}
+                  subtitle={error?.message}
+                />
+              ) : (
+                <ComboBox
+                  id="searchItems"
+                  onChange={({ selectedItem: item }: { selectedItem: BillableItem }) => selectBillableItem(item)}
+                  itemToString={(item: BillableItem) => item?.name || ''}
+                  items={availableBillableItems}
+                  titleText={t('searchItems', 'Search items and services')}
+                />
+              )}
+            </>
           )}
           {selectedItems && selectedItems.length > 0 && (
             <div className={styles.selectedItemsContainer}>
-              <h4>{t('selectedItems', 'Selected items')}</h4>
+              <h4 className={styles.sectionHeading}>{t('selectedItems', 'Selected items')}</h4>
               {selectedItems.map((item) => (
                 <div key={item.uuid} className={styles.itemCard}>
                   <div className={styles.itemHeader}>
@@ -289,7 +394,7 @@ const BillingForm: React.FC<Workspace2DefinitionProps<BillingFormProps>> = ({
               <div className={styles.grandTotal}>
                 <strong>
                   {t('grandTotal', 'Grand total')}:{' '}
-                  {convertToCurrency(calculateTotalAmount(selectedItems), defaultCurrency)}
+                  {convertToCurrency(existingItemsTotal + calculateTotalAmount(selectedItems), defaultCurrency)}
                 </strong>
               </div>
             </div>
@@ -307,7 +412,7 @@ const BillingForm: React.FC<Workspace2DefinitionProps<BillingFormProps>> = ({
           <Button
             className={styles.button}
             kind="primary"
-            disabled={isSubmitting || selectedItems.length === 0}
+            disabled={isSubmitting || selectedItems.length === 0 || (isEditMode && isLoadingBillableServices)}
             type="submit">
             {isSubmitting ? (
               <InlineLoading description={t('saving', 'Saving') + '...'} />

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

@@ -3,7 +3,18 @@ import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { ComboBox, InlineLoading, RadioButton, RadioButtonGroup, Stack, TextInput } from '@carbon/react';
+import {
+  ComboBox,
+  InlineLoading,
+  RadioButton,
+  RadioButtonGroup,
+  Stack,
+  TextInput,
+  Toggletip,
+  ToggletipButton,
+  ToggletipContent,
+} from '@carbon/react';
+import { Information } from '@carbon/react/icons';
 import { useConfig } from '@openmrs/esm-framework';
 import { usePaymentMethods } from '../billing-form.resource';
 import styles from './visit-attributes-form.scss';
@@ -121,7 +132,19 @@ const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes
         render={({ field }) => (
           <RadioButtonGroup
             className={styles.radioButtonGroup}
-            legendText={t('paymentDetails', 'Payment details')}
+            legendText={
+              <div className={styles.paymentDetailsLegend}>
+                {t('paymentDetails', 'Payment details')}
+                <Toggletip autoAlign align="bottom">
+                  <ToggletipButton label={t('showInformation', 'Show information')}>
+                    <Information />
+                  </ToggletipButton>
+                  <ToggletipContent>
+                    <p>{t('nonPayingInfo', 'Any services rendered to non-paying patients will not be billed')}</p>
+                  </ToggletipContent>
+                </Toggletip>
+              </div>
+            }
             name="payment-details"
             onChange={(selected) => field.onChange(selected)}
             orientation="vertical">

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

@@ -19,7 +19,11 @@
 }
 
 .radioButtonGroup {
+  overflow: visible;
+
   :global(.cds--radio-button-group) {
+    overflow: visible;
+
     :global(.cds--radio-button-wrapper) {
       margin-bottom: layout.$spacing-03;
 
@@ -28,8 +32,33 @@
       }
     }
   }
+
+  :global(fieldset.cds--fieldset) {
+    overflow: visible;
+  }
 }
 
 .stack {
   margin-bottom: layout.$spacing-05;
+  overflow: visible;
+}
+
+.paymentDetailsLegend {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  overflow: visible;
+
+  :global(.cds--toggletip) {
+    overflow: visible;
+  }
+
+  :global(.cds--popover-content) {
+    z-index: 9100;
+  }
+
+  :global(.cds--toggletip-content) {
+    min-width: 16rem;
+    white-space: normal;
+  }
 }

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

@@ -1,12 +1,6 @@
-import React, { useContext } from 'react';
-import dayjs from 'dayjs';
-import { DatePickerInput, DatePicker } from '@carbon/react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Location, UserFollow } from '@carbon/react/icons';
-import { useSession } from '@openmrs/esm-framework';
-import { omrsDateFormat } from '../constants';
 import BillingIllustration from './billing-illustration.component';
-import SelectedDateContext from '../hooks/selectedDateContext';
 import styles from './billing-header.scss';
 
 interface BillingHeaderProps {
@@ -15,9 +9,6 @@ interface BillingHeaderProps {
 
 const BillingHeader: React.FC<BillingHeaderProps> = ({ title }) => {
   const { t } = useTranslation();
-  const session = useSession();
-  const location = session?.sessionLocation?.display;
-  const { selectedDate, setSelectedDate } = useContext(SelectedDateContext);
 
   return (
     <div className={styles.header} data-testid="billing-header">
@@ -28,30 +19,6 @@ const BillingHeader: React.FC<BillingHeaderProps> = ({ title }) => {
           <p className={styles['page-name']}>{title}</p>
         </div>
       </div>
-      <div className={styles['right-justified-items']}>
-        <div className={styles.userContainer}>
-          <p>{session?.user?.person?.display}</p>
-          <UserFollow size={16} className={styles.userIcon} />
-        </div>
-        <div className={styles['date-and-location']}>
-          <Location size={16} />
-          <span className={styles.value}>{location}</span>
-          <span className={styles.middot}>&middot;</span>
-          <DatePicker
-            onChange={([date]) => setSelectedDate(dayjs(date).startOf('day').format(omrsDateFormat))}
-            value={dayjs(selectedDate).format('DD MMM YYYY')}
-            dateFormat="d-M-Y"
-            datePickerType="single">
-            <DatePickerInput
-              style={{ cursor: 'pointer', backgroundColor: 'transparent', border: 'none', maxWidth: '10rem' }}
-              id="appointment-date-picker"
-              placeholder="DD-MMM-YYYY"
-              labelText=""
-              type="text"
-            />
-          </DatePicker>
-        </div>
-      </div>
     </div>
   );
 };

package/src/billing-header/billing-header.scss

@@ -18,15 +18,6 @@
   flex-direction: row;
   align-items: center;
   cursor: pointer;
-  align-items: center;
-}
-
-.right-justified-items {
-  @include type.type-style('body-compact-02');
-  color: $text-02;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
 }
 
 .page-name {
@@ -40,44 +31,3 @@
     margin-bottom: layout.$spacing-02;
   }
 }
-
-.date-and-location {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.userContainer {
-  display: flex;
-  justify-content: flex-end;
-  gap: layout.$spacing-05;
-}
-
-.value {
-  margin-left: layout.$spacing-02;
-}
-
-.middot {
-  margin: 0 layout.$spacing-03;
-}
-
-.view {
-  @include type.type-style('label-01');
-}
-
-// Overriding styles for RTL support
-html[dir='rtl'] {
-  .date-and-location {
-    & > svg {
-      order: -1;
-    }
-    & > span:nth-child(2) {
-      order: -2;
-    }
-  }
-}
-
-.userIcon {
-  fill: $ui-05;
-  margin: layout.$spacing-01;
-}

package/src/billing.resource.test.ts

@@ -194,8 +194,8 @@ describe('mapBillProperties', () => {
         patient: createPatient({ display: '12345 - John Doe' }),
       });
       const result = mapBillProperties(bill);
-      expect(result.identifier).toBe('12345 ');
-      expect(result.patientName).toBe(' John Doe');
+      expect(result.identifier).toBe('12345');
+      expect(result.patientName).toBe('John Doe');
       expect(result.patientUuid).toBe('patient-uuid');
     });
 
@@ -204,8 +204,8 @@ describe('mapBillProperties', () => {
         patient: createPatient({ display: 'John Doe' }),
       });
       const result = mapBillProperties(bill);
-      expect(result.identifier).toBe('John Doe');
-      expect(result.patientName).toBeUndefined();
+      expect(result.identifier).toBe('');
+      expect(result.patientName).toBe('John Doe');
     });
 
     it('Handles patient display with multiple dashes', () => {
@@ -213,9 +213,9 @@ describe('mapBillProperties', () => {
         patient: createPatient({ display: '12345 - John - Doe - Jr' }),
       });
       const result = mapBillProperties(bill);
-      expect(result.identifier).toBe('12345 ');
+      expect(result.identifier).toBe('12345');
       // Note: split('-')[1] only takes the second element, not everything after first dash
-      expect(result.patientName).toBe(' John ');
+      expect(result.patientName).toBe('John - Doe - Jr');
     });
 
     it('Handles empty patient display string', () => {
@@ -224,7 +224,7 @@ describe('mapBillProperties', () => {
       });
       const result = mapBillProperties(bill);
       expect(result.identifier).toBe('');
-      expect(result.patientName).toBeUndefined();
+      expect(result.patientName).toBe('');
     });
 
     it('Handles undefined patient gracefully', () => {
@@ -233,8 +233,8 @@ describe('mapBillProperties', () => {
       });
       const result = mapBillProperties(bill);
       expect(result.patientUuid).toBeUndefined();
-      expect(result.identifier).toBeUndefined();
-      expect(result.patientName).toBeUndefined();
+      expect(result.identifier).toBe('');
+      expect(result.patientName).toBe('');
     });
 
     it('Handles patient with undefined display', () => {
@@ -245,8 +245,8 @@ describe('mapBillProperties', () => {
         },
       });
       const result = mapBillProperties(bill);
-      expect(result.identifier).toBeUndefined();
-      expect(result.patientName).toBeUndefined();
+      expect(result.identifier).toBe('');
+      expect(result.patientName).toBe('');
     });
   });
 

package/src/billing.resource.ts

@@ -1,8 +1,6 @@
 import useSWR from 'swr';
 import sortBy from 'lodash-es/sortBy';
 import {
-  formatDate,
-  parseDate,
   openmrsFetch,
   useSession,
   useVisit,
@@ -11,26 +9,47 @@ import {
   useOpenmrsPagination,
 } from '@openmrs/esm-framework';
 import { apiBasePath } from './constants';
-import type {
-  MappedBill,
-  PatientInvoice,
-  BillableItem,
-  PaymentRequestPayload,
-  CreateBillPayload,
-  UpdateBillPayload,
+import {
+  type MappedBill,
+  type PatientInvoice,
+  type BillableItem,
+  type PaymentRequestPayload,
+  type CreateBillPayload,
+  type UpdateBillPayload,
+  BillStatus,
 } from './types';
 
+const parsePatientDisplay = (display: string | undefined): { identifier: string; name: string } => {
+  if (!display) {
+    return { identifier: '', name: '' };
+  }
+
+  const separator = ' - ';
+  const index = display.indexOf(separator);
+
+  if (index === -1) {
+    return { identifier: '', name: display.trim() };
+  }
+
+  return {
+    identifier: display.substring(0, index).trim(),
+    name: display.substring(index + separator.length).trim(),
+  };
+};
+
 export const mapBillProperties = (bill: PatientInvoice): MappedBill => {
-  const activeLineItems = bill?.lineItems?.filter((item) => !item.voided) || [];
+  const activeLineItems = bill?.lineItems?.filter((item) => !item.voided) ?? [];
+  const { identifier, name } = parsePatientDisplay(bill?.patient?.display);
 
   return {
     ...bill,
-    patientName: bill?.patient?.display?.split('-')?.[1],
-    identifier: bill?.patient?.display?.split('-')?.[0],
+    patientName: name,
+    identifier: identifier,
     patientUuid: bill?.patient?.uuid,
     cashPointUuid: bill?.cashPoint?.uuid,
     cashPointName: bill?.cashPoint?.name,
     cashPointLocation: bill?.cashPoint?.location?.display,
+    status: bill.status as BillStatus,
     lineItems: activeLineItems,
     billingService: activeLineItems.map((lineItem) => lineItem?.item || lineItem?.billableService || '--').join('  '),
     totalAmount: activeLineItems
@@ -175,6 +194,17 @@ export const updateBillItems = (payload: UpdateBillPayload) => {
   });
 };
 
+export const finalizeBill = (billUuid: string) => {
+  const url = `${apiBasePath}bill/${billUuid}`;
+  return openmrsFetch(url, {
+    method: 'POST',
+    body: { status: BillStatus.POSTED },
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
+
 export const deleteBillItem = (itemUuid: string, voidReason: string) => {
   const url = `${apiBasePath}billLineItem/${itemUuid}?reason=${encodeURIComponent(voidReason)}`;