@kenyaemr/esm-billing-app 5.4.2-pre.2557 → 5.4.2-pre.2561

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[{"component":"billableServicesHome","route":"billable-services"},{"component":"requirePaymentModal","routeRegex":"^patient/.+/chart","online":true,"offline":false}],"extensions":[{"component":"accountingDashboardLink","name":"accounting-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"accounting","slot":"accounting-dashboard-slot","title":"Accounting"}},{"name":"billing-dashboard","component":"billingDashboard","slot":"accounting-dashboard-slot"},{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","meta":{"name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot","path":"insurance-benefits","columns":1,"columnSpan":1},"featureFlag":"healthInformationExchange"},{"component":"benefitsPackage","name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot"},{"component":"root","name":"billing-dashboard-root","slot":"billing-dashboard-slot"},{"component":"benefitsEligibilyRequestForm","name":"benefits-eligibility-request-form"},{"component":"benefitsPreAuthForm","name":"benefits-pre-auth-form"},{"name":"billing-patient-summary","component":"billingPatientSummary","slot":"patient-chart-billing-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"billing-summary-dashboard-link","component":"billingSummaryDashboardLink","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-billing-dashboard-slot","path":"Billing","layoutMode":"anchored"}},{"name":"billing-check-in-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm"},{"name":"patient-banner-billing-tags","component":"visitAttributeTags","slot":"patient-banner-tags-slot","order":2},{"name":"initiate-payment-modal","component":"initiatePaymentDialog"},{"name":"delete-billableservice-modal","component":"deleteBillableServiceModal"},{"name":"refund-bill-modal","component":"refundBillModal"},{"name":"delete-bill-modal","component":"deleteBillModal"},{"name":"lab-order-billable-item","component":"labOrder","slot":"top-of-lab-order-form-slot"},{"name":"procedure-order-billable-item","component":"procedureOrder","slot":"top-of-procedure-order-form-slot"},{"name":"imaging-order-billable-item","component":"imagingOrder","slot":"top-of-imaging-order-form-slot"},{"name":"price-info-order","component":"priceInfoOrder"},{"name":"drug-order-billable-item","component":"drugOrder","slot":"medication-info-slot"},{"name":"order-action-button","component":"orderActionButton","slots":["prescription-action-button-slot","imaging-orders-action","procedure-orders-action","tests-ordered-actions-slot"],"order":0},{"component":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","slots":["claims-management-dashboard-link-slot"]},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slots":["claims-management-dashboard-link-slot"]},{"component":"claimsOverview","name":"claims-overview-dashboard-link","slot":"claims-management-overview-slot"},{"component":"waiveBillActionButton","name":"waive-bill-action-button","slot":"bill-actions-slot"},{"component":"deleteBillActionButton","name":"delete-bill-action-button","slot":"bill-actions-slot"},{"component":"refundLineItem","name":"refund-line-item","slot":"bill-actions-overflow-menu-slot"},{"name":"edit-line-item","component":"editLineItem","slot":"bill-actions-overflow-menu-slot"},{"name":"cancel-line-item","component":"cancelLineItem","slot":"bill-actions-overflow-menu-slot"},{"name":"patient-info-sha-status","component":"patientBannerShaStatus","slot":"patient-banner-tags-slot"}],"workspaces":[{"name":"create-bill-workspace","component":"createBillWorkspace","title":"Create Bill Workspace","type":"other-form"},{"name":"waive-bill-form","component":"waiveBillForm","title":"Waive Bill Form","type":"other-form"},{"name":"edit-bill-form","component":"editBillForm","title":"Edit Bill Form","type":"other-form"},{"name":"billable-service-form","component":"addServiceForm","title":"Create Charge Item Form","type":"other-form"},{"name":"commodity-form","component":"addCommodityForm","title":"Create Charge Item Form","type":"other-form"},{"name":"billing-form","component":"billingForm","title":"Billing Form","type":"other-form","width":"extra-wide"},{"name":"payment-mode-workspace","component":"paymentModeWorkspace","title":"Payment Mode Workspace","type":"other-form"},{"name":"cancel-bill-workspace","component":"cancelBillWorkspace","title":"Cancel Bill Workspace","type":"other-form"},{"name":"add-deposit-workspace","component":"addDepositWorkspace","title":"Add Deposit","type":"other-form"},{"name":"deposit-transaction-workspace","component":"depositTransactionWorkspace","title":"Deposit Transaction","type":"other-form"},{"name":"payment-workspace","component":"paymentWorkspace","title":"Payment Workspace","type":"other-form"}],"modals":[{"name":"create-payment-point","component":"createPaymentPoint"},{"name":"clock-out-modal","component":"clockOut"},{"name":"bulk-import-billable-services-modal","component":"bulkImportBillableServicesModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"manage-claim-request-modal","component":"manageClaimRequestModal"},{"name":"clock-in-modal","component":"clockIn"},{"name":"create-bill-item-modal","component":"createBillItemModal"},{"name":"delete-deposit-modal","component":"deleteDepositModal"},{"name":"reverse-transaction-modal","component":"reverseTransactionModal"},{"name":"print-preview-modal","component":"printPreviewModal"},{"name":"bill-action-modal","component":"billActionModal"},{"name":"require-billing-modal","component":"requirePaymentModal"}],"version":"5.4.2-pre.2557"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[{"component":"billableServicesHome","route":"billable-services"},{"component":"requirePaymentModal","routeRegex":"^patient/.+/chart","online":true,"offline":false}],"extensions":[{"component":"accountingDashboardLink","name":"accounting-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"accounting","slot":"accounting-dashboard-slot","title":"Accounting"}},{"name":"billing-dashboard","component":"billingDashboard","slot":"accounting-dashboard-slot"},{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","meta":{"name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot","path":"insurance-benefits","columns":1,"columnSpan":1},"featureFlag":"healthInformationExchange"},{"component":"benefitsPackage","name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot"},{"component":"root","name":"billing-dashboard-root","slot":"billing-dashboard-slot"},{"component":"benefitsEligibilyRequestForm","name":"benefits-eligibility-request-form"},{"component":"benefitsPreAuthForm","name":"benefits-pre-auth-form"},{"name":"billing-patient-summary","component":"billingPatientSummary","slot":"patient-chart-billing-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"billing-summary-dashboard-link","component":"billingSummaryDashboardLink","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-billing-dashboard-slot","path":"Billing","layoutMode":"anchored"}},{"name":"billing-check-in-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm"},{"name":"patient-banner-billing-tags","component":"visitAttributeTags","slot":"patient-banner-tags-slot","order":2},{"name":"initiate-payment-modal","component":"initiatePaymentDialog"},{"name":"delete-billableservice-modal","component":"deleteBillableServiceModal"},{"name":"refund-bill-modal","component":"refundBillModal"},{"name":"delete-bill-modal","component":"deleteBillModal"},{"name":"lab-order-billable-item","component":"labOrder","slot":"top-of-lab-order-form-slot"},{"name":"procedure-order-billable-item","component":"procedureOrder","slot":"top-of-procedure-order-form-slot"},{"name":"imaging-order-billable-item","component":"imagingOrder","slot":"top-of-imaging-order-form-slot"},{"name":"price-info-order","component":"priceInfoOrder"},{"name":"drug-order-billable-item","component":"drugOrder","slot":"medication-info-slot"},{"name":"order-action-button","component":"orderActionButton","slots":["prescription-action-button-slot","imaging-orders-action","procedure-orders-action","tests-ordered-actions-slot"],"order":0},{"component":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","slots":["claims-management-dashboard-link-slot"]},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slots":["claims-management-dashboard-link-slot"]},{"component":"claimsOverview","name":"claims-overview-dashboard-link","slot":"claims-management-overview-slot"},{"component":"waiveBillActionButton","name":"waive-bill-action-button","slot":"bill-actions-slot"},{"component":"deleteBillActionButton","name":"delete-bill-action-button","slot":"bill-actions-slot"},{"component":"refundLineItem","name":"refund-line-item","slot":"bill-actions-overflow-menu-slot"},{"name":"edit-line-item","component":"editLineItem","slot":"bill-actions-overflow-menu-slot"},{"name":"cancel-line-item","component":"cancelLineItem","slot":"bill-actions-overflow-menu-slot"},{"name":"patient-info-sha-status","component":"patientBannerShaStatus","slot":"patient-banner-tags-slot"}],"workspaces":[{"name":"create-bill-workspace","component":"createBillWorkspace","title":"Create Bill Workspace","type":"other-form"},{"name":"waive-bill-form","component":"waiveBillForm","title":"Waive Bill Form","type":"other-form"},{"name":"edit-bill-form","component":"editBillForm","title":"Edit Bill Form","type":"other-form"},{"name":"billable-service-form","component":"addServiceForm","title":"Create Charge Item Form","type":"other-form"},{"name":"commodity-form","component":"addCommodityForm","title":"Create Charge Item Form","type":"other-form"},{"name":"billing-form","component":"billingForm","title":"Billing Form","type":"other-form","width":"extra-wide"},{"name":"payment-mode-workspace","component":"paymentModeWorkspace","title":"Payment Mode Workspace","type":"other-form"},{"name":"cancel-bill-workspace","component":"cancelBillWorkspace","title":"Cancel Bill Workspace","type":"other-form"},{"name":"add-deposit-workspace","component":"addDepositWorkspace","title":"Add Deposit","type":"other-form"},{"name":"deposit-transaction-workspace","component":"depositTransactionWorkspace","title":"Deposit Transaction","type":"other-form"},{"name":"payment-workspace","component":"paymentWorkspace","title":"Payment Workspace","type":"other-form"}],"modals":[{"name":"create-payment-point","component":"createPaymentPoint"},{"name":"clock-out-modal","component":"clockOut"},{"name":"bulk-import-billable-services-modal","component":"bulkImportBillableServicesModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"manage-claim-request-modal","component":"manageClaimRequestModal"},{"name":"clock-in-modal","component":"clockIn"},{"name":"create-bill-item-modal","component":"createBillItemModal"},{"name":"delete-deposit-modal","component":"deleteDepositModal"},{"name":"reverse-transaction-modal","component":"reverseTransactionModal"},{"name":"print-preview-modal","component":"printPreviewModal"},{"name":"bill-action-modal","component":"billActionModal"},{"name":"require-billing-modal","component":"requirePaymentModal"}],"version":"5.4.2-pre.2561"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-billing-app",
-  "version": "5.4.2-pre.2557",
+  "version": "5.4.2-pre.2561",
   "description": "Billing app for KenyaEMR",
   "keywords": [
     "openmrs"

package/src/claims/dashboard/form/claims-form.component.tsx

@@ -2,6 +2,7 @@ import {
   Button,
   ButtonSet,
   Column,
+  ComboBox,
   Form,
   InlineLoading,
   InlineNotification,
@@ -11,11 +12,10 @@ import {
   Stack,
   TextInput,
   TextInputSkeleton,
-  ComboBox,
 } from '@carbon/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { navigate, showModal, showSnackbar, toOmrsIsoString, useConfig, useSession } from '@openmrs/esm-framework';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
@@ -25,48 +25,23 @@ import { BillingConfig } from '../../../config-schema';
 import { useSystemSetting } from '../../../hooks/getMflCode';
 import usePatientDiagnosis from '../../../hooks/usePatientDiagnosis';
 import useProvider from '../../../hooks/useProvider';
+import useProviderList from '../../../hooks/useProviderList';
 import { ClaimSummary, LineItem, MappedBill, OTPVerificationModalOptions } from '../../../types';
 import ClaimExplanationAndJusificationInput from './claims-explanation-and-justification-form-input.component';
-import { processClaims, SHAPackagesAndInterventionVisitAttribute, useVisit } from './claims-form.resource';
-import useProviderList from '../../../hooks/useProviderList';
+import { ClaimsFormSchema, ClaimsFormSchemaBase, processClaims, useVisit } from './claims-form.resource';
 
-import styles from './claims-form.scss';
 import debounce from 'lodash-es/debounce';
-import { formatDateTime } from '../../utils';
 import { otpManager } from '../../../hooks/useOTP';
 import { usePhoneNumberAttribute } from '../../../hooks/usePhoneNumber';
+import { formatDateTime } from '../../utils';
+import styles from './claims-form.scss';
+import ClaimsSupportingDocumentsInput from './claims-supporting-documents-inputs.form';
 
 type ClaimsFormProps = {
   bill: MappedBill;
   selectedLineItems: LineItem[];
 };
 
-const ClaimsFormSchemaBase = z.object({
-  claimExplanation: z.string(),
-  claimJustification: z.string(),
-  diagnoses: z.array(z.string()),
-  visitType: z.string(),
-  facility: z.string(),
-  treatmentStart: z.string(),
-  treatmentEnd: z.string(),
-  packages: z.array(z.string()),
-  interventions: z.array(z.string()),
-  provider: z.string(),
-});
-
-const ClaimsFormSchema = z.object({
-  claimExplanation: z.string().min(1, { message: 'Claim explanation is required' }),
-  claimJustification: z.string().min(1, { message: 'Claim justification is required' }),
-  diagnoses: z.array(z.string()).min(1, { message: 'At least one diagnosis is required' }),
-  visitType: z.string().min(1, { message: 'Visit type is required' }),
-  facility: z.string().min(1, { message: 'Facility is required' }),
-  treatmentStart: z.string().min(1, { message: 'Treatment start date is required' }),
-  treatmentEnd: z.string().min(1, { message: 'Treatment end date is required' }),
-  packages: z.array(z.string()).min(1, { message: 'At least one package is required' }),
-  interventions: z.array(z.string()).min(1, { message: 'At least one intervention is required' }),
-  provider: z.string().min(1, { message: 'Provider is required' }),
-});
-
 enum OTPState {
   NOT_STARTED = 'not_started',
   REQUESTED = 'requested',
@@ -302,6 +277,7 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
       billNumber: billUuid,
       packages: data.packages,
       interventions: data.interventions,
+      supportingDocuments: data.supportingDocuments ?? [],
     };
 
     try {
@@ -640,7 +616,7 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
             validationEnabled={validationEnabled}
             onInteraction={() => setValidationEnabled(true)}
           />
-
+          <ClaimsSupportingDocumentsInput patientUuid={patientUuid} />
           <ButtonSet className={styles.buttonSet}>
             <Button className={styles.button} kind="secondary" onClick={handleDiscardClaim}>
               {t('discardClaim', 'Discard Claim')}

package/src/claims/dashboard/form/claims-form.resource.ts

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import useSWR from 'swr';
 import useSWRImmutable from 'swr/immutable';
 import { mockInterventions, mockPackages } from './claims-form.mocks';
+import z from 'zod';
 
 interface Provider {
   uuid: string;
@@ -97,3 +98,64 @@ export const updateClaimStatus = (responseUUID: string) => {
     method: 'GET',
   });
 };
+
+export const ClaimsFormSchemaBase = z.object({
+  claimExplanation: z.string(),
+  claimJustification: z.string(),
+  diagnoses: z.array(z.string()),
+  visitType: z.string(),
+  facility: z.string(),
+  treatmentStart: z.string(),
+  treatmentEnd: z.string(),
+  packages: z.array(z.string()),
+  interventions: z.array(z.string()),
+  provider: z.string(),
+});
+
+export const ClaimsFormSchema = z.object({
+  claimExplanation: z.string().min(1, { message: 'Claim explanation is required' }),
+  claimJustification: z.string().min(1, { message: 'Claim justification is required' }),
+  diagnoses: z.array(z.string()).min(1, { message: 'At least one diagnosis is required' }),
+  visitType: z.string().min(1, { message: 'Visit type is required' }),
+  facility: z.string().min(1, { message: 'Facility is required' }),
+  treatmentStart: z.string().min(1, { message: 'Treatment start date is required' }),
+  treatmentEnd: z.string().min(1, { message: 'Treatment end date is required' }),
+  packages: z.array(z.string()).min(1, { message: 'At least one package is required' }),
+  interventions: z.array(z.string()).min(1, { message: 'At least one intervention is required' }),
+  provider: z.string().min(1, { message: 'Provider is required' }),
+  supportingDocuments: z
+    .object({
+      name: z.string(),
+      type: z.string(),
+      size: z.number(),
+      base64: z.string(),
+      intervention: z.string(),
+      purpose: z.enum([
+        'CLAIM_FORM',
+        'PREAUTH_FORM',
+        'DISCHARGE_SUMMARY',
+        'PRESCRIPTION',
+        'LAB_ORDER',
+        'INVOICE',
+        'BIO_DETAILS',
+        'IMAGING_ORDER',
+        'OTHER',
+        'FINAL_BILL',
+        'LAB_RESULTS',
+        'DEATH_NOTICE',
+        'THEATRE_NOTES',
+        'BIRTH_NOTIFICATION',
+      ]),
+      uploadedAt: z.date({ coerce: true }),
+    })
+    .array(),
+});
+
+export function fileToBase64(file: File) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = (error) => reject(error);
+  });
+}

