From c927c6f32ba50e0cd7a05262b6f07a212a7bc6cf Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Thu, 21 Nov 2024 12:09:44 +0100
Subject: [PATCH] feat: create project upgrade link (#8822)

---
 .../PremiumFeature/PremiumFeature.test.tsx    | 55 +++++++++++++++
 .../common/PremiumFeature/PremiumFeature.tsx  | 69 ++++++++++++-------
 .../ProjectCreationButton.tsx                 |  8 ++-
 3 files changed, 106 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/component/common/PremiumFeature/PremiumFeature.test.tsx

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(<PremiumFeature feature='environments' tooltip={true} />);
+
+    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(<PremiumFeature feature='environments' tooltip={false} />);
+
+    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(
+        <PremiumFeature feature='environments' tooltip={true} mode='upgrade' />,
+    );
+
+    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(
+        <PremiumFeature
+            feature='environments'
+            tooltip={false}
+            mode='upgrade'
+        />,
+    );
+
+    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 = (
         <PremiumFeatureWrapper tooltip={tooltip}>
@@ -204,14 +203,23 @@ export const PremiumFeature = ({
                             </StyledTypography>
                         </StyledBody>
                         <StyledButtonContainer>
-                            <StyledLink
-                                href={upgradeUrl}
-                                target='_blank'
-                                rel='noreferrer'
-                                onClick={trackUpgradePlan}
-                            >
-                                Compare plans
-                            </StyledLink>
+                            {mode === 'plans' ? (
+                                <StyledLink
+                                    href={plansUrl}
+                                    target='_blank'
+                                    onClick={trackUpgradePlan}
+                                >
+                                    Compare plans
+                                </StyledLink>
+                            ) : (
+                                <StyledLink
+                                    href={upgradeUrl}
+                                    target='_blank'
+                                    onClick={trackUpgradePlan}
+                                >
+                                    View our Enterprise offering
+                                </StyledLink>
+                            )}
                         </StyledButtonContainer>
                     </>
                 }
@@ -227,15 +235,26 @@ export const PremiumFeature = ({
                             </StyledTypography>
                         </StyledBody>
                         <StyledButtonContainer>
-                            <Button
-                                variant='contained'
-                                href={upgradeUrl}
-                                target='_blank'
-                                rel='noreferrer'
-                                onClick={trackUpgradePlan}
-                            >
-                                Compare plans
-                            </Button>
+                            {mode === 'plans' ? (
+                                <Button
+                                    variant='contained'
+                                    href={plansUrl}
+                                    target='_blank'
+                                    onClick={trackUpgradePlan}
+                                >
+                                    Compare plans
+                                </Button>
+                            ) : (
+                                <Button
+                                    variant='contained'
+                                    href={upgradeUrl}
+                                    target='_blank'
+                                    onClick={trackUpgradePlan}
+                                >
+                                    View our Enterprise offering
+                                </Button>
+                            )}
+
                             <Button
                                 href={url}
                                 target='_blank'
diff --git a/frontend/src/component/project/ProjectList/ProjectCreationButton/ProjectCreationButton.tsx b/frontend/src/component/project/ProjectList/ProjectCreationButton/ProjectCreationButton.tsx
index f50fa5ba62..a43030fde5 100644
--- a/frontend/src/component/project/ProjectList/ProjectCreationButton/ProjectCreationButton.tsx
+++ b/frontend/src/component/project/ProjectList/ProjectCreationButton/ProjectCreationButton.tsx
@@ -22,13 +22,18 @@ const NAVIGATE_TO_CREATE_PROJECT = 'NAVIGATE_TO_CREATE_PROJECT';
 function resolveCreateButtonData(
     isOss: boolean,
     hasAccess: boolean,
+    mode: 'plans' | 'upgrade' = 'plans',
 ): ICreateButtonData {
     if (isOss) {
         return {
             disabled: true,
             tooltip: {
                 titleComponent: (
-                    <PremiumFeature feature='adding-new-projects' tooltip />
+                    <PremiumFeature
+                        feature='adding-new-projects'
+                        mode={mode}
+                        tooltip
+                    />
                 ),
                 sx: { maxWidth: '320px' },
                 variant: 'custom',
@@ -70,6 +75,7 @@ export const ProjectCreationButton: FC<ProjectCreationButtonProps> = ({
     const createButtonData = resolveCreateButtonData(
         isOss(),
         hasAccess(CREATE_PROJECT),
+        'upgrade',
     );
 
     return (