Skip to content

feat(onboarding): add first-login guided tour for operators (#159) - #245

Merged
usmanimamu17-create merged 2 commits into
ApexChainx:mainfrom
Agaki00:frontend
Jul 29, 2026
Merged

feat(onboarding): add first-login guided tour for operators (#159)#245
usmanimamu17-create merged 2 commits into
ApexChainx:mainfrom
Agaki00:frontend

Conversation

@Agaki00

@Agaki00 Agaki00 commented Jul 29, 2026

Copy link
Copy Markdown
Contributor

Introduce a step-by-step onboarding tour that walks first-time operators across the dashboard, outages, and payments pages, with a persisted opt-out so it never nags returning users.

Feature:

  • OnboardingTour controller (driver.js) mounted once in the root layout; gates on authenticated session + unset onboardingTourDone flag, drives the tour one step at a time with route-aware advance (router.push + waitForElement), an injected "Skip tour" button, and a catch-all onDestroyed that persists the opt-out.
  • Declarative 6-step list in src/lib/onboarding/steps.ts (dashboard KPIs & filters, outages search & list, payments filters & table).
  • data-tour targets added across Navigation, dashboard, outages, and payments views (class names untouched).
  • Server-synced persistence via lib/preferences.ts: new onboardingTourDone flag (localStorage + PUT /user/preferences, server-wins hydration).
  • Settings "Replay onboarding tour" button via apexchain:start-tour event.
  • i18n onboarding block (en/es/pt) and .apex-tour popover styling (light + dark) in globals.css.
  • Unit tests (OnboardingTour.test.tsx): no-start when done, auto-start when authenticated + unset, no-start when unauthenticated, opt-out persisted on tour end. 4/4 passing.

Incidental fixes on the same branch:

  • Align react to ^19.2.7 (was 19.2.3) to match react-dom; add @testing-library/dom devDependency; add driver.js dependency.
  • payments-view.tsx: add missing preferences imports.
  • client.ts: correct buildApiUrl import path (@/lib/url).

Description

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Documentation update
  • Code refactoring
  • Performance improvement

Related Issue

Testing

  • Unit tests added/updated
  • Integration tests added/updated
  • Manual testing completed
  • No regressions introduced

Checklist

  • Code follows ApexChain style guidelines
  • Self-review completed
  • Documentation updated
  • Tests pass locally (npm run test)
  • Build passes (npm run build)
  • Lint passes (npm run lint)

Screenshots

Additional Notes

Closes #156
Closes #157
Closes #158
Closes #159

Agaki00 and others added 2 commits July 29, 2026 15:02
…nx#159)

Introduce a step-by-step onboarding tour that walks first-time operators
across the dashboard, outages, and payments pages, with a persisted
opt-out so it never nags returning users.

Feature:
- OnboardingTour controller (driver.js) mounted once in the root layout;
  gates on authenticated session + unset onboardingTourDone flag, drives
  the tour one step at a time with route-aware advance (router.push +
  waitForElement), an injected "Skip tour" button, and a catch-all
  onDestroyed that persists the opt-out.
- Declarative 6-step list in src/lib/onboarding/steps.ts (dashboard KPIs
  & filters, outages search & list, payments filters & table).
- data-tour targets added across Navigation, dashboard, outages, and
  payments views (class names untouched).
- Server-synced persistence via lib/preferences.ts: new onboardingTourDone
  flag (localStorage + PUT /user/preferences, server-wins hydration).
- Settings "Replay onboarding tour" button via apexchain:start-tour event.
- i18n onboarding block (en/es/pt) and .apex-tour popover styling
  (light + dark) in globals.css.
- Unit tests (OnboardingTour.test.tsx): no-start when done, auto-start
  when authenticated + unset, no-start when unauthenticated, opt-out
  persisted on tour end. 4/4 passing.

Incidental fixes on the same branch:
- Align react to ^19.2.7 (was 19.2.3) to match react-dom; add
  @testing-library/dom devDependency; add driver.js dependency.
- payments-view.tsx: add missing preferences imports.
- client.ts: correct buildApiUrl import path (@/lib/url).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@drips-wave

drips-wave Bot commented Jul 29, 2026

Copy link
Copy Markdown

@Agaki00 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants