@openmrs/esm-billing-app 1.0.2-pre.761 → 1.0.2-pre.767

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

@@ -71,9 +71,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 1173797,
+      "size": 1174566,
       "sizes": {
-        "javascript": 1173755,
+        "javascript": 1174524,
         "consume-shared": 42
       },
       "names": [],
@@ -87,7 +87,7 @@
       "auxiliaryFiles": [
         "942.js.map"
       ],
-      "hash": "375d2cee523597f1",
+      "hash": "4c3e935e456ec877",
       "childrenByOrder": {}
     },
     {
@@ -544,9 +544,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 8366,
+      "size": 8850,
       "sizes": {
-        "javascript": 8366
+        "javascript": 8850
       },
       "names": [],
       "idHints": [],
@@ -558,7 +558,7 @@
         "4300.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "d784eb407ac35b80",
+      "hash": "4e1e7e3ab3cd456c",
       "childrenByOrder": {}
     },
     {
@@ -659,9 +659,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 37992,
+      "size": 38056,
       "sizes": {
-        "javascript": 37992
+        "javascript": 38056
       },
       "names": [],
       "idHints": [],
@@ -675,7 +675,7 @@
       "auxiliaryFiles": [
         "4739.js.map"
       ],
-      "hash": "d8550eea199ed339",
+      "hash": "76e266d7cea98afc",
       "childrenByOrder": {}
     },
     {
@@ -1209,10 +1209,10 @@
       "initial": true,
       "entry": true,
       "recorded": false,
-      "size": 5471627,
+      "size": 5472396,
       "sizes": {
         "consume-shared": 210,
-        "javascript": 5448972,
+        "javascript": 5449741,
         "share-init": 336,
         "runtime": 22109
       },
@@ -1229,7 +1229,7 @@
       "auxiliaryFiles": [
         "main.js.map"
       ],
-      "hash": "582ab0314a96fa53",
+      "hash": "5253e749f65b670a",
       "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":"editBillLineItemModal","online":true,"offline":true}],"modals":[{"name":"add-cash-point-modal","component":"addCashPointModal"},{"name":"add-payment-mode-modal","component":"addPaymentModeModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"edit-bill-item-modal","component":"editBillLineItemModal"},{"name":"edit-billable-service-modal","component":"editBillableServiceModal"},{"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.761"}
+{"$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":"editBillLineItemModal","online":true,"offline":true}],"modals":[{"name":"add-cash-point-modal","component":"addCashPointModal"},{"name":"add-payment-mode-modal","component":"addPaymentModeModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"edit-bill-item-modal","component":"editBillLineItemModal"},{"name":"edit-billable-service-modal","component":"editBillableServiceModal"},{"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.767"}

package/package.json

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

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

@@ -40,8 +40,23 @@ const EditBillLineItemModal: React.FC<EditBillLineItemModalProps> = ({ bill, clo
   const schema = useMemo(
     () =>
       z.object({
-        quantity: z.string({ required_error: t('quantityRequired', 'Quantity is required') }),
-        price: z.string({ required_error: t('priceIsRequired', 'Price is required') }),
+        // NOTE: Frontend-only validation - quantities <1 or >100 can still be submitted via API.
+        // Backend (BillServiceImpl.java:100) has empty validate() method.
+        // TODO: Add server-side validation to enforce data integrity
+        quantity: z.coerce
+          .number({
+            required_error: t('quantityRequired', 'Quantity is required'),
+            invalid_type_error: t('quantityMustBeNumber', 'Quantity must be a valid number'),
+          })
+          .int(t('quantityMustBeInteger', 'Quantity must be a whole number'))
+          .min(1, t('quantityMustBeAtLeastOne', 'Quantity must be at least 1'))
+          .max(100, t('quantityCannotExceed100', 'Quantity cannot exceed 100')),
+        price: z.coerce
+          .number({
+            required_error: t('priceIsRequired', 'Price is required'),
+            invalid_type_error: t('priceMustBeNumber', 'Price must be a valid number'),
+          })
+          .positive(t('priceMustBePositive', 'Price must be greater than 0')),
       }),
     [t],
   );
@@ -61,8 +76,8 @@ const EditBillLineItemModal: React.FC<EditBillLineItemModalProps> = ({ bill, clo
     watch,
   } = useForm<BillLineItemForm>({
     defaultValues: {
-      quantity: item.quantity.toString(),
-      price: item.price.toString(),
+      quantity: item.quantity,
+      price: item.price,
     },
     resolver: zodResolver(schema),
   });
@@ -71,8 +86,10 @@ const EditBillLineItemModal: React.FC<EditBillLineItemModalProps> = ({ bill, clo
   const price = watch('price');
 
   useEffect(() => {
-    const newTotal = parseInt(quantity) * parseInt(price);
-    setTotal(newTotal);
+    const quantityNum = typeof quantity === 'number' ? quantity : parseFloat(quantity) || 0;
+    const priceNum = typeof price === 'number' ? price : parseFloat(price) || 0;
+    const newTotal = quantityNum * priceNum;
+    setTotal(isNaN(newTotal) ? 0 : newTotal);
   }, [quantity, price]);
 
   const onSubmit = async (data: BillLineItemForm) => {
@@ -80,8 +97,8 @@ const EditBillLineItemModal: React.FC<EditBillLineItemModalProps> = ({ bill, clo
 
     const newItem = {
       ...item,
-      quantity: parseInt(data.quantity),
-      price: parseInt(data?.price),
+      quantity: data.quantity,
+      price: data.price,
       billableService: getBillableServiceUuid(billableServices, item.billableService),
       item: item?.item,
     };
@@ -90,8 +107,9 @@ const EditBillLineItemModal: React.FC<EditBillLineItemModalProps> = ({ bill, clo
       .filter((currItem) => currItem.uuid !== item?.uuid)
       .map((currItem) => ({
         ...currItem,
-        billableService: getBillableServiceUuid(billableServices, item.billableService),
+        billableService: getBillableServiceUuid(billableServices, currItem.billableService),
       }));
+
     const updatedLineItems = previousLineitems.concat(newItem);
 
     const payload = {
@@ -107,16 +125,17 @@ const EditBillLineItemModal: React.FC<EditBillLineItemModalProps> = ({ bill, clo
       await updateBillItems(payload);
       mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
       showSnackbar({
-        title: t('saveBill', 'Save Bill'),
-        subtitle: t('billProcessingSuccess', 'Bill processing has been successful'),
+        title: t('lineItemUpdated', 'Line item updated'),
+        subtitle: t('lineItemUpdateSuccess', 'The bill line item has been updated successfully'),
         kind: 'success',
       });
       closeModal();
     } catch (error) {
       showSnackbar({
-        title: t('billProcessingError', 'Bill processing error'),
+        title: t('lineItemUpdateFailed', 'Failed to update line item'),
+        subtitle:
+          error?.message || t('lineItemUpdateErrorDefault', 'Unable to update the bill line item. Please try again.'),
         kind: 'error',
-        subtitle: error?.message,
       });
     }
   };
@@ -127,7 +146,7 @@ const EditBillLineItemModal: React.FC<EditBillLineItemModalProps> = ({ bill, clo
 
   return (
     <>
-      <ModalHeader closeModal={closeModal} title={t('editBillLineItem', 'Edit bill line item?')} />
+      <ModalHeader closeModal={closeModal} title={t('editBillLineItem', 'Edit bill line item')} />
       <Form onSubmit={handleSubmit(onSubmit, onError)}>
         <ModalBody>
           <Stack gap={5}>
@@ -138,28 +157,30 @@ const EditBillLineItemModal: React.FC<EditBillLineItemModalProps> = ({ bill, clo
             </div>
             <section>
               <p className={styles.label}>
-                {t('item', 'Item')} : {item?.billableService ? item?.billableService : item?.item}
+                {t('item', 'Item')}: {item?.billableService ? item?.billableService : item?.item}
               </p>
               <p className={styles.label}>
-                {t('currentPrice', 'Current price')} : {item?.price}
+                {t('currentPrice', 'Current price')}: {item?.price}
               </p>
               <p className={styles.label}>
-                {t('status', 'status')} : {item?.paymentStatus}
+                {t('status', 'status')}: {item?.paymentStatus}
               </p>
               <Controller
                 name="quantity"
                 control={control}
                 render={({ field: { onChange, value } }) => (
                   <NumberInput
-                    label={t('quantity', 'Quantity')}
-                    id="quantityInput"
-                    min={0}
-                    max={100}
-                    value={value}
-                    onChange={onChange}
+                    disableWheel
                     className={styles.controlField}
-                    invalid={errors.quantity?.message}
+                    hideSteppers
+                    id="quantityInput"
+                    invalid={!!errors.quantity}
                     invalidText={errors.quantity?.message}
+                    label={t('quantity', 'Quantity')}
+                    onChange={(_event, state: { value: number | string; direction: string }) => {
+                      onChange(state.value);
+                    }}
+                    value={value}
                   />
                 )}
               />
@@ -169,18 +190,18 @@ const EditBillLineItemModal: React.FC<EditBillLineItemModalProps> = ({ bill, clo
                 control={control}
                 render={({ field: { value } }) => (
                   <TextInput
+                    className={styles.controlField}
+                    helperText={t('unitPriceHelperText', 'This is the unit price for this item.')}
                     id="priceInput"
                     labelText={t('price', 'Unit Price')}
+                    readOnly
                     value={value}
-                    readOnly={true}
-                    className={styles.controlField}
-                    helperText={t('unitPriceHelperText', 'This is the unit price for this item.')}
                   />
                 )}
               />
 
               <p className={styles.label}>
-                {t('total', 'Total')} : {total}{' '}
+                {t('total', 'Total')}: {total}{' '}
               </p>
 
               {showErrorNotification && (

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

@@ -13,9 +13,15 @@ jest.mock('../billing.resource', () => ({
   updateBillItems: jest.fn(() => Promise.resolve({})),
 }));
 
+const mockBillableServices = [
+  { name: 'X-Ray Service', uuid: 'xray-uuid-123' },
+  { name: 'Lab Test Service', uuid: 'lab-uuid-456' },
+  { name: 'Consultation Service', uuid: 'consult-uuid-789' },
+];
+
 jest.mock('../billable-services/billable-service.resource', () => ({
   useBillableServices: jest.fn(() => ({
-    billableServices: [],
+    billableServices: mockBillableServices,
   })),
 }));
 
@@ -40,7 +46,7 @@ const mockBill: MappedBill = {
       voided: false,
       voidReason: null,
       priceName: 'Service Price',
-      billableService: 'service-uuid',
+      billableService: 'X-Ray Service',
       priceUuid: 'price-uuid',
       lineItemOrder: 1,
       resourceVersion: '1.0',
@@ -61,7 +67,7 @@ const mockItem = {
   uuid: 'item-uuid',
   quantity: 2,
   price: 100,
-  billableService: 'service-uuid',
+  billableService: 'X-Ray Service',
   paymentStatus: 'UNPAID',
   item: 'Test Service',
   display: 'Test Service',
@@ -79,7 +85,7 @@ describe('ChangeStatus component', () => {
   test('renders the form with correct fields and default values', () => {
     render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
 
-    expect(screen.getByText('Edit bill line item?')).toBeInTheDocument();
+    expect(screen.getByText('Edit bill line item')).toBeInTheDocument();
     expect(screen.getByText('John Doe · Main Cashpoint · 123456')).toBeInTheDocument();
     expect(screen.getByRole('spinbutton', { name: /Quantity/ })).toHaveValue(2);
     expect(screen.getByLabelText(/Unit Price/)).toHaveValue('100');
@@ -107,8 +113,8 @@ describe('ChangeStatus component', () => {
     await waitFor(() => {
       expect(mockUpdateBillItems).toHaveBeenCalled();
       expect(showSnackbar).toHaveBeenCalledWith({
-        title: 'Save Bill',
-        subtitle: 'Bill processing has been successful',
+        title: 'Line item updated',
+        subtitle: 'The bill line item has been updated successfully',
         kind: 'success',
       });
       expect(closeModalMock).toHaveBeenCalled();
@@ -125,10 +131,92 @@ describe('ChangeStatus component', () => {
 
     await waitFor(() => {
       expect(mockShowSnackbar).toHaveBeenCalledWith({
-        title: 'Bill processing error',
+        title: 'Failed to update line item',
         kind: 'error',
         subtitle: 'Error occurred',
       });
     });
   });
+
+  test('preserves billable service UUIDs for other line items when editing', async () => {
+    const user = userEvent.setup();
+    mockUpdateBillItems.mockResolvedValueOnce({} as FetchResponse<any>);
+
+    // Bill with multiple line items with different billable services
+    const billWithMultipleItems: MappedBill = {
+      ...mockBill,
+      lineItems: [
+        {
+          uuid: 'item-1',
+          quantity: 1,
+          price: 100,
+          billableService: 'X-Ray Service',
+          paymentStatus: 'PENDING',
+          item: 'X-Ray',
+          display: 'X-Ray',
+          voided: false,
+          voidReason: null,
+          priceName: 'X-Ray Price',
+          priceUuid: 'xray-price-uuid',
+          lineItemOrder: 1,
+          resourceVersion: '1.0',
+        },
+        {
+          uuid: 'item-2',
+          quantity: 2,
+          price: 50,
+          billableService: 'Lab Test Service',
+          paymentStatus: 'PENDING',
+          item: 'Lab Test',
+          display: 'Lab Test',
+          voided: false,
+          voidReason: null,
+          priceName: 'Lab Price',
+          priceUuid: 'lab-price-uuid',
+          lineItemOrder: 2,
+          resourceVersion: '1.0',
+        },
+        {
+          uuid: 'item-3',
+          quantity: 1,
+          price: 200,
+          billableService: 'Consultation Service',
+          paymentStatus: 'PENDING',
+          item: 'Consultation',
+          display: 'Consultation',
+          voided: false,
+          voidReason: null,
+          priceName: 'Consult Price',
+          priceUuid: 'consult-price-uuid',
+          lineItemOrder: 3,
+          resourceVersion: '1.0',
+        },
+      ],
+    };
+
+    // Editing the Lab Test item (item-2)
+    const itemToEdit = billWithMultipleItems.lineItems[1];
+
+    render(<EditBillLineItemModal bill={billWithMultipleItems} item={itemToEdit} closeModal={closeModalMock} />);
+
+    await user.click(screen.getByText(/Save/));
+
+    await waitFor(() => {
+      expect(mockUpdateBillItems).toHaveBeenCalled();
+      const payload = mockUpdateBillItems.mock.calls[0][0];
+
+      // Verify that each line item has the correct billable service UUID
+      const xrayItem = payload.lineItems.find((li) => li.uuid === 'item-1');
+      const consultItem = payload.lineItems.find((li) => li.uuid === 'item-3');
+
+      // These should NOT have the Lab Test UUID (lab-uuid-456)
+      // They should keep their original UUIDs
+      expect(xrayItem?.billableService).toBe('xray-uuid-123');
+      expect(consultItem?.billableService).toBe('consult-uuid-789');
+
+      // The edited item should have the Lab Test UUID
+      const labItem = payload.lineItems.find((li) => li.uuid === 'item-2');
+      expect(labItem?.billableService).toBe('lab-uuid-456');
+    });
+  });
 });

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

@@ -243,6 +243,8 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
                   <div className={styles.controlSection}>
                     <label>{t('quantity', 'Quantity')}</label>
                     <NumberInput
+                      disableWheel
+                      hideSteppers
                       id={`quantity-${item.uuid}`}
                       min={1}
                       value={item.quantity}

package/src/config-schema.ts

@@ -75,11 +75,6 @@ export const configSchema = {
     _description: 'The default page size',
     _default: 10,
   },
-  showEditBillButton: {
-    _type: Type.Boolean,
-    _description: 'Whether to show the edit bill button or not.',
-    _default: false,
-  },
 };
 
 export interface BillingConfig {
@@ -115,5 +110,4 @@ export interface BillingConfig {
   };
   defaultCurrency: string;
   pageSize: number;
-  showEditBillButton: boolean;
 }

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

@@ -38,7 +38,7 @@ type InvoiceTableProps = {
 
 const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isLoadingBill }) => {
   const { t } = useTranslation();
-  const { defaultCurrency, showEditBillButton } = useConfig<BillingConfig>();
+  const { defaultCurrency } = useConfig<BillingConfig>();
   const layout = useLayoutType();
   const lineItems = useMemo(() => bill?.lineItems ?? [], [bill?.lineItems]);
   const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
@@ -93,27 +93,23 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isLoadingBill }) => {
           status: item.paymentStatus,
           quantity: item.quantity,
           price: convertToCurrency(item.price, defaultCurrency),
-          total: item.price * item.quantity,
+          total: convertToCurrency(item.price * item.quantity, defaultCurrency),
           actionButton: (
             <span>
-              {showEditBillButton ? (
-                <Button
-                  data-testid={`edit-button-${item.uuid}`}
-                  renderIcon={Edit}
-                  hasIconOnly
-                  kind="ghost"
-                  iconDescription={t('editThisBillItem', 'Edit this bill item')}
-                  tooltipPosition="left"
-                  onClick={() => handleSelectBillItem(item)}
-                />
-              ) : (
-                '--'
-              )}
+              <Button
+                data-testid={`edit-button-${item.uuid}`}
+                renderIcon={Edit}
+                hasIconOnly
+                kind="ghost"
+                iconDescription={t('editThisBillItem', 'Edit this bill item')}
+                tooltipPosition="left"
+                onClick={() => handleSelectBillItem(item)}
+              />
             </span>
           ),
         };
       }) ?? [],
-    [filteredLineItems, bill?.receiptNumber, defaultCurrency, showEditBillButton, t, handleSelectBillItem],
+    [filteredLineItems, bill?.receiptNumber, defaultCurrency, t, handleSelectBillItem],
   );
 
   if (isLoadingBill) {