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 { TOPICS } from './demo-topics';
|
||||||
import { DemoDialogWelcome } from './DemoDialog/DemoDialogWelcome/DemoDialogWelcome';
|
import { DemoDialogWelcome } from './DemoDialog/DemoDialogWelcome/DemoDialogWelcome';
|
||||||
import { DemoDialogFinish } from './DemoDialog/DemoDialogFinish/DemoDialogFinish';
|
import { DemoDialogFinish } from './DemoDialog/DemoDialogFinish/DemoDialogFinish';
|
||||||
import { DemoDialogPlans } from './DemoDialog/DemoDialogPlans/DemoDialogPlans';
|
|
||||||
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
||||||
import { DemoBanner } from './DemoBanner/DemoBanner';
|
import { DemoBanner } from './DemoBanner/DemoBanner';
|
||||||
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
|
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
|
||||||
@ -37,7 +36,6 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
|
|||||||
storedProgress.welcomeOpen ?? defaultProgress.welcomeOpen,
|
storedProgress.welcomeOpen ?? defaultProgress.welcomeOpen,
|
||||||
);
|
);
|
||||||
const [finishOpen, setFinishOpen] = useState(false);
|
const [finishOpen, setFinishOpen] = useState(false);
|
||||||
const [plansOpen, setPlansOpen] = useState(false);
|
|
||||||
|
|
||||||
const [expanded, setExpanded] = useState(
|
const [expanded, setExpanded] = useState(
|
||||||
storedProgress.expanded ?? defaultProgress.expanded,
|
storedProgress.expanded ?? defaultProgress.expanded,
|
||||||
@ -84,21 +82,8 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DemoBanner
|
<DemoBanner />
|
||||||
onPlans={() => {
|
|
||||||
closeGuide();
|
|
||||||
setWelcomeOpen(false);
|
|
||||||
|
|
||||||
setPlansOpen(true);
|
|
||||||
|
|
||||||
trackEvent('demo-see-plans');
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{children}
|
{children}
|
||||||
<DemoDialogPlans
|
|
||||||
open={plansOpen}
|
|
||||||
onClose={() => setPlansOpen(false)}
|
|
||||||
/>
|
|
||||||
<ConditionallyRender
|
<ConditionallyRender
|
||||||
condition={!isSmallScreen}
|
condition={!isSmallScreen}
|
||||||
show={
|
show={
|
||||||
@ -129,7 +114,6 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
|
|||||||
open={finishOpen}
|
open={finishOpen}
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
setFinishOpen(false);
|
setFinishOpen(false);
|
||||||
setPlansOpen(true);
|
|
||||||
}}
|
}}
|
||||||
onRestart={() => {
|
onRestart={() => {
|
||||||
setFinishOpen(false);
|
setFinishOpen(false);
|
||||||
@ -148,7 +132,6 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
|
|||||||
setStep(0);
|
setStep(0);
|
||||||
|
|
||||||
setWelcomeOpen(false);
|
setWelcomeOpen(false);
|
||||||
setPlansOpen(false);
|
|
||||||
|
|
||||||
trackEvent('demo-start-topic', {
|
trackEvent('demo-start-topic', {
|
||||||
props: {
|
props: {
|
||||||
@ -159,7 +142,6 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
|
|||||||
topics={TOPICS}
|
topics={TOPICS}
|
||||||
onWelcome={() => {
|
onWelcome={() => {
|
||||||
closeGuide();
|
closeGuide();
|
||||||
setPlansOpen(false);
|
|
||||||
|
|
||||||
setWelcomeOpen(true);
|
setWelcomeOpen(true);
|
||||||
|
|
||||||
|
|||||||
@ -27,18 +27,14 @@ const StyledButton = styled(Button)(({ theme }) => ({
|
|||||||
'&&&': {
|
'&&&': {
|
||||||
fontSize: theme.fontSizes.smallBody,
|
fontSize: theme.fontSizes.smallBody,
|
||||||
},
|
},
|
||||||
}));
|
})) as typeof Button;
|
||||||
|
|
||||||
const StyledQuestionsButton = styled(StyledButton)(({ theme }) => ({
|
const StyledQuestionsButton = styled(StyledButton)(({ theme }) => ({
|
||||||
color: theme.palette.web.contrastText,
|
color: theme.palette.web.contrastText,
|
||||||
border: `1px solid rgba(255, 255, 255, 0.5)`,
|
border: `1px solid rgba(255, 255, 255, 0.5)`,
|
||||||
})) as typeof Button;
|
})) as typeof Button;
|
||||||
|
|
||||||
interface IDemoBannerProps {
|
export const DemoBanner = () => {
|
||||||
onPlans: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const DemoBanner = ({ onPlans }: IDemoBannerProps) => {
|
|
||||||
const { trackEvent } = usePlausibleTracker();
|
const { trackEvent } = usePlausibleTracker();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -63,7 +59,12 @@ export const DemoBanner = ({ onPlans }: IDemoBannerProps) => {
|
|||||||
<StyledButton
|
<StyledButton
|
||||||
variant='contained'
|
variant='contained'
|
||||||
color='primary'
|
color='primary'
|
||||||
onClick={onPlans}
|
href='https://www.getunleash.io/pricing'
|
||||||
|
target='_blank'
|
||||||
|
rel='noreferrer'
|
||||||
|
onClick={() => {
|
||||||
|
trackEvent('demo-see-plans');
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Get started
|
Get started
|
||||||
</StyledButton>
|
</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