fix: using dirverjs to replace joyride

Author: Steven WILMOUTH

package.json

@@ -16,6 +16,7 @@
     "bootstrap": "^5.3.3",
     "date-fns": "^4.0.0",
     "dompurify": "^3.0.0",
+    "driver.js": "^1.3.6",
     "i18next": "^25.0.0",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^3.0.0",
@@ -34,8 +35,7 @@
     "react-hot-toast": "^2.4.0",
     "react-i18next": "^16.0.0",
     "react-icons": "^5.0.0",
-    "react-joyride": "^2.7.2",
-    "react-loader-spinner": "^8.0.0",
+    "react-loader-spinner": "^6.1.0",
     "react-select": "^5.7.0",
     "react-tooltip": "^5.13.1",
     "styled-components": "^6.0.7",

src/components/Shared/Driver/Driver.jsx

@@ -0,0 +1,78 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { driver } from "driver.js";
+import "driver.js/dist/driver.css";
+
+import { useTour } from './DriverContext.jsx';
+import { guidedTour } from '../../../services/index.js';
+import "./driver.css";
+
+function Driver({ locale = 'fr_FR', tourName, children, steps }) {
+  const { t, i18n } = useTranslation();
+
+  const { isOpen, setIsOpen } = useTour();
+
+  const [isEnded, setIsEnded] = useState(false);
+
+  const driverRef = useRef(null);
+
+  useEffect(() => {
+    if (!driverRef.current) {
+      driverRef.current = driver({
+        popoverClass: 'dmp-theme',
+        animate: true,
+        showProgress: true,
+        allowClose: false,
+        allowKeyboardControl: true,
+        stageRadius: 10,
+        stagePadding: 10,
+        nextBtnText: t('Next'),
+        prevBtnText: t('Previous'),
+        doneBtnText: t('Finish'),
+        progressText: '{{current}} / {{total}}',
+        steps,
+        onPopoverRender: (popover) => {
+          const ignoreBtn = document.createElement('button');
+          ignoreBtn.innerText = t('Ignore the guided tour');
+          popover.footerButtons.prepend(ignoreBtn);
+          ignoreBtn.addEventListener('click', () => driverRef?.current.destroy());
+        },
+        onDestroyed: () => {
+          if (!isEnded) {
+            guidedTour.endTour(tourName).then(({ data }) => {
+              setIsEnded(data?.tour?.ended);
+              setIsOpen(!data?.tour?.ended);
+            });
+          }
+        },
+      });
+    }
+  }, [steps]);
+
+  useEffect(() => {
+    i18n.changeLanguage(locale.substring(0, 2));
+    handleRenderedChildren(steps.map(({ element }) => element));
+  }, [isOpen]);
+
+  const handleRenderedChildren = (childrenTags) => {
+    const allChildrenRendered = childrenTags.every((tag) => document.querySelector(tag) !== null);
+
+    if (!allChildrenRendered) {
+      return setTimeout(() => handleRenderedChildren(childrenTags), 100);
+    }
+
+    return guidedTour.getTour(tourName)
+      .then(({ data }) => {
+        const open = isOpen || !data?.tour?.ended
+        setIsOpen(open);
+        setIsEnded(data?.tour?.ended)
+        if (open) {
+          driverRef?.current.drive();
+        }
+      });
+  };
+
+  return children;
+}
+
+export default Driver;

src/components/Shared/Driver/DriverContext.jsx

@@ -0,0 +1,21 @@
+import { createContext, useState, useContext } from 'react';
+
+export const DriverContext = createContext();
+
+export const DriverProvider = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <DriverContext.Provider value={{ isOpen, setIsOpen }}>
+      {children}
+    </DriverContext.Provider>
+  );
+};
+
+export const useTour = () => {
+  const context = useContext(DriverContext);
+  if (!context) {
+    throw new Error('useTour must be used within a DriverContext');
+  }
+  return context;
+};

src/components/Shared/Driver/driver.css

@@ -0,0 +1,87 @@
+.driver-popover.dmp-theme {
+  background-color: var(--rust);
+  color: var(--white);
+  min-width: 650px;
+  box-sizing: border-box;
+}
+
+.driver-popover.dmp-theme .driver-popover-title {
+  color: var(--white);
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0 20px 0;
+  box-sizing: border-box;
+  border-radius: 10px 10px 0 0;
+  align-items: center;
+}
+
+.driver-popover.dmp-theme .driver-popover-description {
+  color: var(--dark-blue);
+  padding: 10px;
+  border-radius: 10px;
+  box-sizing: border-box;
+  align-items: center;
+  background: var(--white);
+  min-height: 100px;
+}
+
+.driver-popover.dmp-theme .driver-popover-title,
+.driver-popover.dmp-theme .driver-popover-progress-text {
+  color: var(--white);
+}
+
+.driver-popover.dmp-theme button {
+  color: var(--white);
+  padding: 5px;
+  background: transparent;
+  border: none;
+  font-size: 10px;
+  min-width: 90px;
+  text-shadow: none;
+}
+
+.driver-popover.dmp-theme button.driver-popover-close-btn {
+  color: var(--white);
+  border-radius: none;
+  background: none;
+  border: none;
+  font-size: 32px;
+  margin: 8px 10px 0 0;
+}
+
+.driver-popover.dmp-theme button.driver-popover-next-btn,
+.driver-popover.dmp-theme button.driver-popover-prev-btn {
+  border-radius: 8px;
+  background: var(--rust);
+  color: var(--white);
+  border: 1px solid var(--white);
+  padding: 5px 10px 5px 10px;
+  font-size: 16px;
+  text-align: center;
+}
+
+.driver-popover.dmp-theme button:hover,
+.driver-popover.dmp-theme .driver-popover-close-btn:hover {
+  filter: brightness(90%);
+}
+
+.driver-popover.dmp-theme .driver-popover-footer {
+  margin-top: -5px;
+  height: 60px;
+}
+
+.driver-popover.dmp-theme .driver-popover-arrow-side-left.driver-popover-arrow {
+  border-left-color: var(--rust);
+}
+
+.driver-popover.dmp-theme .driver-popover-arrow-side-right.driver-popover-arrow {
+  border-right-color: var(--rust);
+}
+
+.driver-popover.dmp-theme .driver-popover-arrow-side-top.driver-popover-arrow {
+  border-top-color: var(--rust);
+}
+
+.driver-popover.dmp-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
+  border-bottom-color: var(--rust);
+}

src/components/Shared/Driver/index.jsx

@@ -0,0 +1,8 @@
+import { DriverProvider } from './DriverContext.jsx';
+import Driver from './Driver.jsx';
+
+export default (props) => (
+  <DriverProvider>
+    <Driver {...props} />
+  </DriverProvider>
+);