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

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', () => {
@@ -100,10 +57,10 @@ describe('BillableService', () => {
     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();
+    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();

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

@@ -0,0 +1,170 @@
+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, Stack, 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>
+          <Stack gap={5}>
+            <Controller
+              name="name"
+              control={control}
+              render={({ field }) => (
+                <TextInput
+                  id="cash-point-name"
+                  labelText={t('cashPointName', 'Cash Point Name')}
+                  placeholder={t('cashPointNamePlaceholder', 'For example, 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}
+                />
+              )}
+            />
+          </Stack>
+        </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;

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

@@ -2,59 +2,23 @@ import React, { useState, useEffect, useCallback } from 'react';
 import {
   Button,
   DataTable,
-  TableContainer,
   Table,
-  TableHead,
-  TableRow,
-  TableHeader,
   TableBody,
   TableCell,
-  Modal,
-  TextInput,
-  OverflowMenu,
-  OverflowMenuItem,
-  Dropdown,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
 } 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 { showSnackbar, openmrsFetch, restBaseUrl, showModal, getCoreTranslation } 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 {
@@ -62,7 +26,7 @@ const CashPointConfiguration: React.FC = () => {
       setCashPoints(response.data.results || []);
     } catch (err) {
       showSnackbar({
-        title: t('error', 'Error'),
+        title: getCoreTranslation('error'),
         subtitle: t('errorFetchingCashPoints', 'An error occurred while fetching cash points.'),
         kind: 'error',
         isLowContrast: false,
@@ -70,87 +34,15 @@ const CashPointConfiguration: React.FC = () => {
     }
   }, [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,
-    );
+  }, [fetchCashPoints]);
 
-    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 handleAddCashPoint = () => {
+    const dispose = showModal('add-cash-point-modal', {
+      onCashPointAdded: fetchCashPoints,
+      closeModal: () => dispose(),
+    });
   };
 
   const rowData = cashPoints.map((point) => ({
@@ -164,18 +56,17 @@ const CashPointConfiguration: React.FC = () => {
     { 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')}
+        <CardHeader title={t('cashPointHistory', 'Cash point history')}>
+          <Button renderIcon={Add} onClick={handleAddCashPoint} kind="ghost">
+            {t('addNewCashPoint', 'Add new cash point')}
           </Button>
         </CardHeader>
-        <div className={styles.billHistoryContainer}>
+        <div>
           <DataTable rows={rowData} headers={headerData} isSortable size="lg">
             {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
               <TableContainer>
@@ -192,17 +83,9 @@ const CashPointConfiguration: React.FC = () => {
                   <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>
-                          ),
-                        )}
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
                       </TableRow>
                     ))}
                   </TableBody>
@@ -212,63 +95,6 @@ const CashPointConfiguration: React.FC = () => {
           </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>
   );
 };

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

@@ -13,11 +13,7 @@
   padding: layout.$spacing-05;
 }
 
-.billHistoryContainer {
-  margin-top: layout.$spacing-05;
-}
-
 .table {
   width: 100%;
   table-layout: auto;
-}
+}

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

@@ -1,12 +1,10 @@
 import React from 'react';
 import BillableServices from '../billable-services.component';
 import styles from './dashboard.scss';
-import { ExtensionSlot } from '@openmrs/esm-framework';
 
 export default function BillableServicesDashboard() {
   return (
     <main className={styles.container}>
-      <ExtensionSlot name="billing-home-tiles-slot" />
       <main className={styles.servicesTableContainer}>
         <BillableServices />
       </main>

package/src/billable-services/payment-modes/delete-payment-mode.modal.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSWRConfig } from 'swr';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { showSnackbar, openmrsFetch, restBaseUrl, getCoreTranslation } from '@openmrs/esm-framework';
+import { apiBasePath } from '../../constants';
+
+interface DeletePaymentModeModalProps {
+  closeModal: () => void;
+  paymentModeUuid: string;
+  paymentModeName: string;
+}
+
+const DeletePaymentModeModal: React.FC<DeletePaymentModeModalProps> = ({
+  closeModal,
+  paymentModeUuid,
+  paymentModeName,
+}) => {
+  const { t } = useTranslation();
+  const { mutate } = useSWRConfig();
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    const url = `${apiBasePath}paymentMode`;
+    try {
+      await openmrsFetch(`${restBaseUrl}/billing/paymentMode/${paymentModeUuid}`, {
+        method: 'DELETE',
+      });
+
+      mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
+
+      showSnackbar({
+        title: t('success', 'Success'),
+        subtitle: t('paymentModeDeleted', 'Payment mode was successfully deleted.'),
+        kind: 'success',
+      });
+
+      closeModal();
+    } catch (err) {
+      showSnackbar({
+        title: getCoreTranslation('error'),
+        subtitle: err?.message || t('errorDeletingPaymentMode', 'An error occurred while deleting the payment mode.'),
+        kind: 'error',
+        isLowContrast: false,
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('deletePaymentMode', 'Delete Payment Mode')} />
+      <ModalBody>
+        <p>{t('confirmDeleteMessage', 'Are you sure you want to delete this payment mode? Proceed cautiously.')}</p>
+        {paymentModeName && (
+          <p>
+            <strong>
+              {t('paymentModeNameToDelete', 'Payment Mode Name: {{paymentModeName}}', { paymentModeName })}
+            </strong>
+          </p>
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {getCoreTranslation('cancel')}
+        </Button>
+        <Button kind="danger" onClick={handleDelete} disabled={isDeleting}>
+          {isDeleting ? t('deleting', 'Deleting') + '...' : getCoreTranslation('delete')}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default DeletePaymentModeModal;