Skip to content

Add per-page guided tours beyond the create wizard using useGuidedTour #924

Description

@1nonlypiece

📌 Description

src/hooks/useGuidedTour.ts defines a single hard-coded TOUR_STEPS array tied to the create wizard. Other complex pages (marketplace, commitment detail) have no guided tour.

This issue generalizes the hook to accept a per-page step set so additional tours can be defined and triggered on the marketplace and detail pages.

🎯 Requirements and Context

This is a feature / enhancement task for the CommitLabs frontend (Next.js + TypeScript). It must be implemented cleanly, fully typed, accessible, and well tested — and must not regress existing behavior.

  • Refactor useGuidedTour to accept a tour id + steps argument instead of a single global constant.
  • Persist per-tour completion separately so completing one tour doesn't suppress another.
  • Keep the existing create-wizard tour working with no behavior change.
  • Tour targets must degrade gracefully if a selector is missing.

🛠️ Suggested Execution

1. Fork the repo and create a branch

git checkout -b feature/guided-tours-per-page

2. Implement the change

  • Primary files to add or modify:
    • src/hooks/useGuidedTour.ts — parameterize steps + per-tour completion.
    • src/components/onboarding/GuidedTour.tsx — accept tour config.
    • src/components/onboarding/TourStep.tsx — unchanged rendering contract.
  • Add focused tests in src/hooks/useGuidedTourPerPage.test.ts using Jest / Vitest + React Testing Library (happy-dom), covering rendering, interaction, and the edge cases below.
  • Add documentation in docs/GUIDED_TOURS.md describing the feature, props/API, accessibility behavior, and a usage example; cross-link it from the relevant README/docs.
  • Keep the diff small and reviewer-friendly; reuse existing primitives, hooks, and the typed API client instead of duplicating logic.

3. Cover edge cases

  • create tour unaffected
  • independent completion per tour
  • missing target skipped gracefully
  • second tour can run after first

4. Test and commit

  • Run the suite (e.g. pnpm test / pnpm vitest run) and ensure new lines are covered.
  • Verify keyboard navigation, focus handling, and prefers-reduced-motion where relevant.

Example commit message

feat: per-page guided tours via parameterized useGuidedTour

✅ Guidelines

  • Minimum 95% test coverage on the new/changed lines.
  • Clear, reviewer-friendly documentation (props/API + usage example + accessibility notes).
  • No regressions to existing components, routes, or tests.
  • Fully typed (no any), accessible (labels, roles, live regions where relevant).
  • Timeframe: 96 hours.

🏷️ Labels

type-feature · type-enhancement · area-frontend · MAYBE REWARDED · GRANTFOX OSS · OFFICIAL CAMPAIGN

💬 Community & Support

  • Join the CommitLabs contributor Discord to coordinate, ask questions, and get unblocked fast: https://discord.gg/WV7tdYkJk
  • Please introduce yourself in the channel before you start so we can avoid duplicate work, pair you with a reviewer, and get your PR merged quickly.
  • Maintainers actively triage this channel and aim for fast, clear, respectful reviews — reach out any time you're blocked.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Fields

    No fields configured for Feature.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions