(feat): Hide patient banner (#135)

* Enable toggling showPatientBanner for non-workspace zones

* fix test

* Move the Implementation specific config to another pr

* Keep the WarningAlt icon Unitl concrete UX advice

Author: Twiineenock

src/FormBootstrap.tsx

@@ -115,6 +115,7 @@ interface FormParams {
   handlePostResponse?: (Encounter) => void;
   handleEncounterCreate?: (Object) => void;
   handleOnValidate?: (boolean) => void;
+  hidePatientBanner?: boolean;
 }
 
 const FormBootstrap = ({
@@ -126,6 +127,7 @@ const FormBootstrap = ({
   handlePostResponse,
   handleEncounterCreate,
   handleOnValidate,
+  hidePatientBanner,
 }: FormParams) => {
   const patient = useGetPatient(patientUuid);
   const { activeSessionMeta } = useContext(GroupFormWorkflowContext);
@@ -170,6 +172,7 @@ const FormBootstrap = ({
               encDate: activeSessionMeta.sessionDate,
             },
             hideControls: true,
+            hidePatientBanner: hidePatientBanner,
           }}
         />
       )}

src/form-entry-workflow/FormEntryWorkflow.tsx

@@ -127,6 +127,7 @@ const FormWorkspace = () => {
                 handlePostResponse,
                 handleEncounterCreate,
               }}
+              hidePatientBanner={true}
             />
           </div>
           <div className={styles.rightPanel}>

src/form-entry-workflow/patient-banner/PatientBanner.tsx

@@ -49,23 +49,20 @@ const PatientBanner = () => {
     return <SkeletonPatientInfo />;
   }
 
+  return <Banner patient={patient} hideActionsOverflow />;
+};
+
+const Banner = ({ patient, hideActionsOverflow }) => {
   return (
-    <div className={styles.container}>
-      <ExtensionSlot name="patient-photo-slot" state={patientPhotoSlotState} />
-      <div className={styles.patientInfoContent}>
-        <div className={styles.patientInfoRow}>
-          <span className={styles.patientName}>{patientName}</span>
-        </div>
-        <div className={styles.patientInfoRow}>
-          <span>{(patient.gender ?? t('unknown', 'Unknown')).replace(/^\w/, (c) => c.toUpperCase())}</span>
-          <span>&middot;</span>
-          <span>{age(patient.birthDate)}</span>
-          <span>&middot;</span>
-          <span>
-            {patient.identifier.length ? patient.identifier.map((identifier) => identifier.value).join(', ') : '--'}
-          </span>
-        </div>
-      </div>
+    <div className={styles.patientBannerContainer}>
+      <ExtensionSlot
+        name="patient-header-slot"
+        state={{
+          patient,
+          patientUuid: patient.id,
+          hideActionsOverflow,
+        }}
+      />
     </div>
   );
 };

src/form-entry-workflow/patient-banner/styles.scss

@@ -42,3 +42,16 @@
   color: colors.$gray-100;
   margin: layout.$spacing-03;
 }
+
+.patientBannerContainer {
+  display: flex;
+  width: 100%;
+  position: sticky;
+  flex-direction: row;
+  align-items: baseline;
+  padding: 0;
+}
+
+.patientBannerContainer > div {
+  width: 100%;
+}

src/group-form-entry-workflow/GroupSessionWorkspace.tsx

@@ -186,6 +186,7 @@ const GroupSessionWorkspace = () => {
               handlePostResponse,
               handleEncounterCreate,
             }}
+            hidePatientBanner={false}
           />
         </div>
         <div className={styles.rightPanel}>