(fix) : Add empty state for hie patient search (#71)

palladiumkenya · Feb 20, 2025 · c7a4273 · c7a4273
1 parent 7e4f774
commit c7a4273
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "packages/*"
   ],
   "scripts": {
-    "start": "openmrs develop --sources packages/esm-patient-registration-app packages/esm-patient-search-app --port 8500 --backend https://hie.kenyahmis.org --config-url https://hie.kenyahmis.org/openmrs/spa/kenyaemr.config.json https://hie.kenyahmis.org/openmrs/spa/openmrs.config.json",
+    "start": "openmrs develop --sources packages/esm-patient-registration-app packages/esm-patient-search-app --port 8075 --config-url https://dev.kenyahmis.org/openmrs/spa/openmrs.config.json https://dev.kenyahmis.org/openmrs/spa/kenyaemr.config.json --backend https://dev.kenyahmis.org",
     "ci:publish": "yarn workspaces foreach --all --topological --exclude @openmrs/esm-patient-management npm publish --access public --tag latest",
     "ci:prepublish": "yarn workspaces foreach --all --topological --exclude @openmrs/esm-patient-management npm publish --access public --tag next",
     "release": "yarn workspaces foreach --all --topological version",

diff --git a/packages/esm-patient-search-app/src/mpi/hie-syc.modal.tsx b/packages/esm-patient-search-app/src/mpi/hie-syc.modal.tsx
@@ -35,6 +35,11 @@ const HieSycModal: React.FC<HieSycModalProps> = ({ onClose, localPatient, identi
 
   const handleSyncAndContinueToChart = async () => {
     onClose();
+
+    if (!hiePatient) {
+      navigate({ to: `${window['getOpenmrsSpaBase']()}patient/${localPatient.id}/chart` });
+    }
+
     const payload = createPatientUpdatePayloadFromFhir(localPatient, hiePatient, session?.sessionLocation?.uuid);
     const patientRegistrationUrl = `${restBaseUrl}/patient/${localPatient.id}`;
     const registeredPatient = await openmrsFetch(patientRegistrationUrl, {
@@ -55,6 +60,10 @@ const HieSycModal: React.FC<HieSycModalProps> = ({ onClose, localPatient, identi
     }
   };
 
+  const syncButtonText = hiePatient
+    ? t('syncAndContinueToChart', 'Sync and Continue to Chart')
+    : t('continueToChart', 'Continue to Chart');
+
   return (
     <div>
       <ModalHeader closeModal={handleClose}>
@@ -89,7 +98,7 @@ const HieSycModal: React.FC<HieSycModalProps> = ({ onClose, localPatient, identi
           {t('cancel', 'Cancel')}
         </Button>
         <Button disabled={isLoading} kind="primary" onClick={handleSyncAndContinueToChart}>
-          {t('syncAndContinueToChart', 'Sync and Continue to Chart')}
+          {syncButtonText}
         </Button>
       </ModalFooter>
     </div>
@@ -122,6 +131,23 @@ const HiePatientInfo: React.FC<{ isLoading: boolean; error: Error | null; hiePat
     );
   }
 
+  if (!hiePatient) {
+    return (
+      <InlineNotification
+        className={styles.hiePatientNotFound}
+        aria-label="closes notification"
+        kind="warning-alt"
+        lowContrast
+        statusIconDescription="notification"
+        subtitle={t(
+          'hiePatientNotFoundSubtitle',
+          'Please check the identifier and try again, in the event that the patient is not found, please advice the patient to register with Social Health Authority (SHA)',
+        )}
+        title={t('hiePatientNotFoundTitle', 'HIE Patient Information Not Found')}
+      />
+    );
+  }
+
   return <div>{hiePatient && <PatientInfo patient={hiePatient} />}</div>;
 };
 

diff --git a/packages/esm-patient-search-app/src/mpi/hie.sync.scss b/packages/esm-patient-search-app/src/mpi/hie.sync.scss
@@ -1,4 +1,5 @@
 @use '@carbon/type';
+@use '@carbon/layout';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 .header {
@@ -20,3 +21,7 @@
   grid-template-columns: 0.25fr 0.75fr;
   align-items: center;
 }
+
+.notFoundNotitication {
+  padding-top: layout.$spacing-05;
+}
diff --git a/packages/esm-patient-search-app/src/mpi/otp-authentication.resource.tsx b/packages/esm-patient-search-app/src/mpi/otp-authentication.resource.tsx
@@ -253,7 +253,7 @@ export async function navigateToHie(patientUuid: string) {
 
   if (!requiredIdentifier) {
     // navigate to patient registration page to update the patient with the required identifiers
-    navigate({ to: `${window['getOpenmrsSpaBase']()}patient/${patientUuid}/edit`});
+    navigate({ to: `${window['getOpenmrsSpaBase']()}patient/${patientUuid}/edit` });
     return;
   }
 
@@ -277,7 +277,7 @@ export function useHIEPatient(searchQuery: string, identifierType: string) {
   const url = `${restBaseUrl}/kenyaemr/getSHAPatient/${searchQuery}/${identifierType}`;
   const { data, isLoading, error } = useSWR<{ data: fhir.Bundle }>(url, openmrsFetch);
 
-  const fhirPatient = data?.data?.entry.map((entry: fhir.BundleEntry) => entry.resource as fhir.Patient)?.[0];
+  const fhirPatient = data?.data?.entry?.map((entry: fhir.BundleEntry) => entry?.resource as fhir.Patient)?.[0];
 
   return { data: fhirPatient, isLoading, error };
 }