Fix: Back to search results button functionality

package.json

@@ -21,14 +21,15 @@
     "@hookform/resolvers": "^3.3.1",
     "classnames": "^2.3.2",
     "react-hook-form": "^7.46.2",
+    "react-joyride": "^2.8.0",
     "swr": "^2.0.1",
     "xlsx": "^0.18.5",
     "zod": "^3.22.2"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
     "@carbon/react": "~1.37.0",
-    "@openmrs/esm-framework": "next",
+    "@openmrs/esm-framework": "^5.5.0",
     "@openmrs/esm-patient-common-lib": "next",
     "@playwright/test": "1.42.1",
     "@swc/core": "^1.2.165",
@@ -65,7 +66,7 @@
     "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.1",
-    "openmrs": "next",
+    "openmrs": "^5.5.0",
     "prettier": "^3.1.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

packages/esm-service-queues-app/src/home.component.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { type ConfigObject, useConfig } from '@openmrs/esm-framework';
+import Joyride from 'react-joyride';
 import ActiveVisitsTable from './active-visits/active-visits-table.component';
 import ActiveVisitsTabs from './active-visits/active-visits-tab.component';
 import ClinicMetrics from './patient-queue-metrics/clinic-metrics.component';
@@ -9,11 +10,55 @@ const Home: React.FC = () => {
   const config = useConfig<ConfigObject>();
   const useQueueTableTabs: boolean = config.showQueueTableTab;
 
+  const [{ run, steps }, setJoyrideState] = useState({
+    run: true,
+    steps: [
+      {
+        content: <h2>Welcome to Service and Queues!</h2>,
+        locale: { skip: <strong>SKIP</strong> },
+        placement: 'center' as const,
+        target: 'body',
+      },
+      {
+        content: <h2>Explore the Patient Queue Header</h2>,
+        placement: 'auto' as const,
+        target: '.patient-queue-head',
+        title: 'Patient Queue Header',
+      },
+      {
+        content: <h2>Check out the Clinic Metrics</h2>,
+        placement: 'auto' as const,
+        target: '.clinic-metric',
+        title: 'Clinic Metrics',
+      },
+
+      // Add more steps as needed...
+    ],
+  });
+
   return (
     <>
       <PatientQueueHeader />
       <ClinicMetrics />
       {useQueueTableTabs ? <ActiveVisitsTabs /> : <ActiveVisitsTable />}
+      <Joyride
+        continuous={true}
+        callback={() => {}}
+        run={run}
+        steps={steps}
+        hideCloseButton
+        scrollToFirstStep
+        showSkipButton
+        showProgress={true}
+        styles={{
+          buttonNext: {
+            backgroundColor: 'green',
+          },
+          buttonBack: {
+            color: 'blue',
+          },
+        }}
+      />
     </>
   );
 };

packages/esm-service-queues-app/src/patient-queue-header/patient-queue-header.component.tsx

@@ -29,7 +29,7 @@ const PatientQueueHeader: React.FC<{ title?: string }> = ({ title }) => {
 
   return (
     <>
-      <div className={styles.header} data-testid="patient-queue-header">
+      <div className={`${styles.header} patient-queue-head`} data-testid="patient-queue-header">
         <div className={styles['left-justified-items']}>
           <PatientQueueIllustration />
           <div className={styles['page-labels']}>

packages/esm-service-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx

@@ -57,7 +57,7 @@ function ClinicMetrics() {
   return (
     <>
       <MetricsHeader />
-      <div className={styles.cardContainer} data-testid="clinic-metrics">
+      <div className={`${styles.cardContainer} clinic-metric`} data-testid="clinic-metrics">
         <MetricsCard
           label={t('patients', 'Patients')}
           value={loading ? '--' : activeVisitsCount}

packages/esm-service-queues-app/src/patient-search/patient-scheduled-visits.component.tsx

@@ -28,6 +28,7 @@ import {
   useConfig,
   type ConfigObject,
 } from '@openmrs/esm-framework';
+import { ArrowLeft } from '@carbon/react/icons';
 import { type Appointment, SearchTypes } from '../types';
 import styles from './patient-scheduled-visits.scss';
 import { useScheduledVisits } from './hooks/useScheduledVisits';
@@ -293,6 +294,16 @@ const PatientScheduledVisits: React.FC<PatientScheduledVisitsProps> = ({
 
   return (
     <div className={styles.container}>
+      <div className={styles.backButton}>
+        <Button
+          kind="ghost"
+          renderIcon={(props) => <ArrowLeft size={24} {...props} />}
+          iconDescription={t('backToSearchResult', 'Back to search result')}
+          size="sm"
+          onClick={closePanel}>
+          <span>{t('backToSearchResult', 'Back to search result')}</span>
+        </Button>
+      </div>
       <ScheduledVisits
         visitType={visitType.RECENT}
         visits={appointments?.recentVisits}

packages/esm-service-queues-app/src/patient-search/visit-form/visit-form.component.tsx

@@ -41,7 +41,7 @@ import { addQueueEntry, useVisitQueueEntries } from '../../active-visits/active-
 import { convertTime12to24, type amPm } from '../../helpers/time-helpers';
 import { MemoizedRecommendedVisitType } from './recommended-visit-type.component';
 import { useActivePatientEnrollment } from '../hooks/useActivePatientEnrollment';
-import { SearchTypes, type PatientProgram, type NewVisitPayload } from '../../types';
+import { type SearchTypes, type PatientProgram, type NewVisitPayload } from '../../types';
 import styles from './visit-form.scss';
 import { useDefaultLoginLocation } from '../hooks/useDefaultLocation';
 import isEmpty from 'lodash-es/isEmpty';
@@ -203,10 +203,10 @@ const StartVisitForm: React.FC<VisitFormProps> = ({ patientUuid, toggleSearchTyp
             <Button
               kind="ghost"
               renderIcon={(props) => <ArrowLeft size={24} {...props} />}
-              iconDescription={t('backToScheduledVisits', 'Back to scheduled visits')}
+              iconDescription={t('backToSearchResult', 'Back to search result')}
               size="sm"
-              onClick={() => toggleSearchType(SearchTypes.SCHEDULED_VISITS, patientUuid)}>
-              <span>{t('backToScheduledVisits', 'Back to scheduled visits')}</span>
+              onClick={closePanel}>
+              <span>{t('backToSearchResult', 'Back to search result')}</span>
             </Button>
           )}
         </div>

packages/esm-service-queues-app/translations/en.json

@@ -28,7 +28,7 @@
   "any": "Any",
   "applyFilters": "Apply Filters",
   "averageWaitTime": "Average wait time today",
-  "backToScheduledVisits": "Back To Scheduled Visits",
+  "backToSearchResult": "Back to search result",
   "backToSimpleSearch": "Back to simple search",
   "between": "Between",
   "bmi": "Bmi",