Show the right tier in the banner

messages/en-US.json

@@ -26,7 +26,7 @@
     "trialBannerMessage": "Your trial expires in {countdown}. Upgrade to keep access.",
     "trialBannerExpired": "Your trial has expired. Upgrade now to restore access.",
     "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.",
+    "billingTrialBannerDescription": "You're currently on a free trial on the {tier} 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",

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

@@ -524,6 +524,7 @@ export default function BillingPage() {
     };
 
     const currentPlanId = getCurrentPlanId();
+    const currentPlan = planOptions.find((p) => p.id === currentPlanId);
 
     const visiblePlanOptions = planOptions.filter(
         (plan) => plan.id !== "home" || currentPlanId === "home"
@@ -873,10 +874,8 @@ export default function BillingPage() {
             {/* Trial Banner */}
             {isTrial && (
                 <TrialBillingBanner
+                    tierName={currentPlan?.name ?? "Business"}
                     onUpgrade={() => {
-                        const currentPlan = planOptions.find(
-                            (p) => p.id === currentPlanId
-                        );
                         if (currentPlan?.tierType) {
                             handleStartSubscription(currentPlan.tierType);
                         }

src/components/TrialBillingBanner.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import React from "react";
 import { Button } from "@app/components/ui/button";
 import { ClockIcon, ArrowRight } from "lucide-react";
 import { useTranslations } from "next-intl";
@@ -8,9 +7,13 @@ import DismissableBanner from "./DismissableBanner";
 
 type TrialBillingBannerProps = {
     onUpgrade: () => void;
+    tierName: string;
 };
 
-export const TrialBillingBanner = ({ onUpgrade }: TrialBillingBannerProps) => {
+export const TrialBillingBanner = ({
+    onUpgrade,
+    tierName
+}: TrialBillingBannerProps) => {
     const t = useTranslations();
 
     return (
@@ -19,7 +22,9 @@ export const TrialBillingBanner = ({ onUpgrade }: TrialBillingBannerProps) => {
             version={1}
             title={t("billingTrialBannerTitle")}
             titleIcon={<ClockIcon className="w-5 h-5 text-primary" />}
-            description={t("billingTrialBannerDescription")}
+            description={t("billingTrialBannerDescription", {
+                tier: tierName
+            })}
             dismissable={false}
         >
             <Button