fix/O3-4115: Add patient to list button missing from search results in service queues

Author: jwnasambu

packages/esm-patient-search-app/src/patient-search-page/patient-banner/banner/patient-banner.component.tsx

@@ -18,6 +18,7 @@ import { type PatientSearchConfig } from '../../../config-schema';
 import { type FHIRPatientType, type SearchedPatient } from '../../../types';
 import { PatientSearchContext } from '../../../patient-search-context';
 import styles from './patient-banner.scss';
+import StartVisitConfirmationModal from './start-visit-confirmation.modal';
 
 interface ClickablePatientContainerProps {
   children: React.ReactNode;
@@ -54,11 +55,29 @@ const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid, hid
   const isDeceased = !!patient.person.deathDate;
 
   const [showContactDetails, setShowContactDetails] = useState(false);
+  const [showStartVisitConfirmationModal, setStartVisitConfirmationModal] = useState(false);
 
   const handleToggleContactDetails = useCallback(() => {
     setShowContactDetails((value) => !value);
   }, []);
 
+  const handleAddToQueueClick = () => {
+    if (!currentVisit && !isDeceased) {
+      setStartVisitConfirmationModal(true);
+    } else {
+      nonNavigationSelectPatientAction(patientUuid);
+    }
+  };
+
+  const handleStartVisit = () => {
+    setStartVisitConfirmationModal(false);
+    nonNavigationSelectPatientAction(patientUuid);
+  };
+
+  const handleCloseModal = () => {
+    setStartVisitConfirmationModal(false);
+  };
+
   const fhirMappedPatient: FHIRPatientType = useMemo(() => {
     const preferredAddress = patient.person.addresses?.find((address) => address.preferred);
     const addressId = uuidv4();
@@ -140,13 +159,10 @@ const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid, hid
                 patientUuid={patientUuid}
               />
             ) : null}
-            {!isDeceased && !currentVisit && (
-              <ExtensionSlot
-                name="start-visit-button-slot"
-                state={{
-                  patientUuid,
-                }}
-              />
+            {!isDeceased && (
+              <button onClick={handleAddToQueueClick} className={`${styles.addToQueueButton} ${styles.primary}`}>
+                Add patient to queue
+              </button>
             )}
           </div>
         </div>
@@ -162,6 +178,14 @@ const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid, hid
           )}
         </div>
       </div>
+
+      {showStartVisitConfirmationModal && (
+        <StartVisitConfirmationModal
+          closeModal={handleCloseModal}
+          startVisit={handleStartVisit}
+          patientName={patientName}
+        />
+      )}
     </>
   );
 };

packages/esm-patient-search-app/src/patient-search-page/patient-banner/banner/start-visit-confirmation.modal.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Modal, Button } from '@carbon/react';
+import styles from './start-visit-confirmation.scss';
+
+interface StartVisitConfirmationModalProps {
+  closeModal: () => void;
+  startVisit: () => void;
+  patientName: string;
+}
+
+const StartVisitConfirmationModal: React.FC<StartVisitConfirmationModalProps> = ({
+  closeModal,
+  startVisit,
+  patientName,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Modal
+      open
+      danger
+      modalHeading={t('startVisitModalHeading', 'Start Visit?')}
+      primaryButtonText={t('startVisitButton', 'Start Visit')}
+      secondaryButtonText={t('cancel', 'Cancel')}
+      onRequestClose={closeModal}
+      onRequestSubmit={startVisit}>
+      <p>
+        {t(
+          'startVisitMessage',
+          'You must start a visit for {{name}} before adding them to the Queue list. Do you want to start a visit now?',
+          { name: patientName },
+        )}
+      </p>
+    </Modal>
+  );
+};
+
+export default StartVisitConfirmationModal;