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

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"pages":[],"extensions":[{"name":"clinical-workflow-triage-dashboard-link","component":"triageDashboardLink","slot":"homepage-dashboard-slot","order":0,"meta":{"name":"clinical-workflow-triage","slot":"clinical-workflow-triage-dashboard-slot","title":"clinical-workflow-triage"}},{"name":"clinical-workflow-triage-dashboard","component":"triageDashboard","slot":"clinical-workflow-triage-dashboard-slot"},{"name":"ewf-mru-dashboard-link","component":"mruLeftPanelLink","slot":"homepage-dashboard-slot","order":1,"meta":{"name":"mru","title":"MRU","path":"mru","slot":"mru-dashboard-slot"}},{"name":"ewf-mru-dashboard","component":"mruDashboard","slot":"mru-dashboard-slot","online":true,"offline":false},{"name":"patient-scoreboard-link","component":"patientScoreboardLink","slot":"homepage-dashboard-slot","order":1,"meta":{"name":"patient-scoreboard","title":"Patient Scoreboard","path":"patient-scoreboard","slot":"patient-scoreboard-slot"}},{"name":"patient-scoreboard","component":"patientScoreboard","slot":"patient-scoreboard-slot","online":true,"offline":false},{"name":"past-visits-detail-overview-shadow","slot":"patient-chart-encounters-dashboard-slot","component":"pastVisitsDetailOverviewShadow","order":0,"meta":{"title":"Visits","view":"visits"},"online":true,"offline":true},{"name":"queue-table-transfer-column","component":"queueTableTransferColumn","slot":"queue-table-transfer-status-slot"},{"name":"transfer-notes-overview-widget","component":"transferNotesOverview","slot":"patient-chart-summary-dashboard-slot","meta":{"fullWidth":false},"order":6}],"workspaces":[{"name":"triage-workspace","component":"triageWorkspace","title":"Triage Form","canMaximize":true,"type":"clinical-form"},{"name":"patient-registration-workspace","component":"patientRegistrationWorkspace","title":"Patient Registration","canMaximize":true,"type":"registration-form"},{"name":"billing-information-workspace","component":"billingInformationWorkspace","title":"Billing Information Workspace","type":"clinical-form"}],"workspaces2":[{"name":"clinical-workflow-patient-form-entry-workspace","component":"@openmrs/esm-patient-forms-app#exportedPatientFormEntryWorkspace","window":"clinical-workflow-window"},{"name":"patient-transfer-form-entry-workspace","component":"@openmrs/esm-patient-forms-app#exportedPatientFormEntryWorkspace","window":"patient-transfer"},{"name":"visit-notes-form-shadow-workspace","component":"visitNotesFormWorkspace","window":"visit-note-shadow"}],"workspaceWindows2":[{"name":"clinical-workflow-window","group":"clinical-workflow-group","width":"wider","canMaximize":true},{"name":"visit-note-shadow","group":"patient-chart","icon":"visitNoteActionButton","order":3},{"name":"patient-transfer","group":"patient-chart","icon":"patientTransferActionButton","order":4,"width":"wider","canMaximize":true}],"workspaceGroups2":[{"name":"clinical-workflow-group","overlay":true,"persistence":"closable"}],"modals":[{"name":"confirm-transfer-dialog","component":"confirmTransferDialog"},{"name":"patient-transfer-details-modal","component":"patientTransferDetailsModal"}],"version":"5.4.2-pre.34"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.24.0"},"pages":[],"extensions":[{"name":"clinical-workflow-triage-dashboard-link","component":"triageDashboardLink","slot":"homepage-dashboard-slot","order":0,"meta":{"name":"clinical-workflow-triage","slot":"clinical-workflow-triage-dashboard-slot","title":"clinical-workflow-triage"}},{"name":"clinical-workflow-triage-dashboard","component":"triageDashboard","slot":"clinical-workflow-triage-dashboard-slot"},{"name":"ewf-mru-dashboard-link","component":"mruLeftPanelLink","slot":"homepage-dashboard-slot","order":1,"meta":{"name":"mru","title":"MRU","path":"mru","slot":"mru-dashboard-slot"}},{"name":"ewf-mru-dashboard","component":"mruDashboard","slot":"mru-dashboard-slot","online":true,"offline":false},{"name":"patient-scoreboard-link","component":"patientScoreboardLink","slot":"homepage-dashboard-slot","order":1,"meta":{"name":"patient-scoreboard","title":"Patient Scoreboard","path":"patient-scoreboard","slot":"patient-scoreboard-slot"}},{"name":"patient-scoreboard","component":"patientScoreboard","slot":"patient-scoreboard-slot","online":true,"offline":false},{"name":"past-visits-detail-overview-shadow","slot":"patient-chart-encounters-dashboard-slot","component":"pastVisitsDetailOverviewShadow","order":0,"meta":{"title":"Visits","view":"visits"},"online":true,"offline":true},{"name":"queue-table-transfer-column","component":"queueTableTransferColumn","slot":"queue-table-transfer-status-slot"},{"name":"transfer-notes-overview-widget","component":"transferNotesOverview","slot":"patient-chart-summary-dashboard-slot","meta":{"fullWidth":false},"order":6}],"workspaces":[{"name":"triage-workspace","component":"triageWorkspace","title":"Triage Form","canMaximize":true,"type":"clinical-form"},{"name":"patient-registration-workspace","component":"patientRegistrationWorkspace","title":"Patient Registration","canMaximize":true,"type":"registration-form"},{"name":"billing-information-workspace","component":"billingInformationWorkspace","title":"Billing Information Workspace","type":"clinical-form"}],"workspaces2":[{"name":"clinical-workflow-patient-form-entry-workspace","component":"@openmrs/esm-patient-forms-app#exportedPatientFormEntryWorkspace","window":"clinical-workflow-window"},{"name":"patient-transfer-form-entry-workspace","component":"@openmrs/esm-patient-forms-app#exportedPatientFormEntryWorkspace","window":"patient-transfer"},{"name":"visit-notes-form-shadow-workspace","component":"visitNotesFormWorkspace","window":"visit-note-shadow"}],"workspaceWindows2":[{"name":"clinical-workflow-window","group":"clinical-workflow-group","width":"wider","canMaximize":true},{"name":"visit-note-shadow","group":"patient-chart","icon":"visitNoteActionButton","order":3},{"name":"patient-transfer","group":"patient-chart","icon":"patientTransferActionButton","order":4,"width":"wider","canMaximize":true}],"workspaceGroups2":[{"name":"clinical-workflow-group","overlay":true,"persistence":"closable"}],"modals":[{"name":"confirm-transfer-dialog","component":"confirmTransferDialog"},{"name":"patient-transfer-details-modal","component":"patientTransferDetailsModal"}],"version":"5.4.2-pre.35"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@palladium-ethiopia/esm-clinical-workflow-app",
-  "version": "5.4.2-pre.34",
+  "version": "5.4.2-pre.35",
   "description": "Express workflow app for OpenMRS 3",
   "keywords": [
     "openmrs",

package/src/config-schema.ts

@@ -25,6 +25,7 @@ export const configSchema = {
       creditType: '5cd1eb62-e006-4146-bd22-80bc4d5bd2f7',
       creditTypeDetails: 'd824aa96-d2c7-4a52-aa8d-03f60a516083',
       freeType: '7523ecfe-b8f1-4e7f-80a7-1a495b15ace4',
+      paymentAttributesSummary: '3cc0102e-6c1f-41db-af72-4be6aa9eb27a',
     },
   },
   visitTypeUuid: {
@@ -125,6 +126,7 @@ export type ClinicalWorkflowConfig = {
     creditType: string;
     creditTypeDetails: string;
     freeType: string;
+    paymentAttributesSummary: string;
   };
   visitTypeUuid: string;
   identifierSourceUuid: string;

package/src/mru/billing-information/billing-information.resource.ts

@@ -3,59 +3,45 @@ import { z } from 'zod';
 // Create the billing form schema factory with conditional validation based on skip logic
 import type { TFunction } from 'i18next';
 
-export const createBillingFormSchema = (t: TFunction) => {
+export const createBillingFormSchema = (
+  t: TFunction,
+  billingTypes?: Array<{ uuid: string; name?: string; attributeTypes?: Array<{ uuid: string; required?: boolean }> }>,
+) => {
   return z
     .object({
-      billingType: z.enum(['credit', 'free', 'cash']).optional(),
-      creditType: z.string().optional(),
-      name: z.string().optional(),
-      code: z.string().optional(),
-      id: z.string().optional(),
-      expiryDate: z.string().optional(),
-      zone: z.string().optional(),
-      freeType: z.string().optional(),
+      billingTypeUuid: z.string().optional(),
+      creditSubType: z.string().optional(),
+      freeSubType: z.string().optional(),
+      attributes: z.record(z.string(), z.any()).optional(),
     })
     .superRefine((data, ctx) => {
       // Billing type is required on submit
-      if (!data.billingType) {
+      if (!data.billingTypeUuid) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
           message: t('billingTypeRequired', 'Billing type is required'),
-          path: ['billingType'],
+          path: ['billingTypeUuid'],
         });
         return;
       }
 
-      // Credit billing type validation
-      if (data.billingType === 'credit') {
-        // Credit type is required
-        if (!data.creditType || data.creditType.trim() === '') {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: t('creditTypeRequired', 'Credit type is required'),
-            path: ['creditType'],
-          });
-        }
-
-        // If creditType is insurance, require additional fields
-        if (data.creditType === 'insurance') {
-          if (!data.id || data.id.trim() === '') {
-            ctx.addIssue({
-              code: z.ZodIssueCode.custom,
-              message: t('idRequired', 'ID is required'),
-              path: ['id'],
-            });
-          }
-        }
-      }
-
-      // Free billing type validation
-      if (data.billingType === 'free') {
-        if (!data.freeType || data.freeType.trim() === '') {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: t('freeTypeRequired', 'Free type is required'),
-            path: ['freeType'],
+      // Validate required attributes for the selected billing type
+      if (billingTypes && data.billingTypeUuid) {
+        const selectedBillingType = billingTypes.find((bt) => bt.uuid === data.billingTypeUuid);
+        if (selectedBillingType?.attributeTypes) {
+          selectedBillingType.attributeTypes.forEach((attrType) => {
+            if (attrType.required) {
+              const attrValue = data.attributes?.[attrType.uuid];
+              if (!attrValue || (typeof attrValue === 'string' && attrValue.trim() === '')) {
+                ctx.addIssue({
+                  code: z.ZodIssueCode.custom,
+                  message: t('attributeRequired', '{{attributeName}} is required', {
+                    attributeName: attrType.uuid,
+                  }),
+                  path: ['attributes', attrType.uuid],
+                });
+              }
+            }
           });
         }
       }
@@ -98,33 +84,48 @@ export const createBillingInformationVisitAttribute = (
   billingFormData: BillingFormData,
   visitAttributeTypeUuidsMap: {
     paymentMethod: string;
-    creditType: string;
-    creditTypeDetails: string;
-    freeType: string;
+    paymentAttributesSummary?: string;
   },
 ) => {
-  const { billingType, creditType, name, code, id, expiryDate, zone, freeType } = billingFormData;
+  const { billingTypeUuid, attributes } = billingFormData;
 
-  const formObject = {
-    paymentMethod: billingType,
-    creditType: creditType,
-    creditTypeDetails: {
-      name: name,
-      code: code,
-      id: id,
-      expiryDate: expiryDate,
-      zone: zone,
-    },
-    freeType: freeType,
-  };
+  const visitAttributePayload: Array<{ attributeType: { uuid: string } | string; value: string }> = [];
+
+  // Add billing method
+  if (billingTypeUuid && visitAttributeTypeUuidsMap.paymentMethod) {
+    visitAttributePayload.push({
+      attributeType: visitAttributeTypeUuidsMap.paymentMethod,
+      value: billingTypeUuid,
+    });
+  }
+
+  // Save sub attributes (from attributes object) as a stringified object under the paymentAttributesSummary key
+  // Format: {attributeUuid: value}
+  // Only includes sub attributes, not the main paymentMethod attribute
+  if (visitAttributeTypeUuidsMap.paymentAttributesSummary && attributes) {
+    const paymentAttributesObject: Record<string, any> = {};
+
+    // Add sub attributes from the attributes object using their UUIDs as keys
+    Object.entries(attributes).forEach(([attrTypeUuid, value]) => {
+      if (value !== undefined && value !== null && value !== '') {
+        paymentAttributesObject[attrTypeUuid] = value;
+      }
+    });
 
-  const visitAttributePayload = transformFormObjectToVisitAttributes(formObject, visitAttributeTypeUuidsMap);
+    // Only add the summary if there are sub attributes to save
+    if (Object.keys(paymentAttributesObject).length > 0) {
+      visitAttributePayload.push({
+        attributeType: visitAttributeTypeUuidsMap.paymentAttributesSummary,
+        value: JSON.stringify(paymentAttributesObject),
+      });
+    }
+  }
 
   return visitAttributePayload;
 };
 
 export const updateVisitWithBillingInformation = (
-  visitAttributePayload: Array<{ attributeType: string; value: string }>,
+  visitAttributePayload: Array<{ attributeType: { uuid: string } | string; value: string }>,
   visitUuid: string,
 ) => {
   return openmrsFetch(`${restBaseUrl}/visit/${visitUuid}`, {

package/src/mru/billing-information/billing-information.scss

@@ -24,18 +24,35 @@
 
 .billingInformationContainer {
   margin: spacing.$spacing-05;
+  overflow-y: visible;
   height: 100%;
-  overflow-y: auto;
+  border: solid red 1px;
 }
 
+.paymentTypeSwitcher {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  // flex-wrap: wrap;
+  border: none;
+  outline: none;
+  padding: 2px;
+}
+
+// .paymentTypeSwitch {
+//   margin-bottom: spacing.$spacing-03;
+//   border: solid #a6c8ff;
+// }
+
 .creditDetailsContainer {
   display: flex;
   flex-direction: column;
   gap: spacing.$spacing-05;
   margin-top: spacing.$spacing-03;
-  min-height: 45rem;
+  height: auto;
   border: 1px solid colors.$gray-20;
   padding: spacing.$spacing-03;
+  overflow: visible;
 }
 
 .freeDetailsContainer {
@@ -43,9 +60,10 @@
   flex-direction: column;
   gap: spacing.$spacing-05;
   margin-top: spacing.$spacing-03;
-  min-height: 20rem;
+  height: auto;
   border: 1px solid colors.$gray-20;
   padding: spacing.$spacing-03;
+  overflow: visible;
 }
 
 .creditTypeDetailsContainer {

package/src/mru/billing-information/billing-information.workspace.tsx

@@ -1,37 +1,29 @@
-import React, { useEffect, useMemo } from 'react';
-import {
-  Button,
-  ButtonSet,
-  InlineLoading,
-  ContentSwitcher,
-  Dropdown,
-  Switch,
-  TextInput,
-  Form,
-  FormGroup,
-} from '@carbon/react';
+import React, { useEffect } from 'react';
+import { Button, ButtonSet, InlineLoading, ContentSwitcher, Switch, Form } from '@carbon/react';
 import {
   DefaultWorkspaceProps,
   ExtensionSlot,
   usePatient,
-  OpenmrsDatePicker,
   useConfig,
   useVisit,
   showSnackbar,
 } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
-import type { TFunction } from 'i18next';
-
-import { useForm, Controller, Control, FieldErrors, useWatch } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
 
 import {
   type BillingFormData,
-  createBillingFormSchema,
   createBillingInformationVisitAttribute,
   updateVisitWithBillingInformation,
 } from './billing-information.resource';
 import type { ClinicalWorkflowConfig } from '../../config-schema';
+import { usePaymentModes, useCreditCompanies, useBillingForm, useBillingType } from './hooks';
+import {
+  BillingTypeAttributes,
+  CreditSubTypeSelection,
+  FreeSubTypeSelection,
+  CreditSubTypeFields,
+  FreeSubTypeFields,
+} from './components';
 import styles from './billing-information.scss';
 
 type BillingInformationWorkspaceProps = DefaultWorkspaceProps & {
@@ -48,30 +40,30 @@ const BillingInformationWorkspace: React.FC<BillingInformationWorkspaceProps> =
   const { patient, isLoading } = usePatient(patientUuid);
   const { activeVisit, mutate: mutateVisit } = useVisit(patientUuid);
   const { billingVisitAttributeTypes } = useConfig<ClinicalWorkflowConfig>();
-  const billingFormSchema = useMemo(() => createBillingFormSchema(t), [t]);
 
+  // Custom hooks for data fetching
+  const { billingTypes } = usePaymentModes();
+
+  // Form management hook
   const {
     control,
     handleSubmit,
     watch,
     setValue,
     formState: { errors, isDirty },
-  } = useForm<BillingFormData>({
-    resolver: zodResolver(billingFormSchema),
-    mode: 'onTouched',
-    defaultValues: {
-      billingType: undefined,
-      creditType: '',
-      name: '',
-      code: '',
-      id: '',
-      expiryDate: '',
-      zone: '',
-      freeType: '',
-    },
-  });
+  } = useBillingForm(t, billingTypes);
+
+  // Watch form values
+  const billingTypeUuid = watch('billingTypeUuid');
+  const creditSubType = watch('creditSubType');
+  const freeSubType = watch('freeSubType');
+  const attributes = watch('attributes') || {};
+
+  // Billing type logic hook
+  const { selectedBillingType, isCreditType, isFreeType } = useBillingType(billingTypes, billingTypeUuid);
 
-  const billingType = watch('billingType');
+  // Fetch credit companies conditionally
+  const { creditCompanies } = useCreditCompanies(isCreditType && creditSubType === 'creditCompany');
 
   const onSubmit = async (data: BillingFormData) => {
     try {
@@ -101,35 +93,24 @@ const BillingInformationWorkspace: React.FC<BillingInformationWorkspaceProps> =
     }
   };
 
-  const handleBillingTypeChange = (type: 'credit' | 'free' | 'cash') => {
-    // Clear form fields to avoid carrying over values from previous billing type
-    setValue('billingType', type, { shouldDirty: true });
-    setValue('creditType', '', { shouldDirty: false });
-    setValue('name', '', { shouldDirty: false });
-    setValue('code', '', { shouldDirty: false });
-    setValue('id', '', { shouldDirty: false });
-    setValue('expiryDate', '', { shouldDirty: false });
-    setValue('zone', '', { shouldDirty: false });
-    setValue('freeType', '', { shouldDirty: false });
+  const handleBillingTypeChange = (uuid: string) => {
+    // Clear attributes and sub-types when changing billing type
+    setValue('billingTypeUuid', uuid, { shouldDirty: true });
+    setValue('creditSubType', undefined, { shouldDirty: false });
+    setValue('freeSubType', undefined, { shouldDirty: false });
+    setValue('attributes', {}, { shouldDirty: false });
   };
 
   const getSelectedIndex = () => {
-    if (billingType === 'cash') {
-      return 0;
+    if (!billingTypeUuid) {
+      return -1;
     }
-    if (billingType === 'free') {
-      return 1;
-    }
-    if (billingType === 'credit') {
-      return 2;
-    }
-    return -1;
+    return billingTypes.findIndex((bt) => bt.uuid === billingTypeUuid);
   };
 
   const handleContentSwitcherChange = ({ index }: { index: number }) => {
-    const types: ('cash' | 'free' | 'credit')[] = ['cash', 'free', 'credit'];
-    if (index >= 0 && index < types.length) {
-      handleBillingTypeChange(types[index]);
+    if (index >= 0 && index < billingTypes.length) {
+      handleBillingTypeChange(billingTypes[index].uuid);
     }
   };
 
@@ -141,6 +122,8 @@ const BillingInformationWorkspace: React.FC<BillingInformationWorkspaceProps> =
     return <InlineLoading status="active" iconDescription="Loading" description="Loading billing information..." />;
   }
 
+  //
+
   return (
     <>
       {patient && (
@@ -156,14 +139,75 @@ const BillingInformationWorkspace: React.FC<BillingInformationWorkspaceProps> =
       <Form onSubmit={handleSubmit(onSubmit)}>
         <div className={styles.billingInformationContainer}>
           <p className={styles.sectionTitle}>{t('paymentMethods', 'Payment Methods')}</p>
-          <ContentSwitcher onChange={handleContentSwitcherChange} selectedIndex={getSelectedIndex()} size="md">
-            <Switch name="cash" text={t('cash', 'Cash')} />
-            <Switch name="free" text={t('free', 'Free')} />
-            <Switch name="credit" text={t('credit', 'Credit')} />
+
+          <ContentSwitcher
+            className={styles.paymentTypeSwitcher}
+            onChange={handleContentSwitcherChange}
+            selectedIndex={getSelectedIndex()}
+            size="md">
+            {billingTypes?.map((billingType) => (
+              <Switch
+                className={styles.paymentTypeSwitch}
+                key={billingType.uuid}
+                name={billingType.uuid}
+                text={billingType.name}
+              />
+            ))}
           </ContentSwitcher>
 
-          {billingType === 'credit' && <CreditDetails control={control} errors={errors} t={t} />}
-          {billingType === 'free' && <FreeDetails control={control} errors={errors} t={t} />}
+          {/* Credit sub-type selection */}
+          {isCreditType && (
+            <CreditSubTypeSelection
+              control={control}
+              errors={errors}
+              t={t}
+              creditSubType={creditSubType}
+              setValue={setValue}
+            />
+          )}
+
+          {/* Free sub-type selection */}
+          {isFreeType && (
+            <FreeSubTypeSelection
+              control={control}
+              errors={errors}
+              t={t}
+              freeSubType={freeSubType}
+              setValue={setValue}
+            />
+          )}
+
+          {/* Conditional fields based on Credit sub-type */}
+          {isCreditType && creditSubType && (
+            <CreditSubTypeFields
+              control={control}
+              errors={errors}
+              t={t}
+              creditSubType={creditSubType}
+              creditCompanies={creditCompanies}
+              attributes={attributes}
+              setValue={setValue}
+            />
+          )}
+
+          {/* Conditional fields based on Free sub-type */}
+          {isFreeType && freeSubType && <FreeSubTypeFields />}
+
+          {/* Default attribute types for other billing types */}
+          {selectedBillingType &&
+            !isCreditType &&
+            !isFreeType &&
+            selectedBillingType.attributeTypes &&
+            selectedBillingType.attributeTypes.length > 0 && (
+              <BillingTypeAttributes
+                control={control}
+                errors={errors}
+                t={t}
+                attributeTypes={selectedBillingType.attributeTypes}
+                attributes={attributes}
+                setValue={setValue}
+              />
+            )}
         </div>
         <ButtonSet className={styles.buttonSet}>
           <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
@@ -179,193 +223,3 @@ const BillingInformationWorkspace: React.FC<BillingInformationWorkspaceProps> =
 };
 
 export default BillingInformationWorkspace;
-
-type CreditDetailsProps = {
-  control: Control<BillingFormData>;
-  errors: FieldErrors<BillingFormData>;
-  t: TFunction;
-};
-
-const CreditDetails: React.FC<CreditDetailsProps> = ({ control, errors, t }) => {
-  const creditType = useWatch({
-    control,
-    name: 'creditType',
-  });
-
-  const creditTypeOptions = [
-    {
-      id: 'chbi',
-      text: t('chbi', 'CHBI'),
-    },
-    {
-      id: 'shi',
-      text: t('shi', 'SHI'),
-    },
-    {
-      id: 'creditCompanies',
-      text: t('creditCompanies', 'Credit Companies'),
-    },
-    {
-      id: 'insurance',
-      text: t('insurance', 'Insurance'),
-    },
-  ];
-
-  const showCreditCompanyFields = creditType === 'creditCompanies' || creditType === 'insurance';
-
-  return (
-    <FormGroup className={styles.creditDetailsContainer} legendText={t('creditDetails', 'Credit Details')}>
-      <Controller
-        name="creditType"
-        control={control}
-        render={({ field: { onChange, value } }) => (
-          <Dropdown
-            id="credit-type"
-            invalid={!!errors.creditType}
-            invalidText={errors.creditType?.message || 'invalid selection'}
-            itemToString={(item) => item?.text ?? ''}
-            items={creditTypeOptions}
-            label="Credit"
-            titleText="Credit"
-            type="default"
-            selectedItem={creditTypeOptions.find((item) => item.id === value) || null}
-            onChange={({ selectedItem }) => onChange(selectedItem?.id || '')}
-          />
-        )}
-      />
-
-      {showCreditCompanyFields && (
-        <FormGroup
-          legendText={t('creditTypeDetails', 'Credit Type Details')}
-          className={styles.creditTypeDetailsContainer}>
-          <Controller
-            name="id"
-            control={control}
-            render={({ field: { onChange, value } }) => (
-              <TextInput
-                id="credit-id"
-                labelText={t('id', 'ID')}
-                value={value || ''}
-                onChange={(e) => onChange(e.target.value)}
-                placeholder={t('enterId', 'Enter ID')}
-                invalid={!!errors.id}
-                invalidText={errors.id?.message}
-              />
-            )}
-          />
-
-          <Controller
-            name="name"
-            control={control}
-            render={({ field: { onChange, value } }) => (
-              <TextInput
-                id="credit-name"
-                labelText={t('name', 'Name')}
-                value={value || ''}
-                onChange={(e) => onChange(e.target.value)}
-                placeholder={t('enterName', 'Enter name')}
-                invalid={!!errors.name}
-                invalidText={errors.name?.message}
-              />
-            )}
-          />
-
-          <Controller
-            name="code"
-            control={control}
-            render={({ field: { onChange, value } }) => (
-              <TextInput
-                id="credit-code"
-                labelText={t('code', 'Code')}
-                value={value || ''}
-                onChange={(e) => onChange(e.target.value)}
-                placeholder={t('enterCode', 'Enter code')}
-                invalid={!!errors.code}
-                invalidText={errors.code?.message}
-              />
-            )}
-          />
-
-          <Controller
-            name="expiryDate"
-            control={control}
-            render={({ field: { onChange, value } }) => (
-              <OpenmrsDatePicker
-                id="credit-expiry-date"
-                labelText={t('expiryDate', 'Expiry Date')}
-                minDate={new Date()}
-                value={value || ''}
-                onChange={(date) => {
-                  const dateValue = typeof date === 'string' ? date : date.toISOString().split('T')[0];
-                  onChange(dateValue);
-                }}
-              />
-            )}
-          />
-          <Controller
-            name="zone"
-            control={control}
-            render={({ field: { onChange, value } }) => (
-              <TextInput
-                id="credit-zone"
-                labelText={t('zone', 'Zone')}
-                value={value || ''}
-                onChange={(e) => onChange(e.target.value)}
-                placeholder={t('enterZone', 'Enter zone')}
-                invalid={!!errors.zone}
-                invalidText={errors.zone?.message}
-              />
-            )}
-          />
-        </FormGroup>
-      )}
-    </FormGroup>
-  );
-};
-
-type FreeDetailsProps = {
-  control: Control<BillingFormData>;
-  errors: FieldErrors<BillingFormData>;
-  t: TFunction;
-};
-
-const FreeDetails: React.FC<FreeDetailsProps> = ({ control, errors, t }) => {
-  const items = [
-    {
-      id: 'staff',
-      text: t('staff', 'Staff'),
-    },
-    {
-      id: '24Hours',
-      text: t('24Hours', '24 Hours'),
-    },
-    {
-      id: 'exempted',
-      text: t('exempted', 'Exempted'),
-    },
-  ];
-
-  return (
-    <FormGroup className={styles.freeDetailsContainer} legendText={t('freeDetails', 'Free Details')}>
-      <Controller
-        name="freeType"
-        control={control}
-        render={({ field: { onChange, value } }) => (
-          <Dropdown
-            id="free-type"
-            hideLabel={true}
-            invalid={!!errors.freeType}
-            invalidText={errors.freeType?.message || 'invalid selection'}
-            itemToString={(item) => item?.text ?? ''}
-            items={items}
-            label={t('selectOption', 'Select a free type')}
-            titleText={t('selectOption', 'Select a free type')}
-            type="default"
-            selectedItem={items.find((item) => item.id === value) || null}
-            onChange={({ selectedItem }) => onChange(selectedItem?.id || '')}
-          />
-        )}
-      />
-    </FormGroup>
-  );
-};