From 584be4dbd2642a93d615112be2a2f7e8ca44af42 Mon Sep 17 00:00:00 2001
From: Owen <owen@txv.io>
Date: Sun, 3 May 2026 14:45:42 -0700
Subject: [PATCH] Add badge

---
 messages/en-US.json                              |  1 +
 .../[orgId]/settings/(private)/billing/page.tsx  | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index 09a2dc180..ee4ef143d 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -28,6 +28,7 @@
     "billingTrialBannerTitle": "Free Trial Active",
     "billingTrialBannerDescription": "You're currently on a free trial on the business tier. When the trial ends, your account will automatically revert to the Basic tier features and limits. Upgrade anytime to keep access to your current plan's features.",
     "billingTrialBannerUpgrade": "Upgrade Now",
+    "billingTrialBadge": "Free Trial",
     "trialActive": "Free Trial Active",
     "trialExpired": "Trial Expired",
     "trialHasEnded": "Your trial has ended.",
diff --git a/src/app/[orgId]/settings/(private)/billing/page.tsx b/src/app/[orgId]/settings/(private)/billing/page.tsx
index 068f6ed62..f9f9bd77f 100644
--- a/src/app/[orgId]/settings/(private)/billing/page.tsx
+++ b/src/app/[orgId]/settings/(private)/billing/page.tsx
@@ -35,6 +35,7 @@ import {
 } from "@app/components/Credenza";
 import { cn } from "@app/lib/cn";
 import { CreditCard, ExternalLink, Check, AlertTriangle } from "lucide-react";
+import { Badge } from "@app/components/ui/badge";
 import { Alert, AlertTitle, AlertDescription } from "@app/components/ui/alert";
 import {
     Tooltip,
@@ -874,8 +875,19 @@ export default function BillingPage() {
                                     )}
                                 >
                                     <div className="flex-1">
-                                        <div className="text-2xl">
-                                            {plan.name}
+                                        <div className="flex items-center gap-2 flex-wrap">
+                                            <span className="text-2xl">
+                                                {plan.name}
+                                            </span>
+                                            {isCurrentPlan && isTrial && (
+                                                <Badge
+                                                    variant="outlinePrimary"
+                                                    className="text-xs"
+                                                >
+                                                    {t("billingTrialBadge") ||
+                                                        "Free Trial"}
+                                                </Badge>
+                                            )}
                                         </div>
                                         <div className="mt-1">
                                             <span className="text-xl">