@openmrs/esm-billing-app 1.0.2-pre.112 → 1.0.2-pre.1124

package/src/bill-item-actions/bill-item-actions.scss

@@ -1,11 +1,7 @@
+@use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '@carbon/colors';
 
-.section {
-  margin: layout.$spacing-03;
-}
-  
 .sectionTitle {
   @include type.type-style('heading-compact-02');
   color: colors.$gray-70;
@@ -16,6 +12,16 @@
   padding-bottom: layout.$spacing-05;
 }
 
+.billInfo {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+
+  .separator {
+    margin: 0 layout.$spacing-02;
+    color: colors.$gray-50;
+  }
+}
+
 .label {
   @include type.type-style('heading-compact-01');
   margin-bottom: layout.$spacing-05;
@@ -24,3 +30,13 @@
 .controlField {
   margin-bottom: layout.$spacing-05;
 }
+
+.loader {
+  &:global(.cds--inline-loading) {
+    min-height: layout.$spacing-05;
+  }
+
+  :global(.cds--inline-loading__text) {
+    font-size: unset;
+  }
+}

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

@@ -0,0 +1,227 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  Button,
+  Form,
+  InlineLoading,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  NumberInput,
+  Stack,
+  TextInput,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { Controller, useForm } from 'react-hook-form';
+import { useSWRConfig } from 'swr';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { getCoreTranslation, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { apiBasePath } from '../constants';
+import { getBillableServiceUuid } from '../invoice/payments/utils';
+import { type LineItem, type MappedBill } from '../types';
+import { updateBillItems } from '../billing.resource';
+import { useBillableServices } from '../billable-services/billable-service.resource';
+import { type BillingConfig } from '../config-schema';
+import { convertToCurrency } from '../helpers';
+import styles from './bill-item-actions.scss';
+
+interface EditBillLineItemModalProps {
+  bill: MappedBill;
+  closeModal: () => void;
+  item: LineItem;
+}
+
+const EditBillLineItemModal: React.FC<EditBillLineItemModalProps> = ({ bill, closeModal, item }) => {
+  const { t } = useTranslation();
+  const { defaultCurrency } = useConfig<BillingConfig>();
+  const { billableServices } = useBillableServices();
+  const [total, setTotal] = useState(0);
+  const { mutate } = useSWRConfig();
+
+  const schema = useMemo(
+    () =>
+      z.object({
+        // 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],
+  );
+
+  type BillLineItemForm = z.infer<typeof schema>;
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting, errors },
+    watch,
+  } = useForm<BillLineItemForm>({
+    defaultValues: {
+      quantity: item.quantity,
+      price: item.price,
+    },
+    resolver: zodResolver(schema),
+  });
+
+  const quantity = watch('quantity');
+  const price = watch('price');
+
+  useEffect(() => {
+    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) => {
+    const url = `${apiBasePath}bill`;
+
+    const newItem = {
+      ...item,
+      quantity: data.quantity,
+      price: data.price,
+      billableService: getBillableServiceUuid(billableServices, item.billableService),
+      item: item?.item,
+    };
+
+    const previousLineitems = bill?.lineItems
+      .filter((currItem) => currItem.uuid !== item?.uuid)
+      .map((currItem) => ({
+        ...currItem,
+        billableService: getBillableServiceUuid(billableServices, currItem.billableService),
+      }));
+
+    const updatedLineItems = previousLineitems.concat(newItem);
+
+    const payload = {
+      cashPoint: bill.cashPointUuid,
+      cashier: bill.cashier.uuid,
+      lineItems: updatedLineItems,
+      patient: bill.patientUuid,
+      status: bill.status,
+      uuid: bill.uuid,
+    };
+
+    try {
+      await updateBillItems(payload);
+      mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
+      showSnackbar({
+        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('lineItemUpdateFailed', 'Failed to update line item'),
+        subtitle:
+          error?.message || t('lineItemUpdateErrorDefault', 'Unable to update the bill line item. Please try again.'),
+        kind: 'error',
+      });
+    }
+  };
+
+  if (Object.keys(bill)?.length === 0) {
+    return <ModalHeader closeModal={closeModal} title={t('billLineItemEmpty', 'This bill has no line items')} />;
+  }
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('editBillLineItem', 'Edit bill line item')} />
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <ModalBody>
+          <Stack gap={5}>
+            <div className={styles.modalBody}>
+              <div className={styles.billInfo}>
+                {bill?.patientName}
+                <span className={styles.separator}>·</span>
+                {bill?.cashPointName}
+                <span className={styles.separator}>·</span>
+                {bill?.receiptNumber}
+              </div>
+            </div>
+            <section>
+              <p className={styles.label}>
+                {t('item', 'Item')}: {item?.billableService ? item?.billableService : item?.item}
+              </p>
+              <p className={styles.label}>
+                {t('currentPrice', 'Current price')}: {convertToCurrency(item?.price, defaultCurrency)}
+              </p>
+              <p className={styles.label}>
+                {t('serviceStatus', 'Service status')}: {item?.paymentStatus}
+              </p>
+              <Controller
+                name="quantity"
+                control={control}
+                render={({ field: { onChange, value } }) => (
+                  <NumberInput
+                    allowEmpty
+                    disableWheel
+                    className={styles.controlField}
+                    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}
+                  />
+                )}
+              />
+
+              <Controller
+                name="price"
+                control={control}
+                render={({ field: { value } }) => (
+                  <TextInput
+                    className={styles.controlField}
+                    helperText={t('unitPriceHelperText', 'This is the unit price for this item')}
+                    id="priceInput"
+                    labelText={t('unitPrice', 'Unit price')}
+                    readOnly
+                    value={value}
+                  />
+                )}
+              />
+              <p className={styles.label} aria-live="polite">
+                {t('total', 'Total')}: {convertToCurrency(total, defaultCurrency)}
+              </p>
+            </section>
+          </Stack>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {getCoreTranslation('cancel')}
+          </Button>
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? (
+              <div className={styles.inline}>
+                <InlineLoading className={styles.loader} description={`${t('submitting', 'Submitting')}...`} />
+              </div>
+            ) : (
+              getCoreTranslation('save')
+            )}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </>
+  );
+};
+
+export default EditBillLineItemModal;

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

