From 114e19eae2a76e66c16005497cb1af8bf5d6e71c Mon Sep 17 00:00:00 2001
From: JoelVR17 <vermudo.com@gmail.com>
Date: Tue, 25 Feb 2025 01:17:51 -0600
Subject: [PATCH] feat: integrate Joyride for guided tutorial and add help
 button in MyEscrows page

---
 .../modules/escrow/ui/pages/MyEscrows.tsx     | 52 ++++++++++++++++++-
 1 file changed, 50 insertions(+), 2 deletions(-)

diff --git a/src/components/modules/escrow/ui/pages/MyEscrows.tsx b/src/components/modules/escrow/ui/pages/MyEscrows.tsx
index 4aaba35..31563e9 100644
--- a/src/components/modules/escrow/ui/pages/MyEscrows.tsx
+++ b/src/components/modules/escrow/ui/pages/MyEscrows.tsx
@@ -14,13 +14,19 @@ import MyEscrowsTable from "@/components/modules/escrow/ui/tables/MyEscrowsTable
 import MyEscrowsCards from "@/components/modules/escrow/ui/cards/MyEscrowsCards";
 import MyEscrowsFilter from "@/components/modules/escrow/ui/filters/MyEscrowsFilter";
 import { useGlobalUIBoundedStore } from "@/core/store/ui";
-import JoyrideTutorial from "@/components/utils/ui/Joyride";
+import Joyride from "react-joyride";
+import { steps } from "@/constants/steps/steps";
+import { useState } from "react";
+import { CircleHelp } from "lucide-react";
 
 const MyEscrows = () => {
   const isLoading = useGlobalUIBoundedStore((state) => state.isLoading);
   const setActiveTab = useEscrowBoundedStore((state) => state.setActiveTab);
   const setActiveMode = useEscrowBoundedStore((state) => state.setActiveMode);
   const activeMode = useEscrowBoundedStore((state) => state.activeMode);
+  const theme = useGlobalUIBoundedStore((state) => state.theme);
+
+  const [run, setRun] = useState(false);
 
   return (
     <>
@@ -28,7 +34,40 @@ const MyEscrows = () => {
         <Loader isLoading={isLoading} />
       ) : (
         <>
-          <JoyrideTutorial />
+          <Joyride
+            run={run}
+            steps={steps}
+            continuous
+            showSkipButton
+            hideCloseButton
+            callback={(data) => {
+              const { status } = data;
+              if (status === "skipped" || status === "finished") {
+                setRun(false);
+              }
+            }}
+            disableOverlayClose
+            styles={{
+              options:
+                theme === "dark"
+                  ? {
+                      backgroundColor: "#19191B",
+                      overlayColor: "rgba(0, 0, 0, 0.80)",
+                      primaryColor: "#006BE4",
+                      textColor: "#FFF",
+                      width: 500,
+                      zIndex: 1000,
+                    }
+                  : {
+                      backgroundColor: "#FFFFFF",
+                      overlayColor: "rgba(0, 0, 0, 0.60)",
+                      primaryColor: "#006BE4",
+                      textColor: "#000",
+                      width: 500,
+                      zIndex: 1000,
+                    },
+            }}
+          />
 
           <div className="flex gap-3 w-full h-full justify-between">
             <Tabs defaultValue="issuer" className="w-full">
@@ -91,6 +130,15 @@ const MyEscrows = () => {
                     </SelectContent>
                   </Select>
                 </div>
+
+                <button
+                  title="Help"
+                  className="btn-dark"
+                  type="button"
+                  onClick={() => setRun(true)}
+                >
+                  <CircleHelp size={29} />
+                </button>
               </div>
 
               <TabsContent value="issuer" className="flex flex-col gap-3">