@kenyaemr/esm-billing-app 5.4.1-pre.2010 → 5.4.1-pre.2018

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":"billingDashboardLink","name":"billing-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"billing","title":"billing","slot":"billing-dashboard-slot"}},{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","slot":"patient-chart-dashboard-slot","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","slot":"patient-chart-dashboard-slot","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":"require-billing-modal","component":"requirePaymentModal"},{"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":"billingOverviewLink","name":"billing-overview-link","order":0,"slot":"billing-dashboard-link-slot"},{"component":"paymentHistoryLink","name":"payment-history-link","slot":"billing-dashboard-link-slot"},{"component":"paymentPointsLink","name":"payment-points-link","slot":"billing-dashboard-link-slot"},{"component":"paymentModesLink","name":"payment-modes-link","slot":"billing-dashboard-link-slot"},{"component":"billManagerLink","name":"bill-manager-link","slot":"billing-dashboard-link-slot"},{"component":"chargeableItemsLink","name":"chargeable-items-link","slot":"billing-dashboard-link-slot"},{"component":"billableExemptionsLink","name":"billable-exemptions-link","slot":"billing-dashboard-link-slot"},{"component":"claimsManagementSideNavGroup","name":"claims-management-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"claims-management","title":"Claims management Overview","slot":"case-management-slot"},"featureFlag":"healthInformationExchange"},{"component":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","order":0,"slot":"claims-management-dashboard-link-slot"},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slot":"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"}],"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":"bill-deposit-workspace","component":"billDepositWorkspace","title":"Bill Deposit 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":"retry-claim-request-modal","component":"retryClaimRequestModal"},{"name":"paid-bill-receipt-print-preview-modal","component":"paidBillReceiptPrintPreviewModal"},{"name":"clock-in-modal","component":"clockIn"},{"name":"create-bill-item-modal","component":"createBillItemModal"}],"version":"5.4.1-pre.2010"}
+{"$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":"billingDashboardLink","name":"billing-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"billing","title":"billing","slot":"billing-dashboard-slot"}},{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","slot":"patient-chart-dashboard-slot","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","slot":"patient-chart-dashboard-slot","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":"require-billing-modal","component":"requirePaymentModal"},{"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":"billingOverviewLink","name":"billing-overview-link","order":0,"slot":"billing-dashboard-link-slot"},{"component":"paymentHistoryLink","name":"payment-history-link","slot":"billing-dashboard-link-slot"},{"component":"paymentPointsLink","name":"payment-points-link","slot":"billing-dashboard-link-slot"},{"component":"paymentModesLink","name":"payment-modes-link","slot":"billing-dashboard-link-slot"},{"component":"billManagerLink","name":"bill-manager-link","slot":"billing-dashboard-link-slot"},{"component":"chargeableItemsLink","name":"chargeable-items-link","slot":"billing-dashboard-link-slot"},{"component":"billableExemptionsLink","name":"billable-exemptions-link","slot":"billing-dashboard-link-slot"},{"component":"claimsManagementSideNavGroup","name":"claims-management-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"claims-management","title":"Claims management Overview","slot":"case-management-slot"},"featureFlag":"healthInformationExchange"},{"component":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","order":0,"slot":"claims-management-dashboard-link-slot"},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slot":"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"}],"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":"bill-deposit-workspace","component":"billDepositWorkspace","title":"Bill Deposit 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":"retry-claim-request-modal","component":"retryClaimRequestModal"},{"name":"paid-bill-receipt-print-preview-modal","component":"paidBillReceiptPrintPreviewModal"},{"name":"clock-in-modal","component":"clockIn"},{"name":"create-bill-item-modal","component":"createBillItemModal"}],"version":"5.4.1-pre.2018"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-billing-app",
-  "version": "5.4.1-pre.2010",
+  "version": "5.4.1-pre.2018",
   "description": "Billing app for KenyaEMR",
   "browser": "dist/kenyaemr-esm-billing-app.js",
   "main": "src/index.ts",

package/src/claims/dashboard/form/claims-explanation-and-justification-form-input.component.tsx

