@palladium-ethiopia/esm-clinical-workflow-app 5.4.2-pre.34 → 5.4.2-pre.35

package/src/mru/billing-information/components/BillingTypeAttributes.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Controller, Control, FieldErrors } from 'react-hook-form';
+import { TextInput, FormGroup } from '@carbon/react';
+import { OpenmrsDatePicker } from '@openmrs/esm-framework';
+import type { TFunction } from 'i18next';
+import type { BillingFormData } from '../billing-information.resource';
+import styles from '../billing-information.scss';
+
+type BillingTypeAttributesProps = {
+  control: Control<BillingFormData>;
+  errors: FieldErrors<BillingFormData>;
+  t: TFunction;
+  attributeTypes: Array<{
+    uuid: string;
+    name: string;
+    description?: string;
+    format?: string;
+    required?: boolean;
+  }>;
+  attributes: Record<string, any>;
+  setValue: (name: string, value: any, options?: { shouldDirty?: boolean }) => void;
+};
+
+export const BillingTypeAttributes: React.FC<BillingTypeAttributesProps> = ({
+  control,
+  errors,
+  t,
+  attributeTypes,
+  attributes,
+  setValue,
+}) => {
+  const renderAttributeField = (attrType: {
+    uuid: string;
+    name: string;
+    description?: string;
+    format?: string;
+    required?: boolean;
+  }) => {
+    const fieldName = `attributes.${attrType.uuid}` as const;
+    const fieldError = errors.attributes?.[attrType.uuid];
+    const errorMessage =
+      fieldError && typeof fieldError === 'object' && 'message' in fieldError
+        ? String(fieldError.message)
+        : fieldError
+        ? String(fieldError)
+        : undefined;
+
+    // Determine field type based on format
+    const isDateField =
+      attrType.format?.toLowerCase().includes('date') || attrType.format === 'org.openmrs.util.AttributableDate';
+
+    if (isDateField) {
+      return (
+        <Controller
+          key={attrType.uuid}
+          name={fieldName}
+          control={control}
+          render={({ field: { onChange, value } }) => (
+            <OpenmrsDatePicker
+              id={`attribute-${attrType.uuid}`}
+              labelText={attrType.name}
+              value={value || ''}
+              onChange={(date) => {
+                const dateValue = typeof date === 'string' ? date : date.toISOString().split('T')[0];
+                onChange(dateValue);
+                setValue(fieldName, dateValue, { shouldDirty: true });
+              }}
+              invalid={!!fieldError}
+              invalidText={errorMessage}
+            />
+          )}
+        />
+      );
+    }
+
+    // Default to text input
+    return (
+      <Controller
+        key={attrType.uuid}
+        name={fieldName}
+        control={control}
+        render={({ field: { onChange, value } }) => (
+          <TextInput
+            id={`attribute-${attrType.uuid}`}
+            labelText={attrType.name}
+            value={value || ''}
+            onChange={(e) => {
+              onChange(e.target.value);
+              setValue(fieldName, e.target.value, { shouldDirty: true });
+            }}
+            placeholder={attrType.description || t('enterValue', 'Enter {{name}}', { name: attrType.name })}
+            invalid={!!fieldError}
+            invalidText={errorMessage}
+            required={attrType.required}
+          />
+        )}
+      />
+    );
+  };
+
+  return (
+    <FormGroup className={styles.billingTypeAttributesContainer} legendText={t('billingDetails', 'Billing Details')}>
+      {attributeTypes.map((attrType) => renderAttributeField(attrType))}
+    </FormGroup>
+  );
+};

