@openmrs/esm-user-onboarding-app 4.0.1-pre.88 → 4.0.1-pre.96

package/src/root.component.tsx

@@ -5,16 +5,25 @@ import { type TutorialContext } 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);
 
+  // Set steps with default step options
+  const updateSteps = (newSteps: Step[]) => {
+    setSteps(
+      newSteps.map((step) => ({
+        ...step,
+        disableBeacon: true,
+      })),
+    );
+  };
+
   useDefineAppContext<TutorialContext>('tutorial-context', {
     showTutorial,
     steps,
     setShowTutorial: (showTutorial: boolean) => setShowTutorial(showTutorial),
-    setSteps: (steps: Step[]) => setSteps(steps)
+    setSteps: updateSteps,
   });
 
   const onStepChange = (index: number) => {
@@ -22,7 +31,7 @@ const RootComponent: React.FC = () => {
     if (step.data && step.data.autoNextOn) {
       handleAutoNext(step.data.autoNextOn, index);
     }
-  }
+  };
 
   const waitForTarget = (index: number) => {
     setShowTutorial(false);
@@ -33,7 +42,6 @@ const RootComponent: React.FC = () => {
         clearTimeout(interval);
       }
     }, 1000);
-
   };
 
   const handleAutoNext = (query: string, index: number) => {
@@ -44,15 +52,15 @@ const RootComponent: React.FC = () => {
         clearTimeout(interval);
       }
     }, 1000);
-  }
+  };
 
-const currentStep = steps[stepIndex];
-const overlayStyles = currentStep?.disableOverlay
-  ? { backgroundColor: 'transparent' }
-  : { height: document.body.scrollHeight };
+  const currentStep = steps[stepIndex];
+  const overlayStyles = currentStep?.disableOverlay
+    ? { backgroundColor: 'transparent' }
+    : { height: document.body.scrollHeight };
 
   const handleJoyrideCallback = (data: CallBackProps) => {
-    const {action, index, origin, status, type} = data;
+    const { action, index, origin, status, type } = data;
     switch (type) {
       case EVENTS.TOUR_START:
         // The target not found event is not triggered when the tour starts
@@ -68,30 +76,31 @@ const overlayStyles = currentStep?.disableOverlay
         waitForTarget(index);
         break;
       case EVENTS.TOUR_END:
-        setStepIndex(0)
+        setStepIndex(0);
         setShowTutorial(false);
         break;
     }
-  }
+  };
 
   return (
     <ReactJoyride
+      callback={handleJoyrideCallback}
       continuous
-      debug
+      debug={false}
+      disableOverlayClose={true}
       disableScrolling
+      run={showTutorial}
       showProgress
       showSkipButton
-      steps={steps}
       stepIndex={stepIndex}
-      run={showTutorial}
-      callback={handleJoyrideCallback}
-      tooltipComponent={(props) => <CustomTooltip {...props} step={steps[props.index]} totalSteps={steps.length} />}
+      steps={steps}
       styles={{
         options: {
           zIndex: 10000,
         },
         overlay: overlayStyles,
       }}
+      tooltipComponent={(props) => <CustomTooltip {...props} step={steps[props.index]} totalSteps={steps.length} />}
     />
   );
 };

package/src/tooltip/tooltip.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from '@carbon/react';
-import { ArrowLeft, ArrowRight } from '@carbon/react/icons';
+import { ArrowLeft, ArrowRight, Close } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import styles from './tooltip.scss';
 