@@ -1,6 +1,6 @@
 import { Column, InlineLoading, InlineNotification, Layer, TextArea } from '@carbon/react';
 import { usePatient } from '@openmrs/esm-framework';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useCallback } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { InterventionsFilter, useInterventions } from '../../../hooks/useInterventions';
@@ -9,50 +9,110 @@ import styles from './claims-form.scss';
 
 type ClaimExplanationAndJusificationInputProps = {
   patientUuid: string;
+  disabled?: boolean;
+  validationEnabled?: boolean;
+  onInteraction?: () => void;
 };
-const ClaimExplanationAndJusificationInput: React.FC<ClaimExplanationAndJusificationInputProps> = ({ patientUuid }) => {
-  const { error: patientError, isLoading: isPatientLoading, patient } = usePatient(patientUuid);
 
-  const form = useFormContext<{
-    claimExplanation: string;
-    claimJustification: string;
-    packages: Array<string>;
-    interventions: Array<string>;
-  }>();
+const ClaimExplanationAndJusificationInput: React.FC<ClaimExplanationAndJusificationInputProps> = ({
+  patientUuid,
+  disabled = false,
+  validationEnabled = false,
+  onInteraction = () => {},
+}) => {
+  const { error: patientError, isLoading: isPatientLoading, patient } = usePatient(patientUuid);
   const { t } = useTranslation();
+  const form = useFormContext();
+  const { setValue, watch, trigger } = form;
+
+  const packages = watch('packages');
+  const interventions = watch('interventions');
+  const currentExplanation = watch('claimExplanation');
+  const currentJustification = watch('claimJustification');
+
   const { isLoading: packagesLoading, error: packageError, packages: shaPackages } = usePackages();
-  const { setValue } = form;
-  const packagesObservable = form.watch('packages');
-  const interventionsObservable = form.watch('interventions');
+
   const filters = useMemo<InterventionsFilter>(
     () => ({
-      package_code: packagesObservable.join(','),
+      package_code: packages?.join(','),
       applicable_gender: patient?.gender === 'male' ? 'MALE' : 'FEMALE',
     }),
-    [packagesObservable, patient],
+    [packages, patient?.gender],
   );
+
   const { error: interventionsError, isLoading: isLoadingInterventions, allInterventions } = useInterventions(filters);
+
   const packagesSelected = useMemo(
     () =>
-      packagesObservable
-        .map((packageCode) => shaPackages.find((pkg) => pkg.uuid === packageCode))
+      packages
+        ?.map((packageCode) => shaPackages.find((pkg) => pkg.uuid === packageCode))
         ?.map((p) => p?.packageName ?? '')
         .filter(Boolean) ?? [],
-    [packagesObservable, shaPackages],
+    [packages, shaPackages],
   );
+
   const interventionSelected = useMemo(
     () =>
-      interventionsObservable.map(
-        (interventionCode) =>
-          allInterventions.find((intervention) => intervention.interventionCode === interventionCode)?.interventionName,
-      ) ?? [],
-    [interventionsObservable, allInterventions],
+      interventions
+        ?.map(
+          (interventionCode) =>
+            allInterventions.find((intervention) => intervention.interventionCode === interventionCode)
+              ?.interventionName,
+        )
+        .filter(Boolean) ?? [],
+    [interventions, allInterventions],
   );
 
+  const hasPackagesAndInterventions = packagesSelected.length > 0 && interventionSelected.length > 0;
+
+  const updateFormFields = useCallback(() => {
+    if (!packagesLoading && !isLoadingInterventions && hasPackagesAndInterventions) {
+      const newExplanation = packagesSelected.join(', ');
+      const newJustification = interventionSelected.join(', ');
+
+      if (newExplanation !== currentExplanation) {
+        setValue('claimExplanation', newExplanation, {
+          shouldValidate: validationEnabled,
+          shouldDirty: true,
+          shouldTouch: false,
+        });
+      }
+
+      if (newJustification !== currentJustification) {
+        setValue('claimJustification', newJustification, {
+          shouldValidate: validationEnabled,
+          shouldDirty: true,
+          shouldTouch: false,
+        });
+      }
+
+      if (validationEnabled) {
+        trigger(['claimExplanation', 'claimJustification']);
+      }
+      onInteraction();
+    }
+  }, [
+    packagesLoading,
+    isLoadingInterventions,
+    hasPackagesAndInterventions,
+    packagesSelected,
+    interventionSelected,
+    currentExplanation,
+    currentJustification,
+    setValue,
+    validationEnabled,
+    trigger,
+    onInteraction,
+  ]);
+
   useEffect(() => {
-    setValue('claimExplanation', packagesSelected.join(', '));
-    setValue('claimJustification', interventionSelected.join(', '));
-  }, [packagesSelected, setValue, interventionSelected]);
+    const timer = setTimeout(updateFormFields, 300);
+    return () => clearTimeout(timer);
+  }, [updateFormFields]);
+
+  const shouldShowError = (fieldName: string) => {
+    return validationEnabled && form.formState.errors[fieldName] && form.formState.touchedFields[fieldName];
+  };
 
   if (packagesLoading || isPatientLoading || isLoadingInterventions) {
     return (
@@ -68,11 +128,13 @@ const ClaimExplanationAndJusificationInput: React.FC<ClaimExplanationAndJusifica
         lowContrast={true}
         statusIconDescription="notification"
         title={t('errorLoadingpackages', 'Error loading packages')}
-        subtitle={packageError?.message ?? packageError?.message ?? interventionsError?.message}
+        subtitle={packageError?.message ?? patientError?.message ?? interventionsError?.message}
       />
     );
   }
 