@@ -1,22 +1,29 @@
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { showSnackbar } from '@openmrs/esm-framework';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
+import { type FetchResponse, getDefaultsFromConfigSchema, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { configSchema, type BillingConfig } from '../config-schema';
 import { type MappedBill } from '../types';
 import { updateBillItems } from '../billing.resource';
-import ChangeStatus from './edit-bill-item.component';
+import EditBillLineItemModal from './edit-bill-item.modal';
 
-// Mock external dependencies
-jest.mock('../billing.resource', () => ({
-  updateBillItems: jest.fn(() => Promise.resolve({})),
-}));
+const mockUpdateBillItems = jest.mocked(updateBillItems);
+const mockShowSnackbar = jest.mocked(showSnackbar);
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
+
+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('@openmrs/esm-framework', () => ({
-  showSnackbar: jest.fn(),
+jest.mock('../billing.resource', () => ({
+  updateBillItems: jest.fn().mockResolvedValue({}),
 }));
 
 jest.mock('../billable-services/billable-service.resource', () => ({
   useBillableServices: jest.fn(() => ({
-    billableServices: [],
+    billableServices: mockBillableServices,
   })),
 }));
 
@@ -41,7 +48,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',
@@ -62,7 +69,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',
@@ -74,64 +81,250 @@ const mockItem = {
   resourceVersion: '1.0',
 };
 
-describe('ChangeStatus component', () => {
-  const closeModalMock = jest.fn();
-
+describe('EditBillItem', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      defaultCurrency: 'USD',
+    });
   });
 
+  const mockCloseModal = jest.fn();
+
   test('renders the form with correct fields and default values', () => {
-    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
 
-    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');
-    expect(screen.getByText(/Total/)).toHaveTextContent('200');
+    expect(screen.getByText(/edit bill line item/i)).toBeInTheDocument();
+    expect(screen.getByText(/John Doe/)).toBeInTheDocument();
+    expect(screen.getByText(/Main Cashpoint/)).toBeInTheDocument();
+    expect(screen.getByText(/123456/)).toBeInTheDocument();
+    expect(screen.getByRole('spinbutton', { name: /quantity/i })).toHaveValue(2);
+    expect(screen.getByLabelText(/unit price/i)).toHaveValue('100');
+    expect(screen.getByText(/total/i)).toHaveTextContent(/200/);
   });
 
-  test('updates total when quantity is changed', () => {
-    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+  test('updates total when quantity is changed', async () => {
+    const user = userEvent.setup();
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
 
-    const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
-    fireEvent.change(quantityInput, { target: { value: 3 } });
+    const quantityInput = screen.getByRole('spinbutton', { name: /quantity/i });
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '3');
 
-    expect(screen.getByText(/Total/)).toHaveTextContent('300');
+    expect(screen.getByText(/total/i)).toHaveTextContent(/300/);
   });
 
   test('submits the form and shows a success notification', async () => {
-    (updateBillItems as jest.Mock).mockResolvedValueOnce({});
+    const user = userEvent.setup();
+    mockUpdateBillItems.mockResolvedValueOnce({} as FetchResponse<any>);
 
-    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
 
-    fireEvent.click(screen.getByText(/Save/));
+    await user.click(screen.getByText(/save/i));
 
     await waitFor(() => {
-      expect(updateBillItems).toHaveBeenCalled();
+      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',
-        timeoutInMs: 3000,
       });
-      expect(closeModalMock).toHaveBeenCalled();
+      expect(mockCloseModal).toHaveBeenCalled();
     });
   });
 
   test('shows error notification when submission fails', async () => {
-    (updateBillItems as jest.Mock).mockRejectedValueOnce({ message: 'Error occurred' });
+    const user = userEvent.setup();
+    mockUpdateBillItems.mockRejectedValueOnce({ message: 'Error occurred' });
 
-    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
 
-    fireEvent.click(screen.getByText(/Save/));
+    await user.click(screen.getByText(/Save/));
 
     await waitFor(() => {
-      expect(showSnackbar).toHaveBeenCalledWith({
-        title: 'Bill processing error',
+      expect(mockShowSnackbar).toHaveBeenCalledWith({
+        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={mockCloseModal} />);
+
+    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');
+    });
+  });
+
+  test('shows validation error for quantity less than 1', async () => {
+    const user = userEvent.setup();
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
+
+    const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '0');
+
+    // Try to submit
+    await user.click(screen.getByText(/Save/));
+
+    // Should show validation error
+    await waitFor(() => {
+      expect(screen.getByText(/Quantity must be at least 1/)).toBeInTheDocument();
+    });
+
+    // Should NOT call the update function
+    expect(mockUpdateBillItems).not.toHaveBeenCalled();
+  });
+
+  test('shows validation error for quantity greater than 100', async () => {
+    const user = userEvent.setup();
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
+
+    const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '101');
+
+    await user.click(screen.getByText(/Save/));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Quantity cannot exceed 100/)).toBeInTheDocument();
+    });
+    expect(mockUpdateBillItems).not.toHaveBeenCalled();
+  });
+
+  test('shows validation error for non-integer quantity', async () => {
+    const user = userEvent.setup();
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
+
+    const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '2.5');
+
+    await user.click(screen.getByText(/Save/));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Quantity must be a whole number/)).toBeInTheDocument();
+    });
+    expect(mockUpdateBillItems).not.toHaveBeenCalled();
+  });
+
+  test('clears validation error when valid quantity is entered', async () => {
+    const user = userEvent.setup();
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
+
+    const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
+
+    // Enter invalid value
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '0');
+    await user.click(screen.getByText(/Save/));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Quantity must be at least 1/)).toBeInTheDocument();
+    });
+
+    // Fix it
+    await user.clear(quantityInput);
+    await user.type(quantityInput, '5');
+
+    // Error should disappear
+    await waitFor(() => {
+      expect(screen.queryByText(/Quantity must be at least 1/)).not.toBeInTheDocument();
+    });
+  });
+
+  test('shows validation error when quantity field is left empty', async () => {
+    const user = userEvent.setup();
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={mockCloseModal} />);
+
+    const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
+    await user.clear(quantityInput);
+
+    // Try to submit with empty field
+    await user.click(screen.getByText(/save/i));
+
+    // Should show validation error (empty string coerces to 0, triggering min validation)
+    await waitFor(() => {
+      expect(screen.getByText(/Quantity must be at least 1/)).toBeInTheDocument();
+    });
+
+    // Should NOT call the update function
+    expect(mockUpdateBillItems).not.toHaveBeenCalled();
+  });
 });

