diff --git a/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx b/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx index 211d722d96..ade19748ad 100644 --- a/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx +++ b/packages/ui/src/features/sidebar/components/SidebarNavSection.tsx @@ -1,7 +1,8 @@ -import { HOME_TAB_FLAG } from "@posthog/shared/constants"; +import { BILLING_FLAG, HOME_TAB_FLAG } from "@posthog/shared/constants"; import { useCommandCenterStore } from "@posthog/ui/features/command-center/commandCenterStore"; import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag"; import { useInboxAllReports } from "@posthog/ui/features/inbox/hooks/useInboxAllReports"; +import { openSettings } from "@posthog/ui/features/settings/hooks/useOpenSettings"; import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore"; import { useTasks } from "@posthog/ui/features/tasks/useTasks"; import { @@ -22,6 +23,7 @@ import { useCommandMenuStore } from "@posthog/ui/shell/commandMenuStore"; import { Box, Flex } from "@radix-ui/themes"; import { useRouterState } from "@tanstack/react-router"; import { AgentsItem } from "./items/AgentsItem"; +import { BillingItem } from "./items/BillingItem"; import { CommandCenterItem } from "./items/CommandCenterItem"; import { HomeItem } from "./items/HomeItem"; import { InboxItem } from "./items/InboxItem"; @@ -53,6 +55,7 @@ export function SidebarNavSection({ }: SidebarNavSectionProps = {}) { const view = useAppView(); const homeTabEnabled = useFeatureFlag(HOME_TAB_FLAG); + const billingEnabled = useFeatureFlag(BILLING_FLAG); // When this section renders inside the Channels space, the destinations that // have a /website mirror stay in that space; everything else (and the whole @@ -68,6 +71,7 @@ export function SidebarNavSection({ const goMcpServers = inChannels ? navigateToWebsiteMcpServers : navigateToMcpServers; + const goBilling = () => openSettings("plan-usage"); const goCommandCenter = inChannels ? navigateToWebsiteCommandCenter : navigateToCommandCenter; @@ -80,6 +84,11 @@ export function SidebarNavSection({ const isInboxActive = view.type === "inbox"; const isAgentsActive = view.type === "agents"; const isCommandCenterActive = view.type === "command-center"; + // Billing opens the Plan & usage settings page, which has no AppView of its + // own: derive the highlight straight from the settings route. + const isBillingActive = useRouterState({ + select: (s) => s.location.pathname.startsWith("/settings/plan-usage"), + }); const isSkillsActive = view.type === "skills"; const isMcpServersActive = view.type === "mcp-servers"; @@ -159,6 +168,12 @@ export function SidebarNavSection({ activeCount={commandCenterActiveCount} /> + + {billingEnabled && !inChannels && ( + + + + )} ); } diff --git a/packages/ui/src/features/sidebar/components/items/BillingItem.tsx b/packages/ui/src/features/sidebar/components/items/BillingItem.tsx new file mode 100644 index 0000000000..67cc3a0b2f --- /dev/null +++ b/packages/ui/src/features/sidebar/components/items/BillingItem.tsx @@ -0,0 +1,19 @@ +import { CreditCard } from "@phosphor-icons/react"; +import { SidebarItem } from "../SidebarItem"; + +interface BillingItemProps { + isActive: boolean; + onClick: () => void; +} + +export function BillingItem({ isActive, onClick }: BillingItemProps) { + return ( + } + label="Plan & usage" + isActive={isActive} + onClick={onClick} + /> + ); +}