[UX] Implement IntroJS and Welcome Tour #1275
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
flavioislima
changed the title
flavioislima
added
PR: Ready-For-Review
…client into feat/introjs_2
biliesilva
requested changes
Apr 29, 2025
|
@biliesilva updated the styling to be the same we have on hp-ui with the needed modifications to work with introJS now. |
BrettCleary
reviewed
Apr 30, 2025
There was a problem hiding this comment.
this is pretty complicated 😅
There was a problem hiding this comment.
True, I will investigate it a bit more tomorrow and test the other idea you gave.
There was a problem hiding this comment.
when I click the x button, the tour starts over again from the beginning. Is that the expected behavior?
There was a problem hiding this comment.
No, probably a regression from the last changes. Good catch.
biliesilva
approved these changes
May 20, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR implements IntroJS functionality and framework so we can easily add guided tours, tutorials or hints in the future.
For now I am just implementing a first welcome tour but will add more tours in future PRs.
This first tour runs once when the user lands on the Store Webview on the client.
If completed or skipped it will not appear anymore.
Screencast.From.2025-04-30.19-23-28.mp4
How to test
QASE TEST: https://app.qase.io/project/HC?case=584&suite=49
AI Summary
This pull request introduces a guided tour feature to the application, leveraging the
intro.jslibrary and a customTourProvidercontext to manage tour states. It also includes styling, localization, and integration into the app's main structure. Below are the key changes grouped by theme:Feature Implementation: Guided Tour
TourProviderinsrc/frontend/components/TourGuide/TourContext.tsxto manage tour states, including activation, deactivation, and completion tracking of tours. State is persisted usinglocalStorage.TourGuideinsrc/frontend/components/TourGuide/TourGuide.tsxto render guided tours usingintro.js-react. It dynamically loads steps based on the current tour and handles user interactions like exiting or completing tours.src/frontend/components/TourGuide/TourGuide.scssto align with the app's design system.Integration into the Application
TourProviderinsrc/frontend/App.tsxto enable tour state management across components. [1] [2] [3]Localization
public/locales/en/tour.json. These include step descriptions for various app sections like the library, sidebar, and game pages.Dependencies
intro.js(version^7.2.0) andintro.js-react(version^1.0.0) topackage.jsonand updatedpnpm-lock.yamlaccordingly. [1] [2] [3] [4]Use the following Checklist if you have changed something on the Backend or Frontend: