diff --git a/messages/en-US.json b/messages/en-US.json index 8ec0a97c..aa9cb2b0 100644 --- a/messages/en-US.json +++ b/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.", - "ossEnterpriseEditionRequired": "The Enterprise Edition is required to use this feature.", + "licenseRequiredToUse": "An Enterprise Edition license is required to use this feature. This feature is also available in Pangolin Cloud.", + "ossEnterpriseEditionRequired": "The Enterprise Edition is required to use this feature. This feature is also available in Pangolin Cloud.", "certResolver": "Certificate Resolver", "certResolverDescription": "Select the certificate resolver to use for this resource.", "selectCertResolver": "Select Certificate Resolver", diff --git a/src/components/PaidFeaturesAlert.tsx b/src/components/PaidFeaturesAlert.tsx index f8a4223b..f4bc528d 100644 --- a/src/components/PaidFeaturesAlert.tsx +++ b/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 ( + + {chunks} + + ); + }; +} + +function getPangolinCloudLinkRenderer() { + return function pangolinCloudLinkRenderer(chunks: React.ReactNode) { return ( {chunks} + + + ); + }; +} + +function getDocsLinkRenderer(href: string) { + return function docsLinkRenderer(chunks: React.ReactNode) { + return ( + + {chunks} + ); }; @@ -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) {
- {t("licenseRequiredToUse")} + + {t.rich("licenseRequiredToUse", { + enterpriseLicenseLink: enterpriseDocsLinkRenderer, + pangolinCloudLink: pangolinCloudLinkRenderer + })} +
@@ -116,17 +157,8 @@ export function PaidFeaturesAlert({ tiers }: Props) { {t.rich("ossEnterpriseEditionRequired", { - enterpriseEditionLink: (chunks) => ( - - {chunks} - - - ) + enterpriseEditionLink: enterpriseDocsLinkRenderer, + pangolinCloudLink: pangolinCloudLinkRenderer })}