diff --git a/src/components/PaidFeaturesAlert.tsx b/src/components/PaidFeaturesAlert.tsx
index dfa01fc4..f8a4223b 100644
--- a/src/components/PaidFeaturesAlert.tsx
+++ b/src/components/PaidFeaturesAlert.tsx
@@ -8,6 +8,7 @@ import { useTranslations } from "next-intl";
import Link from "next/link";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { Tier } from "@server/types/Tiers";
+import { useParams } from "next/navigation";
const TIER_ORDER: Tier[] = ["tier1", "tier2", "tier3", "enterprise"];
@@ -37,20 +38,18 @@ const bannerContentClassName = "py-3 px-4";
const bannerRowClassName =
"flex items-center gap-2.5 text-sm text-muted-foreground";
const bannerIconClassName = "size-4 shrink-0 text-purple-500";
-const PRICING_URL = "https://pangolin.net/pricing";
-function tierLinkRenderer(chunks: React.ReactNode) {
- return (
-
- {chunks}
-
-
- );
+function getTierLinkRenderer(billingHref: string) {
+ return function tierLinkRenderer(chunks: React.ReactNode) {
+ return (
+
+ {chunks}
+
+ );
+ };
}
type Props = {
@@ -59,10 +58,14 @@ type Props = {
export function PaidFeaturesAlert({ tiers }: Props) {
const t = useTranslations();
+ const params = useParams();
+ const orgId = params?.orgId as string | undefined;
const { hasSaasSubscription, hasEnterpriseLicense, isActive, subscriptionTier } = usePaidStatus();
const { env } = useEnvContext();
const requiredTier = getRequiredTier(tiers);
const requiredTierName = requiredTier ? t(TIER_TRANSLATION_KEYS[requiredTier]) : null;
+ const billingHref = orgId ? `/${orgId}/settings/billing` : "https://pangolin.net/pricing";
+ const tierLinkRenderer = getTierLinkRenderer(billingHref);
if (env.flags.disableEnterpriseFeatures) {
return null;