package/src/mru/billing-information/components/CreditSubTypeFields.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { Control, FieldErrors } from 'react-hook-form';
+import { TextInput, Dropdown, FormGroup } from '@carbon/react';
+import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
+import type { TFunction } from 'i18next';
+import type { BillingFormData } from '../billing-information.resource';
+import type { ClinicalWorkflowConfig } from '../../../config-schema';
+import styles from '../billing-information.scss';
+
+type CreditSubTypeFieldsProps = {
+  control: Control<BillingFormData>;
+  errors: FieldErrors<BillingFormData>;
+  t: TFunction;
+  creditSubType: string;
+  creditCompanies: Array<{ uuid: string; name: string }>;
+  attributes: Record<string, any>;
+  setValue: (name: string, value: any, options?: { shouldDirty?: boolean }) => void;
+};
+
+export const CreditSubTypeFields: React.FC<CreditSubTypeFieldsProps> = ({
+  control,
+  errors,
+  t,
+  creditSubType,
+  creditCompanies,
+  attributes,
+  setValue,
+}) => {
+  const { billingVisitAttributeTypes } = useConfig<ClinicalWorkflowConfig>();
+
+  // Use creditTypeDetails UUID to store all credit details as a JSON object
+  const creditDetailsKey = billingVisitAttributeTypes.creditTypeDetails || 'creditTypeDetails';
+  const creditDetails = attributes[creditDetailsKey]
+    ? typeof attributes[creditDetailsKey] === 'string'
+      ? JSON.parse(attributes[creditDetailsKey])
+      : attributes[creditDetailsKey]
+    : {};
+
+  const updateCreditDetails = (fieldName: string, value: any) => {
+    const updatedDetails = { ...creditDetails, [fieldName]: value };
+    setValue(`attributes.${creditDetailsKey}`, JSON.stringify(updatedDetails), { shouldDirty: true });
+  };
+
+  const renderField = (fieldName: string, label: string, isDate = false, isDropdown = false, items: any[] = []) => {
+    const fieldValue = creditDetails[fieldName] || '';
+    const creditDetailsError = errors.attributes?.[creditDetailsKey];
+    const errorMessage =
+      creditDetailsError && typeof creditDetailsError === 'object' && 'message' in creditDetailsError
+        ? String(creditDetailsError.message)
+        : creditDetailsError
+        ? String(creditDetailsError)
+        : undefined;
+
+    if (isDropdown) {
+      return (
+        <Dropdown
+          key={fieldName}
+          id={`attribute-${fieldName}`}
+          titleText={label}
+          label={label}
+          items={items}
+          itemToString={(item) => (item ? (typeof item === 'string' ? item : item.name || item.uuid) : '')}
+          selectedItem={
+            items.find((item) => (typeof item === 'string' ? item === fieldValue : item.uuid === fieldValue)) || null
+          }
+          onChange={({ selectedItem }) => {
+            const selectedValue = typeof selectedItem === 'string' ? selectedItem : selectedItem?.uuid || '';
+            updateCreditDetails(fieldName, selectedValue);
+          }}
+          invalid={!!creditDetailsError}
+          invalidText={errorMessage}
+        />
+      );
+    }
+
+    if (isDate) {
+      return (
+        <OpenmrsDatePicker
+          key={fieldName}
+          id={`attribute-${fieldName}`}
+          labelText={label}
+          value={fieldValue || ''}
+          onChange={(date) => {
+            const dateValue = typeof date === 'string' ? date : date.toISOString().split('T')[0];
+            updateCreditDetails(fieldName, dateValue);
+          }}
+          invalid={!!creditDetailsError}
+          invalidText={errorMessage}
+        />
+      );
+    }
+
+    return (
+      <TextInput
+        key={fieldName}
+        id={`attribute-${fieldName}`}
+        labelText={label}
+        value={fieldValue || ''}
+        onChange={(e) => {
+          updateCreditDetails(fieldName, e.target.value);
+        }}
+        placeholder={t('enterValue', 'Enter {{name}}', { name: label })}
+        invalid={!!creditDetailsError}
+        invalidText={errorMessage}
+      />
+    );
+  };
+
+  return (
+    <FormGroup className={styles.creditTypeDetailsContainer} legendText={t('creditDetails', 'Credit Details')}>
+      {creditSubType === 'cbhi' && (
+        <>
+          {renderField('cbhiId', t('cbhiId', 'CBHI ID'))}
+          {renderField('cbhiExpiryDate', t('expiryDate', 'Expiry Date'), true)}
+        </>
+      )}
+      {creditSubType === 'shi' && (
+        <>
+          {renderField('shiId', t('shiId', 'SHI ID'))}
+          {renderField('shiExpiryDate', t('expiryDate', 'Expiry Date'), true)}
+        </>
+      )}
+      {creditSubType === 'insurance' && (
+        <>
+          {renderField('insuranceName', t('insuranceName', 'Insurance Name'))}
+          {renderField('insuranceId', t('insuranceId', 'Insurance ID'))}
+          {renderField('insuranceCode', t('insuranceCode', 'Insurance Code'))}
+          {renderField('insuranceZone', t('insuranceZone', 'Insurance Zone'))}
+          {renderField('insuranceExpiryDate', t('insuranceExpiryDate', 'Insurance Expiry Date'), true)}
+        </>
+      )}
+      {creditSubType === 'creditCompany' && (
+        <>
+          {renderField(
+            'creditCompany',
+            t('creditCompany', 'Credit Company'),
+            false,
+            true,
+            creditCompanies.map((company) => ({ uuid: company.uuid, name: company.name })),
+          )}
+        </>
+      )}
+    </FormGroup>
+  );
+};

