updates

platform/ui-next/src/contextProviders/OnboardingProvider.tsx

@@ -1,5 +1,6 @@
-import React, { useState, createContext, useContext, useEffect, useCallback } from 'react';
+import React, { createContext, useContext } from 'react';
 import { ShepherdJourneyProvider, useShepherd } from 'react-shepherd';
+import { StepOptions, TourOptions } from 'shepherd.js';
 import 'shepherd.js/dist/css/shepherd.css';
 
 const OnboardingProviderContext = createContext(null);
@@ -7,53 +8,30 @@ const { Provider } = OnboardingProviderContext;
 
 export const useOnboardingProvider = () => useContext(OnboardingProviderContext);
 
-const ShepherdController = () => {
+const ShepherdController = ({
+  tours,
+}: {
+  tours: Array<{
+    tourOptions: TourOptions;
+    steps: StepOptions[];
+    route: string;
+    id: string;
+  }>;
+}) => {
   const Shepherd = useShepherd();
-  const [tour, setTour] = useState(null);
-
-  const initializeTour = useCallback(
-    (steps, tourOptions = {}) => {
-      const newTour = new Shepherd.Tour({
-        steps,
-        ...tourOptions,
-      });
-      setTour(newTour);
-    },
-    [Shepherd]
-  );
-
-  const startTour = useCallback(() => {
-    if (tour) {
-      tour.start();
-    }
-  }, [tour]);
-
-  const exitTour = useCallback(() => {
-    if (tour) {
-      tour.cancel();
-    }
-  }, [tour]);
-
-  const nextStep = useCallback(() => {
-    if (tour) {
-      tour.next();
-    }
-  }, [tour]);
-
-  const previousStep = useCallback(() => {
-    if (tour) {
-      tour.back();
-    }
-  }, [tour]);
 
   return null;
 };
 
 const OnboardingProvider = ({ children }: { children: React.ReactNode }) => {
+  const tours = window?.config?.tours;
+  if (!tours) {
+    return <>{children}</>;
+  }
   return (
     <ShepherdJourneyProvider>
       <Provider value={{}}>
-        <ShepherdController />
+        <ShepherdController tours={tours} />
         {children}
       </Provider>
     </ShepherdJourneyProvider>