Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: create project upgrade link (#8822)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-11-21 12:09:44 +01:00 committed by GitHub
parent 4ded068de7
commit c927c6f32b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 106 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/src/component/common/PremiumFeature/PremiumFeature.test.tsx Normal file
View File

@ -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',
);
});

69
frontend/src/component/common/PremiumFeature/PremiumFeature.tsx
View File

@ -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'

8
frontend/src/component/project/ProjectList/ProjectCreationButton/ProjectCreationButton.tsx
View File

@ -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 (