feat(billing): gate billing page behind feature flag

apps/desktop/src/renderer/routes/_authenticated/settings/billing/page.tsx

@@ -1,4 +1,6 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { FEATURE_FLAGS } from "@superset/shared/constants";
+import { createFileRoute, Navigate } from "@tanstack/react-router";
+import { useFeatureFlagEnabled } from "posthog-js/react";
 import { useMemo } from "react";
 import { useSettingsSearchQuery } from "renderer/stores/settings-state";
 import { getMatchingItemsForSection } from "../utils/settings-search";
@@ -10,6 +12,7 @@ export const Route = createFileRoute("/_authenticated/settings/billing/")({
 
 function BillingPage() {
 	const searchQuery = useSettingsSearchQuery();
+	const billingEnabled = useFeatureFlagEnabled(FEATURE_FLAGS.BILLING_ENABLED);
 
 	const visibleItems = useMemo(() => {
 		if (!searchQuery) return null;
@@ -18,5 +21,13 @@ function BillingPage() {
 		);
 	}, [searchQuery]);
 
+	if (billingEnabled === undefined) {
+		return null;
+	}
+
+	if (billingEnabled === false) {
+		return <Navigate to="/settings/account" />;
+	}
+
 	return <BillingOverview visibleItems={visibleItems} />;
 }

apps/desktop/src/renderer/routes/_authenticated/settings/billing/plans/page.tsx

@@ -1,4 +1,6 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { FEATURE_FLAGS } from "@superset/shared/constants";
+import { createFileRoute, Navigate } from "@tanstack/react-router";
+import { useFeatureFlagEnabled } from "posthog-js/react";
 import { PlansComparison } from "../components/PlansComparison";
 
 export const Route = createFileRoute("/_authenticated/settings/billing/plans/")(
@@ -8,5 +10,15 @@ export const Route = createFileRoute("/_authenticated/settings/billing/plans/")(
 );
 
 function PlansPage() {
+	const billingEnabled = useFeatureFlagEnabled(FEATURE_FLAGS.BILLING_ENABLED);
+
+	if (billingEnabled === undefined) {
+		return null;
+	}
+
+	if (billingEnabled === false) {
+		return <Navigate to="/settings/account" />;
+	}
+
 	return <PlansComparison />;
 }

apps/desktop/src/renderer/routes/_authenticated/settings/components/SettingsSidebar/GeneralSettings.tsx

@@ -1,5 +1,7 @@
+import { FEATURE_FLAGS } from "@superset/shared/constants";
 import { cn } from "@superset/ui/utils";
 import { Link, useMatchRoute } from "@tanstack/react-router";
+import { useFeatureFlagEnabled } from "posthog-js/react";
 import {
 	HiOutlineBell,
 	HiOutlineBuildingOffice2,
@@ -92,13 +94,15 @@ const GENERAL_SECTIONS: {
 
 export function GeneralSettings({ matchCounts }: GeneralSettingsProps) {
 	const matchRoute = useMatchRoute();
+	const billingEnabled = useFeatureFlagEnabled(FEATURE_FLAGS.BILLING_ENABLED);
 
-	// When searching, only show sections that have matches
-	const filteredSections = matchCounts
-		? GENERAL_SECTIONS.filter(
-				(section) => (matchCounts[section.section] ?? 0) > 0,
-			)
-		: GENERAL_SECTIONS;
+	const filteredSections = (
+		matchCounts
+			? GENERAL_SECTIONS.filter(
+					(section) => (matchCounts[section.section] ?? 0) > 0,
+				)
+			: GENERAL_SECTIONS
+	).filter((section) => section.section !== "billing" || billingEnabled);
 
 	if (filteredSections.length === 0) {
 		return null;

apps/marketing/package.json

@@ -30,6 +30,7 @@
 		"react-fast-marquee": "^1.6.5",
 		"react-icons": "^5.5.0",
 		"require-in-the-middle": "8.0.1",
+		"simplex-noise": "^4.0.3",
 		"stripe-gradient": "^1.0.1",
 		"three": "^0.181.2",
 		"zod": "^4.3.5"