@digihmis/esm-administration-app 1.0.0 → 1.0.2

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"extensions":[{"name":"system-info-management-dashboard-link","slot":"administration-dashboard-slot","component":"systemInfoLeftPanelLink","meta":{"name":"system-info-management","slot":"system-info-management-homepage-dashboard-slot","title":"System Info"}},{"name":"queue-management-dashboard-link","slot":"administration-dashboard-slot","component":"queueLeftPanelLink","meta":{"name":"queue-management","slot":"queue-management-homepage-dashboard-slot","title":"Queue Management"}},{"name":"location-management-dashboard-link","slot":"administration-dashboard-slot","component":"locationLeftPanelLink","meta":{"name":"location-management","slot":"location-management-homepage-dashboard-slot","title":"Location Management"}},{"name":"bed-management-dashboard-link","slot":"administration-dashboard-slot","component":"bedLeftPanelLink","meta":{"name":"bed-management","slot":"bed-management-homepage-dashboard-slot","title":"Bed Management"}},{"name":"form-builder-dashboard-link","slot":"administration-dashboard-slot","component":"formBuilderLeftPanelLink","meta":{"name":"form-builder","slot":"form-builder-homepage-dashboard-slot","title":"Form Builder"}},{"name":"billing-management-dashboard-link","slot":"administration-dashboard-slot","component":"billingLeftPanelLink","meta":{"name":"billing-management","slot":"billing-management-homepage-dashboard-slot","title":"Billing Management"}},{"name":"queue-management-dashboard-content","slot":"queue-management-homepage-dashboard-slot","component":"queueManagementDashboard"},{"name":"location-management-dashboard-content","slot":"location-management-homepage-dashboard-slot","component":"locationManagementDashboard"},{"name":"bed-management-dashboard-content","slot":"bed-management-homepage-dashboard-slot","component":"bedManagementDashboard"},{"name":"form-builder-dashboard-content","slot":"form-builder-homepage-dashboard-slot","component":"formBuilderDashboard"},{"name":"billing-management-dashboard-content","slot":"billing-management-homepage-dashboard-slot","component":"billingManagementDashboard"},{"name":"system-info-management-dashboard-content","slot":"system-info-management-homepage-dashboard-slot","component":"systemInfoDashboard"}],"workspaces":[{"name":"service-queues-service-form","title":"addNewQueueService","component":"addNewQueueServiceWorkspace","type":"service-queues"},{"name":"service-queues-room-workspace","title":"addNewQueueServiceRoom","component":"addNewQueueServiceRoomWorkspace","type":"service-queues"},{"name":"add-location-workspace","title":"addNewLocationWorkspace","component":"addNewLocationWorkspace","type":"location-management"},{"name":"search-location-workspace","title":"searchLocationWorkspace","component":"searchLocationWorkspace","type":"location-management"},{"name":"payment-mode-workspace","title":"paymentModeWorkspace","component":"paymentModeWorkspace","type":"billing-management"},{"name":"payment-point-workspace","title":"paymentPointWorkspace","component":"paymentPointWorkspace","type":"billing-management"},{"name":"billing-charge-service-workspace","title":"addServiceItem","component":"billableServiceForm","type":"billing-management"},{"name":"billing-charge-item-workspace","title":"addCommodityItem","component":"commodityForm","type":"billing-management"}],"modals":[{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"delete-payment-point-modal","component":"deletePaymentPointModal"},{"name":"delete-billable-service-modal","component":"deleteBillableService"}],"version":"1.0.0"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":">=2.24.0"},"extensions":[{"name":"system-info-management-dashboard-link","slot":"administration-dashboard-slot","component":"systemInfoLeftPanelLink","meta":{"name":"system-info-management","slot":"system-info-management-homepage-dashboard-slot","title":"System Info"}},{"name":"queue-management-dashboard-link","slot":"administration-dashboard-slot","component":"queueLeftPanelLink","meta":{"name":"queue-management","slot":"queue-management-homepage-dashboard-slot","title":"Queue Management"}},{"name":"location-management-dashboard-link","slot":"administration-dashboard-slot","component":"locationLeftPanelLink","meta":{"name":"location-management","slot":"location-management-homepage-dashboard-slot","title":"Location Management"}},{"name":"bed-management-dashboard-link","slot":"administration-dashboard-slot","component":"bedLeftPanelLink","meta":{"name":"bed-management","slot":"bed-management-homepage-dashboard-slot","title":"Bed Management"}},{"name":"form-builder-dashboard-link","slot":"administration-dashboard-slot","component":"formBuilderLeftPanelLink","meta":{"name":"form-builder","slot":"form-builder-homepage-dashboard-slot","title":"Form Builder"}},{"name":"billing-management-dashboard-link","slot":"administration-dashboard-slot","component":"billingLeftPanelLink","meta":{"name":"billing-management","slot":"billing-management-homepage-dashboard-slot","title":"Billing Management"}},{"name":"document-branding-dashboard-link","slot":"administration-dashboard-slot","component":"documentBrandingLeftPanelLink","meta":{"name":"document-branding","slot":"document-branding-homepage-dashboard-slot","title":"Document Branding"}},{"name":"queue-management-dashboard-content","slot":"queue-management-homepage-dashboard-slot","component":"queueManagementDashboard"},{"name":"location-management-dashboard-content","slot":"location-management-homepage-dashboard-slot","component":"locationManagementDashboard"},{"name":"bed-management-dashboard-content","slot":"bed-management-homepage-dashboard-slot","component":"bedManagementDashboard"},{"name":"form-builder-dashboard-content","slot":"form-builder-homepage-dashboard-slot","component":"formBuilderDashboard"},{"name":"billing-management-dashboard-content","slot":"billing-management-homepage-dashboard-slot","component":"billingManagementDashboard"},{"name":"system-info-management-dashboard-content","slot":"system-info-management-homepage-dashboard-slot","component":"systemInfoDashboard"},{"name":"document-branding-dashboard-content","slot":"document-branding-homepage-dashboard-slot","component":"documentBrandingDashboard"}],"workspaces":[{"name":"service-queues-service-form","title":"addNewQueueService","component":"addNewQueueServiceWorkspace","type":"service-queues"},{"name":"service-queues-room-workspace","title":"addNewQueueServiceRoom","component":"addNewQueueServiceRoomWorkspace","type":"service-queues"},{"name":"add-location-workspace","title":"addNewLocationWorkspace","component":"addNewLocationWorkspace","type":"location-management"},{"name":"search-location-workspace","title":"searchLocationWorkspace","component":"searchLocationWorkspace","type":"location-management"},{"name":"payment-mode-workspace","title":"paymentModeWorkspace","component":"paymentModeWorkspace","type":"billing-management"},{"name":"payment-point-workspace","title":"paymentPointWorkspace","component":"paymentPointWorkspace","type":"billing-management"},{"name":"billing-charge-service-workspace","title":"addServiceItem","component":"billableServiceForm","type":"billing-management"},{"name":"document-branding-workspace","title":"configureLetterhead","component":"documentBrandingWorkspace","type":"document-branding"}],"modals":[{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"delete-payment-point-modal","component":"deletePaymentPointModal"},{"name":"delete-billable-service-modal","component":"deleteBillableService"}],"version":"1.0.2"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digihmis/esm-administration-app",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Administration microfrontend for the OpenMRS SPA",
   "browser": "dist/digihmis-esm-administration-app.js",
   "main": "src/index.ts",
