Update how billing is presented for license keys

src/app/[orgId]/settings/(private)/billing/page.tsx

@@ -749,12 +749,6 @@ export default function BillingPage() {
         return 0;
     };
 
-    // Get license key count
-    const getLicenseKeyCount = (): number => {
-        if (!licenseSubscription?.items) return 0;
-        return licenseSubscription.items.length;
-    };
-
     // Check if downgrading to a tier would violate current usage limits
     const checkLimitViolations = (
         targetTier: Tier | "basic"
@@ -1545,7 +1539,7 @@ export default function BillingPage() {
             </SettingsSection>
 
             {/* Paid License Keys Section */}
-            {(licenseSubscription || getLicenseKeyCount() > 0) && (
+            {licenseSubscription && (
                 <SettingsSection>
                     <SettingsSectionHeader>
                         <SettingsSectionTitle>
@@ -1561,22 +1555,6 @@ export default function BillingPage() {
                             <SettingsFormGrid>
                                 <SettingsFormCell span="full">
                                     <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 border rounded-lg p-4">
-                                        <div>
-                                            <div className="text-sm text-muted-foreground mb-1">
-                                                {t("billingCurrentKeys") ||
-                                                    "Current Keys"}
-                                            </div>
-                                            <div className="flex items-baseline gap-2">
-                                                <span className="text-3xl font-semibold">
-                                                    {getLicenseKeyCount()}
-                                                </span>
-                                                <span className="text-lg">
-                                                    {getLicenseKeyCount() === 1
-                                                        ? "key"
-                                                        : "keys"}
-                                                </span>
-                                            </div>
-                                        </div>
                                         <Button
                                             variant="outline"
                                             onClick={handleModifySubscription}

src/app/[orgId]/settings/(private)/license/page.tsx

@@ -1,4 +1,5 @@
 import GenerateLicenseKeysTable from "@app/components/GenerateLicenseKeysTable";
+import LicenseBillingBanner from "@app/components/LicenseBillingBanner";
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { ListGeneratedLicenseKeysResponse } from "@server/routers/generatedLicense/types";
@@ -26,5 +27,16 @@ export default async function Page({ params }: Props) {
         licenseKeys = data.data.data;
     } catch {}
 
-    return <GenerateLicenseKeysTable licenseKeys={licenseKeys} orgId={orgId} />;
+    const hasNonPersonalLicenseKey = licenseKeys.some(
+        (key) => key.tier !== "personal"
+    );
+
+    return (
+        <>
+            {hasNonPersonalLicenseKey && (
+                <LicenseBillingBanner orgId={orgId} />
+            )}
+            <GenerateLicenseKeysTable licenseKeys={licenseKeys} orgId={orgId} />
+        </>
+    );
 }

src/components/LicenseBillingBanner.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Globe, CreditCard, ArrowRight } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { Button } from "@app/components/ui/button";
+import DismissableBanner from "./DismissableBanner";
+
+type LicenseBillingBannerProps = {
+    orgId: string;
+};
+
+export const LicenseBillingBanner = ({ orgId }: LicenseBillingBannerProps) => {
+    const t = useTranslations();
+
+    return (
+        <DismissableBanner
+            storageKey="license-billing-banner-dismissed"
+            version={1}
+            title={t("licenseBillingBannerTitle")}
+            titleIcon={<Globe className="w-5 h-5 text-primary" />}
+            description={t("licenseBillingBannerDescription")}
+        >
+            <Link href={`/${orgId}/settings/billing`}>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    <CreditCard className="w-4 h-4" />
+                    {t("licenseBillingBannerButton")}
+                    <ArrowRight className="w-4 h-4" />
+                </Button>
+            </Link>
+        </DismissableBanner>
+    );
+};
+
+export default LicenseBillingBanner;