Applicant in-app guides & interactive tours (with branded UI)#86
Merged
Conversation
Extend the existing driver.js + app/help guided-tour system to cover every applicant-facing page and action, closing the gaps left by the six pre-existing applicant tours. New tours (app/help/tours.ts): login, register, verify-email, password-reset, accept-invite, edit-profile, declarations-list, account, notifications, preferences, verification-response, and contact. The getting-started tour gains a phone-verification step. Each new page gets [data-tour] anchors, a contextual "?" panel entry with a tourId (so HelpSheet shows a "Start a tour" button), and field tooltips where useful (account, preferences, contact). The applicant onboarding checklist gains a "Verify your phone number" item, backed by a new phoneVerified onboarding signal. Tests: update help-lookup (profile/edit now has a specific contextual entry that wins over the wildcard) and help-onboarding fixtures for the new signal. All 548 unit tests pass; lint clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PTdS68WeCDsm6PE8iBNHtn
The getting-started tour stopped after the onboarding checklist and a single phone-verify step, skipping the main body of the dashboard. Add [data-tour] anchors and tour steps for the remaining sections so the tour walks the whole page top-to-bottom: email verification, the registration-review banner, the active-declaration hero, verification lookups, quick actions, declarations overview and code history. The four conditionally-rendered anchors (email/phone/registration/ active-declaration) reuse useTour's skip-when-missing behaviour, so a verified applicant with no active declaration sees a lean tour while a new applicant gets the verification guidance. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Make the interactive tours discoverable, then give the whole guides/tours help experience one cohesive, on-brand identity. Discoverability: - Add getToursForRole() and a shared HelpTourList component. - Surface a role's routed tours in two places: a collapsible "Guided tours" card on the applicant dashboard and an "Interactive tours" section in the Help Centre Guides tab. Auth-page and routeless tours are filtered out — they can't run from inside the authenticated app (the auth middleware redirects logged-in users away from /auth/*, and routeless tours only run on a specific declaration page). Branded UI/UX pass (frontend-design), keyed off the existing theme tokens so it adapts across all five themes: - driver.js popovers themed via a scoped `.adla-tour` class — Ghana-green left rail, rounded, branded buttons, uppercase progress eyebrow. - HelpGuideSteps rebuilt as a "journey rail": green numbered nodes joined by a vertical spine, ending in a gold goal node. - Redesigned tour cards (icon tile, route-derived eyebrow, step pill). - Dashboard card chrome (compass icon + rotating chevron, reduced-motion safe). - Help Centre Interactive-tours panel; EmptyState used for the no-guides case. - Guide detail page header + a prominent "Start interactive tour" CTA. - HelpSheet: tour CTA promoted to the top; Article vs Guide links get distinct icons. Tests: add getToursForRole coverage. 555 unit tests pass; lint and typecheck clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qaj3ngnngxfyJNF6kVQE7x
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary
Builds out the applicant in-app help experience end-to-end — written guides, contextual "?" help, and interactive driver.js tours — then makes the tours discoverable and gives the whole guides/tours surface one cohesive, on-brand identity.
What's included
[data-tour]anchors across the relevant pages.useTour's missing-element filter, so a verified applicant sees a lean tour and a new applicant sees the verification guidance.getToursForRole()+ a sharedHelpTourListcomponent surface a role's routed tours in two places: a collapsible "Guided tours" card on the dashboard and an "Interactive tours" section in the Help Centre Guides tab. Auth-page tours (/auth/*, unreachable while logged in) and routeless tours are filtered out..adla-tourclass — Ghana-green left rail, rounded, branded buttons, uppercase progress eyebrow.HelpGuideStepsrebuilt as a "journey rail": green numbered nodes joined by a vertical spine, ending in a gold goal node.EmptyStatefor the no-guides case; guide detail header + prominent "Start interactive tour" CTA; HelpSheet tour CTA promoted with differentiated Article/Guide link icons.Verification
npm run lintclean,npx nuxi typecheckclean, 555 unit tests pass (incl. newgetToursForRolecoverage).Notes
popoverClass.package-lock.jsonis intentionally left out (an unrelated local-npm regeneration that desyncs from the CI-generated lockfile).🤖 Generated with Claude Code