Merge pull request #407 from salmanja/013-jan-1-joyride

adding page tour to dashboard/home page

Clients/package.json

@@ -38,6 +38,7 @@
     "material-ui-popup-state": "^5.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-joyride": "^2.9.3",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.26.2",
     "redux": "^5.0.1",

Clients/src/App.css

@@ -22,3 +22,20 @@
 body {
   margin: 0;
 }
+
+/* preventing joyride default container from disrupting page layout */
+div.react-joyride {
+  position: absolute !important;
+  top: 0;
+  left:0;
+  width:100%;
+  height:100%;
+  pointer-events:none;
+  z-index: 1000;
+}
+
+div.react-joyride > * {
+  margin: 0;
+  padding:0;
+  box-sizing: border-box;
+}

Clients/src/presentation/components/PageTour/index.tsx

@@ -0,0 +1,51 @@
+import Joyride, {Step} from 'react-joyride';
+import React, {useEffect, useState} from 'react';
+
+interface PageTourProps {
+    steps: Step[];
+    run: boolean;   
+    onFinish?:()=>void;
+}
+
+const PageTour: React.FC<PageTourProps> =({steps, run, onFinish}) => {
+   const [shouldRun, setShouldRun] = useState(false);
+
+    useEffect (()=>{
+        //always check if tour was seen first before running it
+         const hasSeenTour = localStorage.getItem("hasSeenTour");
+         if(!hasSeenTour && run){
+            setShouldRun(true);
+         }
+    }, [run])
+
+    const handleCallback = (data:any)=>{
+        const {status} = data;
+        if (status === 'finished' || status === 'skipped'){
+            localStorage.setItem("hasSeenTour", "true");
+            setShouldRun(false);
+            if (onFinish){
+                onFinish();
+            }
+        }
+    }
+
+    return (
+      <Joyride
+        steps={steps}
+        run={shouldRun}
+        continuous
+        hideCloseButton
+        showProgress
+        showSkipButton
+        callback={handleCallback}
+        styles={{
+          options: {
+            primaryColor: "rgba(23, 92, 211, 1)",
+            zIndex: 1000,
+            beaconSize: 20,
+          },
+        }}
+      />
+    );
+}
+export default PageTour;

Clients/src/presentation/components/Popup/index.tsx

@@ -83,6 +83,7 @@ const Popup: FC<PopupProps> = ({
         onClick={handleOpenOrClose}
         sx={styles.openPopupButton}
         disableRipple={theme.components?.MuiButton?.defaultProps?.disableRipple}
+        data-joyride-id="new-project-button"
       >
         {openPopupButtonName}
       </Button>

Clients/src/presentation/components/Sidebar/index.tsx

@@ -146,7 +146,7 @@ const Sidebar = ({ projects }: { projects: any }) => {
   return (
     <Stack
       component="aside"
-      className={collapsed ? "collapsed" : "expanded"}
+      className={`sidebar-menu ${collapsed ? "collapsed" : "expanded"}`}
       py={theme.spacing(6)}
       gap={theme.spacing(6)}
       sx={{
@@ -170,7 +170,8 @@ const Sidebar = ({ projects }: { projects: any }) => {
         pb={theme.spacing(12)}
         pl={theme.spacing(12)}
       >
-        <Stack direction="row" alignItems="center" gap={theme.spacing(4)}>
+        <Stack direction="row" alignItems="center" gap={theme.spacing(4)}
+        className="app-title">
           <img src={Logo} alt="Logo" width={32} height={30} />
           <Typography
             component="span"
@@ -279,6 +280,7 @@ const Sidebar = ({ projects }: { projects: any }) => {
                     ? "selected-path"
                     : "unselected"
                 }
+                data-joyride-id={item.name.toLowerCase().replace(/ /g, "-")}
                 onClick={() => navigate(`${item.path}`)}
                 sx={{
                   height: "37px",

Clients/src/presentation/containers/Dashboard/index.tsx

@@ -8,12 +8,49 @@ import {
   getEntityById,
   getAllEntities,
 } from "../../../application/repository/entity.repository";
+import PageTour from "../../components/PageTour";
 
 const Dashboard = () => {
   const { token, setDashboardValues } = useContext(VerifyWiseContext);
   const [projects, setProjects] = useState([]);
   const [_, setUsers] = useState([]);
 
+  const [runTour, setRunTour] = useState(false);
+  //joyride steps
+  const steps = [
+    // Sidebar steps
+    {
+      target: '[data-joyride-id="dashboard"]',
+      content:
+        "This is the Dashboard section. Click here to view the overview.",
+    },
+    {
+      target: '[data-joyride-id="compliance-tracker"]',
+      content: "Track your compliance status here.",
+    },
+    {
+      target: '[data-joyride-id="assessment-tracker"]',
+      content: "Track your assessments here.",
+    },
+    {
+      target: '[data-joyride-id="vendors"]',
+      content: "Manage your vendors here.",
+    },
+    {
+      target: '[data-joyride-id="file-manager"]',
+      content: "Access your files in the File Manager.",
+    },
+    // Home Page steps
+    {
+      target: '[data-joyride-id="project-overview"]',
+      content: "This section gives you an overview of all your projects.",
+    },
+    {
+      target: '[data-joyride-id="new-project-button"]',
+      content: "Click here to create a new project.",
+    },
+  ];
+
   useEffect(() => {
     const fetchProjects = async () => {
       try {
@@ -45,6 +82,13 @@ const Dashboard = () => {
     fetchUsers();
   }, [setDashboardValues]);
 
+  useEffect(() => {
+    //start tour only after projects load
+    if (projects.length > 0) {
+      setRunTour(true);
+    }
+  }, [projects]);
+
   const mappedProjects = projects.map((project: any) => ({
     _id: project.id,
     name: project.project_title,
@@ -61,6 +105,13 @@ const Dashboard = () => {
       sx={{ backgroundColor: "#FCFCFD" }}
     >
       <Sidebar projects={mappedProjects} />
+
+      {/* Joyride */}
+      <PageTour
+        steps={steps}
+        run={runTour}
+        onFinish={() => setRunTour(false)}
+      />
       <Outlet />
     </Stack>
   );