[pro-web] feat: add Pro Onboarding

[derianrddev]

📖 Description

This PR adds the initial Pro Onboarding flow for Pro Web, including the main ProOnboarding container and the first step (StepQ1) that allows users to select their business type through interactive Accordion sections and selection pills.

✅ Changes Made

• Added ProOnboarding component that mounts DialogWizard with steps array.
• Implemented StepQ1 with Accordion groups (Local, Service, Online, Other).
• Created static dataset (groups) defining types, labels, and specialties.
• Added Lucide icon mapping and getIcon helper for business categories.
• Included sticky step header/footer and scrollable main content area.
• Enabled keyboard accessibility (Enter/Space) and aria-pressed state.
• Defaulted all Accordions to open; single-select state with Continue and Skip actions.

🖼️ Media (screenshots/videos)

Screen.Recording.2025-10-15.090539.mp4

Summary by Sourcery

Introduce the initial Pro Web onboarding flow by adding a DialogWizard container and a first step (StepQ1) for selecting a business type using interactive accordions, iconized selection pills, and full keyboard accessibility.

New Features:

• Add ProOnboarding component to launch a multi-step onboarding wizard in Pro Web
• Implement StepQ1 step featuring accordion-based business category selection with selectable pills

Enhancements:

• Provide a static dataset of business types with Lucide icon mapping via a getIcon helper
• Enable keyboard accessibility (Enter/Space) and aria-pressed state for selection controls
• Add sticky header and footer with a scrollable content area for the wizard step

[sourcery-ai]

Reviewer's Guide

Introduces a Pro onboarding flow in the Pro Web app by adding a new ProOnboarding container that leverages DialogWizard and implementing the first step (StepQ1) which provides an accordion-based business category selector with full keyboard accessibility, icon mapping, and skip/continue controls.

Class diagram for new onboarding components and types

classDiagram
    class ProOnboarding {
      +open: boolean
      +DialogWizard steps: WizardStep[]
      +headerTitle: string
      +handleCloseWizard()
    }
    class DialogWizard {
      +steps: WizardStep[]
      +dialogOpen: boolean
      +headerTitle: string
      +handleCloseWizard()
      +next()
    }
    class StepQ1 {
      +selectedId: string | null
      +handleSelect(id: string)
      +handleKeyDown(e, id)
      +handleContinue()
      +handleSkip()
    }
    class WizardStep {
      +name: string
      +component: React.ComponentType
    }
    class Group {
      +id: 'local' | 'service' | 'online' | 'other'
      +title: string
      +subtitle: string
      +items: GroupItem[]
    }
    class GroupItem {
      +id: string
      +label: string
      +specialties: string
    }
    ProOnboarding --> DialogWizard
    DialogWizard --> StepQ1
    StepQ1 --> Group
    Group --> GroupItem
    DialogWizard --> WizardStep

Loading

Flow diagram for StepQ1 business type selection logic

flowchart TD
    A["User interacts with StepQ1"] --> B["Accordion groups displayed (all open)"]
    B --> C["User selects a business type pill"]
    C --> D["selectedId state updated"]
    D --> E["Continue button enabled"]
    E --> F["User clicks Continue"]
    F --> G["DialogWizard advances to next step"]
    C --> H["User clicks Skip for now"]
    H --> I["Default selection used"]
    I --> G

Loading

File-Level Changes

Change	Details	Files
Add ProOnboarding wrapper component using DialogWizard	Define and import steps array including StepQ1 Manage dialog open/close state with useState Render DialogWizard with headerTitle and handleCloseWizard callback	apps/pro-web/components/onboarding/pro-onboarding.tsx
Implement StepQ1 interactive selection step	Define Group and GroupItem types and static groups dataset Create iconMap and getIcon helper for business type icons Use useState to track selected item and handlers for click/keyboard events Render open Accordions with grid of pill-style Buttons including aria-pressed Add sticky header/footer, scrollable content, Continue and Skip logic	apps/pro-web/components/onboarding/steps/step-q1.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
masterbots-pro	Ready	Preview	Comment	Oct 14, 2025 11:07pm

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
masterbots	Skipped			Oct 14, 2025 11:07pm

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/create-pro-onboarding

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}