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

package/src/billable-services/create-edit/add-billable-service.scss

@@ -6,12 +6,8 @@
 .form {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   height: 100%;
-}
-
-.section {
-  margin: layout.$spacing-03;
+  margin: layout.$spacing-05;
 }
 
 .sectionTitle {
@@ -99,7 +95,7 @@
 
 .conceptLabel {
   @include type.type-style('label-02');
-  margin: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .errorContainer {
@@ -135,3 +131,6 @@
   font-size: 0.875rem;
 }
 
+.serviceNameLabel {
+  @include type.type-style('body-compact-02');
+}

package/src/billable-services/create-edit/add-billable-service.test.tsx

@@ -1,26 +1,29 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import { type FetchResponse, navigate } from '@openmrs/esm-framework';
+import { navigate, type FetchResponse } from '@openmrs/esm-framework';
 import {
+  createBillableService,
   useBillableServices,
+  useConceptsSearch,
   usePaymentModes,
   useServiceTypes,
-  createBillableSerice,
 } from '../billable-service.resource';
 import AddBillableService from './add-billable-service.component';
 
-const mockUseBillableServices = useBillableServices as jest.MockedFunction<typeof useBillableServices>;
-const mockUsePaymentModes = usePaymentModes as jest.MockedFunction<typeof usePaymentModes>;
-const mockUseServiceTypes = useServiceTypes as jest.MockedFunction<typeof useServiceTypes>;
-const mockCreateBillableSerice = createBillableSerice as jest.MockedFunction<typeof createBillableSerice>;
-const mockNavigate = navigate as jest.MockedFunction<typeof navigate>;
+const mockUseBillableServices = jest.mocked(useBillableServices);
+const mockUsePaymentModes = jest.mocked(usePaymentModes);
+const mockUseServiceTypes = jest.mocked(useServiceTypes);
+const mockCreateBillableService = jest.mocked(createBillableService);
+const mockUseConceptsSearch = jest.mocked(useConceptsSearch);
 
 jest.mock('../billable-service.resource', () => ({
   useBillableServices: jest.fn(),
   usePaymentModes: jest.fn(),
   useServiceTypes: jest.fn(),
-  createBillableSerice: jest.fn(),
+  createBillableService: jest.fn(),
+  updateBillableService: jest.fn(),
+  useConceptsSearch: jest.fn(),
 }));
 
 const mockPaymentModes = [
@@ -49,106 +52,189 @@ const mockServiceTypes = [
   { uuid: 'a487a743-62ce-4f93-a66b-c5154ee8987d', display: 'Adherence counselling  service' },
 ];
 
-xdescribe('AddBillableService', () => {
-  beforeEach(() => {
-    jest.resetAllMocks();
+// Test helpers (canonical pattern)
+const setupMocks = () => {
+  mockUseBillableServices.mockReturnValue({
+    billableServices: [],
+    isLoading: false,
+    error: null,
+    mutate: jest.fn(),
+    isValidating: false,
   });
-
+  mockUsePaymentModes.mockReturnValue({ paymentModes: mockPaymentModes, error: null, isLoadingPaymentModes: false });
+  mockUseServiceTypes.mockReturnValue({ serviceTypes: mockServiceTypes, error: false, isLoadingServiceTypes: false });
+  mockUseConceptsSearch.mockReturnValue({ searchResults: [], isSearching: false, error: null });
+};
+
+const renderAddBillableService = (props = {}) => {
+  const defaultProps = {
+    onClose: jest.fn(),
+    ...props,
+  };
+  setupMocks();
+  return render(<AddBillableService {...defaultProps} />);
+};
+
+interface FillOptions {
+  serviceName?: string;
+  shortName?: string;
+  skipPrice?: boolean;
+}
+
+const fillRequiredFields = async (user, options: FillOptions = {}) => {
+  const { serviceName = 'Test Service Name', shortName = 'Test Short Name', skipPrice = false } = options;
+
+  if (serviceName) {
+    await user.type(screen.getByRole('textbox', { name: /Service Name/i }), serviceName);
+  }
+  if (shortName) {
+    await user.type(screen.getByRole('textbox', { name: /Short Name/i }), shortName);
+  }
+
+  await user.click(screen.getByRole('combobox', { name: /Service type/i }));
+  await user.click(screen.getByRole('option', { name: /Lab service/i }));
+
+  await user.click(screen.getByRole('combobox', { name: /Payment mode/i }));
+  await user.click(screen.getByRole('option', { name: /Cash/i }));
+
+  if (!skipPrice) {
+    const priceInput = screen.getByRole('textbox', { name: /Selling Price/i });
+    await user.type(priceInput, '100');
+  }
+};
+
+const submitForm = async (user) => {
+  const saveBtn = screen.getByRole('button', { name: /save/i });
+  await user.click(saveBtn);
+};
+
+describe('AddBillableService', () => {
   test('should render billable services form and generate correct payload', async () => {
     const user = userEvent.setup();
     const mockOnClose = jest.fn();
-    mockUseBillableServices.mockReturnValue({
-      billableServices: [],
-      isLoading: false,
-      error: null,
-      mutate: jest.fn(),
-      isValidating: false,
-    });
-    mockUsePaymentModes.mockReturnValue({ paymentModes: mockPaymentModes, error: null, isLoading: false });
-    mockUseServiceTypes.mockReturnValue({ serviceTypes: mockServiceTypes, error: false, isLoading: false });
-
-    render(<AddBillableService onClose={mockOnClose} />);
+    renderAddBillableService({ onClose: mockOnClose });
 
     const formTitle = screen.getByRole('heading', { name: /Add Billable Services/i });
     expect(formTitle).toBeInTheDocument();
 
-    const serviceNameTextInp = screen.getByRole('textbox', { name: /Service Name/i });
-    expect(serviceNameTextInp).toBeInTheDocument();
-
-    const serviceShortNameTextInp = screen.getByRole('textbox', { name: /Short Name/i });
-    expect(serviceShortNameTextInp).toBeInTheDocument();
-
-    await user.type(serviceNameTextInp, 'Test Service Name');
-    await user.type(serviceShortNameTextInp, 'Test Short Name');
-
-    expect(serviceNameTextInp).toHaveValue('Test Service Name');
-    expect(serviceShortNameTextInp).toHaveValue('Test Short Name');
-
-    const serviceTypeComboBox = screen.getByRole('combobox', { name: /Service Type/i });
-    expect(serviceTypeComboBox).toBeInTheDocument();
-    await user.click(serviceTypeComboBox);
-    const serviceTypeOptions = screen.getByRole('option', { name: /Lab service/i });
-    expect(serviceTypeOptions).toBeInTheDocument();
-    await user.click(serviceTypeOptions);
-
-    const addPaymentMethodBtn = screen.getByRole('button', { name: /Add payment option/i });
-    expect(addPaymentMethodBtn).toBeInTheDocument();
-
-    await user.click(addPaymentMethodBtn);
+    await fillRequiredFields(user);
+    mockCreateBillableService.mockResolvedValue({} as FetchResponse<any>);
 
-    const paymentMethodComboBox = screen.getByRole('combobox', { name: /Payment Mode/i });
-    expect(paymentMethodComboBox).toBeInTheDocument();
-    await user.click(paymentMethodComboBox);
-    const paymentMethodOptions = screen.getByRole('option', { name: /Cash/i });
-    expect(paymentMethodOptions).toBeInTheDocument();
-    await user.click(paymentMethodOptions);
+    await submitForm(user);
 
-    const priceTextInp = screen.getByRole('textbox', { name: /Price/i });
-    expect(priceTextInp).toBeInTheDocument();
-    await user.type(priceTextInp, '1000');
-
-    mockCreateBillableSerice.mockReturnValue(Promise.resolve({} as FetchResponse<any>));
-    const saveBtn = screen.getByRole('button', { name: /Save/i });
-    expect(saveBtn).toBeInTheDocument();
-    await user.click(saveBtn);
-
-    expect(mockCreateBillableSerice).toHaveBeenCalledTimes(1);
-    expect(mockCreateBillableSerice).toHaveBeenCalledWith({
+    expect(mockCreateBillableService).toHaveBeenCalledTimes(1);
+    expect(mockCreateBillableService).toHaveBeenCalledWith({
       name: 'Test Service Name',
       shortName: 'Test Short Name',
-      serviceType: undefined,
+      serviceType: 'c9604249-db0a-4d03-b074-fc6bc2fa13e6',
       servicePrices: [
         {
           paymentMode: '63eff7a4-6f82-43c4-a333-dbcc58fe9f74',
-          price: '01000',
+          price: 100,
           name: 'Cash',
         },
       ],
       serviceStatus: 'ENABLED',
+      concept: undefined,
     });
-    expect(mockNavigate).toHaveBeenCalledTimes(1);
-    expect(mockNavigate).toHaveBeenCalledWith({ to: '/openmrs/spa/billable-services' });
+    expect(navigate).toHaveBeenCalledTimes(1);
+    expect(navigate).toHaveBeenCalledWith({ to: '/openmrs/spa/billable-services' });
   });
 
   test("should navigate back to billable services dashboard when 'Cancel' button is clicked", async () => {
     const user = userEvent.setup();
     const mockOnClose = jest.fn();
-    mockUseBillableServices.mockReturnValue({
-      billableServices: [],
-      isLoading: false,
-      error: null,
-      mutate: jest.fn(),
-      isValidating: false,
-    });
-    mockUsePaymentModes.mockReturnValue({ paymentModes: mockPaymentModes, error: null, isLoading: false });
-    mockUseServiceTypes.mockReturnValue({ serviceTypes: mockServiceTypes, error: false, isLoading: false });
+    renderAddBillableService({ onClose: mockOnClose });
 
-    render(<AddBillableService onClose={mockOnClose} />);
-
-    const cancelBtn = screen.getByRole('button', { name: /Cancel/i });
-    expect(cancelBtn).toBeInTheDocument();
+    const cancelBtn = screen.getByRole('button', { name: /cancel/i });
     await user.click(cancelBtn);
 
     expect(mockOnClose).toHaveBeenCalledTimes(1);
   });
+
+  describe('Form Validation', () => {
+    test('should show "Price must be greater than 0" error for zero price', async () => {
+      const user = userEvent.setup();
+      renderAddBillableService();
+
+      await fillRequiredFields(user, { skipPrice: true });
+
+      const priceInput = screen.getByRole('textbox', { name: /selling price/i });
+      await user.type(priceInput, '0');
+
+      await submitForm(user);
+
+      expect(screen.getByText('Price must be greater than 0')).toBeInTheDocument();
+      expect(mockCreateBillableService).not.toHaveBeenCalled();
+    });
+
+    test('should show "Price must be greater than 0" error for negative price', async () => {
+      const user = userEvent.setup();
+      renderAddBillableService();
+
+      await fillRequiredFields(user, { skipPrice: true });
+
+      const priceInput = screen.getByRole('textbox', { name: /Selling Price/i });
+      await user.type(priceInput, '-10');
+
+      await submitForm(user);
+
+      expect(screen.getByText('Price must be greater than 0')).toBeInTheDocument();
+      expect(mockCreateBillableService).not.toHaveBeenCalled();
+    });
+
+    test('should show "Service name is required" error when service name is empty', async () => {
+      const user = userEvent.setup();
+      renderAddBillableService();
+
+      // Fill all fields except service name
+      await user.type(screen.getByRole('textbox', { name: /Short Name/i }), 'Test Short Name');
+
+      await user.click(screen.getByRole('combobox', { name: /Service type/i }));
+      await user.click(screen.getByRole('option', { name: /Lab service/i }));
+
+      await user.click(screen.getByRole('combobox', { name: /Payment mode/i }));
+      await user.click(screen.getByRole('option', { name: /Cash/i }));
+
+      const priceInput = screen.getByRole('textbox', { name: /Selling Price/i });
+      await user.type(priceInput, '100');
+
+      await submitForm(user);
+
+      expect(screen.getByText('Service name is required')).toBeInTheDocument();
+      expect(mockCreateBillableService).not.toHaveBeenCalled();
+    });
+
+    test('should accept valid decimal price values', async () => {
+      const user = userEvent.setup();
+      renderAddBillableService();
+
+      await fillRequiredFields(user, { skipPrice: true });
+
+      const priceInput = screen.getByRole('textbox', { name: /Selling Price/i });
+      await user.type(priceInput, '10.50');
+
+      mockCreateBillableService.mockResolvedValue({} as FetchResponse<any>);
+
+      await submitForm(user);
+
+      expect(screen.queryByText('Price is required')).not.toBeInTheDocument();
+      expect(screen.queryByText('Price must be greater than 0')).not.toBeInTheDocument();
+      expect(mockCreateBillableService).toHaveBeenCalledTimes(1);
+      expect(mockCreateBillableService).toHaveBeenCalledWith({
+        name: 'Test Service Name',
+        shortName: 'Test Short Name',
+        serviceType: 'c9604249-db0a-4d03-b074-fc6bc2fa13e6',
+        servicePrices: [
+          {
+            paymentMode: '63eff7a4-6f82-43c4-a333-dbcc58fe9f74',
+            price: 10.5,
+            name: 'Cash',
+          },
+        ],
+        serviceStatus: 'ENABLED',
+        concept: undefined,
+      });
+    });
+  });
 });

package/src/billable-services/create-edit/edit-billable-service.modal.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { getCoreTranslation } from '@openmrs/esm-framework';
+import { type BillableService } from '../../types';
+import AddBillableService from './add-billable-service.component';
+
+interface EditBillableServiceModalProps {
+  closeModal: () => void;
+  onServiceUpdated: () => void;
+  serviceToEdit?: BillableService;
+}
+
+const EditBillableServiceModal: React.FC<EditBillableServiceModalProps> = ({
+  closeModal,
+  serviceToEdit,
+  onServiceUpdated,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('billableService', 'Billable Service')} />
+      <ModalBody>
+        <AddBillableService
+          serviceToEdit={serviceToEdit}
+          isModal
+          onClose={closeModal}
+          onServiceUpdated={onServiceUpdated}
+        />
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {getCoreTranslation('cancel')}
+        </Button>
+        <Button
+          onClick={() => {
+            // Trigger form submission programmatically
+            const form = document.getElementById('billable-service-form') as HTMLFormElement;
+            if (form) {
+              form.requestSubmit();
+            }
+          }}>
+          {getCoreTranslation('save')}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default EditBillableServiceModal;

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

@@ -0,0 +1,121 @@
+import React 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, Form, ModalBody, ModalFooter, ModalHeader, Stack, TextInput } from '@carbon/react';
+import { showSnackbar, openmrsFetch, restBaseUrl, getCoreTranslation } from '@openmrs/esm-framework';
+
+type PaymentModeFormValues = {
+  name: string;
+  description: string;
+};
+
+interface AddPaymentModeModalProps {
+  closeModal: () => void;
+  onPaymentModeAdded: () => void;
+}
+
+const AddPaymentModeModal: React.FC<AddPaymentModeModalProps> = ({ closeModal, onPaymentModeAdded }) => {
+  const { t } = useTranslation();
+
+  const paymentModeSchema = z.object({
+    name: z.string().min(1, t('paymentModeNameRequired', 'Payment Mode Name is required')),
+    description: z.string().optional(),
+  });
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<PaymentModeFormValues>({
+    resolver: zodResolver(paymentModeSchema),
+    defaultValues: {
+      name: '',
+      description: '',
+    },
+  });
+
+  const onSubmit = async (data: PaymentModeFormValues) => {
+    try {
+      await openmrsFetch(`${restBaseUrl}/billing/paymentMode`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: {
+          name: data.name,
+          description: data.description || '',
+        },
+      });
+
+      showSnackbar({
+        title: t('success', 'Success'),
+        subtitle: t('paymentModeSaved', 'Payment mode was successfully saved.'),
+        kind: 'success',
+      });
+
+      closeModal();
+      reset({ name: '', description: '' });
+      onPaymentModeAdded();
+    } catch (err) {
+      showSnackbar({
+        title: getCoreTranslation('error'),
+        subtitle: err?.message || t('errorSavingPaymentMode', 'An error occurred while saving the payment mode.'),
+        kind: 'error',
+        isLowContrast: false,
+      });
+    }
+  };
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('addPaymentMode', 'Add Payment Mode')} />
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <ModalBody>
+          <Stack gap={5}>
+            <Controller
+              name="name"
+              control={control}
+              render={({ field }) => (
+                <TextInput
+                  id="payment-mode-name"
+                  labelText={t('paymentModeName', 'Payment Mode Name')}
+                  placeholder={t('paymentModeNamePlaceholder', 'e.g., Cash, Credit Card')}
+                  invalid={!!errors.name}
+                  invalidText={errors.name?.message}
+                  {...field}
+                />
+              )}
+            />
+            <Controller
+              name="description"
+              control={control}
+              render={({ field }) => (
+                <TextInput
+                  id="payment-mode-description"
+                  labelText={t('description', 'Description')}
+                  placeholder={t('descriptionPlaceholder', 'e.g., Used for all cash transactions')}
+                  invalid={!!errors.description}
+                  invalidText={errors.description?.message}
+                  {...field}
+                />
+              )}
+            />
+          </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 AddPaymentModeModal;

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

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { showSnackbar, openmrsFetch, restBaseUrl, getCoreTranslation } from '@openmrs/esm-framework';
+
+interface DeletePaymentModeModalProps {
+  closeModal: () => void;
+  paymentModeUuid: string;
+  paymentModeName: string;
+  onPaymentModeDeleted: () => void;
+}
+
+const DeletePaymentModeModal: React.FC<DeletePaymentModeModalProps> = ({
+  closeModal,
+  paymentModeUuid,
+  paymentModeName,
+  onPaymentModeDeleted,
+}) => {
+  const { t } = useTranslation();
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    try {
+      await openmrsFetch(`${restBaseUrl}/billing/paymentMode/${paymentModeUuid}`, {
+        method: 'DELETE',
+      });
+
+      showSnackbar({
+        title: t('success', 'Success'),
+        subtitle: t('paymentModeDeleted', 'Payment mode was successfully deleted.'),
+        kind: 'success',
+      });
+
+      closeModal();
+      onPaymentModeDeleted();
+    } 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('paymentModeName', '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;