From 419640fb2b7d69de0cc96d75397bf9c85f824ac4 Mon Sep 17 00:00:00 2001
From: sjaanus <sellinjaanus@gmail.com>
Date: Tue, 13 Dec 2022 14:35:07 +0200
Subject: [PATCH] Add unique trackable URLs for Pro/Enterprise feature lead
 generation (#2684)

Add unique trackable URLs for Pro/Enterprise feature lead generation
---
 .../ProjectChangeRequests.tsx                 |  2 +-
 .../common/PremiumFeature/PremiumFeature.tsx  | 23 +++++++++++--------
 .../ChangeRequestConfiguration.tsx            |  2 +-
 .../project/ProjectAccess/ProjectAccess.tsx   |  2 +-
 .../project/ProjectList/ProjectList.tsx       |  2 +-
 5 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ProjectChangeRequests.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ProjectChangeRequests.tsx
index c8d4f72bbd..51df5cc195 100644
--- a/frontend/src/component/changeRequest/ProjectChangeRequests/ProjectChangeRequests.tsx
+++ b/frontend/src/component/changeRequest/ProjectChangeRequests/ProjectChangeRequests.tsx
@@ -19,7 +19,7 @@ export const ProjectChangeRequests = () => {
     if (isOss() || isPro()) {
         return (
             <PageContent sx={{ justifyContent: 'center' }}>
-                <PremiumFeature feature="Change Requests" />
+                <PremiumFeature feature="change-requests" />
             </PageContent>
         );
     }
diff --git a/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx b/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx
index 1e167c1867..dd217ccd28 100644
--- a/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx
+++ b/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx
@@ -46,17 +46,20 @@ enum FeaturePlan {
 }
 
 const PremiumFeatures = {
-    ['Adding new projects']: {
+    'adding-new-projects': {
         plan: FeaturePlan.PRO,
         url: '',
+        label: 'Adding new projects',
     },
-    ['Access']: {
+    access: {
         plan: FeaturePlan.PRO,
         url: 'https://docs.getunleash.io/reference/rbac',
+        label: 'Access',
     },
-    ['Change Requests']: {
+    'change-requests': {
         plan: FeaturePlan.ENTERPRISE,
         url: 'https://docs.getunleash.io/reference/change-requests',
+        label: 'Change Requests',
     },
 };
 
@@ -70,22 +73,22 @@ export interface PremiumFeatureProps {
 }
 
 export const PremiumFeature = ({ feature, tooltip }: PremiumFeatureProps) => {
-    const { url, plan } = PremiumFeatures[feature];
+    const { url, plan, label } = PremiumFeatures[feature];
 
     const tracker = usePlausibleTracker();
 
     const handleClick = () => {
         tracker.trackEvent('upgrade_plan_clicked', {
-            props: { feature },
+            props: { feature: label },
         });
     };
 
     const featureLabel = Boolean(url) ? (
         <StyledLink href={url} target="_blank">
-            {feature}
+            {label}
         </StyledLink>
     ) : (
-        feature
+        label
     );
 
     const featureMessage = (
@@ -96,6 +99,8 @@ export const PremiumFeature = ({ feature, tooltip }: PremiumFeatureProps) => {
         </>
     );
 
+    const upgradeUrl = `${UPGRADE_URL}?feature=${feature}`;
+
     return (
         <PremiumFeatureWrapper tooltip={tooltip}>
             <StyledTitle>
@@ -114,7 +119,7 @@ export const PremiumFeature = ({ feature, tooltip }: PremiumFeatureProps) => {
                         </StyledBody>
                         <StyledButtonContainer>
                             <StyledLink
-                                href={UPGRADE_URL}
+                                href={upgradeUrl}
                                 target="_blank"
                                 onClick={handleClick}
                             >
@@ -137,7 +142,7 @@ export const PremiumFeature = ({ feature, tooltip }: PremiumFeatureProps) => {
                         <StyledButtonContainer>
                             <Button
                                 variant="outlined"
-                                href={UPGRADE_URL}
+                                href={upgradeUrl}
                                 target="_blank"
                                 onClick={handleClick}
                             >
diff --git a/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestConfiguration.tsx b/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestConfiguration.tsx
index 7f5d2607d3..a85023ddc2 100644
--- a/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestConfiguration.tsx
+++ b/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestConfiguration.tsx
@@ -31,7 +31,7 @@ export const ChangeRequestConfiguration = () => {
                 }
                 sx={{ justifyContent: 'center' }}
             >
-                <PremiumFeature feature="Change Requests" />
+                <PremiumFeature feature="change-requests" />
             </PageContent>
         );
     }
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
index 9d53ac91fa..a6e0e9f13d 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
@@ -24,7 +24,7 @@ export const ProjectAccess = () => {
                 header={<PageHeader title="Access" />}
                 sx={{ justifyContent: 'center' }}
             >
-                <PremiumFeature feature="Access" />
+                <PremiumFeature feature="access" />
             </PageContent>
         );
     }
diff --git a/frontend/src/component/project/ProjectList/ProjectList.tsx b/frontend/src/component/project/ProjectList/ProjectList.tsx
index 0362eb890f..6105d41ac5 100644
--- a/frontend/src/component/project/ProjectList/ProjectList.tsx
+++ b/frontend/src/component/project/ProjectList/ProjectList.tsx
@@ -45,7 +45,7 @@ function resolveCreateButtonData(
             disabled: true,
             tooltip: {
                 titleComponent: (
-                    <PremiumFeature feature="Adding new projects" tooltip />
+                    <PremiumFeature feature="adding-new-projects" tooltip />
                 ),
                 sx: { maxWidth: '320px' },
                 variant: 'custom',