[Dashboard] Add plan selection step to team onboarding flow #7324
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughA new "Plan Selection" step is added to the team onboarding flow, introducing a dedicated page and a Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TeamOnboarding
participant PlanSelector
participant PricingCard
participant Analytics
participant Router
User->>TeamOnboarding: Complete team info form
TeamOnboarding->>Router: Navigate to /get-started/team/{slug}/select-plan
Router->>PlanSelector: Render with team data
User->>PlanSelector: Selects a plan or skips
PlanSelector->>Analytics: Track plan selection or skip event
alt Plan selected
PlanSelector->>PricingCard: Initiate checkout
PricingCard-->>PlanSelector: (Stripe redirect event)
PlanSelector->>PlanSelector: Poll for billing plan change
alt Plan upgraded
PlanSelector->>Analytics: Track upgrade
PlanSelector->>Router: Navigate to add members
end
else Skip
PlanSelector->>Router: Navigate to add members
end
Possibly related PRs
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (6)
🚧 Files skipped from review as they are similar to previous changes (6)
⏰ Context from checks skipped due to timeout of 90000ms (8)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7324 +/- ##
=======================================
Coverage 55.57% 55.57%
=======================================
Files 909 909
Lines 58675 58675
Branches 4157 4157
=======================================
Hits 32608 32608
Misses 25960 25960
Partials 107 107
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
apps/dashboard/src/app/(app)/get-started/team/[team_slug]/select-plan/page.tsx (2)
25-32: Minor: avoid redundant network hit ingetTeam.You already have
teamfrom the initial fetch. Consider short-circuiting if the ID matches or memoising the value to reduce server load.
Optional refactor only.
20-24: Dead code – commented-out client creation.Unless this will be activated imminently, remove to keep the file clean.
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx (1)
303-305: Anchor styling tweak OK – confirm accessibility.Dotted underline is fine; ensure contrast and focus styles remain WCAG-compliant across themes.
apps/dashboard/src/app/(app)/get-started/team/[team_slug]/select-plan/_components/plan-selector.tsx (2)
49-116: Capitalisation drift in CTA labels
"Get Started"(title-case) vs"Get started"(sentence-case) across cards breaks visual consistency. Pick one style and apply to all CTAs.
43-130: Avoid four nearly-identical JSX blocksThe only per-plan deltas are
billingPlan,highlighted, and the analyticsplanvalue. Building the cards from a data array will cut ~70 lines and reduce future maintenance slip-ups (like the starter-plan bug).Pseudo-refactor:
const plans = [ { id: "starter", label: "Get Started" }, { id: "growth", label: "Get Started", highlighted: true }, { id: "scale", label: "Get Started" }, { id: "pro", label: "Get Started" }, ]; {plans.map(({ id, highlighted, label }) => ( <PricingCard key={id} billingPlan={id} highlighted={highlighted} billingStatus={props.team.billingStatus} teamSlug={props.team.slug} cta={{ label, type: "checkout", onClick: () => trackEvent({ category: "teamOnboarding", action: "selectPlan", label: "attempt", plan: id, }), }} getTeam={props.getTeam} teamId={props.team.id} /> ))}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/dashboard/src/app/(app)/get-started/team/[team_slug]/add-members/page.tsx(1 hunks)apps/dashboard/src/app/(app)/get-started/team/[team_slug]/select-plan/_components/plan-selector.tsx(1 hunks)apps/dashboard/src/app/(app)/get-started/team/[team_slug]/select-plan/page.tsx(1 hunks)apps/dashboard/src/app/(app)/login/onboarding/onboarding-layout.tsx(3 hunks)apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/team-onboarding.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/dashboard/src/app/(app)/get-started/team/[team_slug]/add-members/page.tsx (1)
apps/dashboard/src/app/(app)/login/onboarding/onboarding-layout.tsx (1)
TeamOnboardingLayout(94-107)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Unit Tests
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
apps/dashboard/src/app/(app)/get-started/team/[team_slug]/add-members/page.tsx (1)
27-29:currentSteprenumbering looks correct.
TeamOnboardingLayoutnow accepts1 | 2 | 3; passing3here is consistent with the new flow.apps/dashboard/src/app/(app)/login/onboarding/onboarding-layout.tsx (1)
80-91: Step metadata update looks good.Unique, sequential step numbers (1-3) and the added
RocketIconalign with the new flow. No issues spotted.apps/dashboard/src/app/(app)/get-started/team/[team_slug]/select-plan/page.tsx (2)
34-37:currentStep={2}is consistent with new step order.Good catch aligning with the layout changes.
7-15: 🛠️ Refactor suggestionType signature for
paramsshould not be aPromise.
props.paramsis already a plain object in Next JS server components. Declaring it asPromise<...>adds unnecessary indirection and may confuse type-checking tools.-export default async function Page(props: { - params: Promise<{ team_slug: string }>; -}) { - const params = await props.params; +export default async function Page(props: { + params: { team_slug: string }; +}) { + const { params } = props;⛔ Skipped due to learnings
Learnt from: MananTank PR: thirdweb-dev/js#7152 File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/page.tsx:2-10 Timestamp: 2025-05-26T16:28:10.079Z Learning: In Next.js 14+, the `params` object in page components is always a Promise that needs to be awaited, so the correct typing is `params: Promise<ParamsType>` rather than `params: ParamsType`.Learnt from: jnsdls PR: thirdweb-dev/js#6929 File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx:14-19 Timestamp: 2025-05-21T05:17:31.283Z Learning: In Next.js server components, the `params` object can sometimes be a Promise that needs to be awaited, despite type annotations suggesting otherwise. In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx, it's necessary to await the params object before accessing its properties.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx (1)
335-339: Date rendering change: verify locale & TZ.Using
format(..., "MMMM dd, yyyy")drops the time zone context. If teams span regions, consider displaying locale-aware dates or adding the user’s TZ elsewhere.
apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/team-onboarding.tsx
Outdated
Show resolved
Hide resolved
...shboard/src/app/(app)/get-started/team/[team_slug]/select-plan/_components/plan-selector.tsx
Outdated
Show resolved
Hide resolved
...shboard/src/app/(app)/get-started/team/[team_slug]/select-plan/_components/plan-selector.tsx
Outdated
Show resolved
Hide resolved
size-limit report 📦
|
jnsdls
force-pushed
the
_Dashboard_Add_plan_selection_step_to_team_onboarding_flow
branch
from
121d650 to
dfb4ad4
Compare
jnsdls
force-pushed
the
_Dashboard_Add_plan_selection_step_to_team_onboarding_flow
branch
from
dfb4ad4 to
aef6e94
Compare
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
jnsdls
force-pushed
the
_Dashboard_Add_plan_selection_step_to_team_onboarding_flow
branch
from
aef6e94 to
49b483a
Compare
jnsdls
deleted the
_Dashboard_Add_plan_selection_step_to_team_onboarding_flow
branch
Add Plan Selection Step to Team Onboarding Flow
This PR adds a new "Plan Selection" step to the team onboarding flow, allowing users to choose a subscription plan during the onboarding process.
Changes:
/get-started/team/[team_slug]/select-planpage with a plan selector componentThe plan selector includes options for Starter, Growth, Scale, and Pro plans, with appropriate tracking events and the ability to skip plan selection for later.
Summary by CodeRabbit
New Features
Improvements
PR-Codex overview
This PR focuses on updating the team onboarding process in the application, specifically enhancing the flow for selecting a plan and modifying the current step in the onboarding layout.
Detailed summary
currentStepfrom2to3inTeamOnboardingLayoutfor the add members page./add-membersto/select-planafter team update.select-planpage with aPlanSelectorcomponent.PlanSelectorwith multiple pricing options and analytics tracking.