@openmrs/esm-billing-app 1.0.2-pre.78 → 1.0.2-pre.786

package/src/bill-history/bill-history.test.tsx

@@ -1,17 +1,23 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { configSchema, type BillingConfig } from '../config-schema';
 import { useBills } from '../billing.resource';
 import BillHistory from './bill-history.component';
 
-// Mock i18next
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
+const mockUseBills = jest.mocked(useBills);
+
+jest.mock('../billing.resource', () => ({
+  useBills: jest.fn(() => ({
+    bills: mockBillData,
+    isLoading: false,
+    isValidating: false,
+    error: null,
+  })),
 }));
 
-// Mock window.i18next
 window.i18next = {
   language: 'en-US',
 } as any;
@@ -20,9 +26,7 @@ const testProps = {
   patientUuid: 'some-uuid',
 };
 
-const mockbills = useBills as jest.MockedFunction<typeof useBills>;
-
-const mockBillsData = [
+const mockBillData = [
   { uuid: '1', patientName: 'John Doe', identifier: '12345678', billingService: 'Checkup', totalAmount: 500 },
   { uuid: '2', patientName: 'John Doe', identifier: '12345678', billingService: 'Consulatation', totalAmount: 600 },
   { uuid: '3', patientName: 'John Doe', identifier: '12345678', billingService: 'Child services', totalAmount: 700 },
@@ -37,70 +41,19 @@ const mockBillsData = [
   { uuid: '12', patientName: 'John Doe', identifier: '12345678', billingService: 'MCH', totalAmount: 1300 },
 ];
 
-// Mock the invoice table component
-jest.mock('../invoice/invoice-table.component', () => jest.fn(() => <div>Invoice table</div>));
-
-// Mock the billing resource
-jest.mock('../billing.resource', () => ({
-  useBills: jest.fn(() => ({
-    bills: mockBillsData,
-    isLoading: false,
-    isValidating: false,
-    error: null,
-  })),
-}));
-
-// Mock esm-patient-common-lib
-jest.mock('@openmrs/esm-patient-common-lib', () => ({
-  CardHeader: jest.fn(({ children }) => <div>{children}</div>),
-  EmptyDataIllustration: jest.fn(() => <div>Empty state illustration</div>),
-  ErrorState: jest.fn(({ error }) => <div>Error: {error?.message}</div>),
-  launchPatientWorkspace: jest.fn(),
-  usePaginationInfo: jest.fn(() => ({
-    pageSizes: [10, 20, 30],
-    currentPage: 1,
-  })),
-}));
-
-// Mock esm-framework
-jest.mock('@openmrs/esm-framework', () => ({
-  useLayoutType: jest.fn(() => 'small-desktop'),
-  isDesktop: jest.fn(() => true),
-  usePagination: jest.fn().mockImplementation((data) => ({
-    currentPage: 1,
-    goTo: jest.fn(),
-    results: data,
-    paginated: true,
-  })),
-  showToast: jest.fn(),
-  showNotification: jest.fn(),
-  createErrorHandler: jest.fn(),
-  createGlobalStore: jest.fn(),
-  getGlobalStore: jest.fn(() => ({
-    subscribe: jest.fn(),
-    getState: jest.fn(),
-    setState: jest.fn(),
-  })),
-  useConfig: jest.fn(() => ({
-    pageSize: 10,
-    defaultCurrency: 'USD',
-  })),
-  useSession: jest.fn(() => ({
-    sessionLocation: { uuid: 'some-uuid', display: 'Location' },
-  })),
-  formatDate: jest.fn((date) => date?.toString() ?? ''),
-  formatDatetime: jest.fn((date) => date?.toString() ?? ''),
-  parseDate: jest.fn((dateString) => new Date(dateString)),
-  ExtensionSlot: jest.fn(({ children }) => <>{children}</>),
-}));
-
 describe('BillHistory', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({ ...getDefaultsFromConfigSchema(configSchema), defaultCurrency: 'USD' });
   });
 
   test('should render loading datatable skeleton', () => {
-    mockbills.mockReturnValueOnce({ isLoading: true, isValidating: false, error: null, bills: [], mutate: jest.fn() });
+    mockUseBills.mockReturnValueOnce({
+      isLoading: true,
+      isValidating: false,
+      error: null,
+      bills: [],
+      mutate: jest.fn(),
+    });
     render(<BillHistory {...testProps} />);
     const loadingSkeleton = screen.getByRole('table');
     expect(loadingSkeleton).toBeInTheDocument();
@@ -108,7 +61,7 @@ describe('BillHistory', () => {
   });
 
   test('should render error state when API call fails', () => {
-    mockbills.mockReturnValueOnce({
+    mockUseBills.mockReturnValueOnce({
       isLoading: false,
       isValidating: false,
       error: new Error('some error'),
@@ -116,31 +69,31 @@ describe('BillHistory', () => {
       mutate: jest.fn(),
     });
     render(<BillHistory {...testProps} />);
-    const errorState = screen.getByText('Error: some error');
+    const errorState = screen.getByText(/Error/);
     expect(errorState).toBeInTheDocument();
   });
 
   test('should render bills table', async () => {
     const user = userEvent.setup();
-    mockbills.mockReturnValueOnce({
+    mockUseBills.mockReturnValueOnce({
       isLoading: false,
       isValidating: false,
       error: null,
-      bills: mockBillsData as any,
+      bills: mockBillData as any,
       mutate: jest.fn(),
     });
     render(<BillHistory {...testProps} />);
 
     // Verify headers
-    expect(screen.getByText('visitTime')).toBeInTheDocument();
-    expect(screen.getByText('identifier')).toBeInTheDocument();
+    expect(screen.getByText('Visit time')).toBeInTheDocument();
+    expect(screen.getByText('Identifier')).toBeInTheDocument();
 
     const tableRowGroup = screen.getAllByRole('rowgroup');
     expect(tableRowGroup).toHaveLength(2);
 
     // Page navigation should work as expected
-    const nextPageButton = screen.getByRole('button', { name: /nextPage/ });
-    const prevPageButton = screen.getByRole('button', { name: /previousPage/ });
+    const nextPageButton = screen.getByRole('button', { name: /Next page/ });
+    const prevPageButton = screen.getByRole('button', { name: /Previous page/ });
 
     expect(nextPageButton).toBeInTheDocument();
     expect(prevPageButton).toBeInTheDocument();
@@ -156,7 +109,13 @@ describe('BillHistory', () => {
   });
 
   test('should render empty state view when there are no bills', () => {
-    mockbills.mockReturnValueOnce({ isLoading: false, isValidating: false, error: null, bills: [], mutate: jest.fn() });
+    mockUseBills.mockReturnValueOnce({
+      isLoading: false,
+      isValidating: false,
+      error: null,
+      bills: [],
+      mutate: jest.fn(),
+    });
     render(<BillHistory {...testProps} />);
     const emptyState = screen.getByText(/There are no bills to display./);
     expect(emptyState).toBeInTheDocument();

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

@@ -2,10 +2,6 @@
 @use '@carbon/type';
 @use '@carbon/colors';
 
-.section {
-  margin: layout.$spacing-03;
-}
-  
 .sectionTitle {
   @include type.type-style('heading-compact-02');
   color: colors.$gray-70;

package/src/bill-item-actions/{edit-bill-item.component.tsx → edit-bill-item.modal.tsx}

@@ -9,6 +9,7 @@ import {
   ModalFooter,
   ModalHeader,
   NumberInput,
+  Stack,
   TextInput,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
@@ -16,7 +17,7 @@ import { Controller, type FieldErrors, useForm } from 'react-hook-form';
 import { mutate } from 'swr';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { showSnackbar } from '@openmrs/esm-framework';
+import { getCoreTranslation, showSnackbar } from '@openmrs/esm-framework';
 import { apiBasePath } from '../constants';
 import { getBillableServiceUuid } from '../invoice/payments/utils';
 import { type LineItem, type MappedBill } from '../types';
@@ -24,13 +25,13 @@ import { updateBillItems } from '../billing.resource';
 import { useBillableServices } from '../billable-services/billable-service.resource';
 import styles from './bill-item-actions.scss';
 
-interface BillLineItemProps {
+interface EditBillLineItemModalProps {
   bill: MappedBill;
-  item: LineItem;
   closeModal: () => void;
+  item: LineItem;
 }
 
-const ChangeStatus: React.FC<BillLineItemProps> = ({ bill, item, closeModal }) => {
+const EditBillLineItemModal: React.FC<EditBillLineItemModalProps> = ({ bill, closeModal, item }) => {
   const { t } = useTranslation();
   const { billableServices } = useBillableServices();
   const [showErrorNotification, setShowErrorNotification] = useState(false);
@@ -39,8 +40,23 @@ const ChangeStatus: React.FC<BillLineItemProps> = ({ bill, item, closeModal }) =
   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],
   );
@@ -56,12 +72,12 @@ const ChangeStatus: React.FC<BillLineItemProps> = ({ bill, item, closeModal }) =
   const {
     control,
     handleSubmit,
-    formState: { isSubmitting, errors, isDirty },
+    formState: { isSubmitting, errors },
     watch,
   } = useForm<BillLineItemForm>({
     defaultValues: {
-      quantity: item.quantity.toString(),
-      price: item.price.toString(),
+      quantity: item.quantity,
+      price: item.price,
     },
     resolver: zodResolver(schema),
   });
@@ -70,17 +86,19 @@ const ChangeStatus: React.FC<BillLineItemProps> = ({ bill, item, closeModal }) =
   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 = (data: BillLineItemForm) => {
+  const onSubmit = async (data: BillLineItemForm) => {
     const url = `${apiBasePath}bill`;
 
     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,
     };
@@ -89,8 +107,9 @@ const ChangeStatus: React.FC<BillLineItemProps> = ({ bill, item, closeModal }) =
       .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 = {
@@ -101,62 +120,67 @@ const ChangeStatus: React.FC<BillLineItemProps> = ({ bill, item, closeModal }) =
       status: bill.status,
       uuid: bill.uuid,
     };
-    updateBillItems(payload).then(
-      (res) => {
-        mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
-        showSnackbar({
-          title: t('billItems', 'Save Bill'),
-          subtitle: 'Bill processing has been successful',
-          kind: 'success',
-          timeoutInMs: 3000,
-        });
-        closeModal();
-      },
-      (error) => {
-        showSnackbar({ title: 'Bill processing error', kind: 'error', subtitle: error?.message });
-      },
-    );
+
+    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')} />;
   }
 
-  if (Object.keys(bill)?.length > 0) {
-    return (
-      <div>
-        <Form onSubmit={handleSubmit(onSubmit, onError)}>
-          <ModalHeader closeModal={closeModal} title={t('editBillLineItem', 'Edit bill line item?')} />
-          <ModalBody>
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('editBillLineItem', 'Edit bill line item')} />
+      <Form onSubmit={handleSubmit(onSubmit, onError)}>
+        <ModalBody>
+          <Stack gap={5}>
             <div className={styles.modalBody}>
               <h5>
                 {bill?.patientName} &nbsp; · &nbsp;{bill?.cashPointName} &nbsp; · &nbsp;{bill?.receiptNumber}&nbsp;
               </h5>
             </div>
-            <section className={styles.section}>
+            <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, onBlur, value } }) => (
+                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}
                   />
                 )}
               />
@@ -166,18 +190,18 @@ const ChangeStatus: React.FC<BillLineItemProps> = ({ bill, item, closeModal }) =
                 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="This is the unit Price for this item."
                   />
                 )}
               />
 
               <p className={styles.label}>
-                {t('total', 'Total')} : {total}{' '}
+                {t('total', 'Total')}: {total}{' '}
               </p>
 
               {showErrorNotification && (
@@ -191,31 +215,29 @@ const ChangeStatus: React.FC<BillLineItemProps> = ({ bill, item, closeModal }) =
                 </Column>
               )}
             </section>
-          </ModalBody>
-          <ModalFooter>
-            <Button kind="secondary" onClick={closeModal}>
-              {t('cancel', 'Cancel')}
-            </Button>
-            <Button disabled={isSubmitting} type="submit">
-              <>
-                {isSubmitting ? (
-                  <div className={styles.inline}>
-                    <InlineLoading
-                      status="active"
-                      iconDescription={t('submitting', 'Submitting')}
-                      description={t('submitting', 'Submitting...')}
-                    />
-                  </div>
-                ) : (
-                  t('save', 'Save')
-                )}
-              </>
-            </Button>
-          </ModalFooter>
-        </Form>
-      </div>
-    );
-  }
+          </Stack>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {getCoreTranslation('cancel')}
+          </Button>
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? (
+              <div className={styles.inline}>
+                <InlineLoading
+                  status="active"
+                  iconDescription={t('submitting', 'Submitting')}
+                  description={t('submitting', 'Submitting') + '...'}
+                />
+              </div>
+            ) : (
+              getCoreTranslation('save')
+            )}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </>
+  );
 };
 
-export default ChangeStatus;
+export default EditBillLineItemModal;