Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-23 00:22:19 +01:00
Code Issues Projects Releases Wiki Activity

feat: update demo plans modal (#8594)

Browse Source 
Update demo banner for PAYG plan
This commit is contained in:
Tymoteusz Czech 2024-10-31 16:07:21 +01:00 committed by GitHub
parent 8d4e3efbc5
commit f967cb9fad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 71 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
frontend/src/component/demo/DemoDialog/DemoDialogPlans/DemoDialogPlans.tsx
View File

@ -3,6 +3,7 @@ import { DemoDialog } from '../DemoDialog';
import GitHub from '@mui/icons-material/GitHub'; import GitHub from '@mui/icons-material/GitHub';
import Launch from '@mui/icons-material/Launch'; import Launch from '@mui/icons-material/Launch';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import { useUiFlag } from 'hooks/useUiFlag';
const StyledDemoDialog = styled(DemoDialog)(({ theme }) => ({ const StyledDemoDialog = styled(DemoDialog)(({ theme }) => ({
'& .MuiDialog-paper': { '& .MuiDialog-paper': {
@ -82,6 +83,7 @@ interface IDemoDialogPlansProps {
export const DemoDialogPlans = ({ open, onClose }: IDemoDialogPlansProps) => { export const DemoDialogPlans = ({ open, onClose }: IDemoDialogPlansProps) => {
const { trackEvent } = usePlausibleTracker(); const { trackEvent } = usePlausibleTracker();
const isEnterprisePaygEnabled = useUiFlag('enterprise-payg');
return ( return (
<StyledDemoDialog open={open} onClose={onClose}> <StyledDemoDialog open={open} onClose={onClose}>
@ -117,39 +119,77 @@ export const DemoDialogPlans = ({ open, onClose }: IDemoDialogPlansProps) => {
View project on GitHub View project on GitHub
</Button> </Button>
</StyledPlan> </StyledPlan>
<StyledPlan> {isEnterprisePaygEnabled ? (
<Typography variant='h5' fontWeight='bold'> <StyledPlan>
Pro <Typography variant='h5' fontWeight='bold'>
</Typography> Enterprise
<Typography variant='body2' color='textSecondary'> <br />
Free your team to collaborate. We'll do the heavy Pay-as-You-Go
lifting.
</Typography>
<div>
<Typography variant='h6' fontWeight='normal'>
$80/month
</Typography> </Typography>
<Typography variant='body2'> <Typography variant='body2' color='textSecondary'>
includes 5 seats All the features of Enterprise with no long term
commitment.
</Typography> </Typography>
</div> <div>
<Button <Typography variant='h6' fontWeight='normal'>
variant='contained' $75 per user/month
color='primary' </Typography>
href='https://www.getunleash.io/plans/pro' <Typography variant='body2'>
target='_blank' 5 users minimum
rel='noreferrer' </Typography>
onClick={() => { </div>
trackEvent('demo-see-plan', { <Button
props: { variant='contained'
plan: 'pro', color='primary'
}, href='https://www.getunleash.io/plans/enterprise-payg'
}); target='_blank'
}} rel='noreferrer'
> onClick={() => {
Start 14-day free trial trackEvent('demo-see-plan', {
</Button> props: {
</StyledPlan> 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'>
$80/month
</Typography>
<Typography variant='body2'>
includes 5 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> <StyledPlan>
<Typography variant='h5' fontWeight='bold'> <Typography variant='h5' fontWeight='bold'>
Enterprise Enterprise