Using mock data for claims preauth and filtering interventions with patient gender

packages/esm-billing-app/src/benefits-package/benefits-package.mock.ts

@@ -4,7 +4,7 @@ import {
   Diagnosis,
   Package,
   PatientBenefit,
-  SHAIntervension,
+  SHAIntervention,
   shifIdentifiersResponse,
 } from '../types';
 
@@ -52,10 +52,10 @@ export const packages = [
   },
 ] as Array<Package>;
 
-export const intervensions = patientBenefits.map(({ interventionCode, interventionName }) => ({
+export const interventions = patientBenefits.map(({ interventionCode, interventionName }) => ({
   interventionCode,
   interventionName,
-})) as Array<SHAIntervension>;
+})) as Array<SHAIntervention>;
 
 export const coverageEligibilityResponse = [
   {

packages/esm-billing-app/src/benefits-package/forms/benefit-pre-auth-form.workspace.tsx

@@ -28,7 +28,7 @@ import useProvider from '../../hooks/useProvider';
 import { PatientBenefit } from '../../types';
 import { preAuthenticateBenefit, preauthSchema } from '../benefits-package.resources';
 import styles from './benefits-pre-auth-form.scss';
-import PackageIntervensions from './package-intervensions.component';
+import PackageInterventions from './package-interventions.component';
 import { ErrorState } from '@openmrs/esm-patient-common-lib';
 
 type BenefitsPreAuth = z.infer<typeof preauthSchema>;
@@ -240,8 +240,9 @@ const BenefitPreAuthForm: React.FC<BenefitPreAuthFormProps> = ({ closeWorkspace,
           </Column>
           {selectedPackageObservable && (
             <Column>
-              <PackageIntervensions
+              <PackageInterventions
                 category={packages.find((package_) => package_.uuid === selectedPackageObservable)?.packageCode ?? ''}
+                patientUuid={patientUuid}
               />
             </Column>
           )}
@@ -255,7 +256,7 @@ const BenefitPreAuthForm: React.FC<BenefitPreAuthFormProps> = ({ closeWorkspace,
                   invalid={form.formState.errors[field.name]?.message}
                   invalidText={form.formState.errors[field.name]?.message}
                   id="diagnoses"
-                  titleText={t('diagnosis', 'Diagnosis')}
+                  titleText={t('finalDiagnosis', 'Final Diagnosis')}
                   selectedItems={field.value}
                   label="Choose option"
                   items={diagnoses.map((r) => r.id)}
@@ -279,7 +280,7 @@ const BenefitPreAuthForm: React.FC<BenefitPreAuthFormProps> = ({ closeWorkspace,
           <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
             {t('discard', 'Discard')}
           </Button>
-          <Button className={styles.button} kind="primary" type="submit">
+          <Button className={styles.button} kind="primary" type="submit" disabled={isSubmitting}>
             {isSubmitting ? (
               <>
                 <Loading className={styles.button_spinner} withOverlay={false} small /> {t('submitting', 'Submitting')}

packages/esm-billing-app/src/benefits-package/forms/package-intervensions.component.tsx → packages/esm-billing-app/src/benefits-package/forms/package-interventions.component.tsx

@@ -1,37 +1,57 @@
 import { InlineLoading, InlineNotification, MultiSelect } from '@carbon/react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { useInterventions } from '../../hooks/useInterventions';
+import { InterventionsFilter, toQueryParams, useInterventions } from '../../hooks/useInterventions';
 import { eligibilityRequestShema } from '../benefits-package.resources';
+import { usePatient } from '@openmrs/esm-framework';
 
 type EligibilityRequest = z.infer<typeof eligibilityRequestShema>;
 
-type PackageIntervensionsProps = {
+type PackageInterventionsProps = {
   category: string;
+  patientUuid: string;
 };
-const PackageIntervensions: React.FC<PackageIntervensionsProps> = ({ category }) => {
-  const { error, interventions, isLoading } = useInterventions(category);
+const PackageInterventions: React.FC<PackageInterventionsProps> = ({ category, patientUuid }) => {
+  const [filters, setFilters] = useState<InterventionsFilter>({ package_code: category });
+  const { error: patientError, isLoading: isPatientLoading, patient } = usePatient(patientUuid);
+  const { error, interventions, isLoading } = useInterventions(filters);
+
   const form = useFormContext<EligibilityRequest>();
   const { t } = useTranslation();
 
+  useEffect(() => {
+    setFilters((state) => ({
+      ...state,
+      package_code: category,
+      applicable_gender: patient?.gender === 'male' ? 'MALE' : patient?.gender === 'female' ? 'FEMALE' : undefined,
+    }));
+  }, [category, patient]);
+
   useEffect(() => {
     form.setValue('interventions', []);
   }, [category]);
 
-  if (isLoading) {
-    return <InlineLoading status="active" iconDescription="Loading" description="Loading intervensions..." />;
+  if (isLoading || isPatientLoading) {
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription="Loading"
+        description={t('loadingInterventions', 'Loading interventions') + '...'}
+      />
+    );
   }
 
-  if (error) {
+  if (error || patientError) {
     return (
       <InlineNotification
         aria-label="closes notification"
         kind="error"
         lowContrast={true}
         statusIconDescription="notification"
-        title={t('failure', 'Error loading intervensions')}
+        title={t('failure', 'Error loading interventions')}
+        subtitle={error?.message ?? patientError?.message}
       />
     );
   }
@@ -60,4 +80,4 @@ const PackageIntervensions: React.FC<PackageIntervensionsProps> = ({ category })
   );
 };
 
-export default PackageIntervensions;
+export default PackageInterventions;

packages/esm-billing-app/src/claims/dashboard/form/claims-form.component.tsx

@@ -21,7 +21,7 @@ import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { z } from 'zod';
-import PackageIntervensions from '../../../benefits-package/forms/package-intervensions.component';
+import PackageInterventions from '../../../benefits-package/forms/package-interventions.component';
 import { formatDate } from '../../../helpers/functions';
 import { useSystemSetting } from '../../../hooks/getMflCode';
 import usePackages from '../../../hooks/usePackages';
@@ -315,8 +315,9 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
           {selectedPackageObservable && (
             <Column>
               <Layer className={styles.input}>
-                <PackageIntervensions
+                <PackageInterventions
                   category={packages.find((package_) => package_.uuid === selectedPackageObservable)?.packageCode ?? ''}
+                  patientUuid={patientUuid}
                 />
               </Layer>
             </Column>