@@ -18,7 +18,8 @@
     "start": "openmrs develop",
     "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests",
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js",
-    "typescript": "tsc"
+    "typescript": "tsc",
+    "prepublishOnly": "rspack --mode=production"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"

package/release-version.js

@@ -3,14 +3,14 @@
 /* tslint:disable */
 export const VERSION = {
     "dirty": true,
-    "raw": "3342d5c-dirty",
-    "hash": "3342d5c",
+    "raw": "4d5fb07-dirty",
+    "hash": "4d5fb07",
     "distance": null,
     "tag": null,
     "semver": null,
-    "suffix": "3342d5c-dirty",
+    "suffix": "4d5fb07-dirty",
     "semverString": null,
     "version": "1.0.0",
-    "buildDate": "2026-07-27T23:03:38.929Z"
+    "buildDate": "2026-07-27T22:13:37.742Z"
 };
 /* tslint:enable */

package/src/billing-management/billing-charge-items/billing-charge-items-modal/billing-charge-items.resource.ts

@@ -1,7 +1,8 @@
 import { openmrsFetch } from '@openmrs/esm-framework';
 
 export const deleteBillableService = (uuid: string) => {
-  const url = `/ws/rest/v1/cashier/billableService/${uuid}`;
+  // The DigiHMIS billing module retires a billable item via DELETE with an optional reason.
+  const url = `/ws/rest/v1/digihmisbilling/billableitem/${uuid}?reason=Retired via billing administration`;
   return openmrsFetch(url, {
     method: 'DELETE',
     headers: {

package/src/billing-management/billing-charge-items/billing-charge-items-workspace/billing-charge-items.resource.ts

@@ -2,17 +2,40 @@ import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import useSWR from 'swr';
 import { ServiceConcept, ServiceTypesResponse, StockItemResponse } from '../type';
 
-export const createBillableService = (payload: any, uuid?: string) => {
-  const url = `${restBaseUrl}/cashier/billableService/${uuid ? `${uuid}` : ''}`;
-  return openmrsFetch(url, {
+/** Set (or replace) a billable item's price override for one payment mode. */
+export const setBillableItemPrice = (uuid: string, mode: string, price: number | string) => {
+  const params = new URLSearchParams({ mode, price: String(price) });
+  return openmrsFetch(`${restBaseUrl}/digihmisbilling/billableitem/${uuid}/price?${params.toString()}`, {
     method: 'POST',
-    body: payload,
-    headers: {
-      'Content-Type': 'application/json',
-    },
   });
 };
 
+/** Remove a payment-mode override so that mode falls back to the item's default price. */
+export const removeBillableItemPrice = (uuid: string, mode: string) => {
+  return openmrsFetch(`${restBaseUrl}/digihmisbilling/billableitem/${uuid}/price?mode=${mode}`, { method: 'DELETE' });
+};
+
+export const createBillableService = (
+  payload: { name: string; concept?: string; serviceType?: string; price: string | number; description?: string },
+  uuid?: string,
+) => {
+  // The DigiHMIS billing module takes billable-item fields as request params (not a JSON body).
+  const params = new URLSearchParams({ name: payload.name ?? '', price: String(payload.price ?? '0') });
+  if (payload.description) {
+    params.set('description', payload.description);
+  }
+  if (payload.serviceType !== undefined) {
+    params.set('serviceType', payload.serviceType);
+  }
+  // Create requires the concept; the update endpoint (POST /{uuid}) does not accept one.
+  if (!uuid && payload.concept) {
+    params.set('concept', payload.concept);
+  }
+  const base = `${restBaseUrl}/digihmisbilling/billableitem`;
+  const url = uuid ? `${base}/${uuid}?${params.toString()}` : `${base}?${params.toString()}`;
+  return openmrsFetch(url, { method: 'POST' });
+};
+
 export function useConceptsSearch(conceptToLookup: string) {
   const conditionsSearchUrl = `${restBaseUrl}/conceptsearch?q=${conceptToLookup}`;
 

package/src/billing-management/billing-charge-items/billing-charge-items-workspace/billing-charge-service.workspace.tsx

@@ -1,17 +1,8 @@
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  ButtonSet,
-  Button,
-  Stack,
-  TextInput,
-  ComboBox,
-  Toggle,
-  InlineNotification,
-  InlineLoading,
-} from '@carbon/react';
+import { ButtonSet, Button, Stack, TextInput, TextArea, ComboBox, InlineNotification, InlineLoading } from '@carbon/react';
 import { Add } from '@carbon/react/icons';
-import { Controller, useFieldArray, useForm, FormProvider } from 'react-hook-form';
+import { Controller, useForm, useFieldArray, FormProvider } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 
 import { type DefaultWorkspaceProps, useLayoutType, useDebounce, ResponsiveWrapper, showSnackbar, restBaseUrl } from '@openmrs/esm-framework';
@@ -20,9 +11,16 @@ import classNames from 'classnames';
 import styles from './global/billing-charge-items.scss';
 import { billableFormSchema, BillableFormSchema } from './schemas/form-schemas';
 import { handleMutation } from '../../billing-payment-modes/billing-payment-modes-workspace/billing-payment-modes.resource';
-import PriceField from './components/price.component';
 import ConceptSearch from './components/concept-search.component';
-import { createBillableService, useConceptsSearch, useServiceTypes } from './billing-charge-items.resource';
+import PriceField from './components/price.component';
+import {
+  createBillableService,
+  useConceptsSearch,
+  useServiceTypes,
+  setBillableItemPrice,
+  removeBillableItemPrice,
+} from './billing-charge-items.resource';
+import { usePaymentModes } from '../../billing-payment-modes/billing-payment-modes.resource';
 import { formatBillableServicePayloadForSubmission, mapInputToPayloadSchema } from '../utils';
 
 interface AddServiceFormProps extends DefaultWorkspaceProps {
@@ -42,18 +40,18 @@ const AddServiceForm: React.FC<AddServiceFormProps> = ({
   const [selectedConcept, setSelectedConcept] = useState<any>(null);
   const inEditMode = !!initialValues;
 
-  const { isLoading: isLoadingServiceTypes, serviceTypes } = useServiceTypes();
   const { isSearching, searchResults: concepts } = useConceptsSearch(debouncedConceptToLookup);
+  const { paymentModes } = usePaymentModes(false);
+  const { serviceTypes, isLoading: isLoadingServiceTypes } = useServiceTypes();
   const formMethods = useForm<BillableFormSchema>({
     resolver: zodResolver(billableFormSchema),
     defaultValues: initialValues
       ? mapInputToPayloadSchema(initialValues)
       : {
           name: '',
-          shortName: '',
           concept: null,
           serviceType: null,
-          serviceStatus: 'ENABLED',
+          description: '',
           servicePrices: [],
         },
   });
@@ -66,6 +64,12 @@ const AddServiceForm: React.FC<AddServiceFormProps> = ({
     formState: { errors, isDirty, defaultValues, isSubmitting },
   } = formMethods;
 
+  const {
+    fields: servicePriceFields,
+    append: appendServicePrice,
+    remove: removeServicePrice,
+  } = useFieldArray({ control, name: 'servicePrices' });
+
   useEffect(() => {
     if (initialValues) {
       setConceptToLookup(initialValues.concept?.concept?.display);
@@ -73,18 +77,9 @@ const AddServiceForm: React.FC<AddServiceFormProps> = ({
     }
   }, [initialValues, trigger]);
 
-  const {
-    fields: servicePriceFields,
-    append: appendServicePrice,
-    remove: removeServicePrice,
-  } = useFieldArray({
-    control,
-    name: 'servicePrices',
-  });
-
   const handleSelectConcept = (concept) => {
     setSelectedConcept(concept);
-    setValue('concept', concept);
+    setValue('concept', concept, { shouldDirty: true, shouldValidate: true });
     setConceptToLookup('');
   };
 
@@ -97,29 +92,36 @@ const AddServiceForm: React.FC<AddServiceFormProps> = ({
     try {
       const response = await createBillableService(formPayload, initialValues?.['uuid']);
       if (response.ok) {
+        // Sync the per-payment-mode prices onto the saved item: set the chosen modes, and clear any
+        // mode no longer priced so it falls back to the (first-mode) default.
+        const uuid = response?.data?.uuid ?? initialValues?.['uuid'];
+        if (uuid) {
+          const chosen = new Set(data.servicePrices.map((servicePrice) => servicePrice.paymentMode.uuid));
+          await Promise.all([
+            ...data.servicePrices.map((servicePrice) =>
+              setBillableItemPrice(uuid, servicePrice.paymentMode.uuid, Number(servicePrice.price)),
+            ),
+            ...(paymentModes ?? [])
+              .filter((mode) => !chosen.has(mode.uuid))
+              .map((mode) => removeBillableItemPrice(uuid, mode.uuid)),
+          ]);
+        }
         showSnackbar({
           title: inEditMode
             ? t('serviceUpdatedSuccessfully', 'Service updated successfully')
             : t('serviceCreated', 'Service created successfully'),
           kind: 'success',
-          subtitle: inEditMode
-            ? t('serviceUpdatedSuccessfully', 'Service updated successfully')
-            : t('serviceCreatedSuccessfully', 'Service created successfully'),
           isLowContrast: true,
           timeoutInMs: 5000,
         });
-        handleMutation(`${restBaseUrl}/cashier/billableService?v`);
-
+        handleMutation(`${restBaseUrl}/digihmisbilling/billableitem`);
         closeWorkspaceWithSavedChanges();
       }
     } catch (e) {
-      const formSchemaError = JSON.stringify(e, null, 2);
-      const errorMessage = e?.servicePrices?.root?.message || 'Unknown error occurred';
+      const errorMessage = e?.responseBody?.error?.message || e?.message || 'Unknown error occurred';
       showSnackbar({
         title: t('serviceCreationFailed', 'Service creation failed'),
-        subtitle: t('serviceCreationFailedSubtitle', 'The service creation failed: {{errorMessage}}', {
-          errorMessage,
-        }),
+        subtitle: t('serviceCreationFailedSubtitle', 'The service creation failed: {{errorMessage}}', { errorMessage }),
         kind: 'error',
         isLowContrast: true,
         timeoutInMs: 5000,
@@ -127,6 +129,19 @@ const AddServiceForm: React.FC<AddServiceFormProps> = ({
     }
   };
 
+  const handleError = (err) => {
+    const errorMessage = Object.entries(err as Record<string, { message: string }>)
+      .map(([field, error]) => `${field}: ${error?.message}`)
+      .join('; ');
+    showSnackbar({
+      title: t('serviceCreationFailed', 'Service creation failed'),
+      subtitle: t('serviceCreationFailedSubtitle', 'The service creation failed: {{errorMessage}}', { errorMessage }),
+      kind: 'error',
+      isLowContrast: true,
+      timeoutInMs: 5000,
+    });
+  };
+
   const renderServicePriceFields = useMemo(
     () =>
       servicePriceFields.map((field, index) => (
@@ -142,23 +157,6 @@ const AddServiceForm: React.FC<AddServiceFormProps> = ({
     [servicePriceFields, control, removeServicePrice, errors],
   );
 
-  const handleError = (err) => {
-    console.error(JSON.stringify(err, null, 2));
-    const errorMessage = Object.entries(err as Record<string, { message: string }>)
-      .map(([field, error]) => `${field}: ${error.message}`)
-      .join('; ');
-
-    showSnackbar({
-      title: t('serviceCreationFailed', 'Service creation failed'),
-      subtitle: t('serviceCreationFailedSubtitle', 'The service creation failed: {{errorMessage}}', {
-        errorMessage,
-      }),
-      kind: 'error',
-      isLowContrast: true,
-      timeoutInMs: 5000,
-    });
-  };
-
   return (
     <FormProvider {...formMethods}>
       <form onSubmit={handleSubmit(onSubmit, handleError)} className={styles.form}>
@@ -168,7 +166,7 @@ const AddServiceForm: React.FC<AddServiceFormProps> = ({
               <InlineNotification
                 kind="error"
                 title={t('conceptMissing', 'Concept missing')}
-                subtitle={t('conceptMissingSubtitle', 'Please select a stock item')}
+                subtitle={t('conceptMissingSubtitle', 'Please select a concept')}
               />
             )}
             <ResponsiveWrapper>
@@ -187,22 +185,6 @@ const AddServiceForm: React.FC<AddServiceFormProps> = ({
                 )}
               />
             </ResponsiveWrapper>
-            <ResponsiveWrapper>
-              <Controller
-                name="shortName"
-                control={control}
-                render={({ field }) => (
-                  <TextInput
-                    id="serviceShortName"
-                    {...field}
-                    type="text"
-                    labelText={t('serviceShortName', 'Service short name')}
-                    invalid={!!errors.shortName}
-                    invalidText={errors?.shortName?.message}
-                  />
-                )}
-              />
-            </ResponsiveWrapper>
 
             <ConceptSearch
               selectedConcept={selectedConcept}
@@ -219,57 +201,47 @@ const AddServiceForm: React.FC<AddServiceFormProps> = ({
               <Controller
                 name="serviceType"
                 control={control}
-                render={({ field }) => {
-                  return (
-                    <ComboBox
-                      id="serviceType"
-                      onChange={({ selectedItem }) => field.onChange(selectedItem)}
-                      titleText={t('serviceType', 'Service type')}
-                      items={serviceTypes ?? []}
-                      itemToString={(item) => (item ? item.display : '')}
-                      placeholder={t('selectServiceType', 'Select service type')}
-                      disabled={isLoadingServiceTypes}
-                      initialSelectedItem={field.value}
-                      invalid={!!errors.serviceType}
-                      invalidText={errors?.serviceType?.message}
-                      itemToElement={(item) => (
-                        <div role="option" aria-selected={field.value?.uuid === item?.uuid}>
-                          {item?.display}
-                        </div>
-                      )}
-                    />
-                  );
-                }}
+                render={({ field }) => (
+                  <ComboBox
+                    id="serviceType"
+                    onChange={({ selectedItem }) => field.onChange(selectedItem)}
+                    titleText={t('serviceType', 'Service type')}
+                    items={serviceTypes ?? []}
+                    itemToString={(item) => (item ? item.display : '')}
+                    placeholder={t('selectServiceType', 'Select service type')}
+                    disabled={isLoadingServiceTypes}
+                    initialSelectedItem={field.value}
+                  />
+                )}
               />
             </ResponsiveWrapper>
+
             <ResponsiveWrapper>
               <Controller
+                name="description"
                 control={control}
-                name="serviceStatus"
                 render={({ field }) => (
-                  <Toggle
-                    labelText={t('status', 'Status')}
-                    labelA="Off"
-                    labelB="On"
-                    defaultToggled={field.value === 'ENABLED'}
-                    id="serviceStatus"
-                    onToggle={(value) => (value ? field.onChange('ENABLED') : field.onChange('DISABLED'))}
+                  <TextArea
+                    id="description"
+                    {...field}
+                    labelText={t('description', 'Description')}
+                    placeholder={t('optional', 'Optional')}
+                    rows={2}
                   />
                 )}
               />
             </ResponsiveWrapper>
+
             {renderServicePriceFields}
-            <Button size="sm" kind="tertiary" renderIcon={Add} onClick={() => appendServicePrice({})}>
-              {t('addPaymentMethod', 'Add payment method')}
+            <Button size="sm" kind="tertiary" renderIcon={Add} onClick={() => appendServicePrice({} as any)}>
+              {t('addPaymentMode', 'Add payment mode')}
             </Button>
             {!!errors.servicePrices && (
               <InlineNotification
-                aria-label="closes notification"
                 kind="error"
-                lowContrast={true}
-                statusIconDescription="notification"
-                title={t('paymentMethodRequired', 'Payment method required')}
-                subtitle={t('atLeastOnePriceRequired', 'At least one price is required')}
+                lowContrast
+                title={t('paymentModeRequired', 'Payment mode required')}
+                subtitle={t('atLeastOnePriceRequired', 'Add at least one payment mode price')}
               />
             )}
           </Stack>

package/src/billing-management/billing-charge-items/billing-charge-items-workspace/components/price.component.scss

@@ -0,0 +1,16 @@
+.priceRow {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.field {
+  flex: 1;
+  min-width: 0;
+}
+
+.removeButton {
+  flex: 0 0 auto;
+}

package/src/billing-management/billing-charge-items/billing-charge-items-workspace/components/price.component.tsx

@@ -1,12 +1,11 @@
 import React, { useMemo } from 'react';
 import { Controller, useFormContext, type Control } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import styles from '../global/billing-charge-items.scss';
 import { ComboBox, NumberInput, IconButton } from '@carbon/react';
 import { TrashCan } from '@carbon/react/icons';
-import { ResponsiveWrapper } from '@openmrs/esm-framework';
+import { type BillableFormSchema } from '../schemas/form-schemas';
 import { usePaymentModes } from '../../../billing-payment-modes/billing-payment-modes.resource';
-import { BillableFormSchema } from '../schemas/form-schemas';
+import styles from './price.component.scss';
 
 interface PriceFieldProps {
   field: Record<string, any>;
@@ -16,22 +15,28 @@ interface PriceFieldProps {
   errors: Record<string, any>;
 }
 
+/**
+ * One payment-mode price row -- mode + price + remove, laid out on a single line. Modes already
+ * chosen in other rows are filtered out so a mode is priced at most once.
+ */
 const PriceField: React.FC<PriceFieldProps> = ({ field, index, control, removeServicePrice, errors }) => {
   const { t } = useTranslation();
-  const { paymentModes, isLoading } = usePaymentModes();
-  const { watch } = useFormContext();
+  const { paymentModes, isLoading } = usePaymentModes(false);
+  const { watch } = useFormContext<BillableFormSchema>();
   const servicePrices = watch('servicePrices');
+
   const availablePaymentModes = useMemo(
     () =>
       paymentModes?.filter(
-        (paymentMode) => !servicePrices?.some((servicePrice) => servicePrice.paymentMode?.uuid === paymentMode.uuid),
+        (mode) =>
+          !servicePrices?.some((servicePrice, i) => i !== index && servicePrice?.paymentMode?.uuid === mode.uuid),
       ),
-    [paymentModes, servicePrices],
+    [paymentModes, servicePrices, index],
   );
 
   return (
-    <div key={field.id} className={styles.paymentMethods}>
-      <ResponsiveWrapper>
+    <div key={field.id} className={styles.priceRow}>
+      <div className={styles.field}>
         <Controller
           name={`servicePrices.${index}.paymentMode`}
           control={control}
@@ -39,9 +44,7 @@ const PriceField: React.FC<PriceFieldProps> = ({ field, index, control, removeSe
             <ComboBox
               id={`servicePrices.${index}.paymentMode`}
               onChange={({ selectedItem }) => field.onChange(selectedItem)}
-              titleText={t('paymentMethodDescription', 'Payment method {{methodName}}', {
-                methodName: servicePrices[index]?.paymentMode?.name ?? '',
-              })}
+              titleText={t('paymentMode', 'Payment mode')}
               items={availablePaymentModes ?? []}
               itemToString={(item) => (item ? item.name : '')}
               placeholder={t('selectPaymentMode', 'Select payment mode')}
@@ -52,26 +55,33 @@ const PriceField: React.FC<PriceFieldProps> = ({ field, index, control, removeSe
             />
           )}
         />
-      </ResponsiveWrapper>
-      <ResponsiveWrapper>
+      </div>
+      <div className={styles.field}>
         <Controller
           name={`servicePrices.${index}.price`}
           control={control}
           render={({ field }) => (
             <NumberInput
               id={`servicePrices.${index}.price`}
-              onChange={(e, { value }) => field.onChange(parseFloat(value.toString()))}
-              type="number"
+              allowEmpty
+              hideSteppers
+              onChange={(_e, { value }) => field.onChange(value === '' ? undefined : Number(value))}
               label={t('price', 'Price')}
-              placeholder={t('enterPrice', 'Enter price')}
-              defaultValue={field.value}
+              min={0}
+              step={0.01}
+              value={field.value ?? ''}
               invalid={!!errors?.servicePrices?.[index]?.price}
               invalidText={errors?.servicePrices?.[index]?.price?.message}
             />
           )}
         />
-      </ResponsiveWrapper>
-      <IconButton kind="tertiary" size="md" label={t('delete', 'Delete')} onClick={() => removeServicePrice(index)}>
+      </div>
+      <IconButton
+        className={styles.removeButton}
+        kind="tertiary"
+        size="md"
+        label={t('delete', 'Delete')}
+        onClick={() => removeServicePrice(index)}>
         <TrashCan />
       </IconButton>
     </div>

package/src/billing-management/billing-charge-items/billing-charge-items-workspace/schemas/form-schemas.ts

@@ -5,28 +5,33 @@ const ServiceConceptSchema = z.object({
     uuid: z.string(),
     display: z.string(),
   }),
-  conceptName: z.object({
-    uuid: z.string(),
-    display: z.string(),
-  }),
-  display: z.string(),
+  conceptName: z
+    .object({
+      uuid: z.string(),
+      display: z.string(),
+    })
+    .optional(),
+  display: z.string().optional(),
+});
+
+const paymentModeSchema = z.object({
+  uuid: z.string({ required_error: 'Select a payment mode' }),
+  name: z.string().optional(),
 });
 
 export const servicePriceSchema = z.object({
-  price: z.number().gt(0.01, 'Price must be greater than 0').min(0.01, 'Price must be at least 0.01'),
-  paymentMode: z.object({ uuid: z.string(), name: z.string() }),
+  paymentMode: paymentModeSchema,
+  // A price of 0 is valid (a free or fully-waived mode); only a negative price is rejected.
+  price: z.coerce.number().min(0, 'Price cannot be negative'),
 });
 
+// A billable item is a concept plus one price per payment mode -- there is no separate default price.
 export const billableFormSchema = z.object({
   name: z.string().min(1, 'Service name is required'),
-  shortName: z
-    .string()
-    .refine((value) => value.length !== 1, { message: 'Short name must be at least 1 character long' }),
-  serviceType: z.object({ uuid: z.string(), display: z.string() }),
-  servicePrices: z.array(servicePriceSchema).min(1, 'At least one price is required'),
-  serviceStatus: z.enum(['ENABLED', 'DISABLED']),
   concept: ServiceConceptSchema,
-  stockItem: z.string().nullable().optional(),
+  serviceType: z.object({ uuid: z.string(), display: z.string() }).nullable().optional(),
+  description: z.string().optional(),
+  servicePrices: z.array(servicePriceSchema).min(1, 'Add at least one payment mode price'),
 });
 
 export type BillableFormSchema = z.infer<typeof billableFormSchema>;