Skip to content

feat: wire onboarding tour into app flow with auto-start, cross-page navigation, and restart option (Closes #487) - #595

Open
waterWang wants to merge 1 commit into
Protocol-Guild:mainfrom
waterWang:feat/487-onboarding-tour
Open

feat: wire onboarding tour into app flow with auto-start, cross-page navigation, and restart option (Closes #487)#595
waterWang wants to merge 1 commit into
Protocol-Guild:mainfrom
waterWang:feat/487-onboarding-tour

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Wires the existing (previously dead-code) OnboardingTour component into the app flow so first-time users get a guided tour through PayD's core payroll workflow.

What's Changed

  • Auto-start on first authenticated visit: The tour now starts automatically after login when payd_onboarding_complete is not set in localStorage
  • Cross-page navigation: Tour steps auto-navigate between pages (//employee/payroll) so every step targets a real element:
    • Welcome hero (#tour-welcome, Home)
    • Stellar wallet connect (#tour-connect, top bar)
    • Employees nav link (#tour-employees, sidebar)
    • Add Employee button (#tour-add-employee, EmployeeEntry)
    • Payroll nav link (#tour-payroll, sidebar)
    • Scheduling wizard button (#tour-init-payroll, PayrollScheduler)
  • Completion persisted in localStorage (payd_onboarding_complete) — tour never reappears after finishing or skipping
  • Restart option: "Restart Tour" button added to Help Center that re-dispatches the tour
  • Mobile-safe: Desktop sidebar only gets tour target IDs (avoids duplicate-ID conflicts with the mobile sidebar instance)

Acceptance Criteria

  • Tour starts automatically on first visit after login
  • Steps cover: wallet connect, add employees, configure payroll, first payment
  • "Skip" and "Restart tour" options available
  • Completion persisted in localStorage
  • Tour doesn't reappear after completion

Files Changed

  • frontend/src/App.tsx — tour mount + auto-start + restart listener
  • frontend/src/components/OnboardingTour.tsx — controlled step index, cross-page navigation, persistence
  • frontend/src/components/DashboardSidebar.tsx — tour target IDs on Employees/Payroll links
  • frontend/src/pages/HelpCenter.tsx — Restart Tour button
  • frontend/src/pages/PayrollScheduler.tsx — tour target ID on scheduling wizard button

Closes #487

…navigation, and restart option (Closes Protocol-Guild#487)

- Auto-start tour on first authenticated visit after login
- Auto-navigate between pages during tour steps
- Persist completion state in localStorage
- "Skip" and "Restart tour" options (Help Center)
- Add tour target IDs to sidebar nav links and scheduling wizard button
- Mobile sidebar gets no tour IDs to avoid duplicate ID conflicts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add onboarding tour for new users with react-joyride

1 participant