Repository: UnlockedLabs/UnlockEdv2
Pull request #814: fix: update bug fixes on tour
Author: login: calisio
Labels: name: frontend
Created: 2025-03-27T16:44:39Z | Merged: 2025-03-31T19:57:15Z

## Description of the change
Fixes a few bugs related to welcome tour, including:
- users click on "knowledge center" and then click back when prompted with "Welcome to the Knowledge Center. Here, you can find a range of resources in both written and video format, as well as helpful links.". It now allows you to click on knowledge center again.
- Click on the specific library and see the pop-up: "Here, you can see everything inside the library." Click the Back button on this pop-up. should take you back to be able to click into the library.
- clicking back from the "top content" pop up takes you back to library viewer sub page favorite pop up.
- Adds steps to the tour so the user can tell how far along they are
- changes the code to refer to the step by its target id, rather than by the step index for easy updating in the future if we wanted to add steps.
- **Related issues**: closes asana task [BUG: Guided Tour Navigation Issues in UnlockEd](https://app.asana.com/0/1209460078641109/1209714374559486/f)
## Screenshot(s)
Added steps:
<img width="1512" alt="Screenshot 2025-03-27 at 12 31 53 PM" src="https://github.com/user-attachments/assets/6206480f-ddac-4c5e-9132-3962b32f7bbf" />


Diff:
diff --git a/frontend/src/Components/LibraryLayout.tsx b/frontend/src/Components/LibraryLayout.tsx
index 918c7a417..42565a720 100644
--- a/frontend/src/Components/LibraryLayout.tsx
+++ b/frontend/src/Components/LibraryLayout.tsx
@@ -17,13 +17,14 @@ import { useLoaderData, useLocation } from 'react-router-dom';
 import LibrarySearchResultsModal from '@/Components/LibrarySearchResultsModal';
 import CategoryDropdownFilter from './CategoryDropdownFilter';
 import { useTourContext } from '@/Context/TourContext';
+import { targetToStepIndexMap } from './UnlockEdTour';
 
 export default function LibaryLayout({
     studentView
 }: {
     studentView?: boolean;
 }) {
-    const { tourState } = useTourContext();
+    const { tourState, setTourState } = useTourContext();
     const { user } = useAuth();
     if (!user) {
         return null;
@@ -98,6 +99,21 @@ export default function LibaryLayout({
         void mutateLibraries();
     }
 
+    useEffect(() => {
+        if (tourState.tourActive) {
+            if (
+                tourState.target === '#library-viewer-sub-page' ||
+                tourState.target === '#knowledge-center-fav-lib'
+            ) {
+                setTourState({
+                    stepIndex:
+                        targetToStepIndexMap['#knowledge-center-enter-library'],
+                    target: '#knowledge-center-enter-library'
+                });
+            }
+        }
+    }, []);
+
     return (
         <>
             <div className="flex flex-row gap-4">
@@ -141,7 +157,8 @@ export default function LibaryLayout({
                             <div
                                 id="knowledge-center-enter-library"
                                 className={
-                                    tourState.stepIndex === 8
+                                    tourState.target ===
+                                    '#knowledge-center-enter-library'
                                         ? 'animate-pulse border border-2 border-primary-yellow rounded-xl'
                                         : ''
                                 }
diff --git a/frontend/src/Components/Navbar.tsx b/frontend/src/Components/Navbar.tsx
index 11d20a566..86195e665 100644
--- a/frontend/src/Components/Navbar.tsx
+++ b/frontend/src/Components/Navbar.tsx
@@ -228,7 +228,8 @@ export default function Navbar({
                                     <li
                                         id="navigate-homepage"
                                         className={
-                                            tourState.stepIndex === 11
+                                            tourState.target ===
+                                            '#navigate-homepage'
                                                 ? 'animate-pulse border border-2 border-primary-yellow rounded-xl'
                                                 : ''
                                         }
@@ -241,7 +242,8 @@ export default function Navbar({
                                     <li
                                         id="visit-knowledge-center"
                                         className={
-                                            tourState.stepIndex === 1
+                                            tourState.target ===
+                                            '#visit-knowledge-center'
                                                 ? 'animate-pulse border border-2 border-primary-yellow rounded-xl'
                                                 : ''
                                         }
diff --git a/frontend/src/Components/UnlockEdTour.tsx b/frontend/src/Components/UnlockEdTour.tsx
index dd0c4dfc8..15e534004 100644
--- a/frontend/src/Components/UnlockEdTour.tsx
+++ b/frontend/src/Components/UnlockEdTour.tsx
@@ -1,9 +1,27 @@
 import { ThemeContext } from '@/Context/ThemeContext';
-import { useTourContext } from '@/Context/TourContext';
-import { useContext, useEffect } from 'react';
+import { initialTourState, useTourContext } from '@/Context/TourContext';
+import { useContext } from 'react';
 import Joyride, { CallBackProps, EVENTS } from 'react-joyride';
 import { useNavigate } from 'react-router-dom';
 
+export const targetToStepIndexMap = {
+    '#resident-home': 0,
+    '#visit-knowledge-center': 1,
+    '#knowledge-center-landing': 2,
+    '#knowledge-center-tabs': 3,
+    '#knowledge-center-search': 4,
+    '#knowledge-center-filters': 5,
+    '#knowledge-center-search-lib': 6,
+    '#knowledge-center-fav-lib': 7,
+    '#knowledge-center-enter-library': 8,
+    '#library-viewer-sub-page': 9,
+    '#library-viewer-favorite': 10,
+    '#navigate-homepage': 11,
+    '#top-content': 12,
+    '#popular-content': 13,
+    '#end-tour': 14
+};
+
 export default function UnlockEdTour() {
     const {
         tourState: { run, stepIndex, steps },
@@ -31,153 +49,56 @@ export default function UnlockEdTour() {
                   }
               };
 
-    useEffect(() => {
-        setTourState({
-            steps: [
-                {
-                    target: '#resident-home',
-                    content:
-                        "Welcome to UnlockEd, a place for you to access and explore educational content. Let's take a quick tour to show you how things work.",
-                    disableBeacon: true,
-                    showSkipButton: true,
-                    placement: 'center'
-                },
-                {
-                    target: '#visit-knowledge-center',
-                    content:
-                        'Click on Knowledge Center to access a variety of resources. Try it now!',
-                    disableOverlayClose: true,
-                    disableBeacon: true,
-                    spotlightClicks: true,
-                    hideCloseButton: true,
-                    hideFooter: true
-                },
-                {
-                    target: '#knowledge-center-landing',
-                    content:
-                        'Welcome to the Knowledge Center. Here, you can find a range of resources in both written and video format, as well as helpful links.',
-                    disableBeacon: true,
-                    disableOverlayClose: true,
-                    placement: 'center'
-                },
-                {
-                    target: '#knowledge-center-tabs',
-                    content:
-                        'Use these tabs to switch between different types of resources.',
-                    disableBeacon: true,
-                    disableOverlayClose: true
-                },
-                {
-                    target: '#knowledge-center-search',
-                    content:
-                        'To find something specific, you could type in a word or a title into the search bar.',
-                    disableBeacon: true,
-                    disableOverlayClose: true
-                },
-                {
-                    target: '#knowledge-center-filters',
-                    content:
-                        'Too many results? You could use filters to see content by category.',
-                    disableBeacon: true,
-                    spotlightClicks: true,
-                    disableOverlayClose: true,
-                    placement: 'left'
-                },
-                {
-                    target: '#knowledge-center-search-lib',
-                    content:
-                        "If you'd like to search within a specific library, you could use the magnifying glass.",
-                    disableBeacon: true,
-                    disableOverlayClose: true
-                },
-                {
-                    target: '#knowledge-center-fav-lib',
-                    content:
-                        'The star allows you to favorite the library for easy access later. Try favoriting a library to save it for later!',
-                    disableBeacon: true,
-                    spotlightClicks: true,
-                    disableOverlayClose: true
-                },
-                {
-                    target: '#knowledge-center-enter-library',
-                    content:
-                        "Click on a library to open it and see what's inside. Try it now!",
-                    disableBeacon: true,
-                    spotlightClicks: true,
-                    hideFooter: true
-                },
-                {
-                    target: '#library-viewer-sub-page',
-                    content: 'Here, you can see everything inside the library.',
-                    disableBeacon: true,
-                    disableOverlayClose: true,
-                    placement: 'center'
-                },
-                {
-                    target: '#library-viewer-favorite',
-                    content:
-                        "If you're liking a page and want to return to it later, you could favorite it by giving it a name. Try it now!",
-                    disableBeacon: true,
-                    spotlightClicks: true,
-                    disableOverlayClose: true
-                },
-                {
-                    target: '#navigate-homepage',
-                    content:
-                        'You can always return to the homepage by clicking Home. Try it now!',
-                    disableBeacon: true,
-                    disableOverlayClose: true,
-                    spotlightClicks: true,
-                    hideFooter: true,
-                    placement: 'right',
-                    disableScrolling: true
-                },
-                {
-                    target: '#top-content',
-                    content:
-                        'Your top content shows the libraries and videos you visit the most.',
-                    disableBeacon: true,
-                    disableOverlayClose: true,
-                    placement: 'top'
-                },
-                {
-                    target: '#popular-content',
-                    content:
-                        'Find new content to explore based on what others in your facility are using!',
-                    disableBeacon: true,
-                    disableOverlayClose: true,
-                    placement: 'top'
-                },
-                {
-                    target: '#end-tour',
-                    content:
-                        'That\'s it! You\'re now ready to use UnlockEd. If you need help, revisit this tour anytime by clicking "Get Help".',
-                    disableBeacon: true,
-                    disableOverlayClose: true,
-                    placement: 'center'
-                }
-            ]
-        });
-    }, []);
-
     const handleCallback = (data: CallBackProps) => {
-        const { action, index, type } = data;
+        const { action, index, type, step } = data;
+        const currentTarget = step.target;
         if (
             action === 'close' ||
             action === 'skip' ||
             type === EVENTS.TOUR_END
         ) {
-            setTourState({ tourActive: false, run: false, stepIndex: 0 });
+            setTourState(initialTourState);
         }
-
         if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) {
             if (action === 'next') {
-                setTourState({ stepIndex: index + 1 });
+                if (currentTarget === '#end-tour') {
+                    setTourState(initialTourState);
+                }
+                const nextTarget = steps[index + 1]?.target as string;
+                if (nextTarget) {
+                    setTourState({
+                        stepIndex:
+                            targetToStepIndexMap[
+                                nextTarget as keyof typeof targetToStepIndexMap
+                            ],
+                        target: nextTarget
+                    });
+                }
             } else if (action === 'prev') {
-                if (stepIndex === 12) {
-                    navigate('/viewer/libraries/1');
-                } else {
-                    setTourState({ stepIndex: index - 1 });
+                const prevTarget = steps[index - 1]?.target as string;
+                switch (currentTarget) {
+                    case '#knowledge-center-landing':
+                        setTourState({
+                            stepIndex: targetToStepIndexMap['#resident-home'],
+                            target: '#resident-home'
+                        });
+                        navigate('/home');
+                        return;
+                    case '#library-viewer-sub-page':
+                        navigate('/knowledge-center/libraries');
+                        return;
+                    case '#top-content':
+                        navigate('/viewer/libraries/1');
+                        return;
+                    default:
+                        setTourState({
+                            stepIndex:
+                                targetToStepIndexMap[
+                                    prevTarget as keyof typeof targetToStepIndexMap
+                                ],
+                            target: prevTarget
+                        });
+                        break;
                 }
             }
         }
@@ -187,6 +108,10 @@ export default function UnlockEdTour() {
         <>
             <Joyride
                 steps={steps}
+                locale={{
+                    nextLabelWithProgress: 'Next ({step} of {steps})',
+                    last: 'Done'
+                }}
                 continuous
                 stepIndex={stepIndex}
                 run={run}
diff --git a/frontend/src/Components/modals/FormModal.tsx b/frontend/src/Components/modals/FormModal.tsx
index 41df95821..208639484 100644
--- a/frontend/src/Components/modals/FormModal.tsx
+++ b/frontend/src/Components/modals/FormModal.tsx
@@ -17,6 +17,7 @@ import {
 import { forwardRef, useEffect } from 'react';
 import { FormInputTypes, Input, InputWithOptions } from '.';
 import { useTourContext } from '@/Context/TourContext';
+import { targetToStepIndexMap } from '../UnlockEdTour';
 
 interface FormModalProps<T extends FieldValues> {
     title: string;
@@ -61,7 +62,10 @@ export const FormModal = forwardRef(function FormModal<T extends FieldValues>(
     };
 
     useEffect(() => {
-        setTourState({ stepIndex: 11 });
+        setTourState({
+            stepIndex: targetToStepIndexMap['#navigate-homepage'],
+            target: '#navigate-homepage'
+        });
     }, []);
 
     return (
diff --git a/frontend/src/Context/TourContext.tsx b/frontend/src/Context/TourContext.tsx
index ec526f7db..454e2b41d 100644
--- a/frontend/src/Context/TourContext.tsx
+++ b/frontend/src/Context/TourContext.tsx
@@ -6,11 +6,146 @@ interface TourContextType {
     setTourState: React.Dispatch<React.SetStateAction<TourState>>;
 }
 
-const initialTourState: TourState = {
+export const initialTourState: TourState = {
     run: false,
     stepIndex: 0,
-    steps: [],
-    tourActive: false
+    steps: [
+        {
+            target: '#resident-home',
+            content:
+                "Welcome to UnlockEd, a place for you to access and explore educational content. Let's take a quick tour to show you how things work.",
+            disableBeacon: true,
+            showSkipButton: true,
+            placement: 'center',
+            showProgress: true
+        },
+        {
+            target: '#visit-knowledge-center',
+            content:
+                'Click on Knowledge Center to access a variety of resources. Try it now!',
+            disableOverlayClose: true,
+            disableBeacon: true,
+            spotlightClicks: true,
+            hideCloseButton: true,
+            hideFooter: true
+        },
+        {
+            target: '#knowledge-center-landing',
+            content:
+                'Welcome to the Knowledge Center. Here, you can find a range of resources in both written and video format, as well as helpful links.',
+            disableBeacon: true,
+            disableOverlayClose: true,
+            placement: 'center',
+            showProgress: true
+        },
+        {
+            target: '#knowledge-center-tabs',
+            content:
+                'Use these tabs to switch between different types of resources.',
+            disableBeacon: true,
+            disableOverlayClose: true,
+            showProgress: true
+        },
+        {
+            target: '#knowledge-center-search',
+            content:
+                'To find something specific, you could type in a word or a title into the search bar.',
+            disableBeacon: true,
+            disableOverlayClose: true,
+            showProgress: true
+        },
+        {
+            target: '#knowledge-center-filters',
+            content:
+                'Too many results? You could use filters to see content by category.',
+            disableBeacon: true,
+            spotlightClicks: true,
+            disableOverlayClose: true,
+            placement: 'left',
+            showProgress: true
+        },
+        {
+            target: '#knowledge-center-search-lib',
+            content:
+                "If you'd like to search within a specific library, you could use the magnifying glass.",
+            disableBeacon: true,
+            disableOverlayClose: true,
+            showProgress: true
+        },
+        {
+            target: '#knowledge-center-fav-lib',
+            content:
+                'The star allows you to favorite the library for easy access later. Try favoriting a library to save it for later!',
+            disableBeacon: true,
+            spotlightClicks: true,
+            disableOverlayClose: true,
+            showProgress: true
+        },
+        {
+            target: '#knowledge-center-enter-library',
+            content:
+                "Click on a library to open it and see what's inside. Try it now!",
+            disableBeacon: true,
+            spotlightClicks: true,
+            hideFooter: true
+        },
+        {
+            target: '#library-viewer-sub-page',
+            content: 'Here, you can see everything inside the library.',
+            disableBeacon: true,
+            disableOverlayClose: true,
+            placement: 'center',
+            showProgress: true
+        },
+        {
+            target: '#library-viewer-favorite',
+            content:
+                "If you're liking a page and want to return to it later, you could favorite it by giving it a name. Try it now!",
+            disableBeacon: true,
+            spotlightClicks: true,
+            disableOverlayClose: true,
+            showProgress: true
+        },
+        {
+            target: '#navigate-homepage',
+            content:
+                'You can always return to the homepage by clicking Home. Try it now!',
+            disableBeacon: true,
+            disableOverlayClose: true,
+            spotlightClicks: true,
+            hideFooter: true,
+            placement: 'right',
+            disableScrolling: true
+        },
+        {
+            target: '#top-content',
+            content:
+                'Your top content shows the libraries and videos you visit the most.',
+            disableBeacon: true,
+            disableOverlayClose: true,
+            placement: 'top',
+            showProgress: true
+        },
+        {
+            target: '#popular-content',
+            content:
+                'Find new content to explore based on what others in your facility are using!',
+            disableBeacon: true,
+            disableOverlayClose: true,
+            placement: 'top',
+            showProgress: true
+        },
+        {
+            target: '#end-tour',
+            content:
+                'That\'s it! You\'re now ready to use UnlockEd. If you need help, revisit this tour anytime by clicking "Get Help".',
+            disableBeacon: true,
+            disableOverlayClose: true,
+            placement: 'center'
+        }
+    ],
+    tourActive: false,
+    target: ''
 };
 
 interface TourState {
@@ -18,6 +153,7 @@ interface TourState {
     stepIndex: number;
     steps: Step[];
     tourActive: boolean;
+    target: string;
 }
 
 export const TourContext = createContext<TourContextType | undefined>(
diff --git a/frontend/src/Pages/LibraryViewer.tsx b/frontend/src/Pages/LibraryViewer.tsx
index 9fd108681..eb8b1ce61 100644
--- a/frontend/src/Pages/LibraryViewer.tsx
+++ b/frontend/src/Pages/LibraryViewer.tsx
@@ -21,6 +21,7 @@ import { useAuth } from '@/useAuth';
 import { FormModal } from '@/Components/modals/FormModal';
 import { FormInputTypes } from '@/Components/modals';
 import { useTourContext } from '@/Context/TourContext';
+import { targetToStepIndexMap } from '@/Components/UnlockEdTour';
 interface UrlNavState {
     url?: string;
 }
@@ -173,10 +174,16 @@ export default function LibraryViewer() {
     };
 
     useEffect(() => {
-        if (tourState.stepIndex === 12) {
-            setTourState({ stepIndex: 11 });
+        if (tourState.target === '#top-content') {
+            setTourState({
+                stepIndex: targetToStepIndexMap['#library-viewer-favorite'],
+                target: '#library-viewer-favorite'
+            });
         } else {
-            setTourState({ stepIndex: 9 });
+            setTourState({
+                stepIndex: targetToStepIndexMap['#library-viewer-sub-page'],
+                target: '#library-viewer-sub-page'
+            });
         }
     }, []);
 
@@ -211,11 +218,11 @@ export default function LibraryViewer() {
                     id="library-viewer-sub-page"
                 >
                     <h1>Library Viewer</h1>
-                    {user && !isAdministrator(user) && !isLoading && (
+                    {user && !isAdministrator(user) && (
                         <div
                             id="library-viewer-favorite"
                             className={
-                                tourState.stepIndex === 10
+                                tourState.target === '#library-viewer-favorite'
                                     ? 'animate-pulse border border-2 border-primary-yellow rounded-xl'
                                     : ''
                             }
diff --git a/frontend/src/Pages/OpenContent.tsx b/frontend/src/Pages/OpenContent.tsx
index 0625d3987..142bd1261 100644
--- a/frontend/src/Pages/OpenContent.tsx
+++ b/frontend/src/Pages/OpenContent.tsx
@@ -5,6 +5,7 @@ import TabView from '@/Components/TabView';
 import { useNavigate, Outlet, useLocation } from 'react-router-dom';
 import { isAdministrator, useAuth } from '@/useAuth';
 import { useTourContext } from '@/Context/TourContext';
+import { targetToStepIndexMap } from '@/Components/UnlockEdTour';
 
 export default function OpenContent() {
     const { setPageTitle: setAuthLayoutPageTitle } = usePageTitle();
@@ -45,9 +46,19 @@ export default function OpenContent() {
 
     useEffect(() => {
         if (tourState.tourActive) {
-            setTourState({
-                stepIndex: 2
-            });
+            if (tourState.target === '#library-viewer-sub-page') {
+                setTourState({
+                    stepIndex:
+                        targetToStepIndexMap['#knowledge-center-fav-lib'],
+                    target: '#knowledge-center-fav-lib'
+                });
+            } else {
+                setTourState({
+                    stepIndex:
+                        targetToStepIndexMap['#knowledge-center-landing'],
+                    target: '#knowledge-center-landing'
+                });
+            }
         }
     }, []);
 
diff --git a/frontend/src/Pages/ResidentHome.tsx b/frontend/src/Pages/ResidentHome.tsx
index 337959ffe..243701ab1 100644
--- a/frontend/src/Pages/ResidentHome.tsx
+++ b/frontend/src/Pages/ResidentHome.tsx
@@ -17,6 +17,7 @@ import { AxiosError } from 'axios';
 import OpenContentItemAccordion from '@/Components/OpenContentItemAccordion';
 import { useEffect } from 'react';
 import { useTourContext } from '@/Context/TourContext';
+import { targetToStepIndexMap } from '@/Components/UnlockEdTour';
 
 export default function ResidentHome() {
     const navigate = useNavigate();
@@ -49,14 +50,17 @@ export default function ResidentHome() {
     }
 
     useEffect(() => {
-        if (tourState.tourActive && tourState.stepIndex === 11) {
+        if (tourState.tourActive && tourState.target === '#navigate-homepage') {
             setTourState({
-                stepIndex: 13
+                // this is a bit buggy, not sure why I have to skip to popular-content, but if I don't, it messes up the tooltip.
+                stepIndex: targetToStepIndexMap['#popular-content'],
+                target: '#popular-content'
             });
-        } else if (tourState.tourActive) {
+        } else if (tourState.tourActive && tourState.stepIndex !== 1) {
             setTourState({
                 run: true,
-                stepIndex: 0
+                stepIndex: 0,
+                target: '#resident-home'
             });
         }
     }, [tourState.tourActive]);


Reviews:
user: login: PThorpe92
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-27T23:16:43Z
user: login: calisio
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-28T14:09:15Z
user: login: carddev81
body: I've approved this but am not 100% sure that the functionality is correct here: when clicking 'Back' on step 13 of 15 shouldn't it take you back to select Home? It takes you back to Step 11 'Favoriting' a single page?
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-28T18:35:44Z
user: login: jtucholski
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-31T18:26:38Z

Review comments:
diff_hunk: @@ -161,23 +190,66 @@ export default function UnlockEdTour() {
     }, []);
 
     const handleCallback = (data: CallBackProps) => {
-        const { action, index, type } = data;
+        const { action, index, type, step } = data;
+        const currentTarget = step.target;
         if (
             action === 'close' ||
             action === 'skip' ||
             type === EVENTS.TOUR_END
         ) {
-            setTourState({ tourActive: false, run: false, stepIndex: 0 });
+            setTourState({
+                tourActive: false,
path: frontend/src/Components/UnlockEdTour.tsx
user: login: PThorpe92
body: this is repeated quite a few times. can we save a `defaultTourState` const somewhere and use that?
created_at: 2025-03-27T23:16:43Z
author_association: MEMBER
diff_hunk: @@ -161,23 +190,66 @@ export default function UnlockEdTour() {
     }, []);
 
     const handleCallback = (data: CallBackProps) => {
-        const { action, index, type } = data;
+        const { action, index, type, step } = data;
+        const currentTarget = step.target;
         if (
             action === 'close' ||
             action === 'skip' ||
             type === EVENTS.TOUR_END
         ) {
-            setTourState({ tourActive: false, run: false, stepIndex: 0 });
+            setTourState({
+                tourActive: false,
path: frontend/src/Components/UnlockEdTour.tsx
user: login: calisio
body: @PThorpe92 I only found here and below, is there anywhere else I should change? I already had an `initialTourState`.. not sure why I didn't use it 🤦‍♀️ I updated it in those two places but let me know if there is anywhere else I missed
created_at: 2025-03-28T14:09:15Z
author_association: CONTRIBUTOR

PR comments:
user: login: calisio
created_at: 2025-03-28T18:49:06Z
body: Ya, I had it skip back to favoriting a single page because if they wanted to keep going backwards they wouldn't be able to if I put them on select home (since there are no action buttons in there). Not sure what other people think it should skip to @jtucholski ? I guess its a bit inconsistent, since in other places I have it go to the one that has no other option but to move forward. We should probably choose one or the other, right?
author_association: CONTRIBUTOR
user: login: jtucholski
created_at: 2025-03-28T18:54:06Z
body: I'll take a look.
author_association: CONTRIBUTOR
user: login: jtucholski
created_at: 2025-03-28T19:07:54Z
body: Why don't the click actions like Step 2 and 12 have a back button? 
author_association: CONTRIBUTOR
user: login: calisio
created_at: 2025-03-28T19:13:30Z
body: Lisa and I decided to not include those so that it forces the user to interact with the product by doing real actions (rather than just press the next button), but I can add them in if that is what we prefer.
author_association: CONTRIBUTOR
user: login: jtucholski
created_at: 2025-03-28T19:21:14Z
body: I think that we should send them back to Step 12 because that's the prior step. 

If possible, we should show the back button when they're going through it in reverse, but I expect that's probably not worth the effort. 
author_association: CONTRIBUTOR
user: login: calisio
created_at: 2025-03-28T19:23:40Z
body: I don't know if I can handle for the specific case where they are moving through it backwards, since we render all the steps on initialization of the tour (so having it render a new check when they are going backward could be possible but not without some work arounds). What I could do (I think) is ONLY include the back button and NOT include the "next" button on those steps so that way they have to interact to move forward, but have the option to move backwards. 
author_association: CONTRIBUTOR
user: login: jtucholski
created_at: 2025-03-28T19:30:40Z
body: That recommendation would be better in my opinion.
author_association: CONTRIBUTOR
user: login: calisio
created_at: 2025-03-28T19:35:15Z
body: Hmmm, it actually doesn't seem like we can only hide the next button without also hiding the back button. It would require me building out a custom component to use for all the steps with the ability to hide the next button. It seems like you can only hide either 
1. the entire row (as I am doing now)
2. hide ALL of the next buttons (for all of the steps)
Neither of which are what we are looking for.[ Reference here ](https://github.com/gilbarbara/react-joyride/issues/499)

That being said, how do we want to move forward?
author_association: CONTRIBUTOR
user: login: jtucholski
created_at: 2025-03-30T21:04:06Z
body: Let's have it go back 2 steps to Step 11 then.
author_association: CONTRIBUTOR
user: login: calisio
created_at: 2025-03-31T13:51:23Z
body: @jtucholski Done!
author_association: CONTRIBUTOR