+  const textAreaDisabled = disabled && !hasPackagesAndInterventions;
+
   return (
     <>
       <Column>
@@ -87,8 +149,13 @@ const ClaimExplanationAndJusificationInput: React.FC<ClaimExplanationAndJusifica
                 rows={3}
                 placeholder="Claim Explanation"
                 id="claimExplanation"
-                invalid={!!error?.message}
+                invalid={shouldShowError('claimExplanation')}
                 invalidText={error?.message}
+                disabled={textAreaDisabled}
+                onChange={(e) => {
+                  field.onChange(e);
+                  onInteraction();
+                }}
               />
             )}
           />
@@ -106,8 +173,13 @@ const ClaimExplanationAndJusificationInput: React.FC<ClaimExplanationAndJusifica
                 rows={3}
                 placeholder="Claim Justification"
                 id="claimJustification"
-                invalid={!!error?.message}
+                invalid={shouldShowError('claimJustification')}
                 invalidText={error?.message}
+                disabled={textAreaDisabled}
+                onChange={(e) => {
+                  field.onChange(e);
+                  onInteraction();
+                }}
               />
             )}
           />
@@ -117,4 +189,4 @@ const ClaimExplanationAndJusificationInput: React.FC<ClaimExplanationAndJusifica
   );
 };
 
-export default ClaimExplanationAndJusificationInput;
+export default React.memo(ClaimExplanationAndJusificationInput);

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

@@ -15,7 +15,7 @@ import {
 } from '@carbon/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { navigate, showSnackbar, useConfig, useSession } from '@openmrs/esm-framework';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
@@ -29,26 +29,39 @@ import useProvider from '../../../hooks/useProvider';
 import { LineItem, MappedBill } from '../../../types';
 import ClaimExplanationAndJusificationInput from './claims-explanation-and-justification-form-input.component';
 import { processClaims, SHAPackagesAndInterventionVisitAttribute, useVisit } from './claims-form.resource';
+
 import styles from './claims-form.scss';
+import debounce from 'lodash-es/debounce';
 
 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().nonempty({ message: 'Claim explanation is required' }),
