Disable expand button on concept card intro step. Track tour start so…

… multiple can't be activated at once
helxplatform · Sep 13, 2024 · 1ead0c1 · 1ead0c1
1 parent eb04ddd
commit 1ead0c1
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 9 deletions.
diff --git a/src/components/guided-tour/guided-tour-button.tsx b/src/components/guided-tour/guided-tour-button.tsx
@@ -5,14 +5,15 @@ import classNames from 'classnames'
 import './guided-tour.css'
 
 export const GuidedTourButton = ({ }) => {
-    const { tour } = useTourContext()!
+    const { tour, tourStarted } = useTourContext()!
     const { context } = useEnvironment() as any
 
     return (
         <div className="guided-tour-button-container">
             <Button
                 className={ classNames("guided-tour-button", context.brand) }
-                onClick={ () => tour.start() }
+                disabled={ tourStarted }
+                onClick={ () => !tourStarted && tour.start() }
             >
                 Take a Tour
             </Button>

diff --git a/src/contexts/tour-context/context.tsx b/src/contexts/tour-context/context.tsx
@@ -1,4 +1,4 @@
-import { Fragment, ReactNode, createContext, useContext, useEffect, useMemo, useRef } from 'react'
+import { Fragment, ReactNode, createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { useShepherdTour, Tour, ShepherdOptionsWithType } from 'react-shepherd'
 import { offset as tooltipOffset } from '@floating-ui/dom'
@@ -17,6 +17,7 @@ interface ShepherdOptionsWithTypeFixed extends ShepherdOptionsWithType {
 
 export interface ITourContext {
     tour: any
+    tourStarted: boolean
 }
 
 export interface ITourProvider {
@@ -65,6 +66,8 @@ export const TourProvider = ({ children }: ITourProvider ) => {
     const location = useLocation()
     const navigate = useNavigate()
 
+    const [tourStarted, setTourStarted] = useState<boolean>(false)
+
     const removeTrailingSlash = (url: string) => url.endsWith("/") ? url.slice(0, url.length - 1) : url
     const activeRoutes = useMemo<any[] | undefined>(() => {
         if (basePath === undefined) return undefined
@@ -273,10 +276,42 @@ export const TourProvider = ({ children }: ITourProvider ) => {
                     }
                 ],
                 when: {
-                    show: () => resultCardDomMask.showMask(),
-                    hide: () => resultCardDomMask.hideMask(),
-                    cancel: () => resultCardDomMask.hideMask(),
-                    complete: () => resultCardDomMask.hideMask()
+                    show: () => {
+                        resultCardDomMask.showMask()
+
+                        const expandBtn = getExpandButton()
+                        if (expandBtn) {
+                            expandBtn.style.pointerEvents = "none"
+                            expandBtn.style.color = "rgba(0, 0, 0, 0.35)"
+                        }
+                    },
+                    hide: () => {
+                        resultCardDomMask.hideMask()
+
+                        const expandBtn = getExpandButton()
+                        if (expandBtn) {
+                            expandBtn.style.removeProperty("pointer-events")
+                            expandBtn.style.removeProperty("color")
+                        }
+                    },
+                    cancel: () => {
+                        resultCardDomMask.hideMask()
+
+                        const expandBtn = getExpandButton()
+                        if (expandBtn) {
+                            expandBtn.style.removeProperty("pointer-events")
+                            expandBtn.style.removeProperty("color")
+                        }
+                    },
+                    complete: () => {
+                        resultCardDomMask.hideMask()
+
+                        const expandBtn = getExpandButton()
+                        if (expandBtn) {
+                            expandBtn.style.removeProperty("pointer-events")
+                            expandBtn.style.removeProperty("color")
+                        }
+                    }
                 }
             },
             {
@@ -671,13 +706,19 @@ export const TourProvider = ({ children }: ITourProvider ) => {
     const tour = useShepherdTour({ tourOptions, steps: tourSteps })
 
     useEffect(() => {
+        const startTour = () => {
+            setTourStarted(true)
+        }
         const cleanupTour = () => {
+            setTourStarted(false)
             console.log("cleanup")
         }
+        tour.on("start", startTour)
         tour.on("complete", cleanupTour)
         tour.on("cancel", cleanupTour)
 
         return () => {
+            tour.off("start", startTour)
             tour.off("complete", cleanupTour)
             tour.off("cancel", cleanupTour)
         }
@@ -731,6 +772,7 @@ export const TourProvider = ({ children }: ITourProvider ) => {
     return (
         <TourContext.Provider value={{
             tour,
+            tourStarted
         }}>
             { children }
         </TourContext.Provider>

diff --git a/src/views/support.js b/src/views/support.js
@@ -1,10 +1,11 @@
 import { Fragment, useEffect } from 'react'
 import { Typography } from 'antd'
-import { useAnalytics, useEnvironment } from '../contexts'
+import { useAnalytics, useEnvironment, useTourContext } from '../contexts'
 import { useTitle } from './'
 import {faqsOpened, userGuideOpened} from "../contexts/analytics-context/events/support-events";
+import { GuidedTourButton } from '../components';
 
-const { Title } = Typography
+const { Title, Link } = Typography
 
 // This section points to a portal to report bugs, submit feedback, or feature requests for the deployments.
 const HelpPortal = (context) =>{
@@ -90,15 +91,34 @@ const UserGuide = (context) => {
   )
  }
 
+const GuidedTourSection = (context) => {
+  return (
+    <Fragment>
+      <Title level={1}>Take a Guided Tour</Title>
+      <Typography>
+        <Link
+          disabled={ context.tourStarted }
+          onClick={ () => !context.tourStarted && context.tour.start() }>
+            <b>Click here</b>
+        </Link>
+        &nbsp;to take a brief guided tour of { context.brand === "heal" ? "HEAL Semantic Search" : "Semantic Search" }
+      </Typography>
+    </Fragment>
+  )
+}
 
 
 export const SupportView = () => {
   const { context } = useEnvironment()
+  const { tour, tourStarted } = useTourContext()
   useTitle("Get Help")
   return (
     <Fragment>
       {context.support.help_portal_url && <HelpPortal help_portal_url={context.support.help_portal_url} />}
       {(context.support.user_guide_url || context.support.faqs_url) && <Documentation user_guide_url={context.support.user_guide_url} faqs_url={context.support.faqs_url}/>}
+      <GuidedTourSection brand={ context.brand } tour={ tour } tourStarted={ tourStarted } />
+
+      <GuidedTourButton />
     </Fragment>
   )
 }