package/src/mru/billing-information/components/CreditSubTypeSelection.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Controller, Control, FieldErrors } from 'react-hook-form';
+import { Dropdown, FormGroup } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import type { TFunction } from 'i18next';
+import type { BillingFormData } from '../billing-information.resource';
+import type { ClinicalWorkflowConfig } from '../../../config-schema';
+import styles from '../billing-information.scss';
+
+type CreditSubTypeSelectionProps = {
+  control: Control<BillingFormData>;
+  errors: FieldErrors<BillingFormData>;
+  t: TFunction;
+  creditSubType?: string;
+  setValue: (name: string, value: any, options?: { shouldDirty?: boolean }) => void;
+};
+
+export const CreditSubTypeSelection: React.FC<CreditSubTypeSelectionProps> = ({
+  control,
+  errors,
+  t,
+  creditSubType,
+  setValue,
+}) => {
+  const { billingVisitAttributeTypes } = useConfig<ClinicalWorkflowConfig>();
+  const creditSubTypes = [
+    { value: 'cbhi', label: 'CBHI' },
+    { value: 'shi', label: 'SHI' },
+    { value: 'insurance', label: 'Insurance' },
+    { value: 'creditCompany', label: 'Credit Company' },
+  ];
+
+  return (
+    <FormGroup className={styles.creditDetailsContainer} legendText={t('creditType', 'Credit Type')}>
+      <Controller
+        name="creditSubType"
+        control={control}
+        render={({ field: { onChange, value } }) => (
+          <Dropdown
+            id="creditSubType"
+            titleText={t('selectCreditType', 'Select Credit Type')}
+            label={t('selectCreditType', 'Select Credit Type')}
+            items={creditSubTypes}
+            itemToString={(item) => (item ? item.label : '')}
+            selectedItem={creditSubTypes.find((item) => item.value === value) || null}
+            onChange={({ selectedItem }) => {
+              const subTypeValue = selectedItem?.value;
+              onChange(subTypeValue);
+              setValue('creditSubType', subTypeValue, { shouldDirty: true });
+              // Store credit sub-type in attributes
+              if (subTypeValue && billingVisitAttributeTypes.creditType) {
+                setValue(`attributes.${billingVisitAttributeTypes.creditType}`, subTypeValue, { shouldDirty: true });
+              }
+              // Clear credit details when changing sub-type
+              if (billingVisitAttributeTypes.creditTypeDetails) {
+                setValue(`attributes.${billingVisitAttributeTypes.creditTypeDetails}`, '', { shouldDirty: false });
+              }
+            }}
+            invalid={!!errors.creditSubType}
+            invalidText={errors.creditSubType?.message}
+          />
+        )}
+      />
+    </FormGroup>
+  );
+};

package/src/mru/billing-information/components/FreeSubTypeFields.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const FreeSubTypeFields: React.FC = () => {
+  // Free sub-type is already stored in attributes via FreeSubTypeSelection component
+  // No additional fields needed for free types
+  return null;
+};

package/src/mru/billing-information/components/FreeSubTypeSelection.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Controller, Control, FieldErrors } from 'react-hook-form';
+import { Dropdown, FormGroup } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import type { TFunction } from 'i18next';
+import type { BillingFormData } from '../billing-information.resource';
+import type { ClinicalWorkflowConfig } from '../../../config-schema';
+import styles from '../billing-information.scss';
+
+type FreeSubTypeSelectionProps = {
+  control: Control<BillingFormData>;
+  errors: FieldErrors<BillingFormData>;
+  t: TFunction;
+  freeSubType?: string;
+  setValue: (name: string, value: any, options?: { shouldDirty?: boolean }) => void;
+};
+
+export const FreeSubTypeSelection: React.FC<FreeSubTypeSelectionProps> = ({
+  control,
+  errors,
+  t,
+  freeSubType,
+  setValue,
+}) => {
+  const { billingVisitAttributeTypes } = useConfig<ClinicalWorkflowConfig>();
+  const freeSubTypes = [
+    { value: '24hour', label: '24 Hour' },
+    { value: 'staff', label: 'Staff' },
+    { value: 'exempted', label: 'Exempted' },
+  ];
+
+  return (
+    <FormGroup className={styles.freeDetailsContainer} legendText={t('freeType', 'Free Type')}>
+      <Controller
+        name="freeSubType"
+        control={control}
+        render={({ field: { onChange, value } }) => (
+          <Dropdown
+            id="freeSubType"
+            titleText={t('selectFreeType', 'Select Free Type')}
+            label={t('selectFreeType', 'Select Free Type')}
+            items={freeSubTypes}
+            itemToString={(item) => (item ? item.label : '')}
+            selectedItem={freeSubTypes.find((item) => item.value === value) || null}
+            onChange={({ selectedItem }) => {
+              const subTypeValue = selectedItem?.value;
+              onChange(subTypeValue);
+              setValue('freeSubType', subTypeValue, { shouldDirty: true });
+              // Store free sub-type in attributes
+              if (subTypeValue && billingVisitAttributeTypes.freeType) {
+                setValue(`attributes.${billingVisitAttributeTypes.freeType}`, subTypeValue, { shouldDirty: true });
+              }
+            }}
+            invalid={!!errors.freeSubType}
+            invalidText={errors.freeSubType?.message}
+          />
+        )}
+      />
+    </FormGroup>
+  );
+};

