1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-19 17:52:45 +02:00

feat: order environment plausible events

This commit is contained in:
sjaanus 2024-10-11 10:53:32 +03:00
parent 4c8aef58ae
commit 528e45f2bd
No known key found for this signature in database
GPG Key ID: 20E007C0248BA7FF
4 changed files with 29 additions and 5 deletions

View File

@ -18,9 +18,9 @@ export const OrderEnvironments: FC<OrderEnvironmentsProps> = () => {
'purchaseAdditionalEnvironments',
);
if (!isPro() || !isPurchaseAdditionalEnvironmentsEnabled) {
return null;
}
// if (!isPro() || !isPurchaseAdditionalEnvironmentsEnabled) {
// return null;
// }
const onSubmit = (environments: string[]) => {
setPurchaseDialogOpen(false);

View File

@ -11,6 +11,7 @@ import FormTemplate from 'component/common/FormTemplate/FormTemplate';
import { OrderEnvironmentsDialogPricing } from './OrderEnvironmentsDialogPricing/OrderEnvironmentsDialogPricing';
import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
import Input from 'component/common/Input/Input';
import { usePlausibleTracker } from '../../../../../hooks/usePlausibleTracker';
type OrderEnvironmentsDialogProps = {
open: boolean;
@ -75,10 +76,19 @@ export const OrderEnvironmentsDialog: FC<OrderEnvironmentsDialogProps> = ({
onClose,
onSubmit,
}) => {
const { trackEvent } = usePlausibleTracker();
const [selectedOption, setSelectedOption] = useState(OPTIONS[0]);
const [costCheckboxChecked, setCostCheckboxChecked] = useState(false);
const [environmentNames, setEnvironmentNames] = useState<string[]>([]);
const trackEnvironmentSelect = () => {
trackEvent('order-environments', {
props: {
eventType: 'selected environment count',
},
});
};
return (
<StyledDialog open={open} title=''>
<FormTemplate
@ -135,6 +145,7 @@ export const OrderEnvironmentsDialog: FC<OrderEnvironmentsDialogProps> = ({
setEnvironmentNames((names) =>
names.slice(0, value),
);
trackEnvironmentSelect();
}}
/>
</Box>

View File

@ -3,6 +3,7 @@ import { Box, Button, styled, Typography } from '@mui/material';
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
import { ReactComponent as ProPlanIcon } from 'assets/icons/pro-enterprise-feature-badge.svg';
import { ReactComponent as ProPlanIconLight } from 'assets/icons/pro-enterprise-feature-badge-light.svg';
import { usePlausibleTracker } from '../../../../../hooks/usePlausibleTracker';
type PurchasableFeatureProps = {
title: ReactNode;
@ -50,6 +51,17 @@ export const PurchasableFeature: FC<PurchasableFeatureProps> = ({
description,
onClick,
}) => {
const { trackEvent } = usePlausibleTracker();
const onViewPricingClick = () => {
onClick();
trackEvent('order-environments', {
props: {
eventType: 'view pricing clicked',
},
});
};
return (
<StyledContainer>
<StyledMessage>
@ -62,7 +74,7 @@ export const PurchasableFeature: FC<PurchasableFeatureProps> = ({
</Box>
</StyledMessage>
<StyledButtonContainer>
<Button variant='contained' onClick={onClick}>
<Button variant='contained' onClick={onViewPricingClick}>
View pricing
</Button>
</StyledButtonContainer>

View File

@ -69,7 +69,8 @@ export type CustomEvents =
| 'events-exported'
| 'event-timeline'
| 'onboarding'
| 'personal-dashboard';
| 'personal-dashboard'
| 'order-environments';
export const usePlausibleTracker = () => {
const plausible = useContext(PlausibleContext);