@openmrs/esm-billing-app 1.0.2-pre.880 → 1.0.2-pre.886

package/src/billable-services/{create-edit/add-billable-service.component.tsx → billable-service-form/billable-service-form.workspace.tsx}

@@ -1,9 +1,11 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   Button,
+  ButtonSet,
   ComboBox,
   Dropdown,
   Form,
+  FormGroup,
   FormLabel,
   InlineLoading,
   Layer,
@@ -19,7 +21,13 @@ import { useTranslation } from 'react-i18next';
 import { Add, TrashCan } from '@carbon/react/icons';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { getCoreTranslation, navigate, ResponsiveWrapper, showSnackbar, useDebounce } from '@openmrs/esm-framework';
+import {
+  getCoreTranslation,
+  ResponsiveWrapper,
+  showSnackbar,
+  useDebounce,
+  useLayoutType,
+} from '@openmrs/esm-framework';
 import type { BillableService, ServicePrice } from '../../types';
 import {
   createBillableService,
@@ -28,13 +36,14 @@ import {
   usePaymentModes,
   useServiceTypes,
 } from '../billable-service.resource';
-import styles from './add-billable-service.scss';
+import styles from './billable-service-form.scss';
 
-interface AddBillableServiceProps {
+interface BillableServiceFormWorkspaceProps {
   serviceToEdit?: BillableService;
-  onClose: () => void;
-  onServiceUpdated?: () => void;
-  isModal?: boolean;
+  closeWorkspace: () => void;
+  closeWorkspaceWithSavedChanges?: () => void;
+  promptBeforeClosing?: (testFcn: () => boolean) => void;
+  onWorkspaceClose?: () => void;
 }
 
 interface BillableServiceFormData {
@@ -163,13 +172,15 @@ const createBillableServiceSchema = (t: TFunction) => {
   });
 };
 
-const AddBillableService: React.FC<AddBillableServiceProps> = ({
+const BillableServiceFormWorkspace: React.FC<BillableServiceFormWorkspaceProps> = ({
   serviceToEdit,
-  onClose,
-  onServiceUpdated,
-  isModal = false,
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  onWorkspaceClose,
 }) => {
   const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isTablet = layout === 'tablet';
   const { paymentModes, isLoadingPaymentModes } = usePaymentModes();
   const { serviceTypes, isLoadingServiceTypes } = useServiceTypes();
 
@@ -192,17 +203,13 @@ const AddBillableService: React.FC<AddBillableServiceProps> = ({
   const handleRemovePaymentMode = (index: number) => remove(index);
 
   const searchInputRef = useRef(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const selectedConcept = useWatch({ control, name: 'concept' });
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearchTerm = useDebounce(searchTerm.trim());
   const { searchResults, isSearching } = useConceptsSearch(debouncedSearchTerm);
 
-  const handleNavigateToServiceDashboard = () =>
-    navigate({
-      to: window.getOpenmrsSpaBase() + 'billable-services',
-    });
-
   // Re-initialize form when editing and dependencies load
   // Needed because serviceTypes/paymentModes may not be available during initial render
   useEffect(() => {
@@ -212,6 +219,8 @@ const AddBillableService: React.FC<AddBillableServiceProps> = ({
   }, [serviceToEdit, isLoadingPaymentModes, isLoadingServiceTypes, reset]);
 
   const onSubmit = async (data: BillableServiceFormData) => {
+    setIsSubmitting(true);
+
     const payload = {
       name: data.name,
       shortName: data.shortName || '',
@@ -236,27 +245,34 @@ const AddBillableService: React.FC<AddBillableServiceProps> = ({
       }
 
       showSnackbar({
-        title: t('billableService', 'Billable service'),
+        title: serviceToEdit
+          ? t('billableServiceUpdated', 'Billable service updated')
+          : t('billableServiceCreated', 'Billable service created'),
         subtitle: serviceToEdit
-          ? t('updatedSuccessfully', 'Billable service updated successfully')
-          : t('createdSuccessfully', 'Billable service created successfully'),
+          ? t('billableServiceUpdatedSuccessfully', 'Billable service updated successfully')
+          : t('billableServiceCreatedSuccessfully', 'Billable service created successfully'),
         kind: 'success',
       });
 
-      if (serviceToEdit) {
-        onClose();
+      // Call onWorkspaceClose callback to refresh data in parent component
+      if (onWorkspaceClose) {
+        onWorkspaceClose();
       }
 
-      if (onServiceUpdated) {
-        onServiceUpdated();
+      // Close the workspace
+      if (closeWorkspaceWithSavedChanges) {
+        closeWorkspaceWithSavedChanges();
+      } else {
+        closeWorkspace();
       }
-      handleNavigateToServiceDashboard();
     } catch (error) {
       showSnackbar({
         title: t('billPaymentError', 'Bill payment error'),
         kind: 'error',
         subtitle: error instanceof Error ? error.message : String(error),
       });
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
@@ -279,14 +295,13 @@ const AddBillableService: React.FC<AddBillableServiceProps> = ({
   }
 
   return (
-    <Form id="billable-service-form" className={styles.form} onSubmit={handleSubmit(onSubmit)}>
-      <Stack gap={5}>
-        <h4>
-          {serviceToEdit
-            ? t('editBillableService', 'Edit billable service')
-            : t('addBillableService', 'Add billable service')}
-        </h4>
-        <section>
+    <Form
+      aria-label={t('billableServiceForm', 'Billable service form')}
+      className={styles.form}
+      id="billable-service-form"
+      onSubmit={handleSubmit(onSubmit)}>
+      <Stack className={styles.stack} gap={5}>
+        <FormGroup className={styles.formGroup}>
           {serviceToEdit ? (
             <FormLabel className={styles.serviceNameLabel}>{serviceToEdit.name}</FormLabel>
           ) : (
@@ -310,8 +325,8 @@ const AddBillableService: React.FC<AddBillableServiceProps> = ({
               )}
             />
           )}
-        </section>
-        <section>
+        </FormGroup>
+        <FormGroup>
           <Controller
             name="shortName"
             control={control}
@@ -332,8 +347,8 @@ const AddBillableService: React.FC<AddBillableServiceProps> = ({
               </Layer>
             )}
           />
-        </section>
-        <section>
+        </FormGroup>
+        <FormGroup>
           <FormLabel className={styles.conceptLabel}>{t('associatedConcept', 'Associated concept')}</FormLabel>
           <ResponsiveWrapper>
             <Search
@@ -386,8 +401,8 @@ const AddBillableService: React.FC<AddBillableServiceProps> = ({
               </Layer>
             );
           })()}
-        </section>
-        <section>
+        </FormGroup>
+        <FormGroup>
           <Controller
             name="serviceType"
             control={control}
@@ -409,7 +424,7 @@ const AddBillableService: React.FC<AddBillableServiceProps> = ({
               </Layer>
             )}
           />
-        </section>
+        </FormGroup>
         <section>
           <div>
             {fields.map((field, index) => (
@@ -440,6 +455,7 @@ const AddBillableService: React.FC<AddBillableServiceProps> = ({
                     <Layer>
                       <NumberInput
                         allowEmpty
+                        disableWheel
                         id={`price-${index}`}
                         invalid={!!errors?.payment?.[index]?.price}
                         invalidText={errors?.payment?.[index]?.price?.message}
@@ -473,16 +489,16 @@ const AddBillableService: React.FC<AddBillableServiceProps> = ({
           </div>
         </section>
       </Stack>
-      {!isModal && (
-        <section>
-          <Button kind="secondary" onClick={onClose}>
-            {getCoreTranslation('cancel')}
-          </Button>
-          <Button type="submit">{getCoreTranslation('save')}</Button>
-        </section>
-      )}
+      <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+        <Button className={styles.button} kind="secondary" disabled={isSubmitting} onClick={closeWorkspace}>
+          {getCoreTranslation('cancel')}
+        </Button>
+        <Button className={styles.button} kind="primary" disabled={isSubmitting} type="submit">
+          {isSubmitting ? <InlineLoading description={t('saving', 'Saving') + '...'} /> : getCoreTranslation('save')}
+        </Button>
+      </ButtonSet>
     </Form>
   );
 };
 
-export default AddBillableService;
+export default BillableServiceFormWorkspace;

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

@@ -2,8 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { useLeftNav, navigate, WorkspaceContainer, useLayoutType, isDesktop } from '@openmrs/esm-framework';
-import AddBillableService from './create-edit/add-billable-service.component';
+import { useLeftNav, WorkspaceContainer, useLayoutType, isDesktop } from '@openmrs/esm-framework';
 import BillWaiver from './bill-waiver/bill-waiver.component';
 import BillableServicesDashboard from './dashboard/dashboard.component';
 import BillingHeader from '../billing-header/billing-header.component';
@@ -18,10 +17,6 @@ const BillableServiceHome: React.FC = () => {
 
   useLeftNav({ name: 'billable-services-left-panel-slot', basePath });
 
-  const handleCloseAddService = () => {
-    navigate({ to: `${basePath}` });
-  };
-
   return (
     <BrowserRouter basename={basePath}>
       <div className={styles.pageWrapper}>
@@ -29,10 +24,9 @@ const BillableServiceHome: React.FC = () => {
           <BillingHeader title={t('billableServicesManagement', 'Billable services management')} />
           <Routes>
             <Route path="/" element={<BillableServicesDashboard />} />
-            <Route path="/add-service" element={<AddBillableService onClose={handleCloseAddService} />} />
-            <Route path="/waive-bill" element={<BillWaiver />} />
             <Route path="/cash-point-config" element={<CashPointConfiguration />} />
             <Route path="/payment-modes-config" element={<PaymentModesConfig />} />
+            <Route path="/waive-bill" element={<BillWaiver />} />
           </Routes>
         </main>
       </div>

package/src/billable-services/billable-services-left-panel-menu.component.tsx

@@ -23,7 +23,7 @@ function BillableServicesMenuExtension({ config }: { config: BillableServicesMen
   };
 
   const menu = (
-    <SideNavMenu title={title} renderIcon={Icon}>
+    <SideNavMenu defaultExpanded title={title} renderIcon={Icon}>
       {items.map((item) => (
         <SideNavMenuItem key={item.name} onClick={() => handleNavigation(item.path)}>
           {item.title}

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

@@ -1,16 +1,17 @@
-import { ClickableTile } from '@carbon/react';
 import React from 'react';
-import styles from './item.scss';
+import { useTranslation } from 'react-i18next';
+import { ClickableTile } from '@carbon/react';
 import { Receipt } from '@carbon/react/icons';
+import styles from './item.scss';
 
 const Item = () => {
-  // items
+  const { t } = useTranslation();
   const openmrsSpaBase = window['getOpenmrsSpaBase']();
 
   return (
     <ClickableTile className={styles.customTile} id="menu-item" href={`${openmrsSpaBase}billable-services`}>
       <div className="customTileTitle">{<Receipt size={24} />}</div>
-      <div>Billable Services</div>
+      <div>{t('billableServices', 'Billable services')}</div>
     </ClickableTile>
   );
 };

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

@@ -24,17 +24,16 @@ import {
   ErrorState,
   getCoreTranslation,
   isDesktop,
-  navigate,
-  showModal,
+  launchWorkspace,
   useConfig,
   useLayoutType,
   usePagination,
   type LayoutType,
 } from '@openmrs/esm-framework';
 import { EmptyState } from '@openmrs/esm-patient-common-lib';
-import { type BillableService } from '../types/index';
+import { type BillableService } from '../types';
+import { type BillingConfig } from '../config-schema';
 import { useBillableServices } from './billable-service.resource';
-import type { BillingConfig } from '../config-schema';
 import styles from './billable-services.scss';
 
 interface FilterableTableHeaderProps {
@@ -79,8 +78,10 @@ const BillableServices = () => {
   ];
 
   const launchBillableServiceForm = useCallback(() => {
-    navigate({ to: window.getOpenmrsSpaBase() + 'billable-services/add-service' });
-  }, []);
+    launchWorkspace('billable-service-form', {
+      workspaceTitle: t('addBillableService', 'Add billable service'),
+    });
+  }, [t]);
 
   const searchResults: BillableService[] = useMemo(() => {
     const flatBillableServices = Array.isArray(billableServices) ? billableServices.flat() : billableServices;
@@ -127,13 +128,13 @@ const BillableServices = () => {
 
   const handleEditService = useCallback(
     (service: BillableService) => {
-      const dispose = showModal('edit-billable-service-modal', {
+      launchWorkspace('billable-service-form', {
+        workspaceTitle: t('editBillableService', 'Edit billable service'),
         serviceToEdit: service,
-        onServiceUpdated: mutate,
-        closeModal: () => dispose(),
+        onWorkspaceClose: mutate,
       });
     },
-    [mutate],
+    [mutate, t],
   );
 
   if (isLoading) {
@@ -282,7 +283,9 @@ function FilterableTableHeader({ layout, handleSearch, isValidating, responsiveS
           kind="primary"
           renderIcon={(props) => <ArrowRight size={16} {...props} />}
           onClick={() => {
-            navigate({ to: window.getOpenmrsSpaBase() + 'billable-services/add-service' });
+            launchWorkspace('billable-service-form', {
+              workspaceTitle: t('addBillableService', 'Add billable service'),
+            });
           }}
           iconDescription={t('addNewBillableService', 'Add new billable service')}>
           {t('addNewService', 'Add new service')}

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

@@ -3,7 +3,7 @@ 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 { Button, Dropdown, Form, ModalBody, ModalFooter, ModalHeader, Stack, TextInput } from '@carbon/react';
 import { showSnackbar, openmrsFetch, restBaseUrl, getCoreTranslation } from '@openmrs/esm-framework';
 
 type CashPointFormValues = {
@@ -107,50 +107,52 @@ const AddCashPointModal: React.FC<AddCashPointModalProps> = ({ closeModal, onCas
       <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', '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 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}>

package/src/billable-services-admin-card-link.component.test.tsx

@@ -8,10 +8,10 @@ describe('BillableServicesCardLink', () => {
     const manageBillableServicesText = screen.getByText('Manage billable services');
     expect(manageBillableServicesText).toHaveClass('heading');
 
-    const billiableText = screen.getByText('Billable Services');
+    const billiableText = screen.getByText('Billable services', { exact: true });
     expect(billiableText).toHaveClass('content');
 
-    const billiableServiceLink = screen.getByRole('link', { name: /Billable Services/i });
+    const billiableServiceLink = screen.getByRole('link', { name: /Manage billable services/i });
     expect(billiableServiceLink).toHaveAttribute('href', '/spa/billable-services');
   });
 });

package/src/billable-services-admin-card-link.component.tsx

@@ -12,7 +12,7 @@ const BillableServicesCardLink: React.FC = () => {
       <ClickableTile href={`${window.spaBase}/billable-services`} target="_blank" rel="noopener noreferrer">
         <div>
           <div className="heading">{header}</div>
-          <div className="content">{t('billableServices', 'Billable Services')}</div>
+          <div className="content">{t('billableServices', 'Billable services')}</div>
         </div>
         <div className="iconWrapper">
           <ArrowRight size={16} />

package/src/index.ts

@@ -14,7 +14,6 @@ import BillableServicesCardLink from './billable-services-admin-card-link.compon
 import BillHistory from './bill-history/bill-history.component';
 import BillingCheckInForm from './billing-form/billing-checkin-form.component';
 import DeletePaymentModeModal from './billable-services/payment-modes/delete-payment-mode.modal';
-import EditBillableServiceModal from './billable-services/create-edit/edit-billable-service.modal';
 import EditBillLineItemModal from './bill-item-actions/edit-bill-item.modal';
 import RequirePaymentModal from './modal/require-payment.modal';
 import RootComponent from './root.component';
@@ -48,6 +47,7 @@ export const billingSummaryDashboardLink = getSyncLifecycle(
   options,
 );
 
+// t('billableServices', 'Billable services')
 export const billableServicesAppMenuItem = getSyncLifecycle(appMenu, options);
 
 export const billableServicesCardLink = getSyncLifecycle(BillableServicesCardLink, options);
@@ -66,8 +66,6 @@ export const deletePaymentModeModal = getSyncLifecycle(DeletePaymentModeModal, o
 
 export const addCashPointModal = getSyncLifecycle(AddCashPointModal, options);
 
-export const editBillableServiceModal = getSyncLifecycle(EditBillableServiceModal, options);
-
 export const editBillLineItemModal = getSyncLifecycle(EditBillLineItemModal, options);
 
 export const root = getSyncLifecycle(RootComponent, options);
@@ -77,7 +75,13 @@ export const visitAttributeTags = getSyncLifecycle(VisitAttributeTags, options);
 // t('billingForm', 'Billing form')
 export const billingFormWorkspace = getAsyncLifecycle(() => import('./billing-form/billing-form.component'), options);
 
-// t('billableServices', 'Billable Services')
+// t('billableServiceForm', 'Billable service form')
+export const billableServiceFormWorkspace = getAsyncLifecycle(
+  () => import('./billable-services/billable-service-form/billable-service-form.workspace'),
+  options,
+);
+
+// t('billableServices', 'Billable services')
 export const billableServicesLeftPanelLink = getSyncLifecycle(
   createBillableServicesLeftPanelLink({
     name: 'billable-services',

package/src/routes.json

@@ -114,10 +114,6 @@
       "name": "edit-bill-line-item-modal",
       "component": "editBillLineItemModal"
     },
-    {
-      "name": "edit-billable-service-modal",
-      "component": "editBillableServiceModal"
-    },
     {
       "name": "require-billing-modal",
       "component": "requirePaymentModal"
@@ -129,6 +125,13 @@
       "title": "billingForm",
       "component": "billingFormWorkspace",
       "type": "form"
+    },
+    {
+      "name": "billable-service-form",
+      "title": "billableServiceForm",
+      "component": "billableServiceFormWorkspace",
+      "type": "form",
+      "width": "wider"
     }
   ],
   "featureFlags": [

package/translations/en.json

@@ -20,9 +20,14 @@
   "amountToWaiveLabel": "Amount to waive",
   "associatedConcept": "Associated concept",
   "billableService": "Billable service",
+  "billableServiceCreated": "Billable service created",
+  "billableServiceCreatedSuccessfully": "Billable service created successfully",
+  "billableServiceForm": "Billable service form",
   "billableServices": "Billable services",
   "billableServices__lower": "billable services",
   "billableServicesManagement": "Billable services management",
+  "billableServiceUpdated": "Billable service updated",
+  "billableServiceUpdatedSuccessfully": "Billable service updated successfully",
   "billAmount": "Bill amount",
   "billCode": "Bill code",
   "billCreatedSuccessfully": "Bill created successfully",
@@ -197,14 +202,14 @@
   "sellingPrice": "Selling price",
   "serviceList": "Service list",
   "serviceName": "Service name",
-  "serviceNameExceedsLimit": "Service name exceeds the character limit of {{MAX_NAME_LENGTH}}.",
+  "serviceNameExceedsLimit": "Service name cannot exceed {{MAX_NAME_LENGTH}} characters",
   "serviceNameRequired": "Service name is required",
   "servicesList": "Services list",
   "serviceStatus": "Service status",
   "serviceType": "Service type",
   "serviceTypeRequired": "Service type is required",
   "shortName": "Short name",
-  "shortNameExceedsLimit": "Short name exceeds the character limit of {{MAX_NAME_LENGTH}}.",
+  "shortNameExceedsLimit": "Short name cannot exceed {{MAX_NAME_LENGTH}} characters",
   "status": "Service status",
   "submitting": "Submitting",
   "success": "Success",