@@ -9,7 +9,7 @@ interface CustomTooltipProps {
   index: number;
   step: any;
   backProps: any;
-  closeProps: any;
+  skipProps: any;
   primaryProps: any;
   tooltipProps: any;
   totalSteps: number;
@@ -21,6 +21,7 @@ const CustomTooltip: React.FC<CustomTooltipProps> = ({
   step,
   backProps,
   primaryProps,
+  skipProps,
   tooltipProps,
   totalSteps,
 }) => {
@@ -30,36 +31,40 @@ const CustomTooltip: React.FC<CustomTooltipProps> = ({
   return (
     <div {...tooltipProps} className={styles.tooltipcontainer}>
       <div className={styles.tooltipheader}>
-        <h4 className={styles.tooltiptitle}>{step.title}</h4>
-        <span className={styles.tooltipstep}>{`${index + 1}/${totalSteps}`}</span>
+        <div className={styles.container}>
+          <h4 className={styles.tooltiptitle}>{step.title}</h4>
+          <div className={styles.tooltipcontent}>{step.content}</div>
+        </div>
+        <Button {...skipProps} size="sm" kind="ghost" className={styles.closeButton}>
+          <Close />
+        </Button>
       </div>
-      <div className={styles.tooltipcontent}>{step.content}</div>
       <div className={styles.tooltipfooter}>
-        {!step.hideBackButton && index > 0 && (
-          <div {...backProps} size="sm" className={styles.buttonback}>
-            <ArrowLeft style={{ marginRight: '8px' }} />
-            {t('back', 'Back')}
-          </div>
-        )}
-        {continuous && !step.hideNextButton && (
-          <Button {...primaryProps} size="sm" className={styles.buttonnext}>
-            {isLastStep ? (
-              <>
-                {t('finish', 'Finish')}
-                <div className={styles.arrowContainer}>
-                  <ArrowRight />
-                </div>
-              </>
-            ) : (
-              <>
-                {t('next', 'Next')}
-                <div className={styles.arrowContainer}>
-                  <ArrowRight />
-                </div>
-              </>
-            )}
-          </Button>
-        )}
+        <span className={styles.tooltipstep}>{`${index + 1} of ${totalSteps}`}</span>
+        <div className={styles.buttonContainer}>
+          {!step.hideBackButton && index > 0 && (
+            <Button {...backProps} size="sm" kind="ghost" className={styles.buttonback}>
+              <div className={styles.arrowLeft}>
+                <ArrowLeft />
+              </div>
+              {t('back', 'Back')}
+            </Button>
+          )}
+          {continuous && !step.hideNextButton && (
+            <Button {...primaryProps} size="sm" className={styles.buttonnext}>
+              {isLastStep ? (
+                <>{t('finish', 'Finish')}</>
+              ) : (
+                <>
+                  {t('next', 'Next')}
+                  <div className={styles.arrowContainer}>
+                    <ArrowRight />
+                  </div>
+                </>
+              )}
+            </Button>
+          )}
+        </div>
       </div>
     </div>
   );

package/src/tooltip/tooltip.scss

@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tooltipcontainer {
   background-color: $ui-02;
@@ -9,46 +9,75 @@
   max-width: 360px;
   border-radius: spacing.$spacing-02;
   gap: spacing.$spacing-04;
-  background-color: $ui-02;
 
   .tooltipheader {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: spacing.$spacing-01;
-    .tooltiptitle {
-      @include type.type-style('heading-02');
-    }
-    .tooltipstep {
-      color: $color-gray-70;
-      @include type.type-style('body-compact-01');
-    }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .tooltiptitle {
+    @include type.type-style('heading-02');
+    margin-bottom: spacing.$spacing-02;
   }
 
-  .tooltipcontent {
+  .closeButton {
+    min-height: 16px;
+    padding: 0;
+    align-self: flex-start;
+  }
+}
+
+.tooltipcontent {
     color: $color-gray-70;
     @include type.type-style('body-compact-01');
-  }
+    width: 100%;
+    margin-top: spacing.$spacing-01;
+}
+
 
   .tooltipfooter {
-    margin-top: spacing.$spacing-06;
+    margin-top: spacing.$spacing-03;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    .buttonback {
-      color: $color-blue-60-2;
+
+  .tooltipstep {
+    color: $color-gray-70;
+    @include type.type-style('body-compact-01');
+  }
+
+  .buttonContainer {
+    display: flex;
+    gap: spacing.$spacing-03;
+
+  .buttonback,
+  .buttonnext {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: spacing.$spacing-02;
+    width: spacing.$spacing-12;
+
+    .arrowLeft,
+    .arrowContainer {
       display: flex;
       align-items: center;
+      justify-content: center;
+      margin-left: spacing.$spacing-02;
     }
-    .buttonnext {
-      margin-left: auto;
-      width:spacing.$spacing-12; 
-      .arrowContainer {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-left: spacing.$spacing-05;
-      }
+
+    .arrowLeft svg {
+      fill: $color-blue-60-2 !important;
+      margin-right: spacing.$spacing-02;
     }
   }
 }
+}
+}

package/src/tutorial/modal.component.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import { ArrowRight } from '@carbon/react/icons';
+import { ModalHeader, ModalBody, Link } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { useConfig, useAppContext, navigate } from '@openmrs/esm-framework';
-import styles from './styles.scss';
 import { type TutorialContext } from '../types';
-import { ModalHeader, ModalBody, Button } from '@carbon/react';
+import styles from './styles.scss';
 
 const TutorialModal = ({ open, onClose }) => {
   const { t } = useTranslation();
@@ -13,7 +14,7 @@ const TutorialModal = ({ open, onClose }) => {
 
   const handleWalkthroughClick = (index: number) => {
     const basePath = window.getOpenmrsSpaBase();
-    const homePath = `${basePath}home`;
+    const homePath = `${basePath}home/service-queues`;
     const currentPath = window.location.pathname;
     const tutorial = tutorials[index];
 
@@ -39,7 +40,7 @@ const TutorialModal = ({ open, onClose }) => {
 
   return (
     <React.Fragment>
-      <ModalHeader closeModal={onClose} title={t('tutorial', 'Tutorial')}>
+      <ModalHeader closeModal={onClose} title={t('tutorial', 'Tutorial')} className={styles.modalHeader}>
         <p className={styles.description}>
           {t('modalDescription', 'Find walkthroughs and video tutorials on some of the core features of OpenMRS.')}
         </p>
@@ -50,9 +51,13 @@ const TutorialModal = ({ open, onClose }) => {
             <li className={styles.tutorialItem} key={index}>
               <h3 className={styles.tutorialTitle}>{tutorial.title}</h3>
               <p className={styles.tutorialDescription}>{tutorial.description}</p>
-              <Button kind="ghost" onClick={() => handleWalkthroughClick(index)}>
+              <Link
+                onClick={() => handleWalkthroughClick(index)}
+                className={styles.tutorialLink}
+                renderIcon={() => <ArrowRight aria-label="Arrow Right" />}
+              >
                 {t('walkthrough', 'Walkthrough')}
-              </Button>
+              </Link>
             </li>
           ))}
         </ul>

package/src/tutorial/{modal.component.test.tsx → modal.test.tsx}

@@ -1,8 +1,8 @@
 import React from 'react';
-import {render, screen, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
+import { useAppContext, useConfig, navigate } from '@openmrs/esm-framework';
 import TutorialModal from './modal.component';
-import {useAppContext, useConfig, navigate} from "@openmrs/esm-framework";
-import userEvent from '@testing-library/user-event'
 
 jest.mock('@openmrs/esm-framework', () => ({
   useConfig: jest.fn(),
@@ -57,7 +57,6 @@ mockUseAppContext.mockReturnValue({
 
 describe('TutorialModal', () => {
   afterEach(() => {
-    jest.clearAllMocks();
     delete window.location;
     window.location = { pathname: '/patient-registration' } as any;
   });
@@ -72,14 +71,18 @@ describe('TutorialModal', () => {
       },
     });
 
-    render(<TutorialModal open={true} onClose={jest.fn()}/>);
+    render(<TutorialModal open={true} onClose={jest.fn()} />);
 
     const walkthroughButton = screen.getAllByText('Walkthrough');
     await user.click(walkthroughButton[0]);
 
-    expect(navigate).toHaveBeenCalledWith({ to: '/spa-base/home' });
+    expect(mockNavigate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        to: expect.stringContaining('/spa-base/home/service-queues'),
+      }),
+    );
     Object.defineProperty(window.location, 'pathname', {
-      value: '/spa-base/home',
+      value: '/spa-base/home/service-queues',
     });
 
     await waitFor(() => expect(setSteps).toHaveBeenCalledWith(mockTutorialData[0].steps));
@@ -95,4 +98,3 @@ describe('TutorialModal', () => {
     });
   });
 });
-

package/src/tutorial/styles.scss

@@ -1,6 +1,7 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .description {
   margin-bottom: spacing.$spacing-04;
@@ -26,5 +27,38 @@
       @include type.type-style('body-compact-01');
     }
 
+    .tutorialLink {
+      margin-bottom: spacing.$spacing-04;
+      margin-top: spacing.$spacing-04;
+      cursor: pointer;
+    }
+  }
+}
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
   }
 }

package/src/tutorial/tutorial.tsx

@@ -8,6 +8,7 @@ const Tutorial = () => {
   const handleOpenModal = () => {
     const dispose = showModal('tutorial-modal', {
       onClose: () => dispose(),
+      size: 'sm',
     });
   };
 

package/src/types.ts

@@ -1,4 +1,4 @@
-import {type Step} from "react-joyride";
+import { type Step } from 'react-joyride';
 
 export interface Tutorial {
   title: string;
@@ -11,5 +11,5 @@ export interface TutorialContext {
   steps: Step[];
   setShowTutorial: (showTutorial: boolean) => void;
   setSteps: (steps: Step[]) => void;
+  [key: string | number | symbol]: unknown;
 }
-

package/tools/update-openmrs-deps.mjs

@@ -0,0 +1,43 @@
+import { execSync } from 'node:child_process';
+
+try {
+  // NB for other places use '@openmrs/*@next'; here we want to ignore patient-common-lib
+  execSync(`yarn up --fixed '@openmrs/esm-framework@next' 'openmrs@next'`, {
+    stdio: ['ignore', 'inherit', 'inherit'],
+    windowsHide: true,
+  });
+} catch (error) {
+  console.error(`Error while updating dependencies: ${error.message ?? error}`);
+  process.exit(1);
+}
+
+try {
+  execSync(`yarn dedupe`, {
+    stdio: ['ignore', 'inherit', 'inherit'],
+    windowsHide: true,
+  });
+} catch (error) {
+  console.error(`Error while deduplicating dependencies: ${error.message ?? error}`);
+  process.exit(1);
+}
+
+try {
+  execSync(`git diff-index --quiet HEAD --`, {
+    stdio: 'ignore',
+    windowsHide: true,
+  });
+  process.exit(0);
+} catch (error) {
+  // git diff-index --quite HEAD --
+  // exits with status 1 if there are changes; we only need to run yarn verify if there are changes
+}
+
+try {
+  execSync(`yarn verify`, {
+    stdio: ['ignore', 'inherit', 'inherit'],
+    windowsHide: true,
+  });
+} catch (error) {
+  console.error(`Error while running yarn verify: ${error.message ?? error}. Updates require manual intervention.`);
+  process.exit(1);
+}

package/translations/am.json

@@ -1 +1,9 @@
-{}
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/ar.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/ar_SY.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/bn.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/de.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/en_US.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/es.json

@@ -1 +1,9 @@
-{}
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/es_MX.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/fr.json

@@ -1 +1,9 @@
-{}
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Vous trouverez des guides et des tutoriels vidéo sur certaines des principales fonctionnalités d'OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutoriels",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/he.json

@@ -1 +1,9 @@
-{}
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/hi.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/hi_IN.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}

package/translations/id.json

@@ -0,0 +1,9 @@
+{
+  "back": "Kembali",
+  "finish": "Selesai",
+  "modalDescription": "Temukan panduan dan tutorial video tentang beberapa fitur inti OpenMRS.",
+  "next": "Berikutnya",
+  "tutorial": "Tutorial",
+  "walkthrough": "Panduan",
+  "welcome": "Selamat datang di OpenMRS!"
+}

package/translations/it.json

@@ -0,0 +1,9 @@
+{
+  "back": "Back",
+  "finish": "Finish",
+  "modalDescription": "Find walkthroughs and video tutorials on some of the core features of OpenMRS.",
+  "next": "Next",
+  "tutorial": "Tutorials",
+  "walkthrough": "Walkthrough",
+  "welcome": "Welcome to OpenMRS!"
+}