add pangolin cloud link

messages/en-US.json

@@ -2283,8 +2283,8 @@
     "logRetentionEndOfFollowingYear": "End of following year",
     "actionLogsDescription": "View a history of actions performed in this organization",
     "accessLogsDescription": "View access auth requests for resources in this organization",
-    "licenseRequiredToUse": "An Enterprise license is required to use this feature.",
+    "licenseRequiredToUse": "An <enterpriseLicenseLink>Enterprise Edition</enterpriseLicenseLink> license is required to use this feature. This feature is also available in <pangolinCloudLink>Pangolin Cloud</pangolinCloudLink>.",
-    "ossEnterpriseEditionRequired": "The <enterpriseEditionLink>Enterprise Edition</enterpriseEditionLink> is required to use this feature.",
+    "ossEnterpriseEditionRequired": "The <enterpriseEditionLink>Enterprise Edition</enterpriseEditionLink> is required to use this feature. This feature is also available in <pangolinCloudLink>Pangolin Cloud</pangolinCloudLink>.",
     "certResolver": "Certificate Resolver",
     "certResolverDescription": "Select the certificate resolver to use for this resource.",
     "selectCertResolver": "Select Certificate Resolver",

src/components/PaidFeaturesAlert.tsx

@@ -38,15 +38,49 @@ 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 docsLinkClassName =
+    "inline-flex items-center gap-1 font-medium text-purple-600 underline";
+const PANGOLIN_CLOUD_SIGNUP_URL = "https://app.pangolin.net/auth/signup/";
+const ENTERPRISE_DOCS_URL =
+    "https://docs.pangolin.net/self-host/enterprise-edition";
 
 function getTierLinkRenderer(billingHref: string) {
     return function tierLinkRenderer(chunks: React.ReactNode) {
+        return (
+            <Link href={billingHref} className={docsLinkClassName}>
+                {chunks}
+            </Link>
+        );
+    };
+}
+
+function getPangolinCloudLinkRenderer() {
+    return function pangolinCloudLinkRenderer(chunks: React.ReactNode) {
         return (
             <Link
-                href={billingHref}
+                href={PANGOLIN_CLOUD_SIGNUP_URL}
-                className="inline-flex items-center gap-1 font-medium text-purple-600 underline"
+                target="_blank"
+                rel="noopener noreferrer"
+                className={docsLinkClassName}
             >
                 {chunks}
+                <ExternalLink className="size-3.5 shrink-0" />
+            </Link>
+        );
+    };
+}
+
+function getDocsLinkRenderer(href: string) {
+    return function docsLinkRenderer(chunks: React.ReactNode) {
+        return (
+            <Link
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={docsLinkClassName}
+            >
+                {chunks}
+                <ExternalLink className="size-3.5 shrink-0" />
             </Link>
         );
     };
@@ -66,6 +100,8 @@ export function PaidFeaturesAlert({ tiers }: Props) {
     const requiredTierName = requiredTier ? t(TIER_TRANSLATION_KEYS[requiredTier]) : null;
     const billingHref = orgId ? `/${orgId}/settings/billing` : "https://pangolin.net/pricing";
     const tierLinkRenderer = getTierLinkRenderer(billingHref);
+    const pangolinCloudLinkRenderer = getPangolinCloudLinkRenderer();
+    const enterpriseDocsLinkRenderer = getDocsLinkRenderer(ENTERPRISE_DOCS_URL);
 
     if (env.flags.disableEnterpriseFeatures) {
         return null;
@@ -103,7 +139,12 @@ export function PaidFeaturesAlert({ tiers }: Props) {
                     <CardContent className={bannerContentClassName}>
                         <div className={bannerRowClassName}>
                             <KeyRound className={bannerIconClassName} />
-                            <span>{t("licenseRequiredToUse")}</span>
+                            <span>
+                                {t.rich("licenseRequiredToUse", {
+                                    enterpriseLicenseLink: enterpriseDocsLinkRenderer,
+                                    pangolinCloudLink: pangolinCloudLinkRenderer
+                                })}
+                            </span>
                         </div>
                     </CardContent>
                 </Card>
@@ -116,17 +157,8 @@ export function PaidFeaturesAlert({ tiers }: Props) {
                             <KeyRound className={bannerIconClassName} />
                             <span>
                                 {t.rich("ossEnterpriseEditionRequired", {
-                                    enterpriseEditionLink: (chunks) => (
+                                    enterpriseEditionLink: enterpriseDocsLinkRenderer,
-                                        <Link
+                                    pangolinCloudLink: pangolinCloudLinkRenderer
-                                            href="https://docs.pangolin.net/self-host/enterprise-edition"
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                            className="inline-flex items-center gap-1 font-medium text-purple-600 underline"
-                                        >
-                                            {chunks}
-                                            <ExternalLink className="size-3.5 shrink-0" />
-                                        </Link>
-                                    )
                                 })}
                             </span>
                         </div>