@openmrs/esm-billing-app 1.0.2-pre.711 → 1.0.2-pre.721

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

@@ -4,7 +4,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import { type FetchResponse, showSnackbar } from '@openmrs/esm-framework';
 import { type MappedBill } from '../types';
 import { updateBillItems } from '../billing.resource';
-import ChangeStatus from './edit-bill-item.component';
+import EditBillLineItemModal from './edit-bill-item.modal';
 
 const mockUpdateBillItems = jest.mocked(updateBillItems);
 const mockShowSnackbar = jest.mocked(showSnackbar);
@@ -77,7 +77,7 @@ describe('ChangeStatus component', () => {
   const closeModalMock = 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={closeModalMock} />);
 
     expect(screen.getByText('Edit bill line item?')).toBeInTheDocument();
     expect(screen.getByText('John Doe · Main Cashpoint · 123456')).toBeInTheDocument();
@@ -88,7 +88,7 @@ describe('ChangeStatus component', () => {
 
   test('updates total when quantity is changed', async () => {
     const user = userEvent.setup();
-    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
 
     const quantityInput = screen.getByRole('spinbutton', { name: /Quantity/ });
     await user.type(quantityInput, '3');
@@ -100,7 +100,7 @@ describe('ChangeStatus component', () => {
     const user = userEvent.setup();
     mockUpdateBillItems.mockResolvedValueOnce({} as FetchResponse<any>);
 
-    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
 
     await user.click(screen.getByText(/Save/));
 
@@ -120,7 +120,7 @@ describe('ChangeStatus component', () => {
     const user = userEvent.setup();
     mockUpdateBillItems.mockRejectedValueOnce({ message: 'Error occurred' });
 
-    render(<ChangeStatus bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
+    render(<EditBillLineItemModal bill={mockBill} item={mockItem} closeModal={closeModalMock} />);
 
     await user.click(screen.getByText(/Save/));
 

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

@@ -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';
@@ -44,7 +44,7 @@ const PatientBillsSelections: React.FC<{ bills: MappedBill; setPatientUuid: (pat
             <StructuredListCell head>{t('quantity', 'Quantity')}</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>

package/src/billable-services/billable-services-home.component.tsx

@@ -9,7 +9,7 @@ import BillWaiver from './bill-waiver/bill-waiver.component';
 import BillableServicesDashboard from './dashboard/dashboard.component';
 import BillingHeader from '../billing-header/billing-header.component';
 import CashPointConfiguration from './cash-point/cash-point-configuration.component';
-import PaymentModesConfig from './payyment-modes/payment-modes-config.component';
+import PaymentModesConfig from './payment-modes/payment-modes-config.component';
 import styles from './billable-services.scss';
 
 const BillableServiceHome: React.FC = () => {

package/src/billable-services/billable-services.component.tsx

@@ -6,7 +6,6 @@ import {
   DataTable,
   InlineLoading,
   Layer,
-  Modal,
   OverflowMenu,
   OverflowMenuItem,
   Pagination,
@@ -21,11 +20,19 @@ import {
   Tile,
 } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
-import { useLayoutType, isDesktop, useConfig, usePagination, ErrorState, navigate } from '@openmrs/esm-framework';
+import {
+  useLayoutType,
+  isDesktop,
+  useConfig,
+  usePagination,
+  ErrorState,
+  navigate,
+  showModal,
+  getCoreTranslation,
+} from '@openmrs/esm-framework';
 import { EmptyState } from '@openmrs/esm-patient-common-lib';
 import { type BillableService } from '../types/index';
 import { useBillableServices } from './billable-service.resource';
-import AddBillableService from './create-edit/add-billable-service.component';
 import type { BillingConfig } from '../config-schema';
 import styles from './billable-services.scss';
 
@@ -39,9 +46,6 @@ const BillableServices = () => {
   const pageSizes = [10, 20, 30, 40, 50];
   const [pageSize, setPageSize] = useState(configuredPageSize ?? 10);
 
-  const [showOverlay, setShowOverlay] = useState(false);
-  const [editingService, setEditingService] = useState(null);
-
   const headerData = [
     {
       header: t('serviceName', 'Service Name'),
@@ -64,15 +68,13 @@ const BillableServices = () => {
       key: 'prices',
     },
     {
-      header: t('actions', 'Actions'),
+      header: getCoreTranslation('actions'),
       key: 'actions',
     },
   ];
 
   const launchBillableServiceForm = useCallback(() => {
     navigate({ to: window.getOpenmrsSpaBase() + 'billable-services/add-service' });
-    setEditingService(null);
-    setShowOverlay(true);
   }, []);
 
   const searchResults: BillableService[] = useMemo(() => {
@@ -104,16 +106,6 @@ const BillableServices = () => {
         serviceType: service?.serviceType?.display,
         status: service.serviceStatus,
         prices: '--',
-        actions: (
-          <TableCell>
-            <OverflowMenu size="sm" flipped>
-              <OverflowMenuItem
-                itemText={t('editBillableService', 'Edit Billable Service')}
-                onClick={() => handleEditService(service)}
-              />
-            </OverflowMenu>
-          </TableCell>
-        ),
       };
       let cost = '';
       service.servicePrices.forEach((price) => {
@@ -131,128 +123,118 @@ const BillableServices = () => {
     },
     [goTo, setSearchString],
   );
-  const handleEditService = useCallback((service) => {
-    setEditingService(service);
-    setShowOverlay(true);
-  }, []);
-
-  const closeModal = useCallback(() => {
-    setShowOverlay(false);
-    setEditingService(null);
-  }, []);
+  const handleEditService = useCallback(
+    (service) => {
+      showModal('edit-billable-service-modal', {
+        editingService: service,
+        onServiceUpdated: mutate,
+      });
+    },
+    [mutate],
+  );
 
   if (isLoading) {
-    <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />;
+    return <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />;
   }
+
   if (error) {
-    <ErrorState headerTitle={t('billableService', 'Billable Service')} error={error} />;
+    return <ErrorState headerTitle={t('billableService', 'Billable Service')} error={error} />;
   }
+
   if (billableServices.length === 0) {
-    <EmptyState
-      displayText={t('billableService', 'Billable Service')}
-      headerTitle={t('billableService', 'Billable Service')}
-      launchForm={launchBillableServiceForm}
-    />;
+    return (
+      <EmptyState
+        displayText={t('billableServices__lower', 'billable services')}
+        headerTitle={t('billableService', 'Billable Service')}
+        launchForm={launchBillableServiceForm}
+      />
+    );
   }
 
   return (
-    <>
-      {billableServices?.length > 0 ? (
-        <div className={styles.serviceContainer}>
-          <FilterableTableHeader
-            handleSearch={handleSearch}
-            isValidating={isValidating}
-            layout={layout}
-            responsiveSize={responsiveSize}
-            t={t}
-          />
-          <DataTable
-            isSortable
-            rows={rowData}
-            headers={headerData}
-            size={responsiveSize}
-            useZebraStyles={rowData?.length > 1 ? true : false}>
-            {({ rows, headers, getRowProps, getTableProps }) => (
-              <TableContainer>
-                <Table {...getTableProps()} aria-label="service list">
-                  <TableHead>
-                    <TableRow>
-                      {headers.map((header) => (
-                        <TableHeader key={header.key}>{header.header}</TableHeader>
-                      ))}
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {rows.map((row) => (
-                      <TableRow
-                        key={row.id}
-                        {...getRowProps({
-                          row,
-                        })}>
-                        {row.cells.map((cell) => (
-                          <TableCell key={cell.id}>{cell.value}</TableCell>
-                        ))}
-                      </TableRow>
+    <div className={styles.serviceContainer}>
+      <FilterableTableHeader
+        handleSearch={handleSearch}
+        isValidating={isValidating}
+        layout={layout}
+        responsiveSize={responsiveSize}
+        t={t}
+      />
+      <DataTable
+        isSortable
+        rows={rowData}
+        headers={headerData}
+        size={responsiveSize}
+        useZebraStyles={rowData?.length > 1 ? true : false}>
+        {({ rows, headers, getRowProps, getTableProps }) => (
+          <TableContainer>
+            <Table {...getTableProps()} aria-label="service list">
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader key={header.key}>{header.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    {...getRowProps({
+                      row,
+                    })}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
                     ))}
-                  </TableBody>
-                </Table>
-              </TableContainer>
-            )}
-          </DataTable>
-          {searchResults?.length === 0 && (
-            <div className={styles.filterEmptyState}>
-              <Layer level={0}>
-                <Tile className={styles.filterEmptyStateTile}>
-                  <p className={styles.filterEmptyStateContent}>
-                    {t('noMatchingServicesToDisplay', 'No matching services to display')}
-                  </p>
-                  <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
-                </Tile>
-              </Layer>
-            </div>
-          )}
-          {paginated && (
-            <Pagination
-              forwardText="Next page"
-              backwardText="Previous page"
-              page={currentPage}
-              pageSize={pageSize}
-              pageSizes={pageSizes}
-              totalItems={searchResults?.length}
-              className={styles.pagination}
-              size={responsiveSize}
-              onChange={({ pageSize: newPageSize, page: newPage }) => {
-                if (newPageSize !== pageSize) {
-                  setPageSize(newPageSize);
-                }
-                if (newPage !== currentPage) {
-                  goTo(newPage);
-                }
-              }}
-            />
-          )}
+                    <TableCell className="cds--table-column-menu">
+                      <OverflowMenu size="sm" flipped>
+                        <OverflowMenuItem
+                          className={styles.menuItem}
+                          itemText={t('editBillableService', 'Edit Billable Service')}
+                          onClick={() => handleEditService(results.find((service) => service.uuid === row.id))}
+                        />
+                      </OverflowMenu>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      {searchResults?.length === 0 && (
+        <div className={styles.filterEmptyState}>
+          <Layer level={0}>
+            <Tile className={styles.filterEmptyStateTile}>
+              <p className={styles.filterEmptyStateContent}>
+                {t('noMatchingServicesToDisplay', 'No matching services to display')}
+              </p>
+              <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
+            </Tile>
+          </Layer>
         </div>
-      ) : (
-        <EmptyState
-          launchForm={launchBillableServiceForm}
-          displayText={t('noServicesToDisplay', 'There are no services to display')}
-          headerTitle={t('billableService', 'Billable service')}
-        />
       )}
-      {showOverlay && (
-        <Modal
-          open={showOverlay}
-          modalHeading={t('billableService', 'Billable Service')}
-          primaryButtonText={null}
-          secondaryButtonText={t('cancel', 'Cancel')}
-          onRequestClose={closeModal}
-          onSecondarySubmit={closeModal}
-          size="lg"
-          passiveModal={true}>
-          <AddBillableService editingService={editingService} onClose={closeModal} onServiceUpdated={mutate} />
-        </Modal>
+      {paginated && (
+        <Pagination
+          forwardText="Next page"
+          backwardText="Previous page"
+          page={currentPage}
+          pageSize={pageSize}
+          pageSizes={pageSizes}
+          totalItems={searchResults?.length}
+          className={styles.pagination}
+          size={responsiveSize}
+          onChange={({ pageSize: newPageSize, page: newPage }) => {
+            if (newPageSize !== pageSize) {
+              setPageSize(newPageSize);
+            }
+            if (newPage !== currentPage) {
+              goTo(newPage);
+            }
+          }}
+        />
       )}
-    </>
+    </div>
   );
 };
 

package/src/billable-services/billable-services.scss

@@ -217,3 +217,6 @@
   grid-template-columns: 16rem 1fr;
 }
 
+.menuItem {
+  max-width: none;
+}

package/src/billable-services/billable-services.test.tsx

@@ -22,9 +22,7 @@ describe('BillableService', () => {
 
     render(<BillableServices />);
 
-    // Check that empty state is rendered without looking for specific test ID
-    expect(screen.getByText('Billable service')).toBeInTheDocument();
-    // Check that empty state is visible with some indication
+    expect(screen.getByRole('button', { name: /record.*billable services/i })).toBeInTheDocument();
     expect(screen.queryByRole('table')).not.toBeInTheDocument();
   });
 

package/src/billable-services/cash-point/add-cash-point.modal.tsx

@@ -0,0 +1,168 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useForm, Controller } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button, Dropdown, Form, ModalBody, ModalFooter, ModalHeader, TextInput } from '@carbon/react';
+import { showSnackbar, openmrsFetch, restBaseUrl, getCoreTranslation } from '@openmrs/esm-framework';
+
+type CashPointFormValues = {
+  name: string;
+  uuid: string;
+  location: string;
+};
+
+interface AddCashPointModalProps {
+  closeModal: () => void;
+  onCashPointAdded: () => void;
+}
+
+const AddCashPointModal: React.FC<AddCashPointModalProps> = ({ closeModal, onCashPointAdded }) => {
+  const { t } = useTranslation();
+  const [locations, setLocations] = useState([]);
+
+  const cashPointSchema = z.object({
+    name: z.string().min(1, t('cashPointNameRequired', 'Cash Point Name is required')),
+    uuid: z
+      .string()
+      .min(1, t('uuidRequired', 'UUID is required'))
+      .regex(
+        /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i,
+        t('invalidUuidFormat', 'Invalid UUID format'),
+      ),
+    location: z.string().min(1, t('locationRequired', 'Location is required')),
+  });
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<CashPointFormValues>({
+    resolver: zodResolver(cashPointSchema),
+    defaultValues: {
+      name: '',
+      uuid: '',
+      location: '',
+    },
+  });
+
+  const fetchLocations = useCallback(async () => {
+    try {
+      const response = await openmrsFetch(`${restBaseUrl}/location?v=default`);
+      const allLocations = response.data.results.map((loc: any) => ({
+        id: loc.uuid,
+        label: loc.display,
+      }));
+      setLocations(allLocations);
+    } catch (err) {
+      showSnackbar({
+        title: getCoreTranslation('error'),
+        subtitle: t('errorFetchingLocations', 'An error occurred while fetching locations.'),
+        kind: 'error',
+        isLowContrast: false,
+      });
+    }
+  }, [t]);
+
+  useEffect(() => {
+    fetchLocations();
+  }, [fetchLocations]);
+
+  const onSubmit = async (data: CashPointFormValues) => {
+    try {
+      await openmrsFetch(`${restBaseUrl}/billing/cashPoint`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: {
+          name: data.name,
+          uuid: data.uuid,
+          location: { uuid: data.location },
+        },
+      });
+
+      showSnackbar({
+        title: t('success', 'Success'),
+        subtitle: t('cashPointSaved', 'Cash point was successfully saved.'),
+        kind: 'success',
+      });
+
+      closeModal();
+      reset({ name: '', uuid: '', location: '' });
+      onCashPointAdded();
+    } catch (err) {
+      showSnackbar({
+        title: getCoreTranslation('error'),
+        subtitle: err?.message || t('errorSavingCashPoint', 'An error occurred while saving the cash point.'),
+        kind: 'error',
+        isLowContrast: false,
+      });
+    }
+  };
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('addCashPoint', 'Add Cash Point')} />
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <ModalBody>
+          <Controller
+            name="name"
+            control={control}
+            render={({ field }) => (
+              <TextInput
+                id="cash-point-name"
+                labelText={t('cashPointName', 'Cash Point Name')}
+                placeholder={t('cashPointNamePlaceholder', 'e.g., Pharmacy Cash Point')}
+                invalid={!!errors.name}
+                invalidText={errors.name?.message}
+                {...field}
+              />
+            )}
+          />
+          <Controller
+            name="uuid"
+            control={control}
+            render={({ field }) => (
+              <TextInput
+                id="cash-point-uuid"
+                labelText={t('cashPointUuid', 'Cash Point UUID')}
+                placeholder={t('cashPointUuidPlaceholder', 'Enter UUID')}
+                invalid={!!errors.uuid}
+                invalidText={errors.uuid?.message}
+                {...field}
+              />
+            )}
+          />
+          <Controller
+            name="location"
+            control={control}
+            render={({ field }) => (
+              <Dropdown
+                id="cash-point-location"
+                label={t('selectLocation', 'Select Location')}
+                titleText={t('cashPointLocation', 'Cash Point Location')}
+                items={locations}
+                selectedItem={locations.find((loc) => loc.id === field.value)}
+                onChange={({ selectedItem }) => field.onChange(selectedItem?.id)}
+                invalid={!!errors.location}
+                invalidText={errors.location?.message}
+              />
+            )}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {getCoreTranslation('cancel')}
+          </Button>
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? t('saving', 'Saving') + '...' : getCoreTranslation('save')}
+          </Button>
+        </ModalFooter>
+      </Form>
+    </>
+  );
+};
+
+export default AddCashPointModal;