@digihmis/esm-administration-app 1.0.0

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

@@ -0,0 +1,296 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  ButtonSet,
+  Button,
+  Stack,
+  TextInput,
+  ComboBox,
+  Toggle,
+  InlineNotification,
+  InlineLoading,
+} from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import { Controller, useFieldArray, useForm, FormProvider } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import { type DefaultWorkspaceProps, useLayoutType, useDebounce, ResponsiveWrapper, showSnackbar, restBaseUrl } from '@openmrs/esm-framework';
+
+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 { formatBillableServicePayloadForSubmission, mapInputToPayloadSchema } from '../utils';
+
+interface AddServiceFormProps extends DefaultWorkspaceProps {
+  initialValues?: BillableFormSchema;
+}
+
+const AddServiceForm: React.FC<AddServiceFormProps> = ({
+  closeWorkspace,
+  promptBeforeClosing,
+  closeWorkspaceWithSavedChanges,
+  initialValues,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const [conceptToLookup, setConceptToLookup] = useState('');
+  const debouncedConceptToLookup = useDebounce(conceptToLookup, 500);
+  const [selectedConcept, setSelectedConcept] = useState<any>(null);
+  const inEditMode = !!initialValues;
+
+  const { isLoading: isLoadingServiceTypes, serviceTypes } = useServiceTypes();
+  const { isSearching, searchResults: concepts } = useConceptsSearch(debouncedConceptToLookup);
+  const formMethods = useForm<BillableFormSchema>({
+    resolver: zodResolver(billableFormSchema),
+    defaultValues: initialValues
+      ? mapInputToPayloadSchema(initialValues)
+      : {
+          name: '',
+          shortName: '',
+          concept: null,
+          serviceType: null,
+          serviceStatus: 'ENABLED',
+          servicePrices: [],
+        },
+  });
+
+  const {
+    setValue,
+    control,
+    handleSubmit,
+    trigger,
+    formState: { errors, isDirty, defaultValues, isSubmitting },
+  } = formMethods;
+
+  useEffect(() => {
+    if (initialValues) {
+      setConceptToLookup(initialValues.concept?.concept?.display);
+      trigger();
+    }
+  }, [initialValues, trigger]);
+
+  const {
+    fields: servicePriceFields,
+    append: appendServicePrice,
+    remove: removeServicePrice,
+  } = useFieldArray({
+    control,
+    name: 'servicePrices',
+  });
+
+  const handleSelectConcept = (concept) => {
+    setSelectedConcept(concept);
+    setValue('concept', concept);
+    setConceptToLookup('');
+  };
+
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+  }, [isDirty, promptBeforeClosing]);
+
+  const onSubmit = async (data: BillableFormSchema) => {
+    const formPayload = formatBillableServicePayloadForSubmission(data, initialValues?.['uuid']);
+    try {
+      const response = await createBillableService(formPayload, initialValues?.['uuid']);
+      if (response.ok) {
+        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`);
+
+        closeWorkspaceWithSavedChanges();
+      }
+    } catch (e) {
+      const formSchemaError = JSON.stringify(e, null, 2);
+      const errorMessage = e?.servicePrices?.root?.message || 'Unknown error occurred';
+      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) => (
+        <PriceField
+          key={field.id}
+          field={field}
+          index={index}
+          control={control}
+          removeServicePrice={removeServicePrice}
+          errors={errors}
+        />
+      )),
+    [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}>
+        <div className={styles.formContainer}>
+          <Stack className={styles.formStackControl} gap={7}>
+            {errors.concept && (
+              <InlineNotification
+                kind="error"
+                title={t('conceptMissing', 'Concept missing')}
+                subtitle={t('conceptMissingSubtitle', 'Please select a stock item')}
+              />
+            )}
+            <ResponsiveWrapper>
+              <Controller
+                name="name"
+                control={control}
+                render={({ field }) => (
+                  <TextInput
+                    id="serviceName"
+                    {...field}
+                    type="text"
+                    labelText={t('serviceName', 'Service name')}
+                    invalid={!!errors.name}
+                    invalidText={errors?.name?.message}
+                  />
+                )}
+              />
+            </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}
+              setConceptToLookup={setConceptToLookup}
+              conceptToLookup={conceptToLookup}
+              defaultValues={defaultValues}
+              errors={errors}
+              isSearching={isSearching}
+              concepts={concepts}
+              handleSelectConcept={handleSelectConcept}
+            />
+
+            <ResponsiveWrapper>
+              <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>
+                      )}
+                    />
+                  );
+                }}
+              />
+            </ResponsiveWrapper>
+            <ResponsiveWrapper>
+              <Controller
+                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'))}
+                  />
+                )}
+              />
+            </ResponsiveWrapper>
+            {renderServicePriceFields}
+            <Button size="sm" kind="tertiary" renderIcon={Add} onClick={() => appendServicePrice({})}>
+              {t('addPaymentMethod', 'Add payment method')}
+            </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')}
+              />
+            )}
+          </Stack>
+        </div>
+        <ButtonSet className={classNames({ [styles.tablet]: isTablet, [styles.desktop]: !isTablet })}>
+          <Button style={{ maxWidth: '50%' }} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button disabled={isSubmitting || !isDirty} style={{ maxWidth: '50%' }} kind="primary" type="submit">
+            {isSubmitting ? (
+              <span style={{ display: 'flex', justifyItems: 'center' }}>
+                {t('submitting', 'Submitting...')} <InlineLoading status="active" iconDescription="Loading" />
+              </span>
+            ) : (
+              t('saveAndClose', 'Save & close')
+            )}
+          </Button>
+        </ButtonSet>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default AddServiceForm;

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import styles from '../global/billing-charge-items.scss';
+import { useTranslation } from 'react-i18next';
+import { FormGroup, Search, InlineLoading } from '@carbon/react';
+import { ResponsiveWrapper } from '@openmrs/esm-framework';
+
+type ConceptSearchProps = {
+  setConceptToLookup: (value: string) => void;
+  conceptToLookup: string;
+  selectedConcept: any;
+  handleSelectConcept: (concept: any) => void;
+  errors: any;
+  isSearching: boolean;
+  concepts: any;
+  defaultValues: any;
+};
+
+const ConceptSearch: React.FC<ConceptSearchProps> = ({
+  selectedConcept,
+  setConceptToLookup,
+  conceptToLookup,
+  defaultValues,
+  errors,
+  isSearching,
+  concepts,
+  handleSelectConcept,
+}) => {
+  const { t } = useTranslation();
+  return (
+    <FormGroup className={styles.formGroupWithConcept} legendText={t('serviceConcept', 'Service Concept')}>
+      <ResponsiveWrapper>
+        <Search
+          placeholder={t('searchForConcept', 'Search for concept')}
+          labelText={t('search', 'Search')}
+          closeButtonLabelText={t('clear', 'Clear')}
+          onChange={(e) => setConceptToLookup(e.target.value)}
+          value={
+            selectedConcept
+              ? selectedConcept?.concept?.display
+              : (conceptToLookup ?? defaultValues?.concept?.concept?.display)
+          }
+        />
+      </ResponsiveWrapper>
+      {isSearching && (
+        <div className={styles.searchResults}>
+          <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+        </div>
+      )}
+      {concepts && concepts.length > 0 && !isSearching && (
+        <div className={styles.searchResults}>
+          {concepts.map((concept) => (
+            <div
+              role="button"
+              tabIndex={0}
+              onClick={() => handleSelectConcept(concept)}
+              key={concept.concept.uuid}
+              className={styles.searchItem}>
+              {concept.concept.display}
+            </div>
+          ))}
+        </div>
+      )}
+    </FormGroup>
+  );
+};
+
+export default ConceptSearch;

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

@@ -0,0 +1,81 @@
+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 { usePaymentModes } from '../../../billing-payment-modes/billing-payment-modes.resource';
+import { BillableFormSchema } from '../schemas/form-schemas';
+
+interface PriceFieldProps {
+  field: Record<string, any>;
+  index: number;
+  control: Control<BillableFormSchema>;
+  removeServicePrice: (index: number) => void;
+  errors: Record<string, any>;
+}
+
+const PriceField: React.FC<PriceFieldProps> = ({ field, index, control, removeServicePrice, errors }) => {
+  const { t } = useTranslation();
+  const { paymentModes, isLoading } = usePaymentModes();
+  const { watch } = useFormContext();
+  const servicePrices = watch('servicePrices');
+  const availablePaymentModes = useMemo(
+    () =>
+      paymentModes?.filter(
+        (paymentMode) => !servicePrices?.some((servicePrice) => servicePrice.paymentMode?.uuid === paymentMode.uuid),
+      ),
+    [paymentModes, servicePrices],
+  );
+
+  return (
+    <div key={field.id} className={styles.paymentMethods}>
+      <ResponsiveWrapper>
+        <Controller
+          name={`servicePrices.${index}.paymentMode`}
+          control={control}
+          render={({ field }) => (
+            <ComboBox
+              id={`servicePrices.${index}.paymentMode`}
+              onChange={({ selectedItem }) => field.onChange(selectedItem)}
+              titleText={t('paymentMethodDescription', 'Payment method {{methodName}}', {
+                methodName: servicePrices[index]?.paymentMode?.name ?? '',
+              })}
+              items={availablePaymentModes ?? []}
+              itemToString={(item) => (item ? item.name : '')}
+              placeholder={t('selectPaymentMode', 'Select payment mode')}
+              disabled={isLoading}
+              initialSelectedItem={field.value}
+              invalid={!!errors?.servicePrices?.[index]?.paymentMode}
+              invalidText={errors?.servicePrices?.[index]?.paymentMode?.message}
+            />
+          )}
+        />
+      </ResponsiveWrapper>
+      <ResponsiveWrapper>
+        <Controller
+          name={`servicePrices.${index}.price`}
+          control={control}
+          render={({ field }) => (
+            <NumberInput
+              id={`servicePrices.${index}.price`}
+              onChange={(e, { value }) => field.onChange(parseFloat(value.toString()))}
+              type="number"
+              label={t('price', 'Price')}
+              placeholder={t('enterPrice', 'Enter price')}
+              defaultValue={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)}>
+        <TrashCan />
+      </IconButton>
+    </div>
+  );
+};
+
+export default PriceField;

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

@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FormGroup, Search, InlineLoading } from '@carbon/react';
+import { ErrorState, ResponsiveWrapper, useDebounce } from '@openmrs/esm-framework';
+import type { UseFormSetValue } from 'react-hook-form';
+import styles from '../global/billing-charge-commodity.scss';
+import { formatStockItemToPayload } from '../../utils';
+import { BillableFormSchema } from '../schemas/form-schemas';
+import { useCommodityItem } from '../billing-charge-items.resource';
+
+interface StockItem {
+  uuid: string;
+  commonName: string;
+}
+
+type StockItemSearchProps = {
+  setValue: UseFormSetValue<BillableFormSchema>;
+  defaultStockItem?: string;
+};
+
+const StockItemSearch: React.FC<StockItemSearchProps> = ({ setValue, defaultStockItem }) => {
+  const { t } = useTranslation();
+  const [inputValue, setInputValue] = useState<string>(defaultStockItem ?? '');
+  const [searchTerm, setSearchTerm] = useState<string>(defaultStockItem ? '' : '');
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
+  const [selectedStockItem, setSelectedStockItem] = useState<StockItem | null>(null);
+
+  const { stockItems = [], isLoading, error } = useCommodityItem(debouncedSearchTerm);
+
+  useEffect(() => {
+    if (defaultStockItem && !selectedStockItem) {
+      setSelectedStockItem(stockItems.find((item) => item.uuid === defaultStockItem) ?? null);
+    }
+  }, [defaultStockItem, selectedStockItem, setValue, stockItems]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const v = e?.currentTarget?.value ?? '';
+    setInputValue(v);
+    setSearchTerm(v);
+    setSelectedStockItem(null);
+  };
+
+  const handleClear = () => {
+    setInputValue('');
+    setSearchTerm('');
+    setSelectedStockItem(null);
+  };
+
+  const handleStockItemSelect = (item: StockItem) => {
+    setSelectedStockItem(item);
+    setInputValue(item.commonName);
+    setSearchTerm(''); // hide results
+    const payload = formatStockItemToPayload(item);
+    Object.entries(payload).forEach(([key, value]) => {
+      setValue(key as keyof BillableFormSchema, value);
+    });
+  };
+
+  if (error) {
+    return <ErrorState headerTitle={t('stockItemError', 'Stock Item')} error={error} />;
+  }
+
+  return (
+    <FormGroup className={styles.formGroupWithConcept} legendText={t('searchForCommodity', 'Search for commodity')}>
+      <ResponsiveWrapper>
+        <Search
+          placeholder={t('searchForCommodity', 'Search for commodity')}
+          labelText={t('search', 'Search')}
+          closeButtonLabelText={t('clear', 'Clear')}
+          value={inputValue}
+          onChange={handleInputChange}
+          onClear={handleClear}
+          disabled={Boolean(defaultStockItem)}
+        />
+      </ResponsiveWrapper>
+
+      {isLoading && (
+        <div className={styles.searchResults}>
+          <InlineLoading status="active" iconDescription="Loading" description={t('loadingData', 'Loading data...')} />
+        </div>
+      )}
+
+      {!isLoading && stockItems.length > 0 && searchTerm && (
+        <div className={styles.searchResults} role="listbox">
+          {stockItems.map((item) => (
+            <div
+              key={item.uuid}
+              className={styles.searchItem}
+              role="option"
+              aria-selected={selectedStockItem?.uuid === item.uuid}
+              tabIndex={0}
+              onClick={() => handleStockItemSelect(item)}
+              onKeyPress={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  handleStockItemSelect(item);
+                }
+              }}>
+              {item.commonName}
+            </div>
+          ))}
+        </div>
+      )}
+    </FormGroup>
+  );
+};
+
+export default StockItemSearch;

package/src/billing-management/billing-charge-items/billing-charge-items-workspace/global/billing-charge-commodity.scss

@@ -0,0 +1,61 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.formContainer {
+  margin: layout.$spacing-05;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+}
+
+.desktop {
+  padding: 0;
+}
+
+.paymentMethods {
+  display: grid;
+  grid-template-columns: 0.45fr 0.45fr 0.1fr;
+  column-gap: 0.25rem;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.searchResults {
+  position: absolute;
+  top: 2.625rem;
+  z-index: 99;
+  height: 16rem;
+  padding: 0.5rem;
+  overflow-y: scroll;
+  background-color: colors.$white;
+  border: 1px solid colors.$gray-30;
+  width: 100%;
+}
+
+.searchItem {
+  padding: 0.5rem;
+  color: colors.$gray-70;
+  cursor: pointer;
+  @include type.type-style('label-01');
+  border-bottom: 1px solid colors.$gray-30;
+  &:hover {
+    background-color: colors.$gray-20;
+  }
+}
+
+.formGroupWithConcept {
+  position: relative;
+}
+.formStackControl {
+  row-gap: layout.$layout-01;
+}

package/src/billing-management/billing-charge-items/billing-charge-items-workspace/global/billing-charge-items.scss

@@ -0,0 +1,59 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.formContainer {
+  margin: layout.$spacing-05;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+}
+
+.desktop {
+  padding: 0;
+}
+
+.paymentMethods {
+  display: flex;
+  flex-direction: column;
+  row-gap: layout.$spacing-05;
+}
+
+.searchResults {
+  position: absolute;
+  top: 2.625rem;
+  z-index: 99;
+  height: 16rem;
+  padding: 0.5rem;
+  overflow-y: scroll;
+  background-color: colors.$white;
+  border: 1px solid colors.$gray-30;
+  width: 100%;
+}
+
+.searchItem {
+  padding: 0.5rem;
+  color: colors.$gray-70;
+  cursor: pointer;
+  @include type.type-style('label-01');
+  border-bottom: 1px solid colors.$gray-30;
+  &:hover {
+    background-color: colors.$gray-20;
+  }
+}
+
+.formGroupWithConcept {
+  position: relative;
+}
+.formStackControl {
+  row-gap: layout.$layout-01;
+}