package/src/claims/dashboard/form/claims-form.scss

@@ -153,3 +153,9 @@
   padding: layout.$spacing-05;
   gap: layout.$spacing-05;
 }
+.doc{
+  border: 1px solid colors.$gray-40;
+  padding: layout.$spacing-03;
+  margin: layout.$spacing-03 0 layout.$spacing-03 0;
+  position: relative;
+}

package/src/claims/dashboard/form/claims-supporting-documents-inputs.form.tsx

@@ -0,0 +1,183 @@
+import { Button, Dropdown, FileUploader, InlineLoading, InlineNotification, Tag } from '@carbon/react';
+import { TrashCan } from '@carbon/react/icons';
+import { showSnackbar, usePatient } from '@openmrs/esm-framework';
+import React, { FC } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import z from 'zod';
+import { ClaimsFormSchema, fileToBase64 } from './claims-form.resource';
+import styles from './claims-form.scss';
+import { InterventionsFilter, useInterventions } from '../../../hooks/useInterventions';
+const ClaimsSupportingDocumentsInput: FC<{ patientUuid: string }> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const form = useFormContext<z.infer<typeof ClaimsFormSchema>>();
+  const { error: patientError, isLoading: isPatientLoading, patient } = usePatient(patientUuid);
+  const categories = form.watch('packages') ?? [];
+  const filters: InterventionsFilter = {
+    package_code: categories.join(','),
+    applicable_gender: patient?.gender === 'male' ? 'MALE' : 'FEMALE',
+  };
+  const { error, interventions, isLoading } = useInterventions(filters);
+
+  const supportDocs = form.watch('supportingDocuments') ?? [];
+  const selectedInterventionsObservable = form.watch('interventions') ?? [];
+
+  if (isLoading || isPatientLoading) {
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription="Loading"
+        description={t('loadingInterventions', 'Loading interventions') + '...'}
+      />
+    );
+  }
+
+  if (error || patientError) {
+    return (
+      <InlineNotification
+        aria-label="closes notification"
+        kind="error"
+        lowContrast={true}
+        statusIconDescription="notification"
+        title={t('failure', 'Error loading interventions')}
+        subtitle={error?.message ?? patientError?.message}
+      />
+    );
+  }
+
+  return (
+    <div>
+      {supportDocs?.map((doc, i) => (
+        <div key={i} className={styles.doc}>
+          <Button
+            hasIconOnly
+            renderIcon={TrashCan}
+            kind="danger--ghost"
+            onClick={() =>
+              form.setValue(
+                'supportingDocuments',
+                supportDocs.filter((_, ind) => ind != i),
+              )
+            }
+          />
+          <Controller
+            control={form.control}
+            name={`supportingDocuments.${i}.base64`}
+            render={({ field, fieldState }) => (
+              <div className="cds--file__container">
+                <FileUploader
+                  accept={['.jpg', '.png']}
+                  buttonKind="tertiary"
+                  buttonLabel={t('select', 'Select')}
+                  filenameStatus="edit"
+                  labelDescription={t(
+                    'supportDocsInstruction',
+                    'Max file size is 1 MB. Only .jpg and .png files are supported.',
+                  )}
+                  labelTitle={t('uploadSupportFiles', 'Upload support files')}
+                  name=""
+                  onChange={async ({
+                    target: {
+                      files: [file],
+                    },
+                  }) => {
+                    if (file instanceof File) {
+                      const oneMBInBytes = 1024 * 1024; // 1MB = 1024 KB * 1024 B/KB
+                      if (file.size > oneMBInBytes) {
+                        showSnackbar({
+                          title: t('error', 'Error'),
+                          kind: 'error',
+                          subtitle: t('fileToLargeError', 'File size to large exceeding 1MB'),
+                        });
+                        return;
+                      }
+                      const base64 = await fileToBase64(file);
+                      field.onChange(base64);
+                      form.setValue(`supportingDocuments.${i}.size`, file.size);
+                      form.setValue(`supportingDocuments.${i}.name`, file.name);
+                      form.setValue(`supportingDocuments.${i}.type`, file.type);
+                      form.setValue(`supportingDocuments.${i}.uploadedAt`, new Date());
+                    }
+                  }}
+                  onClick={() => {}}
+                  onDelete={() => {
+                    form.setValue(
+                      'supportingDocuments',
+                      supportDocs.filter((_, ind) => ind != i),
+                    );
+                  }}
+                  size="md"
+                />
+                {doc.size && <Tag>{(doc.size / 1024).toFixed(2)} KB</Tag>}
+              </div>
+            )}
+          />
+          <Controller
+            control={form.control}
+            name={`supportingDocuments.${i}.intervention`}
+            render={({ field, fieldState }) => (
+              <Dropdown
+                {...field}
+                invalid={Boolean(fieldState?.error?.message)}
+                invalidText={fieldState?.error?.message}
+                id={'document-intervention'}
+                selectedItem={field.value}
+                onChange={({ selectedItem }) => field.onChange(selectedItem)}
+                items={selectedInterventionsObservable}
+                itemToString={(item) => interventions.find((i) => i.interventionCode === item)?.interventionName ?? ''}
+                label={t('intervention', 'Intervention')}
+                titleText={t('intervention', 'Intervention')}
+              />
+            )}
+          />
+          <Controller
+            control={form.control}
+            name={`supportingDocuments.${i}.purpose`}
+            render={({ field, fieldState }) => (
+              <Dropdown
+                invalid={Boolean(fieldState?.error?.message)}
+                invalidText={fieldState?.error?.message}
+                id={'document-purpose'}
+                {...field}
+                selectedItem={field.value}
+                onChange={({ selectedItem }) => field.onChange(selectedItem)}
+                items={[
+                  'CLAIM_FORM',
+                  'PREAUTH_FORM',
+                  'DISCHARGE_SUMMARY',
+                  'PRESCRIPTION',
+                  'LAB_ORDER',
+                  'INVOICE',
+                  'BIO_DETAILS',
+                  'IMAGING_ORDER',
+                  'OTHER',
+                  'FINAL_BILL',
+                  'LAB_RESULTS',
+                  'DEATH_NOTICE',
+                  'THEATRE_NOTES',
+                  'BIRTH_NOTIFICATION',
+                ]}
+                label={t('purpose', 'Purpose')}
+                titleText={t('purpose', 'Purpose')}
+                itemToString={(item) => item.toLowerCase().replace('_', ' ')}
+              />
+            )}
+          />
+        </div>
+      ))}
+      <Button
+        disabled={supportDocs.length >= 4}
+        kind="tertiary"
+        onClick={async () => {
+          const valid = await form.trigger(`supportingDocuments`);
+          if (!supportDocs?.length || valid) {
+            form.setValue('supportingDocuments', [...supportDocs, {}]);
+          }
+        }}>
+        {t('addSupportDocs', 'Add support docs')}
+      </Button>
+    </div>
+  );
+};
+
+export default ClaimsSupportingDocumentsInput;