@openmrs/esm-billing-app 1.0.1-pre.98 → 1.0.2-pre.58

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

@@ -6,6 +6,9 @@ import {
   DataTable,
   InlineLoading,
   Layer,
+  Modal,
+  OverflowMenu,
+  OverflowMenuItem,
   Pagination,
   Search,
   Table,
@@ -20,7 +23,9 @@ import {
 import { ArrowRight } from '@carbon/react/icons';
 import { useLayoutType, isDesktop, useConfig, usePagination, ErrorState, navigate } 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 styles from './billable-services.scss';
 
 const BillableServices = () => {
@@ -33,9 +38,8 @@ const BillableServices = () => {
   const pageSizes = config?.billableServices?.pageSizes ?? [10, 20, 30, 40, 50];
   const [pageSize, setPageSize] = useState(config?.billableServices?.pageSize ?? 10);
 
-  //creating service state
   const [showOverlay, setShowOverlay] = useState(false);
-  const [overlayHeader, setOverlayTitle] = useState('');
+  const [editingService, setEditingService] = useState(null);
 
   const headerData = [
     {
@@ -66,25 +70,29 @@ const BillableServices = () => {
 
   const launchBillableServiceForm = useCallback(() => {
     navigate({ to: window.getOpenmrsSpaBase() + 'billable-services/add-service' });
+    setEditingService(null);
+    setShowOverlay(true);
   }, []);
 
-  const searchResults = useMemo(() => {
-    if (billableServices !== undefined && billableServices.length > 0) {
+  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();
-        return billableServices?.filter((service) =>
+        return flatBillableServices.filter((service: BillableService) =>
           Object.entries(service).some(([header, value]) => {
             return header === 'uuid' ? false : `${value}`.toLowerCase().includes(search);
           }),
         );
       }
     }
-    return billableServices;
+    return flatBillableServices;
   }, [searchString, billableServices]);
 
-  const { paginated, goTo, results, currentPage } = usePagination(searchResults, pageSize);
+  const { paginated, goTo, results, currentPage } = usePagination<BillableService>(searchResults, pageSize);
+  const rowData = [];
 
-  let rowData = [];
   if (results) {
     results.forEach((service, index) => {
       const s = {
@@ -95,7 +103,16 @@ const BillableServices = () => {
         serviceType: service?.serviceType?.display,
         status: service.serviceStatus,
         prices: '--',
-        actions: '--',
+        actions: (
+          <TableCell>
+            <OverflowMenu size="sm" flipped>
+              <OverflowMenuItem
+                itemText={t('editBillableService', 'Edit Billable Service')}
+                onClick={() => handleEditService(service)}
+              />
+            </OverflowMenu>
+          </TableCell>
+        ),
       };
       let cost = '';
       service.servicePrices.forEach((price) => {
@@ -113,6 +130,15 @@ const BillableServices = () => {
     },
     [goTo, setSearchString],
   );
+  const handleEditService = useCallback((service) => {
+    setEditingService(service);
+    setShowOverlay(true);
+  }, []);
+
+  const closeModal = useCallback(() => {
+    setShowOverlay(false);
+    setEditingService(null);
+  }, []);
 
   if (isLoading) {
     <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />;
@@ -212,6 +238,19 @@ const BillableServices = () => {
           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>
+      )}
     </>
   );
 };

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

@@ -1,9 +1,9 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .container {
-  margin: 2rem 0;
+  margin: layout.$spacing-07 0;
 }
 
 .emptyStateContainer,
@@ -39,7 +39,7 @@
   }
 
   :global(.cds--list-box__menu-icon) {
-    height: 1rem;
+    height: layout.$spacing-05;
   }
 
   :global(.cds--list-box__menu) {
@@ -70,7 +70,7 @@
   justify-content: space-between;
 
   &:global(.cds--inline-loading) {
-    max-height: 1rem;
+    max-height: layout.$spacing-05;
   }
 }
 
@@ -95,7 +95,7 @@
 }
 
 .emptyRow {
-  padding: 0 1rem;
+  padding: 0 layout.$spacing-05;
   display: flex;
   align-items: center;
 }
@@ -103,7 +103,7 @@
 .visitSummaryContainer {
   width: 100%;
   max-width: 768px;
-  margin: 1rem auto;
+  margin: layout.$spacing-05 auto;
 }
 
 .expandedActiveVisitRow > td > div {
@@ -111,11 +111,11 @@
 }
 
 .expandedActiveVisitRow td {
-  padding: 0 2rem;
+  padding: 0 layout.$spacing-07;
 }
 
 .expandedActiveVisitRow th[colspan] td[colspan] > div:first-child {
-  padding: 0 1rem;
+  padding: 0 layout.$spacing-05;
 }
 
 .action {
@@ -146,7 +146,7 @@
     &:after {
       content: '';
       display: block;
-      width: 2rem;
+      width: layout.$spacing-07;
       padding-top: 3px;
       border-bottom: 0.375rem solid;
       @include brand-03(border-bottom-color);
@@ -216,3 +216,4 @@
   display: grid;
   grid-template-columns: 16rem 1fr;
 }
+

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

@@ -1,16 +1,180 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+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', () => {
-  test('renders an empty state when there are no billable services', () => {
-    renderBillableServices();
+  const mockedUseBillableServices = useBillableServices as jest.Mock;
 
-    expect(screen.getByText(/Empty data illustration/i)).toBeInTheDocument();
-    expect(screen.getByText(/There are no services to display to display for this patient/i)).toBeInTheDocument();
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
-});
 
-function renderBillableServices() {
-  render(<BillableServices />);
-}
+  it('renders an empty state when there are no billable services', () => {
+    mockedUseBillableServices.mockReturnValue({
+      billableServices: [],
+      isLoading: false,
+      isValidating: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    render(<BillableServices />);
+
+    expect(screen.getByTestId('empty-state')).toBeInTheDocument();
+    expect(screen.getByText('Billable service')).toBeInTheDocument();
+    expect(screen.getByText('There are no services to display')).toBeInTheDocument();
+  });
+
+  it('renders billable services table correctly', () => {
+    const mockServices = [
+      {
+        uuid: '1',
+        name: 'Service 1',
+        shortName: 'S1',
+        serviceType: { display: 'Type 1' },
+        serviceStatus: 'ACTIVE',
+        servicePrices: [{ name: 'Price 1', price: 100 }],
+      },
+      {
+        uuid: '2',
+        name: 'Service 2',
+        shortName: 'S2',
+        serviceType: { display: 'Type 2' },
+        serviceStatus: 'ACTIVE',
+        servicePrices: [{ name: 'Price 2', price: 200 }],
+      },
+    ];
+
+    mockedUseBillableServices.mockReturnValue({
+      billableServices: mockServices,
+      isLoading: false,
+      isValidating: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    render(<BillableServices />);
+
+    // Check table headers
+    expect(screen.getByText('Service Name')).toBeInTheDocument();
+    expect(screen.getByText('Short Name')).toBeInTheDocument();
+    expect(screen.getByText('Service Type')).toBeInTheDocument();
+    expect(screen.getByText('Service Status')).toBeInTheDocument();
+
+    // Check service data
+    expect(screen.getByText('Service 1')).toBeInTheDocument();
+    expect(screen.getByText('Service 2')).toBeInTheDocument();
+  });
+
+  it('filters services based on search input', async () => {
+    const mockServices = [
+      {
+        uuid: '1',
+        name: 'Service 1',
+        shortName: 'S1',
+        serviceType: { display: 'Type 1' },
+        serviceStatus: 'ACTIVE',
+        servicePrices: [{ name: 'Price 1', price: 100 }],
+      },
+      {
+        uuid: '2',
+        name: 'Different Service',
+        shortName: 'S2',
+        serviceType: { display: 'Type 2' },
+        serviceStatus: 'ACTIVE',
+        servicePrices: [{ name: 'Price 2', price: 200 }],
+      },
+    ];
+
+    mockedUseBillableServices.mockReturnValue({
+      billableServices: mockServices,
+      isLoading: false,
+      isValidating: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    const user = userEvent.setup();
+    render(<BillableServices />);
+
+    const searchInput = screen.getByRole('searchbox');
+    await user.type(searchInput, 'Service 1');
+
+    expect(screen.getByText('Service 1')).toBeInTheDocument();
+    expect(screen.queryByText('Different Service')).not.toBeInTheDocument();
+  });
+
+  it('shows empty state message when search returns no results', async () => {
+    const mockServices = [
+      {
+        uuid: '1',
+        name: 'Service 1',
+        shortName: 'S1',
+        serviceType: { display: 'Type 1' },
+        serviceStatus: 'ACTIVE',
+        servicePrices: [{ name: 'Price 1', price: 100 }],
+      },
+    ];
+
+    mockedUseBillableServices.mockReturnValue({
+      billableServices: mockServices,
+      isLoading: false,
+      isValidating: false,
+      error: null,
+      mutate: jest.fn(),
+    });
+
+    const user = userEvent.setup();
+    render(<BillableServices />);
+
+    const searchInput = screen.getByRole('searchbox');
+    await user.type(searchInput, 'nonexistent service');
+
+    expect(screen.getByText('No matching services to display')).toBeInTheDocument();
+    expect(screen.getByText('Check the filters above')).toBeInTheDocument();
+  });
+});

package/src/billable-services/cash-point/cash-point-configuration.component.tsx

@@ -0,0 +1,276 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Button,
+  DataTable,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Modal,
+  TextInput,
+  OverflowMenu,
+  OverflowMenuItem,
+  Dropdown,
+} from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { useForm, Controller } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { showSnackbar, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import styles from './cash-point-configuration.scss';
+
+// Validation schema
+const cashPointSchema = z.object({
+  name: z.string().min(1, 'Cash Point Name is required'),
+  uuid: z
+    .string()
+    .min(1, '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, 'Invalid UUID format'),
+  location: z.string().min(1, 'Location is required'),
+});
+
+type CashPointFormValues = z.infer<typeof cashPointSchema>;
+
+const CashPointConfiguration: React.FC = () => {
+  const { t } = useTranslation();
+  const [cashPoints, setCashPoints] = useState([]);
+  const [locations, setLocations] = useState([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<CashPointFormValues>({
+    resolver: zodResolver(cashPointSchema),
+    defaultValues: {
+      name: '',
+      uuid: '',
+      location: '',
+    },
+  });
+
+  const fetchCashPoints = useCallback(async () => {
+    try {
+      const response = await openmrsFetch(`${restBaseUrl}/billing/cashPoint?v=full`);
+      setCashPoints(response.data.results || []);
+    } catch (err) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: t('errorFetchingCashPoints', 'An error occurred while fetching cash points.'),
+        kind: 'error',
+        isLowContrast: false,
+      });
+    }
+  }, [t]);
+
+  const fetchLocations = useCallback(async () => {
+    try {
+      const response = await openmrsFetch(`${restBaseUrl}/location?v=default`);
+      const allLocations = response.data.results.map((loc) => ({
+        id: loc.uuid,
+        label: loc.display,
+      }));
+      setLocations(allLocations);
+    } catch (err) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: t('errorFetchingLocations', 'An error occurred while fetching locations.'),
+        kind: 'error',
+        isLowContrast: false,
+      });
+    }
+  }, [t]);
+
+  useEffect(() => {
+    fetchCashPoints();
+    fetchLocations();
+  }, [fetchCashPoints, fetchLocations]);
+
+  const onSubmit = async (data: CashPointFormValues) => {
+    const isDuplicate = cashPoints.some(
+      (point) => point.name.toLowerCase() === data.name.toLowerCase() || point.uuid === data.uuid,
+    );
+
+    if (isDuplicate) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: t(
+          'duplicateCashPointError',
+          'A cash point with the same name or UUID already exists. Please use a unique name and UUID.',
+        ),
+        kind: 'error',
+        isLowContrast: false,
+      });
+      return;
+    }
+
+    try {
+      const response = await openmrsFetch(`${restBaseUrl}/billing/cashPoint`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: {
+          name: data.name,
+          uuid: data.uuid,
+          location: { uuid: data.location },
+        },
+      });
+
+      if (response.ok) {
+        showSnackbar({
+          title: t('success', 'Success'),
+          subtitle: t('cashPointSaved', 'Cash point was successfully saved.'),
+          kind: 'success',
+        });
+
+        setIsModalOpen(false);
+        reset({ name: '', uuid: '', location: '' });
+        fetchCashPoints();
+      } else {
+        const errorData = response.data || {};
+        showSnackbar({
+          title: t('error', 'Error'),
+          subtitle: errorData.message || t('errorSavingCashPoint', 'An error occurred while saving the cash point.'),
+          kind: 'error',
+          isLowContrast: false,
+        });
+      }
+    } catch (err) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: t('errorSavingCashPoint', 'An error occurred while saving the cash point.'),
+        kind: 'error',
+        isLowContrast: false,
+      });
+    }
+  };
+
+  const rowData = cashPoints.map((point) => ({
+    id: point.uuid,
+    name: point.name,
+    uuid: point.uuid,
+    location: point.location ? point.location.display : 'None',
+  }));
+
+  const headerData = [
+    { key: 'name', header: t('name', 'Name') },
+    { key: 'uuid', header: t('uuid', 'UUID') },
+    { key: 'location', header: t('location', 'Location') },
+    { key: 'actions', header: t('actions', 'Actions') },
+  ];
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <CardHeader title={t('cashPointHistory', 'Cash Point History')}>
+          <Button renderIcon={Add} onClick={() => setIsModalOpen(true)} kind="ghost">
+            {t('addCashPoint', 'Add New Cash Point')}
+          </Button>
+        </CardHeader>
+        <div className={styles.billHistoryContainer}>
+          <DataTable rows={rowData} headers={headerData} isSortable size="lg">
+            {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+              <TableContainer>
+                <Table className={styles.table} {...getTableProps()}>
+                  <TableHead>
+                    <TableRow>
+                      {headers.map((header) => (
+                        <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                          {header.header}
+                        </TableHeader>
+                      ))}
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {rows.map((row) => (
+                      <TableRow key={row.id} {...getRowProps({ row })}>
+                        {row.cells.map((cell) =>
+                          cell.info.header !== 'actions' ? (
+                            <TableCell key={cell.id}>{cell.value}</TableCell>
+                          ) : (
+                            <TableCell key={cell.id}>
+                              <OverflowMenu>
+                                <OverflowMenuItem itemText={t('delete', 'Delete')} disabled />
+                              </OverflowMenu>
+                            </TableCell>
+                          ),
+                        )}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            )}
+          </DataTable>
+        </div>
+      </div>
+
+      {/* Modal for Adding New Cash Point */}
+      <Modal
+        open={isModalOpen}
+        modalHeading={t('addCashPoint', 'Add Cash Point')}
+        onRequestClose={() => setIsModalOpen(false)}
+        onRequestSubmit={handleSubmit(onSubmit)}
+        primaryButtonText={t('save', 'Save')}
+        secondaryButtonText={t('cancel', 'Cancel')}
+        isPrimaryButtonDisabled={isSubmitting}>
+        <form>
+          <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('location', '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}
+              />
+            )}
+          />
+        </form>
+      </Modal>
+    </div>
+  );
+};
+
+export default CashPointConfiguration;

package/src/billable-services/cash-point/cash-point-configuration.scss

@@ -0,0 +1,23 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  padding: layout.$spacing-05;
+}
+
+.card {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: layout.$spacing-05;
+}
+
+.billHistoryContainer {
+  margin-top: layout.$spacing-05;
+}
+
+.table {
+  width: 100%;
+  table-layout: auto;
+}