[Dashboard] update pricing plans and UI components #7208
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
WalkthroughThe changes update the product's billing plans, removing the "accelerate" plan and introducing a new "scale" plan, while significantly revising the "pro" plan's features and pricing. UI components, plan selection logic, and supporting utilities are updated to reflect these new plans, their pricing, and feature sets. Related icons, tooltips, and conditional rendering are also adjusted accordingly. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI
participant PricingUtils
participant BillingLib
User->>UI: Opens plan selection or pricing page
UI->>PricingUtils: Fetches TEAM_PLANS and plan features
PricingUtils-->>UI: Returns plans ("starter", "growth", "scale", "pro")
UI->>BillingLib: Maps selected plan to ProductSKU
BillingLib-->>UI: Returns SKU ("plan:pro", etc.)
UI->>User: Displays plans, pricing, and features per new structure
User->>UI: Selects/Upgrades plan
UI->>BillingLib: Processes upgrade with new SKU
sequenceDiagram
participant User
participant UI
participant InviteLogic
User->>UI: Attempts to invite team member
UI->>InviteLogic: Checks team plan ("free", "starter", "growth", "scale", "pro")
alt Plan is "free" or "starter"
InviteLogic-->>UI: Disallow invite, show upgrade prompt
else Plan is "growth", "scale", or "pro"
InviteLogic-->>UI: Allow invite
end
UI->>User: Shows appropriate UI based on plan
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (9)
💤 Files with no reviewable changes (1)
🚧 Files skipped from review as they are similar to previous changes (8)
⏰ 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. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7208 +/- ##
=======================================
Coverage 55.63% 55.63%
=======================================
Files 908 908
Lines 58546 58546
Branches 4127 4127
=======================================
Hits 32572 32572
Misses 25868 25868
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
jnsdls
force-pushed
the
_Dashboard_update_pricing_plans_and_UI_components
branch
from
9902bb3 to
af03614
Compare
jnsdls
force-pushed
the
_Dashboard_update_pricing_plans_and_UI_components
branch
from
af03614 to
3810d6f
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.stories.tsx (1)
30-32:⚠️ Potential issueFix type inconsistency between state type and UI options.
The
requiredPlanstate type still includes"accelerate"but not"scale", while the UI SelectItem offers"scale"as an option. This creates a type mismatch.Apply this diff to fix the type inconsistency:
const [requiredPlan, setRequiredPlan] = useState< - "free" | "growth" | "accelerate" | "pro" - >("accelerate"); + "free" | "growth" | "scale" | "pro" + >("scale");Also applies to: 60-60
🧹 Nitpick comments (1)
apps/dashboard/src/utils/pricing.tsx (1)
50-85: Scale and Pro plans well-structured with appropriate enterprise features.The new Scale plan at $499 provides a good mid-tier option with advanced features, while the Pro plan is properly positioned as an enterprise solution with dedicated support and custom infrastructure options.
Fix the typo in the Pro plan features:
- ["Custom Infrastucture Add-Ons", "Infrastructure for custom chains."], + ["Custom Infrastructure Add-Ons", "Infrastructure for custom chains."],
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
apps/dashboard/src/@/components/blocks/pricing-card.tsx(4 hunks)apps/dashboard/src/@/lib/billing.ts(1 hunks)apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/InviteTeamMembers.tsx(7 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx(4 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/_components.tsx(0 hunks)apps/dashboard/src/components/embedded-wallets/Configure/index.tsx(1 hunks)apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.stories.tsx(1 hunks)apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx(2 hunks)apps/dashboard/src/utils/pricing.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/_components.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx (2)
apps/dashboard/src/@/components/blocks/pricing-card.tsx (1)
PricingCard(49-183)apps/dashboard/src/@/api/team.ts (1)
Team(9-9)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: Build Packages
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (17)
apps/dashboard/src/@/lib/billing.ts (1)
8-8: LGTM! Clean addition of the new pro plan SKU.The addition of
"plan:pro"to the ProductSKU union type is correct and aligns with the broader billing plan restructuring mentioned in the PR objectives.apps/dashboard/src/components/embedded-wallets/Configure/index.tsx (1)
184-184: Good documentation fix!Updating the comment to reflect the actual plan requirement ("growth or higher") instead of the outdated "accelerate" reference improves code clarity and aligns with the new billing plan structure.
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx (4)
88-91: Good expansion of invite gating logic.Extending the invite restriction to include both "free" and "starter" plans is consistent with the new billing plan structure and provides clear feature differentiation.
114-114: Consistent conditional update.The condition correctly matches the expanded gating logic, ensuring the upgrade messaging appears for both "free" and "starter" plans.
133-133: Improved upgrade link with better targeting.The addition of query parameters
?showPlans=true&highlight=growthprovides a better user experience by directing users to the relevant pricing information and highlighting the appropriate upgrade path.
153-162: Simplified and cleaner billing information.Removing the special case for the "pro" plan and using a generic pricing link simplifies the code while still providing users with relevant billing information.
apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/InviteTeamMembers.tsx (4)
100-101: LGTM! Upgrade button logic updated correctly.The condition now properly includes both "free" and "starter" plans for showing the upgrade button, which aligns with the new plan hierarchy where starter users should also have access to upgrade options.
158-160: Plan selection state updated correctly.The state type now reflects the three main upgrade options (Growth, Scale, Pro) available in the onboarding modal, which is consistent with the new plan structure.
185-205: Scale plan component implemented correctly.The component properly replaces the old "accelerate" plan with the new "scale" plan, with consistent updates to billing plan props and tracking parameters.
207-277: Pro plan integration implemented correctly.The new Pro plan is properly integrated into both desktop and mobile layouts with consistent tracking and proper component structure. The mobile tab navigation correctly includes the new plan option.
apps/dashboard/src/@/components/blocks/pricing-card.tsx (3)
7-7: Icon import updated correctly.The change from
CircleDollarSignIcontoDollarSignIconis properly implemented and used consistently in theFeatureItemcomponent.
108-114: Pricing display improvements implemented well.The conditional "Starting at" label provides helpful context for variable pricing plans, and the
toLocaleString()formatting improves readability for larger price amounts. These are good UX enhancements.
185-226:✅ Verification successful
SKU mapping and feature display updated correctly.
The billing plan to SKU mapping properly reflects the new plan structure with "pro" added and "accelerate" removed. The
FeatureItemcomponent enhancement withDollarSignIconand tooltips for array features improves the user experience by clearly distinguishing features with additional details.Let me verify that the new "plan:pro" SKU is properly defined in the billing types:
🏁 Script executed:
#!/bin/bash # Description: Verify the "plan:pro" SKU is properly defined in billing types # Expected: Should find the SKU defined in the ProductSKU type rg -A 5 -B 5 "plan:pro" --type tsLength of output: 1647
Confirmed “plan:pro” SKU Exists
The
"plan:pro"SKU is defined inapps/dashboard/src/@/lib/billing.tsalongside other plans, so the mapping inpricing-card.tsxis correct. No further changes needed.apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx (2)
79-88: Plan highlighting logic implemented with proper backward compatibility.The scale plan highlighting correctly includes "accelerate" for backward compatibility during the transition, and the new pro plan highlighting logic is properly implemented. This ensures existing users see appropriate upgrade paths.
139-183: Pricing cards and CTA logic updated correctly.The scale and pro plan cards are properly configured with the correct billing plan props and highlighting. The
getPlanCtafunction update to show "Contact us" only for pro plan users makes business sense, directing enterprise customers to sales rather than self-service checkout.apps/dashboard/src/utils/pricing.tsx (2)
6-6: SelectivePlans type updated correctly.The exclusion of "accelerate" instead of "pro" properly reflects the new plan structure where Pro is now a selectable upgrade option.
13-13: Optional isStartingPriceOnly property added appropriately.The new optional property provides a clean way to indicate variable pricing plans without breaking existing plan definitions. This supports the "Starting at" label functionality seen in the pricing cards.
jnsdls
force-pushed
the
_Dashboard_update_pricing_plans_and_UI_components
branch
from
3810d6f to
3f57dc6
Compare
Merge activity
|
# Update Pricing Plans and UI
This PR updates our pricing plans and UI to better align with our new pricing strategy:
- Replaced "Accelerate" plan with "Pro" plan
- Updated pricing: Starter ($5), Growth ($99), Scale ($499), Pro ($1499)
- Added "Starting at" label for Pro plan
- Updated feature lists across all plans
- Changed pricing card UI to use `DollarSignIcon` instead of `CircleDollarSignIcon`
- Added locale formatting for price display
- Updated team onboarding flow to show Growth, Scale and Pro plans
- Removed Cloud Hosted Engine section from Engine Footer Card
- Removed standalone Pro Card from pricing page
These changes ensure our pricing structure is more intuitive and better reflects the value of each tier.
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on updating billing plans and their associated features in the application. It introduces a new `pro` plan, modifies existing plans, and adjusts the UI components to reflect these changes.
### Detailed summary
- Added `"plan:pro"` to billing plans.
- Updated comments from "accelerate" to "growth" for clarity.
- Replaced `CheckIcon` with `DollarSignIcon` in pricing components.
- Adjusted pricing for `starter` (from $9 to $5) and `growth` (from $79 to $99).
- Renamed `accelerate` plan to `scale` with a new price of $499.
- Introduced `pro` plan priced at $1499 with specific features.
- Adjusted invite permissions to restrict `starter` plan.
- Updated billing plan checks throughout components to include new plan logic.
- Removed deprecated `CloudHostedEngineSection` component.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a new "pro" billing plan with updated pricing, features, and dedicated account executive support.
- Added "scale" plan as a replacement for the previous "accelerate" plan, featuring expanded infrastructure and support options.
- **Enhancements**
- Improved pricing display formatting for better readability.
- Updated plan descriptions and feature lists for clarity and consistency across all plans.
- Refined plan selection and upgrade prompts to reflect the new plan structure.
- **Bug Fixes**
- Corrected plan requirement messaging for editing SMS countries to accurately reference the "growth" plan.
- **Removals**
- Removed the "accelerate" and "starter" plans from UI and plan selection.
- Eliminated the ProCard component and legacy usage credit mentions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
_Dashboard_update_pricing_plans_and_UI_components
branch
from
3f57dc6 to
7c95211
Compare
graphite-app
bot
deleted the
_Dashboard_update_pricing_plans_and_UI_components
branch
Update Pricing Plans and UI
This PR updates our pricing plans and UI to better align with our new pricing strategy:
DollarSignIconinstead ofCircleDollarSignIconThese changes ensure our pricing structure is more intuitive and better reflects the value of each tier.
PR-Codex overview
This PR focuses on updating billing plans and related UI components, including renaming plans, adjusting pricing, and modifying features across various sections of the application.
Detailed summary
plan:proto billing plans.acceleratetoscaleandpro.CloudHostedEngineSectioncomponent.InviteSectionto restrict invites based on new plan logic.Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
Removals