From 548ac2ead53cd97418b47cc0ba7d55d905e65b1b Mon Sep 17 00:00:00 2001
From: Juga Paazmaya <paazmaya@yahoo.com>
Date: Thu, 10 Aug 2023 17:13:30 +0300
Subject: [PATCH 1/3] Customised Tooltip container for Joyride in Guided Tour,
 to use MUI

---
 src/components/GuidedTour.tsx               |   9 +-
 src/components/GuidedTourJoyrideTooltip.tsx | 115 ++++++++++++++++++++
 2 files changed, 117 insertions(+), 7 deletions(-)
 create mode 100644 src/components/GuidedTourJoyrideTooltip.tsx

diff --git a/src/components/GuidedTour.tsx b/src/components/GuidedTour.tsx
index 818117cb..f17847ae 100644
--- a/src/components/GuidedTour.tsx
+++ b/src/components/GuidedTour.tsx
@@ -3,6 +3,7 @@ import Joyride, { CallBackProps, STATUS } from "react-joyride";
 import { Button } from "@mui/material";
 import { useHelpState } from "../contexts";
 import { LiveHelp } from "@mui/icons-material";
+import GuidedTourJoyrideTooltip from "./GuidedTourJoyrideTooltip";
 
 const GuidedTour: FunctionComponent = () => {
   const [run, setRun] = React.useState(false);
@@ -44,6 +45,7 @@ const GuidedTour: FunctionComponent = () => {
     <React.Fragment>
       <Button startIcon={<LiveHelp />} onClick={handleClickStart}>
         <Joyride
+          tooltipComponent={GuidedTourJoyrideTooltip}
           callback={handleJoyrideCallback}
           continuous={true}
           run={run}
@@ -56,13 +58,6 @@ const GuidedTour: FunctionComponent = () => {
             options: {
               zIndex: 10000,
             },
-            buttonNext: {
-              color: "#3f51b5",
-              backgroundColor: "",
-            },
-            buttonBack: {
-              color: "#3f51b5",
-            },
           }}
         />
         Take a tour
diff --git a/src/components/GuidedTourJoyrideTooltip.tsx b/src/components/GuidedTourJoyrideTooltip.tsx
new file mode 100644
index 00000000..5b5eb2c6
--- /dev/null
+++ b/src/components/GuidedTourJoyrideTooltip.tsx
@@ -0,0 +1,115 @@
+import React from "react";
+import { Button, IconButton } from "@mui/material";
+import { Close } from "@mui/icons-material";
+import { TooltipRenderProps } from "react-joyride";
+
+// https://github.com/gilbarbara/react-joyride/blob/main/docs/custom-components.md
+const GuidedTourJoyrideTooltip = ({
+  backProps,
+  closeProps,
+  continuous,
+  index,
+  isLastStep,
+  primaryProps,
+  size,
+  skipProps,
+  step,
+  tooltipProps,
+}: TooltipRenderProps): React.JSX.Element => {
+  const {
+    content,
+    hideBackButton,
+    hideCloseButton,
+    hideFooter,
+    showProgress,
+    showSkipButton,
+    title,
+    styles,
+  } = step;
+
+  const { back, close, last, next, skip } = step.locale;
+
+  const primaryButton = () => {  
+    let output = close;
+    if (continuous) {
+      output = isLastStep ? last : next;
+    }
+    return (
+      <Button
+            data-testid="tour-button-next"
+            color="primary"
+            {...primaryProps}
+          >
+          {output}
+          {continuous && showProgress && ` (${index + 1}/${size})`}
+        </Button>
+    );
+  };
+
+  const skipButton = () => {
+    return (
+      <Button
+        style={styles?.buttonSkip}
+        data-testid="tour-button-skip"
+        aria-live="off"
+        {...skipProps}
+      >
+        {skip}
+      </Button>
+    );
+  };
+  const backButton = () => {
+    return (
+      <Button
+        style={styles?.buttonBack}
+        data-testid="tour-button-back"
+        {...backProps}
+      >
+        {back}
+      </Button>
+    );
+  };
+  const closeButton = () => {
+    return (
+      <IconButton
+        style={styles?.buttonClose}
+        data-testid="tour-button-close"
+        {...closeProps}
+        size="large"
+      >
+        <Close />
+      </IconButton>
+    );
+  };
+
+  return (
+    <div
+      key="JoyrideTooltip"
+      className="react-joyride__tooltip"
+      style={styles?.tooltip}
+      aria-describedby="help-description"
+      {...tooltipProps}
+    >
+      <div style={styles?.tooltipContainer}>
+        {title && (
+          <h4 style={styles?.tooltipTitle} aria-label={title}>
+            {title}
+          </h4>
+        )}
+        <div id="help-description" style={styles?.tooltipContent}>{content}</div>
+      </div>
+      {!hideFooter && (
+        <div style={styles?.tooltipFooter}>
+          <div style={styles?.tooltipFooterSpacer}>
+            {showSkipButton && !isLastStep && skipButton()}
+          </div>
+          {!hideBackButton && index > 0 && backButton()}
+          {primaryButton()}
+        </div>
+      )}
+      {!hideCloseButton && closeButton()}
+    </div>
+  );
+};
+
+export default GuidedTourJoyrideTooltip;

From 39eddaa02e59249c90a9383edfd5b8a652e75b79 Mon Sep 17 00:00:00 2001
From: Juga Paazmaya <paazmaya@yahoo.com>
Date: Wed, 23 Aug 2023 11:18:58 +0300
Subject: [PATCH 2/3] Using grid and filled main buttons

---
 src/components/GuidedTourJoyrideTooltip.tsx | 42 +++++++++++++--------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/components/GuidedTourJoyrideTooltip.tsx b/src/components/GuidedTourJoyrideTooltip.tsx
index 5b5eb2c6..5b5e3237 100644
--- a/src/components/GuidedTourJoyrideTooltip.tsx
+++ b/src/components/GuidedTourJoyrideTooltip.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, IconButton } from "@mui/material";
+import { Button, IconButton, Grid } from "@mui/material";
 import { Close } from "@mui/icons-material";
 import { TooltipRenderProps } from "react-joyride";
 
