mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-20 00:08:02 +01:00
Add unique trackable URLs for Pro/Enterprise feature lead generation (#2684)
Add unique trackable URLs for Pro/Enterprise feature lead generation
This commit is contained in:
parent
fb06fa9f46
commit
419640fb2b
@ -19,7 +19,7 @@ export const ProjectChangeRequests = () => {
|
|||||||
if (isOss() || isPro()) {
|
if (isOss() || isPro()) {
|
||||||
return (
|
return (
|
||||||
<PageContent sx={{ justifyContent: 'center' }}>
|
<PageContent sx={{ justifyContent: 'center' }}>
|
||||||
<PremiumFeature feature="Change Requests" />
|
<PremiumFeature feature="change-requests" />
|
||||||
</PageContent>
|
</PageContent>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -46,17 +46,20 @@ enum FeaturePlan {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const PremiumFeatures = {
|
const PremiumFeatures = {
|
||||||
['Adding new projects']: {
|
'adding-new-projects': {
|
||||||
plan: FeaturePlan.PRO,
|
plan: FeaturePlan.PRO,
|
||||||
url: '',
|
url: '',
|
||||||
|
label: 'Adding new projects',
|
||||||
},
|
},
|
||||||
['Access']: {
|
access: {
|
||||||
plan: FeaturePlan.PRO,
|
plan: FeaturePlan.PRO,
|
||||||
url: 'https://docs.getunleash.io/reference/rbac',
|
url: 'https://docs.getunleash.io/reference/rbac',
|
||||||
|
label: 'Access',
|
||||||
},
|
},
|
||||||
['Change Requests']: {
|
'change-requests': {
|
||||||
plan: FeaturePlan.ENTERPRISE,
|
plan: FeaturePlan.ENTERPRISE,
|
||||||
url: 'https://docs.getunleash.io/reference/change-requests',
|
url: 'https://docs.getunleash.io/reference/change-requests',
|
||||||
|
label: 'Change Requests',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -70,22 +73,22 @@ export interface PremiumFeatureProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const PremiumFeature = ({ feature, tooltip }: PremiumFeatureProps) => {
|
export const PremiumFeature = ({ feature, tooltip }: PremiumFeatureProps) => {
|
||||||
const { url, plan } = PremiumFeatures[feature];
|
const { url, plan, label } = PremiumFeatures[feature];
|
||||||
|
|
||||||
const tracker = usePlausibleTracker();
|
const tracker = usePlausibleTracker();
|
||||||
|
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
tracker.trackEvent('upgrade_plan_clicked', {
|
tracker.trackEvent('upgrade_plan_clicked', {
|
||||||
props: { feature },
|
props: { feature: label },
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const featureLabel = Boolean(url) ? (
|
const featureLabel = Boolean(url) ? (
|
||||||
<StyledLink href={url} target="_blank">
|
<StyledLink href={url} target="_blank">
|
||||||
{feature}
|
{label}
|
||||||
</StyledLink>
|
</StyledLink>
|
||||||
) : (
|
) : (
|
||||||
feature
|
label
|
||||||
);
|
);
|
||||||
|
|
||||||
const featureMessage = (
|
const featureMessage = (
|
||||||
@ -96,6 +99,8 @@ export const PremiumFeature = ({ feature, tooltip }: PremiumFeatureProps) => {
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const upgradeUrl = `${UPGRADE_URL}?feature=${feature}`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PremiumFeatureWrapper tooltip={tooltip}>
|
<PremiumFeatureWrapper tooltip={tooltip}>
|
||||||
<StyledTitle>
|
<StyledTitle>
|
||||||
@ -114,7 +119,7 @@ export const PremiumFeature = ({ feature, tooltip }: PremiumFeatureProps) => {
|
|||||||
</StyledBody>
|
</StyledBody>
|
||||||
<StyledButtonContainer>
|
<StyledButtonContainer>
|
||||||
<StyledLink
|
<StyledLink
|
||||||
href={UPGRADE_URL}
|
href={upgradeUrl}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
>
|
>
|
||||||
@ -137,7 +142,7 @@ export const PremiumFeature = ({ feature, tooltip }: PremiumFeatureProps) => {
|
|||||||
<StyledButtonContainer>
|
<StyledButtonContainer>
|
||||||
<Button
|
<Button
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
href={UPGRADE_URL}
|
href={upgradeUrl}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
>
|
>
|
||||||
|
@ -31,7 +31,7 @@ export const ChangeRequestConfiguration = () => {
|
|||||||
}
|
}
|
||||||
sx={{ justifyContent: 'center' }}
|
sx={{ justifyContent: 'center' }}
|
||||||
>
|
>
|
||||||
<PremiumFeature feature="Change Requests" />
|
<PremiumFeature feature="change-requests" />
|
||||||
</PageContent>
|
</PageContent>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -24,7 +24,7 @@ export const ProjectAccess = () => {
|
|||||||
header={<PageHeader title="Access" />}
|
header={<PageHeader title="Access" />}
|
||||||
sx={{ justifyContent: 'center' }}
|
sx={{ justifyContent: 'center' }}
|
||||||
>
|
>
|
||||||
<PremiumFeature feature="Access" />
|
<PremiumFeature feature="access" />
|
||||||
</PageContent>
|
</PageContent>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -45,7 +45,7 @@ function resolveCreateButtonData(
|
|||||||
disabled: true,
|
disabled: true,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
titleComponent: (
|
titleComponent: (
|
||||||
<PremiumFeature feature="Adding new projects" tooltip />
|
<PremiumFeature feature="adding-new-projects" tooltip />
|
||||||
),
|
),
|
||||||
sx: { maxWidth: '320px' },
|
sx: { maxWidth: '320px' },
|
||||||
variant: 'custom',
|
variant: 'custom',
|
||||||
|
Loading…
Reference in New Issue
Block a user