@openmrs/esm-billing-app 1.0.2-pre.84 → 1.0.2-pre.849

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

@@ -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,225 @@
+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 { mutate } 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 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
+                    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;