diff --git a/frontend/src/component/common/PremiumFeature/PremiumFeature.test.tsx b/frontend/src/component/common/PremiumFeature/PremiumFeature.test.tsx
new file mode 100644
index 0000000000..305ae42761
--- /dev/null
+++ b/frontend/src/component/common/PremiumFeature/PremiumFeature.test.tsx
@@ -0,0 +1,55 @@
+import { render } from 'utils/testRenderer';
+import { screen } from '@testing-library/react';
+import { PremiumFeature } from './PremiumFeature';
+
+test('Show plans comparison message and link by default - with tooltip', async () => {
+ render();
+
+ const link = screen.getByText('Compare plans');
+
+ expect(link).toHaveAttribute(
+ 'href',
+ 'https://www.getunleash.io/plans?feature=environments',
+ );
+});
+
+test('Show plans comparison message and link by default - without tooltip', async () => {
+ render();
+
+ const link = screen.getByText('Compare plans');
+
+ expect(link).toHaveAttribute(
+ 'href',
+ 'https://www.getunleash.io/plans?feature=environments',
+ );
+});
+
+test('Show upgrade message and link - with tooltip', async () => {
+ render(
+ ,
+ );
+
+ const link = screen.getByText('View our Enterprise offering');
+
+ expect(link).toHaveAttribute(
+ 'href',
+ 'https://www.getunleash.io/upgrade_unleash?utm_source=environments',
+ );
+});
+
+test('Show upgrade message and link - without tooltip', async () => {
+ render(
+ ,
+ );
+
+ const link = screen.getByText('View our Enterprise offering');
+
+ expect(link).toHaveAttribute(
+ 'href',
+ 'https://www.getunleash.io/upgrade_unleash?utm_source=environments',
+ );
+});
diff --git a/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx b/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx
index 9062f694a6..14fe464f21 100644
--- a/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx
+++ b/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx
@@ -54,7 +54,7 @@ enum FeaturePlan {
const PremiumFeatures = {
'adding-new-projects': {
- plan: FeaturePlan.PRO,
+ plan: FeaturePlan.ENTERPRISE,
url: '',
label: 'Adding new projects',
},
@@ -68,11 +68,6 @@ const PremiumFeatures = {
url: 'https://docs.getunleash.io/reference/change-requests',
label: 'Change Requests',
},
- segments: {
- plan: FeaturePlan.PRO,
- url: 'https://docs.getunleash.io/reference/segments',
- label: 'Segments',
- },
'service-accounts': {
plan: FeaturePlan.ENTERPRISE,
url: 'https://docs.getunleash.io/reference/service-accounts',
@@ -137,18 +132,21 @@ const PremiumFeatures = {
type PremiumFeatureType = keyof typeof PremiumFeatures;
-const UPGRADE_URL = 'https://www.getunleash.io/plans';
+const PLANS_URL = 'https://www.getunleash.io/plans';
+const UPGRADE_URL = 'https://www.getunleash.io/upgrade_unleash';
export interface PremiumFeatureProps {
feature: PremiumFeatureType;
tooltip?: boolean;
page?: boolean;
+ mode?: 'plans' | 'upgrade';
}
export const PremiumFeature = ({
feature,
tooltip,
page,
+ mode = 'plans',
}: PremiumFeatureProps) => {
const { url, plan, label } = PremiumFeatures[feature];
@@ -182,7 +180,8 @@ export const PremiumFeature = ({
>
);
- const upgradeUrl = `${UPGRADE_URL}?feature=${feature}`;
+ const plansUrl = `${PLANS_URL}?feature=${feature}`;
+ const upgradeUrl = `${UPGRADE_URL}?utm_source=${feature}`;
const content = (
@@ -204,14 +203,23 @@ export const PremiumFeature = ({
-
- Compare plans
-
+ {mode === 'plans' ? (
+
+ Compare plans
+
+ ) : (
+
+ View our Enterprise offering
+
+ )}
>
}
@@ -227,15 +235,26 @@ export const PremiumFeature = ({
-
+ {mode === 'plans' ? (
+
+ ) : (
+
+ )}
+
+
),
sx: { maxWidth: '320px' },
variant: 'custom',
@@ -70,6 +75,7 @@ export const ProjectCreationButton: FC = ({
const createButtonData = resolveCreateButtonData(
isOss(),
hasAccess(CREATE_PROJECT),
+ 'upgrade',
);
return (