@openmrs/esm-billing-app 1.0.2-pre.78 → 1.0.2-pre.786

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,11 +52,7 @@ const mockServiceTypes = [
   { uuid: 'a487a743-62ce-4f93-a66b-c5154ee8987d', display: 'Adherence counselling  service' },
 ];
 
-xdescribe('AddBillableService', () => {
-  beforeEach(() => {
-    jest.resetAllMocks();
-  });
-
+describe('AddBillableService', () => {
   test('should render billable services form and generate correct payload', async () => {
     const user = userEvent.setup();
     const mockOnClose = jest.fn();
@@ -64,8 +63,9 @@ xdescribe('AddBillableService', () => {
       mutate: jest.fn(),
       isValidating: false,
     });
-    mockUsePaymentModes.mockReturnValue({ paymentModes: mockPaymentModes, error: null, isLoading: false });
-    mockUseServiceTypes.mockReturnValue({ serviceTypes: mockServiceTypes, error: false, isLoading: false });
+    mockUsePaymentModes.mockReturnValue({ paymentModes: mockPaymentModes, error: null, isLoadingPaymentModes: false });
+    mockUseServiceTypes.mockReturnValue({ serviceTypes: mockServiceTypes, error: false, isLoadingServiceTypes: false });
+    mockUseConceptsSearch.mockReturnValue({ searchResults: [], isSearching: false, error: null });
 
     render(<AddBillableService onClose={mockOnClose} />);
 
@@ -84,50 +84,50 @@ xdescribe('AddBillableService', () => {
     expect(serviceNameTextInp).toHaveValue('Test Service Name');
     expect(serviceShortNameTextInp).toHaveValue('Test Short Name');
 
-    const serviceTypeComboBox = screen.getByRole('combobox', { name: /Service Type/i });
+    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);
-
-    const paymentMethodComboBox = screen.getByRole('combobox', { name: /Payment Mode/i });
-    expect(paymentMethodComboBox).toBeInTheDocument();
-    await user.click(paymentMethodComboBox);
+    // Fill in the default payment option (first one)
+    const paymentMethodComboBoxes = screen.getAllByRole('combobox', { name: /Payment mode/i });
+    expect(paymentMethodComboBoxes).toHaveLength(1); // Should have one default
+    await user.click(paymentMethodComboBoxes[0]);
     const paymentMethodOptions = screen.getByRole('option', { name: /Cash/i });
     expect(paymentMethodOptions).toBeInTheDocument();
     await user.click(paymentMethodOptions);
 
-    const priceTextInp = screen.getByRole('textbox', { name: /Price/i });
+    const priceTextInps = screen.getAllByRole('textbox', { name: /Selling Price/i });
+    expect(priceTextInps).toHaveLength(1); // Should have one price input for the default payment method
+    const priceTextInp = priceTextInps[0];
     expect(priceTextInp).toBeInTheDocument();
     await user.type(priceTextInp, '1000');
 
-    mockCreateBillableSerice.mockReturnValue(Promise.resolve({} as FetchResponse<any>));
-    const saveBtn = screen.getByRole('button', { name: /Save/i });
+    mockCreateBillableService.mockReturnValue(Promise.resolve({} as FetchResponse<any>));
+    const saveBtn = screen.getAllByRole('button').find((btn) => btn.getAttribute('type') === 'submit');
     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: 1000,
           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 () => {
@@ -140,12 +140,13 @@ xdescribe('AddBillableService', () => {
       mutate: jest.fn(),
       isValidating: false,
     });
-    mockUsePaymentModes.mockReturnValue({ paymentModes: mockPaymentModes, error: null, isLoading: false });
-    mockUseServiceTypes.mockReturnValue({ serviceTypes: mockServiceTypes, error: false, isLoading: false });
+    mockUsePaymentModes.mockReturnValue({ paymentModes: mockPaymentModes, error: null, isLoadingPaymentModes: false });
+    mockUseServiceTypes.mockReturnValue({ serviceTypes: mockServiceTypes, error: false, isLoadingServiceTypes: false });
+    mockUseConceptsSearch.mockReturnValue({ searchResults: [], isSearching: false, error: null });
 
     render(<AddBillableService onClose={mockOnClose} />);
 
-    const cancelBtn = screen.getByRole('button', { name: /Cancel/i });
+    const cancelBtn = screen.getAllByRole('button').find((btn) => btn.className.includes('cds--btn--secondary'));
     expect(cancelBtn).toBeInTheDocument();
     await user.click(cancelBtn);
 

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;

package/src/billable-services/payment-modes/payment-modes-config.component.tsx

@@ -0,0 +1,125 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Button,
+  DataTable,
+  OverflowMenu,
+  OverflowMenuItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { showSnackbar, openmrsFetch, restBaseUrl, showModal, getCoreTranslation } from '@openmrs/esm-framework';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import styles from './payment-modes-config.scss';
+
+const PaymentModesConfig: React.FC = () => {
+  const { t } = useTranslation();
+  const [paymentModes, setPaymentModes] = useState([]);
+
+  const fetchPaymentModes = useCallback(async () => {
+    try {
+      const response = await openmrsFetch(`${restBaseUrl}/billing/paymentMode?v=full`);
+      setPaymentModes(response.data.results || []);
+    } catch (err) {
+      showSnackbar({
+        title: getCoreTranslation('error'),
+        subtitle: t('errorFetchingPaymentModes', 'An error occurred while fetching payment modes.'),
+        kind: 'error',
+        isLowContrast: false,
+      });
+    }
+  }, [t]);
+
+  useEffect(() => {
+    fetchPaymentModes();
+  }, [fetchPaymentModes]);
+
+  const handleAddPaymentMode = () => {
+    const dispose = showModal('add-payment-mode-modal', {
+      onPaymentModeAdded: fetchPaymentModes,
+      closeModal: () => dispose(),
+    });
+  };
+
+  const handleDeletePaymentMode = (paymentMode) => {
+    const dispose = showModal('delete-payment-mode-modal', {
+      paymentModeUuid: paymentMode.uuid,
+      paymentModeName: paymentMode.name,
+      onPaymentModeDeleted: fetchPaymentModes,
+      closeModal: () => dispose(),
+    });
+  };
+
+  const rowData = paymentModes.map((mode) => ({
+    id: mode.uuid,
+    name: mode.name,
+    description: mode.description || '--',
+  }));
+
+  const headerData = [
+    { key: 'name', header: t('name', 'Name') },
+    { key: 'description', header: t('description', 'Description') },
+    { key: 'actions', header: getCoreTranslation('actions') },
+  ];
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <CardHeader title={t('paymentModeHistory', 'Payment Mode History')}>
+          <Button renderIcon={Add} onClick={handleAddPaymentMode} kind="ghost">
+            {t('addNewPaymentMode', 'Add New Payment Mode')}
+          </Button>
+        </CardHeader>
+        <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
+                                className={styles.menuItem}
+                                itemText={getCoreTranslation('delete')}
+                                onClick={() => {
+                                  const selected = paymentModes.find((p) => p.uuid === row.id);
+                                  handleDeletePaymentMode(selected);
+                                }}
+                              />
+                            </OverflowMenu>
+                          </TableCell>
+                        ),
+                      )}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    </div>
+  );
+};
+
+export default PaymentModesConfig;

package/src/billable-services/{payyment-modes → payment-modes}/payment-modes-config.scss

@@ -13,11 +13,12 @@
   padding: layout.$spacing-05;
 }
 
-.historyContainer {
-  margin-top: layout.$spacing-05;
-}
 
 .table {
   width: 100%;
   table-layout: auto;
-}
+}
+
+.menuItem {
+  max-width: none;
+}

package/src/billing-form/billing-checkin-form.component.tsx

@@ -1,12 +1,11 @@
 import React, { useCallback, useState } from 'react';
 import { Dropdown, InlineLoading, InlineNotification } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { showSnackbar, getCoreTranslation } from '@openmrs/esm-framework';
 import { useCashPoint, useBillableItems, createPatientBill } from './billing-form.resource';
 import VisitAttributesForm from './visit-attributes/visit-attributes-form.component';
 import styles from './billing-checkin-form.scss';
 
-const DEFAULT_PRICE = 500.00001;
 const PENDING_PAYMENT_STATUS = 'PENDING';
 
 type BillingCheckInFormProps = {
@@ -74,7 +73,7 @@ const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, se
     return (
       <InlineLoading
         status="active"
-        iconDescription={t('loading', 'Loading')}
+        iconDescription={getCoreTranslation('loading')}
         description={t('loadingBillingServices', 'Loading billing services...')}
       />
     );