@@ -29,20 +29,21 @@ const GuidedTourJoyrideTooltip = ({
 
   const { back, close, last, next, skip } = step.locale;
 
-  const primaryButton = () => {  
+  const primaryButton = () => {
     let output = close;
     if (continuous) {
       output = isLastStep ? last : next;
     }
     return (
       <Button
-            data-testid="tour-button-next"
-            color="primary"
-            {...primaryProps}
-          >
-          {output}
-          {continuous && showProgress && ` (${index + 1}/${size})`}
-        </Button>
+        data-testid="tour-button-next"
+        variant="contained"
+        color="primary"
+        {...primaryProps}
+      >
+        {output}
+        {continuous && showProgress && ` (${index + 1}/${size})`}
+      </Button>
     );
   };
 
@@ -61,7 +62,8 @@ const GuidedTourJoyrideTooltip = ({
   const backButton = () => {
     return (
       <Button
-        style={styles?.buttonBack}
+        variant="contained"
+        color="secondary"
         data-testid="tour-button-back"
         {...backProps}
       >
@@ -96,15 +98,23 @@ const GuidedTourJoyrideTooltip = ({
             {title}
           </h4>
         )}
-        <div id="help-description" style={styles?.tooltipContent}>{content}</div>
+        <div id="help-description" style={styles?.tooltipContent}>
+          {content}
+        </div>
       </div>
       {!hideFooter && (
         <div style={styles?.tooltipFooter}>
-          <div style={styles?.tooltipFooterSpacer}>
-            {showSkipButton && !isLastStep && skipButton()}
-          </div>
-          {!hideBackButton && index > 0 && backButton()}
-          {primaryButton()}
+          <Grid container spacing={2}>
+            <Grid item xs={4}>
+              {showSkipButton && !isLastStep && skipButton()}
+            </Grid>
+            <Grid item xs={4}>
+              {!hideBackButton && index > 0 && backButton()}
+            </Grid>
+            <Grid item xs={4}>
+              {primaryButton()}
+            </Grid>
+          </Grid>
         </div>
       )}
       {!hideCloseButton && closeButton()}

From 1bc3244e81ee64c0f023ca33bcf0392baf31717c Mon Sep 17 00:00:00 2001
From: Juga Paazmaya <paazmaya@yahoo.com>
Date: Wed, 23 Aug 2023 11:19:25 +0300
Subject: [PATCH 3/3] Global needed for Joyride

---
 vite.config.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/vite.config.ts b/vite.config.ts
index ab8c1984..1ca4a306 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -44,4 +44,7 @@ export default defineConfig({
         }
         */
   },
+  define: {
+    global: {},
+  },
 });