diff --git a/frontend/src/component/demo/Demo.tsx b/frontend/src/component/demo/Demo.tsx index 717c6a62a7..425077d5ab 100644 --- a/frontend/src/component/demo/Demo.tsx +++ b/frontend/src/component/demo/Demo.tsx @@ -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 ( <> - { - closeGuide(); - setWelcomeOpen(false); - - setPlansOpen(true); - - trackEvent('demo-see-plans'); - }} - /> + {children} - setPlansOpen(false)} - /> { 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); diff --git a/frontend/src/component/demo/DemoBanner/DemoBanner.tsx b/frontend/src/component/demo/DemoBanner/DemoBanner.tsx index 827c066b0b..7c0c3c52c4 100644 --- a/frontend/src/component/demo/DemoBanner/DemoBanner.tsx +++ b/frontend/src/component/demo/DemoBanner/DemoBanner.tsx @@ -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) => { { + trackEvent('demo-see-plans'); + }} > Get started diff --git a/frontend/src/component/demo/DemoDialog/DemoDialogPlans/DemoDialogPlans.tsx b/frontend/src/component/demo/DemoDialog/DemoDialogPlans/DemoDialogPlans.tsx deleted file mode 100644 index c038ef3e27..0000000000 --- a/frontend/src/component/demo/DemoDialog/DemoDialogPlans/DemoDialogPlans.tsx +++ /dev/null @@ -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 ( - - - Want to keep going with Unleash? - - - - - Open Source - - - Self-hosted basic feature management solution - - - Free - - - - {isEnterprisePaygEnabled ? ( - - - Enterprise -
- Pay-as-You-Go -
- - All the features of Enterprise with no long term - commitment. - -
- - ${paygSeatPrice} per user/month - - - {BILLING_PAYG_DEFAULT_MINIMUM_SEATS} users - minimum - -
- -
- ) : ( - - - Pro - - - Free your team to collaborate. We'll do the heavy - lifting. - -
- - ${proBasePrice}/month - - - includes {BILLING_PRO_DEFAULT_INCLUDED_SEATS}{' '} - seats - -
- -
- )} - - - Enterprise - - - Security, compliance, and development controls for - scale. - -
- - Custom - - unlimited seats -
- -
-
- { - trackEvent('demo-see-plan', { - props: { - plan: 'compare_plans', - }, - }); - }} - > - Compare plans - -
- ); -};