dynamic default billing tab based on totalLinks

Author: steven-tey

apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/plan-usage.tsx

@@ -43,6 +43,7 @@ export default function PlanUsage() {
     salesLimit,
     linksUsage,
     linksLimit,
+    totalLinks,
     domains,
     domainsLimit,
     foldersUsage,
@@ -84,6 +85,52 @@ export default function PlanUsage() {
     return [];
   }, [billingCycleStart]);
 
+  const usageTabs = useMemo(() => {
+    const tabs = [
+      {
+        id: "events",
+        icon: CursorRays,
+        title: "Events tracked",
+        usage: usage,
+        limit: usageLimit,
+      },
+      {
+        id: "links",
+        icon: Hyperlink,
+        title: "Links created",
+        usage: linksUsage,
+        limit: linksLimit,
+      },
+      {
+        id: "revenue",
+        icon: CircleDollar,
+        title: "Revenue tracked",
+        usage: salesUsage,
+        limit: salesLimit,
+        unit: "$",
+        requiresUpgrade: plan === "free" || plan === "pro",
+      },
+    ];
+    if (totalLinks && totalLinks > 100_000) {
+      // Find the links tab and move it to the first position
+      const linksTabIndex = tabs.findIndex((tab) => tab.id === "links");
+      if (linksTabIndex !== -1) {
+        const linksTab = tabs.splice(linksTabIndex, 1)[0];
+        tabs.unshift(linksTab);
+      }
+    }
+    return tabs;
+  }, [
+    plan,
+    usage,
+    usageLimit,
+    linksUsage,
+    linksLimit,
+    totalLinks,
+    salesUsage,
+    salesLimit,
+  ]);
+
   return (
     <div className="rounded-lg border border-neutral-200 bg-white">
       <div className="flex flex-col items-start justify-between gap-y-4 p-6 md:px-8 lg:flex-row">
@@ -127,29 +174,9 @@ export default function PlanUsage() {
       <div className="grid grid-cols-[minmax(0,1fr)] divide-y divide-neutral-200 border-t border-neutral-200">
         <div>
           <div className="grid gap-4 p-6 sm:grid-cols-3 md:p-8 lg:gap-6">
-            <UsageTabCard
-              id="events"
-              icon={CursorRays}
-              title="Events tracked"
-              usage={usage}
-              limit={usageLimit}
-            />
-            <UsageTabCard
-              id="links"
-              icon={Hyperlink}
-              title="Links created"
-              usage={linksUsage}
-              limit={linksLimit}
-            />
-            <UsageTabCard
-              id="revenue"
-              icon={CircleDollar}
-              title="Revenue tracked"
-              usage={salesUsage}
-              limit={salesLimit}
-              unit="$"
-              requiresUpgrade={plan === "free" || plan === "pro"}
-            />
+            {usageTabs.map((tab) => (
+              <UsageTabCard key={tab.id} {...tab} />
+            ))}
           </div>
           <div className="w-full px-2 pb-8 md:px-8">
             <UsageChart />
@@ -244,11 +271,22 @@ function UsageTabCard({
   requiresUpgrade?: boolean;
 }) {
   const { searchParams, queryParams } = useRouterStuff();
-  const { slug } = useWorkspace();
+  const { slug, totalLinks } = useWorkspace();
 
-  const isActive =
-    searchParams.get("tab") === id ||
-    (!searchParams.get("tab") && id === "events");
+  const defaultActiveTab = useMemo(() => {
+    if (totalLinks && totalLinks > 100_000) {
+      return "links";
+    }
+    return "events";
+  }, [totalLinks]);
+
+  const isActive = useMemo(() => {
+    if (searchParams.get("tab")) {
+      return searchParams.get("tab") === id;
+    } else {
+      return id === defaultActiveTab;
+    }
+  }, [searchParams, id, defaultActiveTab]);
 
   const [usage, limit] =
     unit === "$" && usageProp !== undefined && limitProp !== undefined

apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/usage-chart.tsx

@@ -1,4 +1,5 @@
 import useUsage from "@/lib/swr/use-usage";
+import useWorkspace from "@/lib/swr/use-workspace";
 import { EmptyState, LoadingSpinner } from "@dub/ui";
 import { Bars, TimeSeriesChart, XAxis, YAxis } from "@dub/ui/charts";
 import { CircleDollar, CursorRays, Hyperlink } from "@dub/ui/icons";
@@ -32,8 +33,17 @@ const resourceEmptyStates: Record<
 
 export function UsageChart() {
   const searchParams = useSearchParams();
+  const { totalLinks } = useWorkspace();
+
+  const defaultActiveTab = useMemo(() => {
+    if (totalLinks && totalLinks > 100_000) {
+      return "links";
+    }
+    return "events";
+  }, [totalLinks]);
+
   const resource =
-    RESOURCES.find((r) => r === searchParams.get("tab")) ?? "events";
+    RESOURCES.find((r) => r === searchParams.get("tab")) ?? defaultActiveTab;
 
   const { usage, loading } = useUsage({ resource });