From 528e45f2bd0d952827288b2eb7424000ed8ddcce Mon Sep 17 00:00:00 2001
From: sjaanus <sellinjaanus@gmail.com>
Date: Fri, 11 Oct 2024 10:53:32 +0300
Subject: [PATCH] feat: order environment plausible events

---
 .../OrderEnvironments/OrderEnvironments.tsx        |  6 +++---
 .../OrderEnvironmentsDialog.tsx                    | 11 +++++++++++
 .../PurchasableFeature/PurchasableFeature.tsx      | 14 +++++++++++++-
 frontend/src/hooks/usePlausibleTracker.ts          |  3 ++-
 4 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/environments/EnvironmentTable/OrderEnvironments/OrderEnvironments.tsx b/frontend/src/component/environments/EnvironmentTable/OrderEnvironments/OrderEnvironments.tsx
index c03cc1234209..3827eee06604 100644
--- a/frontend/src/component/environments/EnvironmentTable/OrderEnvironments/OrderEnvironments.tsx
+++ b/frontend/src/component/environments/EnvironmentTable/OrderEnvironments/OrderEnvironments.tsx
@@ -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);
diff --git a/frontend/src/component/environments/EnvironmentTable/OrderEnvironments/OrderEnvironmentsDialog/OrderEnvironmentsDialog.tsx b/frontend/src/component/environments/EnvironmentTable/OrderEnvironments/OrderEnvironmentsDialog/OrderEnvironmentsDialog.tsx
index ae6310a8fa7a..27e8534a23fe 100644
--- a/frontend/src/component/environments/EnvironmentTable/OrderEnvironments/OrderEnvironmentsDialog/OrderEnvironmentsDialog.tsx
+++ b/frontend/src/component/environments/EnvironmentTable/OrderEnvironments/OrderEnvironmentsDialog/OrderEnvironmentsDialog.tsx
@@ -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>
diff --git a/frontend/src/component/environments/EnvironmentTable/OrderEnvironments/PurchasableFeature/PurchasableFeature.tsx b/frontend/src/component/environments/EnvironmentTable/OrderEnvironments/PurchasableFeature/PurchasableFeature.tsx
index d080e1a872ec..1c7df0b6818b 100644
--- a/frontend/src/component/environments/EnvironmentTable/OrderEnvironments/PurchasableFeature/PurchasableFeature.tsx
+++ b/frontend/src/component/environments/EnvironmentTable/OrderEnvironments/PurchasableFeature/PurchasableFeature.tsx
@@ -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>
diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts
index bd94c4b7ce45..5a532128027e 100644
--- a/frontend/src/hooks/usePlausibleTracker.ts
+++ b/frontend/src/hooks/usePlausibleTracker.ts
@@ -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);