@openmrs/esm-user-onboarding-app 4.0.1-pre.27 → 4.0.1-pre.273

package/src/config-schema.ts

@@ -12,11 +12,14 @@ export const configSchema = {
     _default: [
       {
         title: 'Basic Overview',
-        description: 'This guide provides a quick look at the essential components that shape the layout and user experience of our homepage.',
-        steps: [{
-          target: '[aria-label="OpenMRS"]',
-          content: 'Welcome to OpenMRS! This is the main dashboard where you can navigate to various features of the system.',
-        },
+        description:
+          'This guide provides a quick look at the essential components that shape the layout and user experience of our homepage.',
+        steps: [
+          {
+            target: '[aria-label="OpenMRS"]',
+            content:
+              'Welcome to OpenMRS! This is the main dashboard where you can navigate to various features of the system.',
+          },
           {
             target: '[name="SearchPatientIcon"]',
             content: 'This is the search icon. Use it to find patients in the system quickly.',
@@ -29,14 +32,6 @@ export const configSchema = {
             target: '[name="User"]',
             content: 'The user icon. Click here to change your user preferences and settings.',
           },
-          {
-            target: '[data-extension-id="active-visits-widget"]',
-            content: 'This table displays active visits. Here you can see all the ongoing patient visits.',
-          },
-          {
-            target: '[data-extension-id="home-appointments"]',
-            content: 'This table shows appointments. View and manage patient appointments from this section.',
-          },
         ],
       },
       {
@@ -83,31 +78,28 @@ export const configSchema = {
           'Patient chart is the main point of interaction between healthcare professionals and patient data, where you can manage everything related to a single patient.',
         steps: [
           {
-            target: '[data-testid="searchPatientIcon"]',
+            target: '[data-tutorial-target="search-patient-icon"]',
             content:
               'To access the patient chart, first, you need to select a patient. To start, click here to open the search box so that we can search for a patient.',
             spotlightClicks: true,
             hideNextButton: true,
             data: {
-              autoNextOn: '[data-testid="patientSearchBar"]',
+              autoNextOn: '[data-tutorial-target="patient-search-bar"]',
             },
           },
           {
-            target: '[data-testid="patientSearchBar"]',
+            target: '[data-tutorial-target="patient-search-bar"]',
             content:
               'Now, enter the name or the ID of the patient here. Some example patient names that you can search for are: John, Smith, Mary.',
-            hideNextButton: true,
+            hideNextButton: false,
             hideBackButton: true,
             spotlightClicks: true,
-            data: {
-              autoNextOn: '[data-testid="floatingSearchResultsContainer"]',
-            },
           },
           {
-            target: '[data-testid="floatingSearchResultsContainer"]',
+            target: '[data-tutorial-target="floating-search-results-container"]',
             content: 'Click on the patient you want to go to their patient chart.',
             spotlightClicks: true,
-            disableOverlay : true,
+            disableOverlay: false,
             placement: 'left',
             hideNextButton: true,
             hideBackButton: true,
@@ -118,7 +110,8 @@ export const configSchema = {
           {
             target: 'body',
             title: 'Patient Chart',
-            content: "Welcome to the Patient Chart View! Here, you can quickly see everything about your patient's health history, visits, medications, allergies, and test results—all in one place. It's designed to help you provide the best care efficiently.",
+            content:
+              "Welcome to the Patient Chart View! Here, you can quickly see everything about your patient's health history, visits, medications, allergies, and test results—all in one place. It's designed to help you provide the best care efficiently.",
             spotlightClicks: true,
             hideBackButton: true,
             placement: 'center',
@@ -161,32 +154,38 @@ export const configSchema = {
       },
       {
         title: 'Finding a Patient',
-        description: 'Learn how to find a patient in the system using basic and advanced search features, including the use of filters to refine results.',
+        description:
+          'Learn how to find a patient in the system using basic and advanced search features, including the use of filters to refine results.',
         steps: [
           {
-            target: '[data-testid="searchPatientIcon"]',
+            target: '[data-tutorial-target="search-patient-icon"]',
             content: 'Click on the search icon to open the search box so that we can search for a patient.',
             spotlightClicks: true,
             hideNextButton: true,
             data: {
-              autoNextOn: '[data-testid="patientSearchBar"]',
+              autoNextOn: '[data-tutorial-target="patient-search-bar"]',
             },
           },
           {
-            target: '[data-testid="patientSearchBar"]',
+            target: '[data-tutorial-target="patient-search-bar"]',
             content:
               'Now, enter the name of the patient here. If you know the patient ID, you can use that as well. You will see the results if the patient you entered exists in the system. Some example patient names that you can search for are: John, Smith, Mary.',
-            hideNextButton: true,
+            hideNextButton: false,
             hideBackButton: true,
             spotlightClicks: true,
-            data: {
-              autoNextOn: '[data-testid="floatingSearchResultsContainer"]',
-            },
+          },
+          {
+            target: '[data-tutorial-target="floating-search-results-container"]',
+            content: 'The search container shows only the top results and if they are not the patient you want, or you cannot find the patient by name or the patient ID, you can use advanced search tools to narrow down your search. Click next to learn more about the advanced search options.',
+            spotlightClicks: false,
+            disableOverlay: false,
+            hideNextButton: false,
+            hideBackButton: true,
           },
           {
             target: 'button[type="submit"]',
             content:
-              'If there are a lot of patients in the system, you may need additional fields to search other than the name. Also, the patient you are looking for may not be displayed in the top results if there are multiple patients with the same name. In these scenarios, you can click here to open the advanced search.',
+              'The advanced search provides additional search fields like date of birth and phone number to help find the right patient, which comes in helpful in scenarios where multiple patients have the same name. Click here to access the advanced search tool.',
             spotlightClicks: true,
             placement: 'bottom',
             hideNextButton: true,
@@ -210,7 +209,7 @@ export const configSchema = {
             placement: 'right',
           },
           {
-            target: '[data-testid="closeSearchIcon"]',
+            target: '[data-tutorial-target="close-search-icon"]',
             content: 'That’s the end of the tutorial. Click on the close button to go back to the home page.',
             spotlightClicks: true,
             placement: 'bottom',
@@ -234,18 +233,7 @@ export const configSchema = {
             spotlightClicks: true,
             hideNextButton: true,
             data: {
-              autoNextOn: '[title="All lists"]',
-            },
-          },
-          {
-            target: '[title="All lists"]',
-            content: 'Click here to see all the patient lists we have in the system.',
-            hideNextButton: true,
-            hideBackButton: true,
-            spotlightClicks: true,
-            spotlightPadding: 20,
-            data: {
-              autoNextOn: '[data-testid="patientListsTable"]',
+              autoNextOn: '[data-openmrs-role="New List"]',
             },
           },
           {
@@ -256,11 +244,11 @@ export const configSchema = {
             hideNextButton: true,
             hideBackButton: true,
             data: {
-              autoNextOn: '[data-openmrs-role="Patient List Form"]',
+              autoNextOn: '[data-tutorial-target="patient-list-form"]',
             },
           },
           {
-            target: '[data-openmrs-role="Patient List Form"]',
+            target: '[data-tutorial-target="patient-list-form"]',
             content: 'Enter the necessary details and click on "Create List" to create the list.',
             spotlightClicks: true,
             hideBackButton: true,
@@ -271,7 +259,18 @@ export const configSchema = {
             },
           },
           {
-            target: '[data-testid="patientListsTable"]',
+            target: '[data-tutorial-target="all-patient-lists-tab"]',
+            content: 'Click here to see all the patient lists we have in the system.',
+            hideNextButton: true,
+            hideBackButton: true,
+            spotlightClicks: true,
+            spotlightPadding: 20,
+            data: {
+              autoNextOn: '[data-tutorial-target="patient-lists-table"]',
+            },
+          },
+          {
+            target: '[data-tutorial-target="patient-lists-table"]', 
             content:
               'Great! We have successfully created a new patient list. Find and click on the patient list you created to proceed. You can use the search option at the top right if needed.',
             disableOverlay: true,
@@ -285,38 +284,34 @@ export const configSchema = {
           },
           {
             target: '[data-openmrs-role="Patient Empty tile"]',
-            content: "You can see the patient list is empty since we haven't added any patients to the list yet.",
+            content: "You can see the patient list is empty since we haven't added any patients to the list yet. Click on Next to Continue",
             hideBackButton: true,
             disableOverlay: true,
           },
           {
-            target: '[data-testid="searchPatientIcon"]',
+            target: '[data-tutorial-target="search-patient-icon"]',
             content:
               'To add a patient to the list, we have to go to the respective patient’s chart view. Click here to open the search box so that we can search for a patient.',
             spotlightClicks: true,
             hideNextButton: true,
             hideBackButton: true,
             data: {
-              autoNextOn: '[data-testid="patientSearchBar"]',
+              autoNextOn: '[data-tutorial-target="patient-search-bar"]',
             },
           },
           {
-            target: '[data-testid="patientSearchBar"]',
+            target: '[data-tutorial-target="patient-search-bar"]',
             content:
               'Now, enter the name or the ID of the patient here. Some example patient names that you can search for are: John, Smith, Mary.',
-            hideNextButton: true,
+            hideNextButton: false,
             hideBackButton: true,
             spotlightClicks: true,
-            data: {
-              autoNextOn: '[data-testid="floatingSearchResultsContainer"]',
-            },
           },
           {
-            target: '[data-testid="floatingSearchResultsContainer"]',
+            target: '[data-tutorial-target="floating-search-results-container"]',
             content:
               'Click on the patient to go to the patient chart, where we can add the patient to our newly created list.',
             spotlightClicks: true,
-            disableOverlay: true,
             placement: 'left',
             hideNextButton: true,
             hideBackButton: true,
@@ -326,9 +321,9 @@ export const configSchema = {
           },
           {
             target: '#custom-actions-overflow-menu-trigger',
-            content: 'Click on "Action" and select "Add to List" from the drop-down menu.',
+            content: 'Click on "Actions" and select "Add to List" from the drop-down menu.',
             disableOverlay: true,
-            placement: 'left',
+            placement: 'bottom',
             spotlightClicks: true,
             hideBackButton: true,
             hideNextButton: true,
@@ -346,64 +341,36 @@ export const configSchema = {
             hideNextButton: true,
             placement: 'left',
             data: {
-              autoNextOn: '.omrs-snackbars-container div',
+              autoNextOn: '.omrs-snackbars-container div', 
             },
-          },
-          {
-            target: '[aria-label="Close"]',
-            content:
-              "We have successfully added a patient to the patient list. Let's go back to the patient lists by closing the patient chart by clicking here.",
-            spotlightClicks: true,
-            hideBackButton: true,
-            hideNextButton: true,
-            data: {
-              autoNextOn: '[data-testid="patientsTable"]',
-            },
-          },
-          {
-            target: '[data-testid="patientsTable"]',
-            title: 'Patients List',
-            content: 'You can see the added patient on the list of patients.',
-            spotlightClicks: true,
-            hideBackButton: true,
-          },
-          {
-            target: 'body',
-            content:
-              'Congrats! You have now completed the tutorial on creating patient lists and adding patients to the lists.',
-            placement: 'center',
-            hideBackButton: true,
-          },
+          }
         ],
       },
       {
         title: 'Recording Vitals',
         description:
-          'Learn how to record a patient\'s vitals and biometric data, and review the records through the patient chart.',
+          "Learn how to record a patient's vitals and biometric data, and review the records through the patient chart.",
         steps: [
           {
-            target: '[data-testid="searchPatientIcon"]',
+            target: '[data-tutorial-target="search-patient-icon"]',
             content:
               'To capture the vitals of a patient, you need to start by going to the patient chart view of the respective patient. Click on the search icon to open the search box so that you can search for the patient.',
             spotlightClicks: true,
             hideNextButton: true,
             data: {
-               autoNextOn: '[data-testid="patientSearchBar"]'
-              },
+              autoNextOn: '[data-tutorial-target="patient-search-bar"]',
+            },
           },
           {
-            target: '[data-testid="patientSearchBar"]',
+            target: '[data-tutorial-target="patient-search-bar"]',
             content:
               'Now, enter the name or the ID of the patient here. Some example patient names you can search for are: John, Smith, Mary.',
-            hideNextButton: true,
+            hideNextButton: false,
             hideBackButton: true,
             spotlightClicks: true,
-            data: {
-              autoNextOn: '[data-testid="floatingSearchResultsContainer"]'
-            },
           },
           {
-            target: '[data-testid="floatingSearchResultsContainer"]',
+            target: '[data-tutorial-target="floating-search-results-container"]',
             content: 'Click on the patient to go to their patient chart.',
             placement: 'left',
             spotlightClicks: true,
@@ -436,7 +403,7 @@ export const configSchema = {
             hideBackButton: true,
             hideNextButton: true,
             data: {
-              autoNextOn: '.omrs-snackbars-container div'
+              autoNextOn: '.omrs-snackbars-container div',
             },
           },
           {
@@ -452,7 +419,7 @@ export const configSchema = {
             hideNextButton: true,
             spotlightClicks: true,
             data: {
-              autoNextOn: '[data-extension-slot-name="patient-chart-vitals-biometrics-dashboard-slot"]'
+              autoNextOn: '[data-extension-slot-name="patient-chart-vitals-biometrics-dashboard-slot"]',
             },
           },
           {
@@ -476,37 +443,34 @@ export const configSchema = {
       },
       {
         title: 'Starting a Patient Visit',
-        description:
-          'Learn how to start a visit for a patient.',
+        description: 'Learn how to start a visit for a patient.',
         steps: [
           {
-            target: '[data-testid="searchPatientIcon"]',
+            target: '[data-tutorial-target="search-patient-icon"]',
             content:
               'To fill out any forms or encounters of a patient, you have to start a visit. To start a patient visit, first you need to go to the patient chart view of the respective patient. Click on the search icon to open the search box so that we can search for the patient. ',
             disableBeacon: true,
             spotlightClicks: true,
             hideNextButton: true,
             data: {
-              autoNextOn: '[data-testid="patientSearchBar"]',
+              autoNextOn: '[data-tutorial-target="patient-search-bar"]',
             },
           },
           {
-            target: '[data-testid="patientSearchBar"]',
+            target: '[data-tutorial-target="patient-search-bar"]',
             content:
               'Now, enter the name or the ID of the patient here. Some example patient names that you can search for are: John, Smith, Mary.',
-            hideNextButton: true,
+            hideNextButton: false,
             hideBackButton: true,
             spotlightClicks: true,
-            data: {
-              autoNextOn: '[data-testid="floatingSearchResultsContainer"]',
-            },
+
           },
           {
-            target: '[data-testid="floatingSearchResultsContainer"]',
+            target: '[data-tutorial-target="floating-search-results-container"]',
             content:
               'Click on the patient whose chart you want to access. Make sure to select a patient without the "Active visit" label, as we will start a visit in the next steps of the tutorial.',
             spotlightClicks: true,
-            disableOverlay: true,
+            disableOverlay: false,
             placement: 'left',
             hideNextButton: true,
             hideBackButton: true,
@@ -608,7 +572,7 @@ export const configSchema = {
               'Great job! You found the allergies section! This is the end of the tutorial. Feel free to explore the system on your own or check out the other tutorials.',
           },
         ],
-      }
+      },
     ],
   },
 };
@@ -623,7 +587,7 @@ export type Config = {
       title: string;
       content: string;
       data?: {
-        autoNextOn?: boolean;
+        autoNextOn?: string;
       };
     }[];
   }[];

package/src/index.ts

@@ -1,6 +1,6 @@
 import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
-import Tutorial from './tutorial/tutorial';
+import Tutorial from './tutorial/tutorial.component';
 
 const moduleName = '@openmrs/esm-user-onboarding-app';
 

package/src/root.component.tsx

@@ -1,16 +1,16 @@
-import React from 'react';
-import ReactJoyride, { ACTIONS, type CallBackProps, EVENTS, type Step } from 'react-joyride';
+import React, { useState } from 'react';
+import ReactJoyride, { ACTIONS, type CallBackProps, EVENTS } from 'react-joyride';
 import { useDefineAppContext } from '@openmrs/esm-framework';
-import { type TutorialContext } from './types';
+import { type TutorialContext, type ExtendedStep } from './types';
 import CustomTooltip from './tooltip/tooltip.component';
 
 const RootComponent: React.FC = () => {
-  const [showTutorial, setShowTutorial] = React.useState(false);
-  const [steps, setSteps] = React.useState<Step[]>([]);
-  const [stepIndex, setStepIndex] = React.useState(0);
+  const [showTutorial, setShowTutorial] = useState(false);
+  const [steps, setSteps] = useState<ExtendedStep[]>([]);
+  const [stepIndex, setStepIndex] = useState(0);
 
   // Set steps with default step options
-  const updateSteps = (newSteps: Step[]) => {
+  const updateSteps = (newSteps: ExtendedStep[]) => {
     setSteps(
       newSteps.map((step) => ({
         ...step,
@@ -39,7 +39,7 @@ const RootComponent: React.FC = () => {
       const targetElement = document.querySelector(steps[index].target as string);
       if (targetElement) {
         setShowTutorial(true);
-        clearTimeout(interval);
+        clearInterval(interval);
       }
     }, 1000);
   };
@@ -49,7 +49,7 @@ const RootComponent: React.FC = () => {
       const targetElement = document.querySelector(query);
       if (targetElement) {
         setStepIndex(index + 1);
-        clearTimeout(interval);
+        clearInterval(interval);
       }
     }, 1000);
   };
@@ -82,26 +82,30 @@ const RootComponent: React.FC = () => {
     }
   };
 
+
+
   return (
-    <ReactJoyride
-      callback={handleJoyrideCallback}
-      continuous
-      debug={false}
-      disableOverlayClose={true}
-      disableScrolling
-      run={showTutorial}
-      showProgress
-      showSkipButton
-      stepIndex={stepIndex}
-      steps={steps}
-      styles={{
-        options: {
-          zIndex: 10000,
-        },
-        overlay: overlayStyles,
-      }}
-      tooltipComponent={(props) => <CustomTooltip {...props} step={steps[props.index]} totalSteps={steps.length} />}
-    />
+    <div onMouseDown={(e)=>{e.stopPropagation()}}>
+      <ReactJoyride
+        callback={handleJoyrideCallback}
+        continuous
+        debug={false}
+        disableOverlayClose={true}
+        disableScrolling
+        run={showTutorial}
+        showProgress
+        showSkipButton
+        stepIndex={stepIndex}
+        steps={steps}
+        styles={{
+          options: {
+            zIndex: 10000,
+          },
+          overlay: overlayStyles,
+        }}
+        tooltipComponent={(props) => <CustomTooltip {...props} step={steps[props.index]} totalSteps={steps.length} />}
+      />
+    </div>
   );
 };
 export default RootComponent;

package/src/routes.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "backendDependencies": {
     "fhir2": ">=1.2",
-    "webservices.rest": "^2.24.0"
+    "webservices.rest": ">=2.2.0"
   },
   "extensions": [
     {
@@ -14,10 +14,10 @@
     }
   ],
   "modals": [
-	{
-	  "name": "tutorial-modal",
-	  "component": "tutorialModal"
-	}
+    {
+      "name": "tutorial-modal",
+      "component": "tutorialModal"
+    }
   ],
   "pages": [
     {

package/src/tooltip/tooltip.component.tsx

@@ -2,16 +2,12 @@ import React from 'react';
 import { Button } from '@carbon/react';
 import { ArrowLeft, ArrowRight, Close } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
+import { type TooltipRenderProps } from 'react-joyride';
+import { type ExtendedStep } from '../types';
 import styles from './tooltip.scss';
 
-interface CustomTooltipProps {
-  continuous: boolean;
-  index: number;
-  step: any;
-  backProps: any;
-  skipProps: any;
-  primaryProps: any;
-  tooltipProps: any;
+interface CustomTooltipProps extends Omit<TooltipRenderProps, 'step'> {
+  step: ExtendedStep;
   totalSteps: number;
 }
 

package/src/tooltip/tooltip.scss

@@ -1,20 +1,20 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/type';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tooltipcontainer {
   background-color: $ui-02;
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  max-width: 360px;
-  border-radius: spacing.$spacing-02;
-  gap: spacing.$spacing-04;
+  max-width: 22.5rem;
+  border-radius: layout.$spacing-02;
+  gap: layout.$spacing-04;
 
   .tooltipheader {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: spacing.$spacing-01;
+    margin-bottom: layout.$spacing-01;
 
   .container {
     display: flex;
@@ -24,11 +24,11 @@
 
   .tooltiptitle {
     @include type.type-style('heading-02');
-    margin-bottom: spacing.$spacing-02;
+    margin-bottom: layout.$spacing-02;
   }
 
   .closeButton {
-    min-height: 16px;
+    min-height: layout.$spacing-05;
     padding: 0;
     align-self: flex-start;
   }
@@ -38,12 +38,12 @@
     color: $color-gray-70;
     @include type.type-style('body-compact-01');
     width: 100%;
-    margin-top: spacing.$spacing-01;
+    margin-top: layout.$spacing-01;
 }
 
 
   .tooltipfooter {
-    margin-top: spacing.$spacing-03;
+    margin-top: layout.$spacing-03;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -55,27 +55,27 @@
 
   .buttonContainer {
     display: flex;
-    gap: spacing.$spacing-03;
+    gap: layout.$spacing-03;
 
   .buttonback,
   .buttonnext {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: spacing.$spacing-02;
-    width: spacing.$spacing-12;
+    padding: layout.$spacing-02;
+    width: layout.$spacing-12;
 
     .arrowLeft,
     .arrowContainer {
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-left: spacing.$spacing-02;
+      margin-left: layout.$spacing-02;
     }
 
     .arrowLeft svg {
       fill: $color-blue-60-2 !important;
-      margin-right: spacing.$spacing-02;
+      margin-right: layout.$spacing-02;
     }
   }
 }