@openmrs/esm-billing-app 1.0.1-pre.95 → 1.0.2-pre.56

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

@@ -1,5 +1,4 @@
-/* eslint-disable curly */
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState, useEffect } from 'react';
 import {
   Button,
   ComboBox,
@@ -12,14 +11,15 @@ import {
   TextInput,
   Tile,
 } from '@carbon/react';
-import { navigate, showSnackbar, useDebounce, useLayoutType, useSession } from '@openmrs/esm-framework';
 import { Add, TrashCan, WarningFilled } from '@carbon/react/icons';
 import { Controller, useFieldArray, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { navigate, showSnackbar, useDebounce, useLayoutType } from '@openmrs/esm-framework';
 import {
   createBillableSerice,
+  updateBillableService,
   useConceptsSearch,
   usePaymentModes,
   useServiceTypes,
@@ -44,25 +44,35 @@ const servicePriceSchema = z.object({
   ]),
 });
 
-const paymentFormSchema = z.object({ payment: z.array(servicePriceSchema) });
+const paymentFormSchema = z.object({
+  payment: z.array(servicePriceSchema).min(1, 'At least one payment option is required'),
+});
 
 const DEFAULT_PAYMENT_OPTION = { paymentMode: '', price: 0 };
 
-const AddBillableService: React.FC = () => {
+const AddBillableService: React.FC<{ editingService?: any; onClose: () => void }> = ({ editingService, onClose }) => {
   const { t } = useTranslation();
 
   const { paymentModes, isLoading: isLoadingPaymentModes } = usePaymentModes();
   const { serviceTypes, isLoading: isLoadingServicesTypes } = useServiceTypes();
-  const [billableServicePayload, setBillableServicePayload] = useState<any>({});
+  const [billableServicePayload, setBillableServicePayload] = useState(editingService || {});
 
   const {
     control,
     handleSubmit,
-    formState: { errors },
+    formState: { errors, isValid },
+    setValue,
   } = useForm<any>({
     mode: 'all',
-    defaultValues: {},
+    defaultValues: {
+      name: editingService?.name,
+      serviceShortName: editingService?.shortName,
+      serviceType: editingService?.serviceType,
+      conceptsSearch: editingService?.concept,
+      payment: editingService?.servicePrices || [DEFAULT_PAYMENT_OPTION],
+    },
     resolver: zodResolver(paymentFormSchema),
+    shouldUnregister: !editingService,
   });
   const { fields, remove, append } = useFieldArray({ name: 'payment', control: control });
 
@@ -86,50 +96,94 @@ const AddBillableService: React.FC = () => {
       to: window.getOpenmrsSpaBase() + 'billable-services',
     });
 
-  if (isLoadingPaymentModes && isLoadingServicesTypes) {
-    return (
-      <InlineLoading
-        status="active"
-        iconDescription={t('loadingDescription', 'Loading')}
-        description={t('loading', 'Loading data...')}
-      />
-    );
-  }
+  useEffect(() => {
+    if (editingService && !isLoadingPaymentModes) {
+      setBillableServicePayload(editingService);
+      setValue('serviceName', editingService.name || '');
+      setValue('shortName', editingService.shortName || '');
+      setValue('serviceType', editingService.serviceType || '');
+      setValue(
+        'payment',
+        editingService.servicePrices.map((payment) => ({
+          paymentMode: payment.paymentMode?.uuid || '',
+          price: payment.price,
+        })),
+      );
+      setValue('conceptsSearch', editingService.concept);
+
+      if (editingService.concept) {
+        setSelectedConcept(editingService.concept);
+      }
+    }
+  }, [editingService, isLoadingPaymentModes, paymentModes, serviceTypes, setValue]);
+
+  const MAX_NAME_LENGTH = 19;
 
   const onSubmit = (data) => {
-    const payload: any = {};
+    const payload = {
+      name: billableServicePayload.name.substring(0, MAX_NAME_LENGTH),
+      shortName: billableServicePayload.shortName.substring(0, MAX_NAME_LENGTH),
+      serviceType: billableServicePayload.serviceType.uuid,
+      servicePrices: data.payment.map((payment) => {
+        const mode = paymentModes.find((m) => m.uuid === payment.paymentMode);
+        return {
+          paymentMode: payment.paymentMode,
+          name: mode?.name || 'Unknown',
+          price: parseFloat(payment.price),
+        };
+      }),
+      serviceStatus: 'ENABLED',
+      concept: selectedConcept?.uuid,
+    };
 
-    let servicePrices = [];
-    data.payment.forEach((element) => {
-      element.name = paymentModes.filter((p) => p.uuid === element.paymentMode)[0].name;
-      servicePrices.push(element);
-    });
-    payload.name = billableServicePayload.serviceName;
-    payload.shortName = billableServicePayload.shortName;
-    payload.serviceType = billableServicePayload.serviceType.uuid;
-    payload.servicePrices = servicePrices;
-    payload.serviceStatus = 'ENABLED';
-    payload.concept = selectedConcept?.concept?.uuid;
+    const saveAction = editingService
+      ? updateBillableService(editingService.uuid, payload)
+      : createBillableSerice(payload);
 
-    createBillableSerice(payload).then(
+    saveAction.then(
       (resp) => {
         showSnackbar({
           title: t('billableService', 'Billable service'),
-          subtitle: 'Billable service created successfully',
+          subtitle: editingService
+            ? t('updatedSuccessfully', 'Billable service updated successfully')
+            : t('createdSuccessfully', 'Billable service created successfully'),
           kind: 'success',
           timeoutInMs: 3000,
         });
+        onClose();
         handleNavigateToServiceDashboard();
       },
       (error) => {
-        showSnackbar({ title: 'Bill payment error', kind: 'error', subtitle: error?.message });
+        showSnackbar({ title: t('billPaymentError', 'Bill payment error'), kind: 'error', subtitle: error?.message });
       },
     );
   };
 
+  const getPaymentErrorMessage = () => {
+    const paymentError = errors.payment;
+    if (paymentError && typeof paymentError.message === 'string') {
+      return paymentError.message;
+    }
+    return null;
+  };
+
+  if (isLoadingPaymentModes && isLoadingServicesTypes) {
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription={t('loadingDescription', 'Loading')}
+        description={t('loading', 'Loading data...')}
+      />
+    );
+  }
+
   return (
-    <Form className={styles.form}>
-      <h4>{t('addBillableServices', 'Add Billable Services')}</h4>
+    <Form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+      <h4>
+        {editingService
+          ? t('editBillableServices', 'Edit Billable Services')
+          : t('addBillableServices', 'Add Billable Services')}
+      </h4>
       <section className={styles.section}>
         <Layer>
           <TextInput
@@ -137,14 +191,24 @@ const AddBillableService: React.FC = () => {
             type="text"
             labelText={t('serviceName', 'Service Name')}
             size="md"
-            onChange={(e) =>
+            value={billableServicePayload.name || ''}
+            onChange={(e) => {
+              const newName = e.target.value.substring(0, MAX_NAME_LENGTH);
               setBillableServicePayload({
                 ...billableServicePayload,
-                serviceName: e.target.value,
-              })
-            }
+                name: newName,
+              });
+            }}
             placeholder="Enter service name"
+            maxLength={MAX_NAME_LENGTH}
           />
+          {billableServicePayload.name?.length >= MAX_NAME_LENGTH && (
+            <span className={styles.errorMessage}>
+              {t('serviceNameExceedsLimit', 'Service Name exceeds the character limit of {{MAX_NAME_LENGTH}}.', {
+                MAX_NAME_LENGTH,
+              })}
+            </span>
+          )}
         </Layer>
       </section>
       <section className={styles.section}>
@@ -154,14 +218,24 @@ const AddBillableService: React.FC = () => {
             type="text"
             labelText={t('serviceShortName', 'Short Name')}
             size="md"
-            onChange={(e) =>
+            value={billableServicePayload.shortName || ''}
+            onChange={(e) => {
+              const newShortName = e.target.value.substring(0, MAX_NAME_LENGTH);
               setBillableServicePayload({
                 ...billableServicePayload,
-                shortName: e.target.value,
-              })
-            }
+                shortName: newShortName,
+              });
+            }}
             placeholder="Enter service short name"
+            maxLength={MAX_NAME_LENGTH}
           />
+          {billableServicePayload.shortName?.length >= MAX_NAME_LENGTH && (
+            <span className={styles.errorMessage}>
+              {t('shortNameExceedsLimit', 'Short Name exceeds the character limit of {{MAX_NAME_LENGTH}}.', {
+                MAX_NAME_LENGTH,
+              })}
+            </span>
+          )}
         </Layer>
       </section>
       <section>
@@ -179,6 +253,7 @@ const AddBillableService: React.FC = () => {
                 placeholder={t('searchConcepts', 'Search associated concept')}
                 className={errors?.search && styles.serviceError}
                 onChange={(e) => {
+                  setSearchTerm(e.target.value);
                   onChange(e);
                   handleSearchTermChange(e);
                 }}
@@ -200,6 +275,7 @@ const AddBillableService: React.FC = () => {
             </ResponsiveWrapper>
           )}
         />
+
         {(() => {
           if (!debouncedSearchTerm || selectedConcept) return null;
           if (isSearching)
@@ -237,7 +313,8 @@ const AddBillableService: React.FC = () => {
             id="serviceType"
             items={serviceTypes ?? []}
             titleText={t('serviceType', 'Service Type')}
-            itemToString={(item) => item?.display}
+            itemToString={(item) => item?.display || ''}
+            selectedItem={billableServicePayload.serviceType || null}
             onChange={({ selectedItem }) => {
               setBillableServicePayload({
                 ...billableServicePayload,
@@ -261,11 +338,12 @@ const AddBillableService: React.FC = () => {
                 render={({ field }) => (
                   <Layer>
                     <Dropdown
-                      onChange={({ selectedItem }) => field.onChange(selectedItem?.uuid)}
+                      onChange={({ selectedItem }) => field.onChange(selectedItem.uuid)}
                       titleText={t('paymentMode', 'Payment Mode')}
                       label={t('selectPaymentMethod', 'Select payment method')}
                       items={paymentModes ?? []}
                       itemToString={(item) => (item ? item.name : '')}
+                      selectedItem={paymentModes.find((mode) => mode.uuid === field.value)}
                       invalid={!!errors?.payment?.[index]?.paymentMode}
                       invalidText={errors?.payment?.[index]?.paymentMode?.message}
                     />
@@ -288,7 +366,7 @@ const AddBillableService: React.FC = () => {
                 )}
               />
               <div className={styles.removeButtonContainer}>
-                <TrashCan onClick={handleRemovePaymentMode} className={styles.removeButton} size={20} />
+                <TrashCan onClick={() => handleRemovePaymentMode(index)} className={styles.removeButton} size={20} />
               </div>
             </div>
           ))}
@@ -300,14 +378,15 @@ const AddBillableService: React.FC = () => {
             iconDescription="Add">
             {t('addPaymentOptions', 'Add payment option')}
           </Button>
+          {getPaymentErrorMessage() && <div className={styles.errorMessage}>{getPaymentErrorMessage()}</div>}
         </div>
       </section>
 
       <section>
-        <Button kind="secondary" onClick={handleNavigateToServiceDashboard}>
+        <Button kind="secondary" onClick={onClose}>
           {t('cancel', 'Cancel')}
         </Button>
-        <Button type="submit" onClick={handleSubmit(onSubmit)}>
+        <Button type="submit" disabled={!isValid || Object.keys(errors).length > 0}>
           {t('save', 'Save')}
         </Button>
       </section>

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

@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .form {
   display: flex;
@@ -25,7 +25,7 @@
 }
 
 .container {
-  margin: 1rem;
+  margin: layout.$spacing-05;
 }
 
 .paymentContainer {
@@ -43,7 +43,7 @@
   display: grid;
   grid-template-columns: repeat(4, minmax(auto, 1fr));
   align-items: flex-start;
-  column-gap: 1rem;
+  column-gap: layout.$spacing-05;
   margin: 0.625rem 0;
   width: 100%;
 }
@@ -76,7 +76,7 @@
 }
 
 .service {
-  padding: 1rem 0.75rem;
+  padding: layout.$spacing-05 layout.$spacing-04;
 }
 
 .conceptsList {
@@ -93,17 +93,17 @@
 .emptyResults {
   @include type.type-style('body-compact-01');
   color: $text-02;
-  min-height: 1rem;
+  min-height: layout.$spacing-05;
   border: 1px solid $ui-03;
 }
 
 .conceptLabel {
   @include type.type-style('label-02');
-  margin: 1rem;
+  margin: layout.$spacing-05;
 }
 
 .errorContainer {
-  margin: 1rem;
+  margin: layout.$spacing-05;
 }
 
 .serviceError {
@@ -126,6 +126,12 @@
 
 .spinner {
   &:global(.cds--inline-loading) {
-    min-height: 1rem;
+    min-height: layout.$spacing-05;
   }
 }
+
+.errorMessage {
+  color: red;
+  font-size: 0.875rem;
+}
+

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

@@ -1,21 +1,20 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import AddBillableService from './add-billable-service.component';
+import { render, screen } from '@testing-library/react';
+import { type FetchResponse, navigate } from '@openmrs/esm-framework';
 import {
   useBillableServices,
   usePaymentModes,
   useServiceTypes,
   createBillableSerice,
 } from '../billable-service.resource';
-import { FetchResponse, navigate, showSnackbar } from '@openmrs/esm-framework';
+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 mockShowSnackbar = showSnackbar as jest.MockedFunction<typeof showSnackbar>;
 
 jest.mock('../billable-service.resource', () => ({
   useBillableServices: jest.fn(),
@@ -57,6 +56,7 @@ xdescribe('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,
@@ -66,10 +66,11 @@ xdescribe('AddBillableService', () => {
     });
     mockUsePaymentModes.mockReturnValue({ paymentModes: mockPaymentModes, error: null, isLoading: false });
     mockUseServiceTypes.mockReturnValue({ serviceTypes: mockServiceTypes, error: false, isLoading: false });
-    render(<AddBillableService />);
 
-    const formTtile = screen.getByRole('heading', { name: /Add Billable Services/i });
-    expect(formTtile).toBeInTheDocument();
+    render(<AddBillableService 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();
@@ -131,6 +132,7 @@ xdescribe('AddBillableService', () => {
 
   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,
@@ -140,13 +142,13 @@ xdescribe('AddBillableService', () => {
     });
     mockUsePaymentModes.mockReturnValue({ paymentModes: mockPaymentModes, error: null, isLoading: false });
     mockUseServiceTypes.mockReturnValue({ serviceTypes: mockServiceTypes, error: false, isLoading: false });
-    render(<AddBillableService />);
+
+    render(<AddBillableService onClose={mockOnClose} />);
 
     const cancelBtn = screen.getByRole('button', { name: /Cancel/i });
     expect(cancelBtn).toBeInTheDocument();
     await user.click(cancelBtn);
 
-    expect(mockNavigate).toHaveBeenCalledTimes(1);
-    expect(mockNavigate).toHaveBeenCalledWith({ to: '/openmrs/spa/billable-services' });
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
   });
 });

package/src/billable-services/dashboard/dashboard.scss

@@ -3,11 +3,11 @@
 @use '@carbon/type';
 
 .container {
-  height: calc(100vh - 3rem);
+  height: calc(100vh - layout.$spacing-09);
 }
 
 .servicesTableContainer {
-  margin: 2rem 1rem;
+  margin: layout.$spacing-07 layout.$spacing-05;
 }
 
 .illo {
@@ -22,6 +22,6 @@
 
 .tile {
   border: 1px solid colors.$gray-20;
-  padding: 1.5rem 0;
+  padding: layout.$spacing-06 0;
   text-align: center;
 }