From f967cb9fadb3fc1314b24aec489c4714aed99a5d Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Thu, 31 Oct 2024 16:07:21 +0100
Subject: [PATCH] feat: update demo plans modal (#8594)

Update demo banner for PAYG plan
---
 .../DemoDialogPlans/DemoDialogPlans.tsx       | 102 ++++++++++++------
 1 file changed, 71 insertions(+), 31 deletions(-)

diff --git a/frontend/src/component/demo/DemoDialog/DemoDialogPlans/DemoDialogPlans.tsx b/frontend/src/component/demo/DemoDialog/DemoDialogPlans/DemoDialogPlans.tsx
index 4fdc63e61f93..dd5d4fa9e7c0 100644
--- a/frontend/src/component/demo/DemoDialog/DemoDialogPlans/DemoDialogPlans.tsx
+++ b/frontend/src/component/demo/DemoDialog/DemoDialogPlans/DemoDialogPlans.tsx
@@ -3,6 +3,7 @@ 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';
 
 const StyledDemoDialog = styled(DemoDialog)(({ theme }) => ({
     '& .MuiDialog-paper': {
@@ -82,6 +83,7 @@ interface IDemoDialogPlansProps {
 
 export const DemoDialogPlans = ({ open, onClose }: IDemoDialogPlansProps) => {
     const { trackEvent } = usePlausibleTracker();
+    const isEnterprisePaygEnabled = useUiFlag('enterprise-payg');
 
     return (
         <StyledDemoDialog open={open} onClose={onClose}>
@@ -117,39 +119,77 @@ export const DemoDialogPlans = ({ open, onClose }: IDemoDialogPlansProps) => {
                         View project on GitHub
                     </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
+                {isEnterprisePaygEnabled ? (
+                    <StyledPlan>
+                        <Typography variant='h5' fontWeight='bold'>
+                            Enterprise
+                            <br />
+                            Pay-as-You-Go
                         </Typography>
-                        <Typography variant='body2'>
-                            includes 5 seats
+                        <Typography variant='body2' color='textSecondary'>
+                            All the features of Enterprise with no long term
+                            commitment.
                         </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>
+                        <div>
+                            <Typography variant='h6' fontWeight='normal'>
+                                $75 per user/month
+                            </Typography>
+                            <Typography variant='body2'>
+                                5 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'>
+                                $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>
                     <Typography variant='h5' fontWeight='bold'>
                         Enterprise