package/src/mru/billing-information/components/index.ts

@@ -0,0 +1,5 @@
+export { BillingTypeAttributes } from './BillingTypeAttributes';
+export { CreditSubTypeSelection } from './CreditSubTypeSelection';
+export { FreeSubTypeSelection } from './FreeSubTypeSelection';
+export { CreditSubTypeFields } from './CreditSubTypeFields';
+export { FreeSubTypeFields } from './FreeSubTypeFields';

package/src/mru/billing-information/hooks/index.ts

@@ -0,0 +1,4 @@
+export { usePaymentModes } from './usePaymentModes';
+export { useCreditCompanies } from './useCreditCompanies';
+export { useBillingForm } from './useBillingForm';
+export { useBillingType } from './useBillingType';

package/src/mru/billing-information/hooks/useBillingForm.ts

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import type { TFunction } from 'i18next';
+import { createBillingFormSchema, type BillingFormData } from '../billing-information.resource';
+
+export const useBillingForm = (t: TFunction, billingTypes: any[]) => {
+  const billingFormSchema = useMemo(() => createBillingFormSchema(t, billingTypes), [t, billingTypes]);
+
+  const form = useForm<BillingFormData>({
+    resolver: zodResolver(billingFormSchema),
+    mode: 'onTouched',
+    defaultValues: {
+      billingTypeUuid: undefined,
+      creditSubType: undefined,
+      freeSubType: undefined,
+      attributes: {},
+    },
+  });
+
+  return form;
+};

package/src/mru/billing-information/hooks/useBillingType.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+
+export const useBillingType = (billingTypes: any[], billingTypeUuid?: string) => {
+  const selectedBillingType = useMemo(
+    () => billingTypes.find((bt) => bt.uuid === billingTypeUuid),
+    [billingTypes, billingTypeUuid],
+  );
+
+  const isCreditType = useMemo(() => selectedBillingType?.name?.toLowerCase() === 'credit', [selectedBillingType]);
+
+  const isFreeType = useMemo(() => selectedBillingType?.name?.toLowerCase() === 'free', [selectedBillingType]);
+
+  return {
+    selectedBillingType,
+    isCreditType,
+    isFreeType,
+  };
+};

package/src/mru/billing-information/hooks/useCreditCompanies.ts

@@ -0,0 +1,17 @@
+import useSWR from 'swr';
+import { openmrsFetch } from '@openmrs/esm-framework';
+
+export const useCreditCompanies = (enabled: boolean) => {
+  const creditCompaniesUrl = `/ws/rest/v1/cashier/creditCompany?v=full`;
+  const {
+    data: creditCompaniesData,
+    error,
+    isLoading,
+  } = useSWR<{ data: { results: any[] } }>(enabled ? creditCompaniesUrl : null, openmrsFetch);
+
+  return {
+    creditCompanies: creditCompaniesData?.data?.results || [],
+    isLoading,
+    error,
+  };
+};

package/src/mru/billing-information/hooks/usePaymentModes.ts

@@ -0,0 +1,17 @@
+import useSWR from 'swr';
+import { openmrsFetch } from '@openmrs/esm-framework';
+
+export const usePaymentModes = () => {
+  const paymentModesUrl = `/ws/rest/v1/cashier/paymentMode?v=full`;
+  const {
+    data: paymentModesData,
+    error,
+    isLoading,
+  } = useSWR<{ data: { results: any[] } }>(paymentModesUrl, openmrsFetch);
+
+  return {
+    billingTypes: paymentModesData?.data?.results || [],
+    isLoading,
+    error,
+  };
+};