@openmrs/esm-billing-app 1.0.2-pre.80 → 1.0.2-pre.802

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

@@ -6,7 +6,6 @@ import {
   DataTable,
   InlineLoading,
   Layer,
-  Modal,
   OverflowMenu,
   OverflowMenuItem,
   Pagination,
@@ -21,25 +20,40 @@ import {
   Tile,
 } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
-import { useLayoutType, isDesktop, useConfig, usePagination, ErrorState, navigate } from '@openmrs/esm-framework';
+import {
+  ErrorState,
+  getCoreTranslation,
+  isDesktop,
+  navigate,
+  showModal,
+  useConfig,
+  useLayoutType,
+  usePagination,
+  type LayoutType,
+} 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';
 
+interface FilterableTableHeaderProps {
+  layout: LayoutType;
+  handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  isValidating: boolean;
+  responsiveSize: 'sm' | 'md' | 'lg';
+  t: (key: string, fallback: string) => string;
+}
+
 const BillableServices = () => {
   const { t } = useTranslation();
   const { billableServices, isLoading, isValidating, error, mutate } = useBillableServices();
   const layout = useLayoutType();
-  const config = useConfig();
+  const { pageSize: configuredPageSize } = useConfig<BillingConfig>();
   const [searchString, setSearchString] = useState('');
   const responsiveSize = isDesktop(layout) ? 'lg' : 'sm';
-  const pageSizes = config?.billableServices?.pageSizes ?? [10, 20, 30, 40, 50];
-  const [pageSize, setPageSize] = useState(config?.billableServices?.pageSize ?? 10);
-
-  const [showOverlay, setShowOverlay] = useState(false);
-  const [editingService, setEditingService] = useState(null);
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [pageSize, setPageSize] = useState(configuredPageSize ?? 10);
 
   const headerData = [
     {
@@ -55,31 +69,26 @@ const BillableServices = () => {
       key: 'serviceType',
     },
     {
-      header: t('status', 'Service Status'),
+      header: t('serviceStatus', 'Service Status'),
       key: 'status',
     },
     {
       header: t('prices', 'Prices'),
       key: 'prices',
     },
-    {
-      header: t('actions', 'Actions'),
-      key: 'actions',
-    },
   ];
 
   const launchBillableServiceForm = useCallback(() => {
     navigate({ to: window.getOpenmrsSpaBase() + 'billable-services/add-service' });
-    setEditingService(null);
-    setShowOverlay(true);
   }, []);
 
   const searchResults: BillableService[] = useMemo(() => {
     const flatBillableServices = Array.isArray(billableServices) ? billableServices.flat() : billableServices;
 
     if (flatBillableServices !== undefined && flatBillableServices.length > 0) {
-      if (searchString && searchString.trim() !== '') {
-        const search = searchString.toLowerCase();
+      const trimmedSearch = searchString.trim();
+      if (trimmedSearch) {
+        const search = trimmedSearch.toLowerCase();
         return flatBillableServices.filter((service: BillableService) =>
           Object.entries(service).some(([header, value]) => {
             return header === 'uuid' ? false : `${value}`.toLowerCase().includes(search);
@@ -94,31 +103,16 @@ const BillableServices = () => {
   const rowData = [];
 
   if (results) {
-    results.forEach((service, index) => {
+    results.forEach((service) => {
       const s = {
-        id: `${index}`,
+        id: service.uuid,
         uuid: service.uuid,
         serviceName: service.name,
         shortName: service.shortName,
         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>
-        ),
+        prices: service.servicePrices.map((price) => `${price.name} (${price.price})`).join(', ') || '--',
       };
-      let cost = '';
-      service.servicePrices.forEach((price) => {
-        cost += `${price.name} (${price.price}) `;
-      });
-      s.prices = cost;
       rowData.push(s);
     });
   }
@@ -130,132 +124,134 @@ const BillableServices = () => {
     },
     [goTo, setSearchString],
   );
-  const handleEditService = useCallback((service) => {
-    setEditingService(service);
-    setShowOverlay(true);
-  }, []);
 
-  const closeModal = useCallback(() => {
-    setShowOverlay(false);
-    setEditingService(null);
-  }, []);
+  const handleEditService = useCallback(
+    (service: BillableService) => {
+      const dispose = showModal('edit-billable-service-modal', {
+        serviceToEdit: service,
+        onServiceUpdated: mutate,
+        closeModal: () => dispose(),
+      });
+    },
+    [mutate],
+  );
 
   if (isLoading) {
-    <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />;
+    return (
+      <InlineLoading status="active" iconDescription={getCoreTranslation('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}
+        overflowMenuOnHover={isDesktop(layout)}
+        size={responsiveSize}
+        useZebraStyles={rowData?.length > 1}>
+        {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
+          <TableContainer>
+            <Table {...getTableProps()} aria-label="service list">
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      {...getHeaderProps({
+                        header,
+                      })}
+                      key={header.key}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                  <TableHeader aria-label={getCoreTranslation('actions')} />
+                </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="lg" 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} />
-        </Modal>
+      {paginated && (
+        <Pagination
+          forwardText={t('nextPage', 'Next page')}
+          backwardText={t('previousPage', '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>
   );
 };
 
-function FilterableTableHeader({ layout, handleSearch, isValidating, responsiveSize, t }) {
+function FilterableTableHeader({ layout, handleSearch, isValidating, responsiveSize, t }: FilterableTableHeaderProps) {
   return (
     <>
       <div className={styles.headerContainer}>
@@ -291,4 +287,5 @@ function FilterableTableHeader({ layout, handleSearch, isValidating, responsiveS
     </>
   );
 }
+
 export default BillableServices;

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

@@ -4,55 +4,13 @@ import userEvent from '@testing-library/user-event';
 import BillableServices from './billable-services.component';
 import { useBillableServices } from './billable-service.resource';
 
-// Mock the resource
 jest.mock('./billable-service.resource', () => ({
   useBillableServices: jest.fn(),
 }));
 
-// Mock the empty state component
-jest.mock('@openmrs/esm-patient-common-lib', () => ({
-  EmptyState: jest.fn(({ displayText, headerTitle }) => (
-    <div data-testid="empty-state">
-      <h1>{headerTitle}</h1>
-      <p>{displayText}</p>
-    </div>
-  )),
-}));
-
-// Mock navigation
-jest.mock('@openmrs/esm-framework', () => ({
-  useLayoutType: jest.fn(() => 'desktop'),
-  isDesktop: jest.fn(() => true),
-  useConfig: jest.fn(() => ({
-    billableServices: {
-      pageSizes: [10, 20, 30, 40, 50],
-      pageSize: 10,
-    },
-  })),
-  usePagination: jest.fn().mockImplementation((data) => ({
-    currentPage: 1,
-    goTo: jest.fn(),
-    results: data,
-    paginated: true,
-  })),
-  navigate: jest.fn(),
-  ErrorState: jest.fn(({ error }) => <div>Error: {error?.message || error}</div>),
-}));
-
-// Mock i18next
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string, fallback: string) => fallback || key,
-  }),
-}));
-
 describe('BillableService', () => {
   const mockedUseBillableServices = useBillableServices as jest.Mock;
 
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   it('renders an empty state when there are no billable services', () => {
     mockedUseBillableServices.mockReturnValue({
       billableServices: [],
@@ -64,9 +22,8 @@ describe('BillableService', () => {
 
     render(<BillableServices />);
 
-    expect(screen.getByTestId('empty-state')).toBeInTheDocument();
-    expect(screen.getByText('Billable service')).toBeInTheDocument();
-    expect(screen.getByText('There are no services to display')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /record.*billable services/i })).toBeInTheDocument();
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
   });
 
   it('renders billable services table correctly', () => {

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;