Make free plan badge clickable to upgrade #7134
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes introduce a new required Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TeamPlanBadge
participant TrackedLinkTW
participant Analytics
User->>TeamPlanBadge: Render with plan, teamSlug
alt plan == "free"
TeamPlanBadge->>TrackedLinkTW: Render badge as link to billing settings
User->>TrackedLinkTW: Click link
TrackedLinkTW->>Analytics: Track event (category: billingPlan, action: showPlans, label: teamSlug)
TrackedLinkTW->>User: Navigate to billing settings
else plan != "free"
TeamPlanBadge->>User: Render badge (no link)
end
sequenceDiagram
participant User
participant TeamOverviewPage
participant FreePlanUpsellBannerUI
participant DismissibleAlert
User->>TeamOverviewPage: Load team page
TeamOverviewPage->>TeamOverviewPage: Check team's billing plan
alt plan == "free"
TeamOverviewPage->>FreePlanUpsellBannerUI: Render upsell banner with teamSlug, highlightPlan
else
TeamOverviewPage->>DismissibleAlert: Render standard alert
end
sequenceDiagram
participant User
participant BillingAlertBanner
participant TrackedLinkTW
participant Analytics
User->>BillingAlertBanner: See billing alert
BillingAlertBanner->>TrackedLinkTW: Render link with tracking props (category, label)
User->>TrackedLinkTW: Click link
TrackedLinkTW->>Analytics: Track event (category, label)
TrackedLinkTW->>User: Navigate to billing page
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (15)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (14)
⏰ Context from checks skipped due to timeout of 90000ms (4)
✨ 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 #7134 +/- ##
=======================================
Coverage 55.63% 55.63%
=======================================
Files 902 902
Lines 58190 58190
Branches 4098 4098
=======================================
Hits 32373 32373
Misses 25712 25712
Partials 105 105
🚀 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: 0
🧹 Nitpick comments (4)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/FreePlanUpsellBannerUI.tsx (4)
25-25: Consider adding aria-hidden for decorative elements.The blurred circle is correctly marked with
pointer-events-nonebut should also includearia-hidden="true"to ensure screen readers ignore this purely decorative element.- <div className="-right-10 -top-10 pointer-events-none absolute size-28 rounded-full bg-green-600 opacity-20 blur-2xl" /> + <div className="-right-10 -top-10 pointer-events-none absolute size-28 rounded-full bg-green-600 opacity-20 blur-2xl" aria-hidden="true" />
29-31: Add aria-label to icon container for accessibility.The rocket icon container should have an aria-label to ensure screen readers can convey its meaning properly.
- <div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-green-600 text-white"> + <div className="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-green-600 text-white" aria-label="Upgrade"> <RocketIcon className="size-5" /> </div>
49-49: Consider encoding query parameters for URL safety.The URL construction should encode the query parameters to handle special characters properly.
- href={`/team/${props.teamSlug}/~/settings/billing?showPlans=true&highlight=${props.highlightPlan || "growth"}`} + href={`/team/${props.teamSlug}/~/settings/billing?showPlans=true&highlight=${encodeURIComponent(props.highlightPlan || "growth")}`}
33-38: Consider extracting text content for internationalization.If the application supports multiple languages, text content should be extracted into translation files.
- <h3 className="font-semibold text-green-900 text-lg tracking-tight dark:text-green-200"> - Unlock more with thirdweb - </h3> - <p className="mt-0.5 text-green-800 text-sm dark:text-green-300"> - Upgrade to increase limits and access advanced features. - </p> + <h3 className="font-semibold text-green-900 text-lg tracking-tight dark:text-green-200"> + {t('upsell.heading', 'Unlock more with thirdweb')} + </h3> + <p className="mt-0.5 text-green-800 text-sm dark:text-green-300"> + {t('upsell.subtext', 'Upgrade to increase limits and access advanced features.')} + </p>Note: You would need to import and configure the appropriate i18n library if not already done.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
apps/dashboard/src/app/(app)/account/overview/AccountTeamsUI.tsx(1 hunks)apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/BillingAlertBannersUI.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/FreePlanUpsellBannerUI.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/rpc/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/layout.tsx(3 hunks)apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx(1 hunks)apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamSelectionUI.tsx(1 hunks)apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx(1 hunks)apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx(1 hunks)apps/dashboard/src/components/onboarding/PlanCard.tsx(1 hunks)apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (11)
apps/dashboard/src/app/(app)/account/overview/AccountTeamsUI.tsx (1)
apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx (1)
TeamPlanBadge(37-72)
apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx (1)
apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx (1)
TeamPlanBadge(37-72)
apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx (1)
apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx (1)
TeamPlanBadge(37-72)
apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.tsx (1)
apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx (1)
TeamPlanBadge(37-72)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/rpc/page.tsx (1)
apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx (1)
TeamPlanBadge(37-72)
apps/dashboard/src/components/onboarding/PlanCard.tsx (1)
apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx (1)
TeamPlanBadge(37-72)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx (2)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/FreePlanUpsellBannerUI.tsx (1)
FreePlanUpsellBannerUI(14-59)apps/dashboard/src/@/components/blocks/dismissible-alert.tsx (1)
DismissibleAlert(7-36)
apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamSelectionUI.tsx (1)
apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx (1)
TeamPlanBadge(37-72)
apps/dashboard/src/app/(app)/team/[team_slug]/layout.tsx (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/BillingAlertBanners.tsx (2)
ServiceCutOffBanner(11-13)PastDueBanner(7-9)
apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx (1)
apps/dashboard/src/@/api/team.ts (1)
Team(9-9)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/FreePlanUpsellBannerUI.tsx (2)
apps/dashboard/src/@/api/team.ts (1)
Team(9-9)apps/dashboard/src/@/components/ui/button.tsx (1)
Button(67-67)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (22)
apps/dashboard/src/app/(app)/account/overview/AccountTeamsUI.tsx (1)
119-119: LGTM: TeamSlug prop added correctly.The addition of the
teamSlugprop toTeamPlanBadgealigns with the component's updated interface, enabling the badge to be clickable for free plans and directing users to the billing upgrade page.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/rpc/page.tsx (1)
89-89: LGTM: TeamSlug prop added correctly.The addition of the
teamSlugprop toTeamPlanBadgeprovides the necessary data for generating the billing settings URL and supporting the new click tracking functionality.apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx (1)
113-117: LGTM: TeamSlug prop added correctly.The
teamSlugprop has been correctly added to theTeamPlanBadgecomponent, enabling the upgrade functionality for free plan badges. This aligns with the updated component interface requirements.apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.tsx (1)
66-70: LGTM: TeamSlug prop added correctly.The
teamSlugprop has been properly added to theTeamPlanBadgecomponent inside theGatedSwitch, passing through the value from the parent component's props. This enables the badge to link to the billing settings page when displayed for free plans.apps/dashboard/src/components/onboarding/PlanCard.tsx (1)
18-18: Required prop added correctly.The
teamSlugprop has been correctly added to theTeamPlanBadgecomponent, which is necessary for making the badge clickable when displaying a free plan. This change aligns with the updatedTeamPlanBadgecomponent that now wraps free plan badges in a tracked link to the billing settings page.apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx (1)
69-69: Correctly added required teamSlug prop.The
teamSlugprop has been appropriately added to theTeamPlanBadgecomponent, using the current team's slug. This change enables the free plan badge to be wrapped in a clickable link that directs users to the billing settings page, which aligns with the objective of making free plan badges interactive.apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx (1)
104-107: TeamPlanBadge correctly updated with required teamSlug prop.The
TeamPlanBadgecomponent has been properly updated to include theteamSlugprop, passing the team's slug from the current item in the map function. This change enables the badge to be wrapped in a clickable link for free plans, directing users to the billing settings page with appropriate tracking.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/BillingAlertBannersUI.tsx (2)
5-5: Switched to tracked link component for analytics.The import has been correctly updated from the standard Next.js
Linkto the customTrackedLinkTWcomponent, which enables analytics tracking for link interactions.
57-67: Enhanced link with analytics tracking.The standard
Linkcomponent has been replaced withTrackedLinkTW, properly configured with analytics tracking parameters. This change provides valuable usage data by tracking clicks on billing alert banners with appropriate categorization based on the banner type (warning or error).The implementation:
- Maintains the same navigation target to the invoices page
- Adds a consistent category of "billingBanner"
- Sets a descriptive label based on the banner variant
- Preserves the original button styling and functionality
apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamSelectionUI.tsx (1)
118-121: LGTM: TeamPlanBadge updated to include required teamSlug propThe addition of the
teamSlugprop to theTeamPlanBadgecomponent is correctly implemented, providing the necessary team slug for the clickable upgrade link when the team is on the free plan.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx (2)
11-11: LGTM: New import for FreePlanUpsellBannerUIThe import is correctly added to support the new conditional rendering of the upsell banner for free plan users.
59-70: Improved UX with targeted messaging for free plan usersThe conditional rendering provides a better user experience by showing a dedicated upsell banner for free plan users, while maintaining the original alert for other plans. This targeted approach should improve conversion rates for upgrades.
apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx (6)
1-2: LGTM: Component marked as client-sideCorrectly added the "use client" directive since the component now uses client-side hooks and interactive elements.
6-7: LGTM: Added necessary importsCorrectly imported Link for navigation and useTrack for analytics tracking.
37-42: LGTM: Updated component props interfaceThe component now properly requires the teamSlug prop, which is necessary for constructing the billing settings URL.
43-50: LGTM: Refactored badge creationBadge creation is now isolated into a variable for reuse in both the linked and unlinked versions.
52-69: Core feature implementation: Free plan badge now clickableThis implementation correctly makes free plan badges clickable, with a direct link to the team's billing settings page. The tracking analytics are properly implemented to monitor user interactions.
71-71: LGTM: Return original badge for non-free plansFor non-free plans, the component correctly returns just the badge without the link wrapper.
apps/dashboard/src/app/(app)/team/[team_slug]/layout.tsx (3)
3-3: LGTM: Added tracked link componentReplaced the standard Link import with TrackedLinkTW to enable analytics tracking.
34-52: Improved banner display logic with clear priorityThe refactored conditional rendering ensures only one banner is shown at a time, following a logical priority order. This improvement prevents potential UI clutter from multiple banners and focuses user attention on the most critical billing issue.
85-93: LGTM: Added analytics tracking to legacy plan bannerReplaced Link with TrackedLinkTW and added appropriate category and label for analytics tracking.
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/FreePlanUpsellBannerUI.tsx (1)
1-59: Well-structured component with good UI/UX considerations.This new component follows React best practices with a clean implementation. The responsive design (flex-col to flex-row based on screen size), color theming with dark mode support, and visual enhancements like the blurred background element create an attractive upsell experience.
size-limit report 📦
|
jnsdls
force-pushed
the
Make_free_plan_badge_clickable_to_upgrade
branch
from
1e15b7b to
0d54958
Compare
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/dashboard/src/@/components/blocks/UpsellBannerCard.tsx (1)
96-114: Consider enhancing CTA button accessibilityThe button implementation with TrackedLinkTW aligns with the PR objective for analytics tracking. However, depending on the CTA text content, you might want to consider adding an aria-label for better accessibility.
<TrackedLinkTW href={props.cta.link} category={props.trackingCategory} label={props.trackingLabel} + aria-label={typeof props.cta.text === 'string' ? props.cta.text : 'Upgrade plan'} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
apps/dashboard/src/@/components/blocks/UpsellBannerCard.tsx(1 hunks)apps/dashboard/src/app/(app)/account/overview/AccountTeamsUI.tsx(1 hunks)apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/BillingAlertBannersUI.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/FreePlanUpsellBannerUI.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/rpc/page.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/layout.tsx(3 hunks)apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx(1 hunks)apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamSelectionUI.tsx(1 hunks)apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx(1 hunks)apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx(1 hunks)apps/dashboard/src/components/onboarding/PlanCard.tsx(1 hunks)apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (13)
- apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx
- apps/dashboard/src/app/(app)/account/overview/AccountTeamsUI.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/rpc/page.tsx
- apps/dashboard/src/components/onboarding/ApplyForOpCreditsModal.tsx
- apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/BillingAlertBannersUI.tsx
- apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamSelectionUI.tsx
- apps/dashboard/src/components/onboarding/PlanCard.tsx
- apps/dashboard/src/app/(app)/team/~/[[...paths]]/page.tsx
- apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/FreePlanUpsellBannerUI.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/layout.tsx
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
apps/dashboard/src/@/components/blocks/UpsellBannerCard.tsx (5)
1-7: Well-structured imports and client directiveThe client directive is correctly used for this interactive component, and imports are appropriate for the functionality required.
8-33: Good design system implementation with color themingThe ACCENT constant defines a consistent theming system with proper dark mode support. The organized color palette allows for reusable styling across different banner states.
35-47: Well-typed props interface with tracking supportThe props interface is well-defined with appropriate typing. The tracking parameters align with the PR objective of adding analytics to billing-related UI elements.
49-67: Responsive and visually appealing container implementationThe container implementation with decorative elements creates an eye-catching banner with proper responsive behavior. The default color fallback to "green" is a good practice.
68-95: Flexible content layout with conditional renderingThe content layout adapts well between mobile and desktop views. The conditional icon rendering and semantic HTML elements enhance both the visual appeal and accessibility.
jnsdls
force-pushed
the
Make_free_plan_badge_clickable_to_upgrade
branch
from
0d54958 to
c846c40
Compare
jnsdls
force-pushed
the
Make_free_plan_badge_clickable_to_upgrade
branch
from
c846c40 to
5f5492c
Compare
Merge activity
|
# Add Upgrade Paths for Free Plan Teams
This PR enhances the user experience for teams on the free plan by adding clear upgrade paths throughout the dashboard:
- Makes the free plan badge clickable, linking directly to the billing page with pricing modal open
- Adds analytics tracking to billing-related links for better conversion insights
- Implements a new `FreePlanUpsellBannerUI` component on the team dashboard page
- Ensures only one billing alert banner shows at a time (following priority order)
- Updates all `TeamPlanBadge` components to include the team slug parameter
- Improves billing alert banners with proper analytics tracking
These changes aim to increase conversions from free to paid plans by providing contextual upgrade opportunities throughout the product.
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a promotional upsell banner for teams on the free plan, encouraging upgrades with a direct link to view available plans.
- Added a customizable promotional banner component with multiple accent color themes for enhanced marketing displays.
- **Enhancements**
- Team plan badges now provide direct links to billing settings for teams on the free plan, with analytics tracking for user interactions.
- Improved analytics tracking on billing-related banners and links throughout the dashboard.
- **Refactor**
- Updated multiple components to pass team identifiers to plan badges for more contextual display and interaction.
- Streamlined the display logic for billing-related banners to prioritize service status and plan type.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing the `TeamPlanBadge` component by adding a `teamSlug` prop across various files. It also introduces a new `FreePlanUpsellBannerUI` component to encourage free plan users to upgrade, along with some refactoring for better banner handling.
### Detailed summary
- Added `teamSlug` prop to `TeamPlanBadge` in multiple components.
- Introduced `FreePlanUpsellBannerUI` to promote upgrades for free plan users.
- Refactored billing alert banners to prioritize display based on billing status.
- Updated links to use `TrackedLinkTW` for better tracking.
- Improved the `UpsellBannerCard` component with enhanced styling and props.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
graphite-app
bot
force-pushed
the
Make_free_plan_badge_clickable_to_upgrade
branch
from
5f5492c to
4c2347e
Compare
# Add Upgrade Paths for Free Plan Teams
This PR enhances the user experience for teams on the free plan by adding clear upgrade paths throughout the dashboard:
- Makes the free plan badge clickable, linking directly to the billing page with pricing modal open
- Adds analytics tracking to billing-related links for better conversion insights
- Implements a new `FreePlanUpsellBannerUI` component on the team dashboard page
- Ensures only one billing alert banner shows at a time (following priority order)
- Updates all `TeamPlanBadge` components to include the team slug parameter
- Improves billing alert banners with proper analytics tracking
These changes aim to increase conversions from free to paid plans by providing contextual upgrade opportunities throughout the product.
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a promotional upsell banner for teams on the free plan, encouraging upgrades with a direct link to view available plans.
- Added a customizable promotional banner component with multiple accent color themes for enhanced marketing displays.
- **Enhancements**
- Team plan badges now provide direct links to billing settings for teams on the free plan, with analytics tracking for user interactions.
- Improved analytics tracking on billing-related banners and links throughout the dashboard.
- **Refactor**
- Updated multiple components to pass team identifiers to plan badges for more contextual display and interaction.
- Streamlined the display logic for billing-related banners to prioritize service status and plan type.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing the `TeamPlanBadge` component by adding a `teamSlug` prop across various files and implementing a new `FreePlanUpsellBannerUI` component to encourage free plan users to upgrade. It also updates links to use `TrackedLinkTW` for better tracking.
### Detailed summary
- Added `teamSlug` prop to `TeamPlanBadge` in multiple components.
- Introduced `FreePlanUpsellBannerUI` to promote upgrades for free plan users.
- Replaced `<Link>` with `<TrackedLinkTW>` for better tracking in several instances.
- Updated conditional rendering logic for billing alerts in the team layout.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
graphite-app
bot
force-pushed
the
Make_free_plan_badge_clickable_to_upgrade
branch
from
4c2347e to
cde2dd9
Compare
Add Upgrade Paths for Free Plan Teams
This PR enhances the user experience for teams on the free plan by adding clear upgrade paths throughout the dashboard:
FreePlanUpsellBannerUIcomponent on the team dashboard pageTeamPlanBadgecomponents to include the team slug parameterThese changes aim to increase conversions from free to paid plans by providing contextual upgrade opportunities throughout the product.
Summary by CodeRabbit
New Features
Enhancements
Refactor
PR-Codex overview
This PR focuses on enhancing the
TeamPlanBadgecomponent by adding ateamSlugprop across various components, improving tracking capabilities, and introducing a newFreePlanUpsellBannerUIcomponent for teams on the free plan.Detailed summary
teamSlugprop toTeamPlanBadgein multiple components.FreePlanUpsellBannerUIto encourage upgrades for free plan users.TrackedLinkTWfor better tracking.