mirror of
https://github.com/Unleash/unleash.git
synced 2025-06-04 01:18:20 +02:00
chore: remove demo plans dialog (#9816)
https://linear.app/unleash/issue/2-3531/remove-pricing-pop-up We decided to remove this dialog in favor of linking directly to https://www.getunleash.io/pricing
This commit is contained in:
Nuno Góis
GitHub
parent
a2e39a05c4
commit
dbe2f9b6bd
@ -5,7 +5,6 @@ import { createLocalStorage } from 'utils/createLocalStorage';
|
||||
import { TOPICS } from './demo-topics';
|
||||
import { DemoDialogWelcome } from './DemoDialog/DemoDialogWelcome/DemoDialogWelcome';
|
||||
import { DemoDialogFinish } from './DemoDialog/DemoDialogFinish/DemoDialogFinish';
|
||||
import { DemoDialogPlans } from './DemoDialog/DemoDialogPlans/DemoDialogPlans';
|
||||
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
||||
import { DemoBanner } from './DemoBanner/DemoBanner';
|
||||
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
|
||||
@ -37,7 +36,6 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
|
||||
storedProgress.welcomeOpen ?? defaultProgress.welcomeOpen,
|
||||
);
|
||||
const [finishOpen, setFinishOpen] = useState(false);
|
||||
const [plansOpen, setPlansOpen] = useState(false);
|
||||
|
||||
const [expanded, setExpanded] = useState(
|
||||
storedProgress.expanded ?? defaultProgress.expanded,
|
||||
@ -84,21 +82,8 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<DemoBanner
|
||||
onPlans={() => {
|
||||
closeGuide();
|
||||
setWelcomeOpen(false);
|
||||
|
||||
setPlansOpen(true);
|
||||
|
||||
trackEvent('demo-see-plans');
|
||||
}}
|
||||
/>
|
||||
<DemoBanner />
|
||||
{children}
|
||||
<DemoDialogPlans
|
||||
open={plansOpen}
|
||||
onClose={() => setPlansOpen(false)}
|
||||
/>
|
||||
<ConditionallyRender
|
||||
condition={!isSmallScreen}
|
||||
show={
|
||||
@ -129,7 +114,6 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
|
||||
open={finishOpen}
|
||||
onClose={() => {
|
||||
setFinishOpen(false);
|
||||
setPlansOpen(true);
|
||||
}}
|
||||
onRestart={() => {
|
||||
setFinishOpen(false);
|
||||
@ -148,7 +132,6 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
|
||||
setStep(0);
|
||||
|
||||
setWelcomeOpen(false);
|
||||
setPlansOpen(false);
|
||||
|
||||
trackEvent('demo-start-topic', {
|
||||
props: {
|
||||
@ -159,7 +142,6 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
|
||||
topics={TOPICS}
|
||||
onWelcome={() => {
|
||||
closeGuide();
|
||||
setPlansOpen(false);
|
||||
|
||||
setWelcomeOpen(true);
|
||||
|
||||
|
||||
@ -27,18 +27,14 @@ const StyledButton = styled(Button)(({ theme }) => ({
|
||||
'&&&': {
|
||||
fontSize: theme.fontSizes.smallBody,
|
||||
},
|
||||
}));
|
||||
})) as typeof Button;
|
||||
|
||||
const StyledQuestionsButton = styled(StyledButton)(({ theme }) => ({
|
||||
color: theme.palette.web.contrastText,
|
||||
border: `1px solid rgba(255, 255, 255, 0.5)`,
|
||||
})) as typeof Button;
|
||||
|
||||
interface IDemoBannerProps {
|
||||
onPlans: () => void;
|
||||
}
|
||||
|
||||
export const DemoBanner = ({ onPlans }: IDemoBannerProps) => {
|
||||
export const DemoBanner = () => {
|
||||
const { trackEvent } = usePlausibleTracker();
|
||||
|
||||
return (
|
||||
@ -63,7 +59,12 @@ export const DemoBanner = ({ onPlans }: IDemoBannerProps) => {
|
||||
<StyledButton
|
||||
variant='contained'
|
||||
color='primary'
|
||||
onClick={onPlans}
|
||||
href='https://www.getunleash.io/pricing'
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
onClick={() => {
|
||||
trackEvent('demo-see-plans');
|
||||
}}
|
||||
>
|
||||
Get started
|
||||
</StyledButton>
|
||||
|
||||
@ -1,256 +0,0 @@
|
||||
import { Button, Typography, styled } from '@mui/material';
|
||||
import { DemoDialog } from '../DemoDialog';
|
||||
import GitHub from '@mui/icons-material/GitHub';
|
||||
import Launch from '@mui/icons-material/Launch';
|
||||
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
|
||||
import { useUiFlag } from 'hooks/useUiFlag';
|
||||
import {
|
||||
BILLING_PAYG_DEFAULT_MINIMUM_SEATS,
|
||||
BILLING_PAYG_SEAT_PRICE,
|
||||
BILLING_PRO_BASE_PRICE,
|
||||
BILLING_PRO_DEFAULT_INCLUDED_SEATS,
|
||||
} from 'component/admin/billing/BillingDashboard/BillingPlan/BillingPlan';
|
||||
import { useInstanceStatus } from 'hooks/api/getters/useInstanceStatus/useInstanceStatus';
|
||||
|
||||
const StyledDemoDialog = styled(DemoDialog)(({ theme }) => ({
|
||||
'& .MuiDialog-paper': {
|
||||
maxWidth: theme.spacing(120),
|
||||
[theme.breakpoints.down('md')]: {
|
||||
padding: theme.spacing(3.75),
|
||||
margin: theme.spacing(2.5),
|
||||
},
|
||||
[theme.breakpoints.down(768)]: {
|
||||
padding: theme.spacing(6, 4, 4, 4),
|
||||
margin: theme.spacing(2.5),
|
||||
'& > p': {
|
||||
fontSize: theme.typography.h1.fontSize,
|
||||
},
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledPlans = styled('div')(({ theme }) => ({
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'auto auto auto',
|
||||
gap: theme.spacing(1),
|
||||
marginTop: theme.spacing(6),
|
||||
justifyContent: 'center',
|
||||
[theme.breakpoints.down('md')]: {
|
||||
marginTop: theme.spacing(4.75),
|
||||
},
|
||||
[theme.breakpoints.down(768)]: {
|
||||
gridTemplateColumns: 'auto',
|
||||
marginTop: theme.spacing(3.5),
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledPlan = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
backgroundColor: theme.palette.background.elevation1,
|
||||
borderRadius: theme.shape.borderRadiusLarge,
|
||||
padding: theme.spacing(4, 3),
|
||||
'& > a': {
|
||||
whiteSpace: 'nowrap',
|
||||
[theme.breakpoints.between(768, 'md')]: {
|
||||
whiteSpace: 'normal',
|
||||
height: theme.spacing(6.25),
|
||||
lineHeight: 1.2,
|
||||
},
|
||||
},
|
||||
height: theme.spacing(34),
|
||||
width: theme.spacing(34),
|
||||
[theme.breakpoints.between(768, 'md')]: {
|
||||
height: theme.spacing(36),
|
||||
width: theme.spacing(27.5),
|
||||
},
|
||||
}));
|
||||
|
||||
const StyledCompareLink = styled('a')(({ theme }) => ({
|
||||
fontSize: theme.fontSizes.mainHeader,
|
||||
textDecoration: 'none',
|
||||
'&:hover': {
|
||||
textDecoration: 'underline',
|
||||
},
|
||||
margin: 'auto',
|
||||
marginTop: theme.spacing(4),
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: theme.spacing(1),
|
||||
'& > svg': {
|
||||
fontSize: theme.fontSizes.mainHeader,
|
||||
},
|
||||
}));
|
||||
|
||||
interface IDemoDialogPlansProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const DemoDialogPlans = ({ open, onClose }: IDemoDialogPlansProps) => {
|
||||
const { trackEvent } = usePlausibleTracker();
|
||||
const isEnterprisePaygEnabled = useUiFlag('enterprise-payg');
|
||||
const { instanceStatus } = useInstanceStatus();
|
||||
|
||||
const paygSeatPrice =
|
||||
instanceStatus?.prices?.payg?.seat ?? BILLING_PAYG_SEAT_PRICE;
|
||||
const proBasePrice =
|
||||
instanceStatus?.prices?.pro?.base ?? BILLING_PRO_BASE_PRICE;
|
||||
|
||||
return (
|
||||
<StyledDemoDialog open={open} onClose={onClose}>
|
||||
<DemoDialog.Header>
|
||||
Want to keep going with Unleash?
|
||||
</DemoDialog.Header>
|
||||
<StyledPlans>
|
||||
<StyledPlan>
|
||||
<Typography variant='h5' fontWeight='bold'>
|
||||
Open Source
|
||||
</Typography>
|
||||
<Typography variant='body2' color='textSecondary'>
|
||||
Self-hosted basic feature management solution
|
||||
</Typography>
|
||||
<Typography variant='h6' fontWeight='normal'>
|
||||
Free
|
||||
</Typography>
|
||||
<Button
|
||||
variant='outlined'
|
||||
color='primary'
|
||||
startIcon={<GitHub />}
|
||||
href='https://github.com/unleash/unleash'
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
onClick={() => {
|
||||
trackEvent('demo-see-plan', {
|
||||
props: {
|
||||
plan: 'open_source',
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
View project on GitHub
|
||||
</Button>
|
||||
</StyledPlan>
|
||||
{isEnterprisePaygEnabled ? (
|
||||
<StyledPlan>
|
||||
<Typography variant='h5' fontWeight='bold'>
|
||||
Enterprise
|
||||
<br />
|
||||
Pay-as-You-Go
|
||||
</Typography>
|
||||
<Typography variant='body2' color='textSecondary'>
|
||||
All the features of Enterprise with no long term
|
||||
commitment.
|
||||
</Typography>
|
||||
<div>
|
||||
<Typography variant='h6' fontWeight='normal'>
|
||||
${paygSeatPrice} per user/month
|
||||
</Typography>
|
||||
<Typography variant='body2'>
|
||||
{BILLING_PAYG_DEFAULT_MINIMUM_SEATS} users
|
||||
minimum
|
||||
</Typography>
|
||||
</div>
|
||||
<Button
|
||||
variant='contained'
|
||||
color='primary'
|
||||
href='https://www.getunleash.io/plans/enterprise-payg'
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
onClick={() => {
|
||||
trackEvent('demo-see-plan', {
|
||||
props: {
|
||||
plan: 'enterprise-starter',
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
Start 14-day free trial
|
||||
</Button>
|
||||
</StyledPlan>
|
||||
) : (
|
||||
<StyledPlan>
|
||||
<Typography variant='h5' fontWeight='bold'>
|
||||
Pro
|
||||
</Typography>
|
||||
<Typography variant='body2' color='textSecondary'>
|
||||
Free your team to collaborate. We'll do the heavy
|
||||
lifting.
|
||||
</Typography>
|
||||
<div>
|
||||
<Typography variant='h6' fontWeight='normal'>
|
||||
${proBasePrice}/month
|
||||
</Typography>
|
||||
<Typography variant='body2'>
|
||||
includes {BILLING_PRO_DEFAULT_INCLUDED_SEATS}{' '}
|
||||
seats
|
||||
</Typography>
|
||||
</div>
|
||||
<Button
|
||||
variant='contained'
|
||||
color='primary'
|
||||
href='https://www.getunleash.io/plans/pro'
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
onClick={() => {
|
||||
trackEvent('demo-see-plan', {
|
||||
props: {
|
||||
plan: 'pro',
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
Start 14-day free trial
|
||||
</Button>
|
||||
</StyledPlan>
|
||||
)}
|
||||
<StyledPlan>
|
||||
<Typography variant='h5' fontWeight='bold'>
|
||||
Enterprise
|
||||
</Typography>
|
||||
<Typography variant='body2' color='textSecondary'>
|
||||
Security, compliance, and development controls for
|
||||
scale.
|
||||
</Typography>
|
||||
<div>
|
||||
<Typography variant='h6' fontWeight='normal'>
|
||||
Custom
|
||||
</Typography>
|
||||
<Typography variant='body2'>unlimited seats</Typography>
|
||||
</div>
|
||||
<Button
|
||||
variant='contained'
|
||||
color='web'
|
||||
href='https://www.getunleash.io/plans/enterprise'
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
onClick={() => {
|
||||
trackEvent('demo-see-plan', {
|
||||
props: {
|
||||
plan: 'enterprise',
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
Contact sales
|
||||
</Button>
|
||||
</StyledPlan>
|
||||
</StyledPlans>
|
||||
<StyledCompareLink
|
||||
href='https://www.getunleash.io/plans'
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
onClick={() => {
|
||||
trackEvent('demo-see-plan', {
|
||||
props: {
|
||||
plan: 'compare_plans',
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
Compare plans <Launch />
|
||||
</StyledCompareLink>
|
||||
</StyledDemoDialog>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user