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

[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.

[mikewheeleer]

I would like to work on this issue, and I have good knowledge of smart contacts and Sorabani Rust. Kindly assign it to me.

[1nonlypiece]

This issue is now yours to work on. Feel free to swing by our Discord if you need any pointers or want to connect with the team: https://discord.gg/jzgTqSbZX

[grantfox-oss]

🦊 GrantFox — @mikewheeleer has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #924)
2. Your PR will be reviewed by the Commitlabs-Org maintainers

Good luck! Track your progress on GrantFox.