package/src/billable-services/bill-waiver/bill-selection.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Checkbox,
   Layer,
@@ -9,7 +9,7 @@ import {
   StructuredListWrapper,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { useConfig } from '@openmrs/esm-framework';
+import { getCoreTranslation, useConfig } from '@openmrs/esm-framework';
 import { convertToCurrency } from '../../helpers';
 import { type MappedBill, type LineItem } from '../../types';
 import BillWaiverForm from './bill-waiver-form.component';
@@ -20,7 +20,7 @@ const PatientBillsSelections: React.FC<{ bills: MappedBill; setPatientUuid: (pat
   setPatientUuid,
 }) => {
   const { t } = useTranslation();
-  const [selectedBills, setSelectedBills] = React.useState<Array<LineItem>>([]);
+  const [selectedBills, setSelectedBills] = useState<Array<LineItem>>([]);
   const { defaultCurrency } = useConfig();
 
   const checkBoxLabel = (lineItem) => {
@@ -42,9 +42,9 @@ const PatientBillsSelections: React.FC<{ bills: MappedBill; setPatientUuid: (pat
           <StructuredListRow head>
             <StructuredListCell head>{t('billItem', 'Bill item')}</StructuredListCell>
             <StructuredListCell head>{t('quantity', 'Quantity')}</StructuredListCell>
-            <StructuredListCell head>{t('unitPrice', 'Unit Price')}</StructuredListCell>
+            <StructuredListCell head>{t('unitPrice', 'Unit price')}</StructuredListCell>
             <StructuredListCell head>{t('total', 'Total')}</StructuredListCell>
-            <StructuredListCell head>{t('actions', 'Actions')}</StructuredListCell>
+            <StructuredListCell head>{getCoreTranslation('actions')}</StructuredListCell>
           </StructuredListRow>
         </StructuredListHead>
         <StructuredListBody>