-  claimJustification: z.string().nonempty({ message: 'Claim justification is required' }),
-  diagnoses: z.array(z.string()).nonempty({ message: 'At least one diagnosis is required' }),
-  visitType: z.string().nonempty({ message: 'Visit type is required' }),
-  facility: z.string().nonempty({ message: 'Facility is required' }),
-  treatmentStart: z.string().nonempty({ message: 'Treatment start date is required' }),
-  treatmentEnd: z.string().nonempty({ message: 'Treatment end date is required' }),
-  packages: z.array(z.string()).nonempty({ message: 'At least one package is required' }),
-  interventions: z.array(z.string()).min(1, {
-    message: 'At least one intervention is required',
-  }),
-  provider: z.string().nonempty({ message: 'provider is provider' }),
+  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' }),
 });
 
 const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
@@ -62,6 +75,7 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
   } = useSession();
   const { providerLoading: providerLoading, provider, error: providerError } = useProvider(providerUuid);
   const { visitAttributeTypes } = useConfig<BillingConfig>();
+
   const packagesAndinterventions = useMemo(() => {
     if (recentVisit) {
       const values = recentVisit.attributes?.find(
@@ -77,9 +91,9 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
 
   const encounterUuid = recentVisit?.encounters[0]?.uuid;
   const visitTypeUuid = recentVisit?.visitType.uuid;
-
   const [loading, setLoading] = useState(false);
-  const { user } = useSession();
+  const [formInitialized, setFormInitialized] = useState(false);
+  const [validationEnabled, setValidationEnabled] = useState(false);
 
   const handleNavigateToBillingOptions = () =>
     navigate({
@@ -87,31 +101,92 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
     });
 
   const form = useForm<z.infer<typeof ClaimsFormSchema>>({
-    mode: 'all',
-    resolver: zodResolver(ClaimsFormSchema),
+    mode: 'onTouched',
+    resolver: zodResolver(validationEnabled ? ClaimsFormSchema : ClaimsFormSchemaBase),
     defaultValues: {
       claimExplanation: '',
       claimJustification: '',
       diagnoses: [],
-      visitType: recentVisit?.visitType?.display || '',
-      facility: `${recentVisit?.location?.display || ''} - ${mflCodeValue || ''}`,
-      treatmentStart: recentVisit?.startDatetime ? formatDate(recentVisit.startDatetime) : '',
-      treatmentEnd: recentVisit?.stopDatetime ? formatDate(recentVisit.stopDatetime) : '',
+      visitType: '',
+      facility: '',
+      treatmentStart: '',
+      treatmentEnd: '',
       packages: [],
       interventions: [],
-      provider: providerUuid,
+      provider: '',
     },
   });
 
   const {
     control,
     handleSubmit,
-    formState: { errors, isValid },
+    formState: { errors, isValid, isDirty, touchedFields },
     setValue,
     reset,
+    trigger,
+    watch,
   } = form;
 
+  const packages = watch('packages');
+  const interventions = watch('interventions');
+  const claimExplanation = watch('claimExplanation');
+  const claimJustification = watch('claimJustification');
+
+  const debouncedValidation = useCallback(
+    debounce(() => {
+      if (formInitialized) {
+        trigger();
+      }
+    }, 500),
+    [formInitialized, trigger],
+  );
+
+  useEffect(() => {
+    debouncedValidation();
+    return () => debouncedValidation.cancel();
+  }, [packages, interventions, debouncedValidation]);
+
+  useEffect(() => {
+    if (!visitLoading && !diagnosisLoading && !providerLoading) {
+      const updates = {
+        diagnoses: diagnoses?.map((d) => d.id) ?? [],
+        visitType: recentVisit?.visitType?.display || '',
+        facility: `${recentVisit?.location?.display || ''} - ${mflCodeValue || ''}`,
+        treatmentStart: recentVisit?.startDatetime ? formatDate(recentVisit.startDatetime) : '',
+        treatmentEnd: recentVisit?.stopDatetime ? formatDate(recentVisit.stopDatetime) : '',
+        packages: packagesAndinterventions?.packages ?? [],
+        interventions: packagesAndinterventions?.interventions ?? [],
+        provider: providerUuid,
+      };
+
+      Object.entries(updates).forEach(([field, value]) => {
+        setValue(field as any, value, { shouldValidate: false, shouldDirty: false, shouldTouch: false });
+      });
+
+      setTimeout(() => {
+        setFormInitialized(true);
+      }, 100);
+    }
+  }, [
+    diagnoses,
+    recentVisit,
+    mflCodeValue,
+    setValue,
+    provider,
+    packagesAndinterventions,
+    visitLoading,
+    diagnosisLoading,
+    providerLoading,
+    providerUuid,
+  ]);
+
   const onSubmit = async (data: z.infer<typeof ClaimsFormSchema>) => {
+    setValidationEnabled(true);
+    const isFormValid = await trigger();
+    if (!isFormValid) {
+      return;
+    }
+
     setLoading(true);
     const providedItems = selectedLineItems.reduce((acc, item) => {
       acc[item.uuid] = {
@@ -127,6 +202,7 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
       };
       return acc;
     }, {});
+
     const payload = {
       providedItems,
       claimExplanation: data.claimExplanation,
@@ -149,6 +225,7 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
       packages: data.packages,
       interventions: data.interventions,
     };
+
     try {
       await processClaims(payload);
       showSnackbar({
@@ -158,18 +235,17 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
         timeoutInMs: 3000,
         isLowContrast: true,
       });
-      reset();
       setTimeout(() => {
         navigate({
-          to: window.getOpenmrsSpaBase() + `home/billing/`,
+          to: window.getOpenmrsSpaBase() + 'home/billing/',
         });
-      }, 2000);
+      }, 1000);
     } catch (err) {
       console.error(err);
       showSnackbar({
         kind: 'error',
         title: t('claimError', 'Claim Error'),
-        subtitle: t('sendClaimError', 'Request Failed, Please try later........'),
+        subtitle: t('sendClaimError', 'Request Failed, Please try later...'),
         timeoutInMs: 2500,
         isLowContrast: true,
       });
@@ -178,16 +254,6 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
     }
   };
 
-  useEffect(() => {
-    setValue('diagnoses', diagnoses?.map((d) => d.id) ?? ([] as any));
-    setValue('visitType', recentVisit?.visitType?.display || '');
-    setValue('facility', `${recentVisit?.location?.display || ''} - ${mflCodeValue || ''}`);
-    setValue('treatmentStart', recentVisit?.startDatetime ? formatDate(recentVisit.startDatetime) : '');
-    setValue('treatmentEnd', recentVisit?.stopDatetime ? formatDate(recentVisit.stopDatetime) : '');
-    setValue('packages', (packagesAndinterventions?.packages ?? []) as any);
-    setValue('interventions', (packagesAndinterventions?.interventions ?? []) as any);
-  }, [diagnoses, recentVisit, mflCodeValue, setValue, provider, packagesAndinterventions]);
-
   if (visitLoading || diagnosisLoading || providerLoading) {
     return (
       <Layer className={styles.loading}>
@@ -207,16 +273,33 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
             visitError?.message ??
             diagnosisError?.message ??
             providerError?.message ??
-            'Error occured while loading claims form'
+            'Error occurred while loading claims form'
           }
           lowContrast
         />
       </Layer>
     );
   }
+
+  const shouldShowError = (fieldName: string) => {
+    return validationEnabled && errors[fieldName] && (touchedFields[fieldName] || formInitialized);
+  };
+
   return (
     <FormProvider {...form}>
       <Form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+        {!selectedLineItems?.length && (
+          <div className={styles.notificationContainer}>
+            <InlineNotification
+              kind="info"
+              title={t('noItemsSelected', 'No items selected')}
+              subtitle={t('pleaseSelectItems', 'Please select line items to raise a claim')}
+              hideCloseButton={true}
+              lowContrast={true}
+              className={styles.notification}
+            />
+          </div>
+        )}
         <Stack gap={4} className={styles.grid}>
           <span className={styles.claimFormTitle}>{t('formTitle', 'Fill in the form details')}</span>
           <Row className={styles.formClaimRow}>
@@ -295,19 +378,23 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
           <Column>
             <Layer className={styles.input}>
               <Controller
-                control={form.control}
+                control={control}
                 name="diagnoses"
                 render={({ field }) => (
                   <MultiSelect
                     ref={field.ref}
-                    invalid={form.formState.errors[field.name]?.message}
-                    invalidText={form.formState.errors[field.name]?.message}
+                    invalid={shouldShowError('diagnoses')}
+                    invalidText={errors.diagnoses?.message}
                     id="diagnoses"
                     titleText={t('finalDiagnosis', 'Final Diagnosis')}
                     selectedItems={field.value}
                     label="Choose option"
                     items={diagnoses.map((r) => r.id)}
                     itemToString={(item) => diagnoses.find((r) => r.id === item)?.text ?? ''}
+                    onChange={(e) => {
+                      field.onChange(e.selectedItems);
+                      setValidationEnabled(true);
+                    }}
                   />
                 )}
               />
@@ -322,14 +409,15 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
                   render={({ field }) => (
                     <Dropdown
                       ref={field.ref}
-                      invalid={form.formState.errors[field.name]?.message}
-                      invalidText={form.formState.errors[field.name]?.message}
+                      invalid={shouldShowError('provider')}
+                      invalidText={errors.provider?.message}
                       id="provider"
                       titleText={t('provider', 'Provider')}
                       onChange={(e) => {
                         field.onChange(e.selectedItem);
+                        setValidationEnabled(true);
                       }}
-                      initialSelectedItem={field.value}
+                      initialSelectedItem={provider.uuid}
                       label="Choose option"
                       items={[provider].map((r) => r.uuid)}
                       itemToString={(item) =>
@@ -345,16 +433,31 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
               </Layer>
             </Column>
           </Row>
-          <ClaimExplanationAndJusificationInput patientUuid={patientUuid} />
+          <ClaimExplanationAndJusificationInput
+            patientUuid={patientUuid}
+            disabled={!packages?.length || !interventions?.length}
+            validationEnabled={validationEnabled}
+            onInteraction={() => setValidationEnabled(true)}
+          />
           <ButtonSet className={styles.buttonSet}>
             <Button className={styles.button} kind="secondary" onClick={handleNavigateToBillingOptions}>
               {t('discardClaim', 'Discard Claim')}
             </Button>
-            <Button className={styles.button} kind="primary" type="submit" disabled={loading}>
+            <Button
+              className={styles.button}
+              kind="primary"
+              type="submit"
+              onClick={() => setValidationEnabled(true)}
+              disabled={
+                loading || !isValid || !packages?.length || !interventions?.length || !selectedLineItems?.length
+              }
+              tooltipPosition="top"
+              tooltipAlignment="center"
+              renderIcon={loading ? InlineLoading : undefined}>
               {loading ? (
                 <InlineLoading description={t('processing', 'Processing...')} />
               ) : (
-                t('processClaim', 'Process Claim')
+                <>{t('processClaim', 'Process Claim')}</>
               )}
             </Button>
           </ButtonSet>

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

@@ -18,7 +18,9 @@
     color: colors.$gray-100;
   }
 }
-
+.notificationContainer {
+  margin: layout.$spacing-03;
+}
 .form {
   width: 100%;
   display: flex;

package/translations/en.json

@@ -173,6 +173,7 @@
   "noBillsFoundDescription": "No bills found for this patient",
   "noCashPoints": "No Cash Points",
   "noCashPointsConfigured": "There are no cash points configured for this location",
+  "noItemsSelected": "No items selected",
   "noMatchingBillsToDisplay": "No matching bills to display",
   "noMatchingItemsToDisplay": "No matching items to display",
   "noPaymentModes": "No payment modes found",
@@ -211,6 +212,7 @@
   "payments": "Payments",
   "paymentType": "Payment Type",
   "Phone Number": "Phone Number",
+  "pleaseSelectItems": "Please select line items to raise a claim",
   "policyNumber": "Policy number",
   "preathsRequests": "Preauth Requests",
   "preauthRequest": "Preauth requests",