From 4914cd07e3c3d04625c1a47486054391921c090e Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Mon, 7 Aug 2023 11:45:36 +0200
Subject: [PATCH] feat: strategy variants events (#4430)

---
 .../FeatureStrategyForm/FeatureStrategyForm.tsx          | 9 +++++++++
 .../component/feature/StrategyTypes/StrategyVariants.tsx | 9 +++++++--
 frontend/src/hooks/usePlausibleTracker.ts                | 3 ++-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
index 6342493e66..72814d19dd 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
@@ -32,6 +32,7 @@ import { useHasProjectEnvironmentAccess } from 'hooks/useHasAccess';
 import { FeatureStrategyTitle } from './FeatureStrategyTitle/FeatureStrategyTitle';
 import { FeatureStrategyEnabledDisabled } from './FeatureStrategyEnabledDisabled/FeatureStrategyEnabledDisabled';
 import { StrategyVariants } from 'component/feature/StrategyTypes/StrategyVariants';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 interface IFeatureStrategyFormProps {
     feature: IFeatureToggle;
@@ -86,6 +87,7 @@ export const FeatureStrategyForm = ({
     errors,
     isChangeRequest,
 }: IFeatureStrategyFormProps) => {
+    const { trackEvent } = usePlausibleTracker();
     const [showProdGuard, setShowProdGuard] = useState(false);
     const hasValidConstraints = useConstraintsValidation(strategy.constraints);
     const enableProdGuard = useFeatureStrategyProdGuard(feature, environmentId);
@@ -158,6 +160,13 @@ export const FeatureStrategyForm = ({
     };
 
     const onSubmitWithValidation = async (event: React.FormEvent) => {
+        if (Array.isArray(strategy.variants) && strategy.variants?.length > 0) {
+            trackEvent('strategy-variants', {
+                props: {
+                    eventType: 'submitted',
+                },
+            });
+        }
         event.preventDefault();
         if (!validateAllParameters()) {
             return;
diff --git a/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx b/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx
index ca2d990e45..8f5149318d 100644
--- a/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx
+++ b/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx
@@ -6,13 +6,12 @@ import PermissionButton from '../../common/PermissionButton/PermissionButton';
 import { UPDATE_FEATURE_ENVIRONMENT_VARIANTS } from '../../providers/AccessProvider/permissions';
 import { v4 as uuidv4 } from 'uuid';
 import { WeightType } from '../../../constants/variantTypes';
-import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { Link, styled, Typography, useTheme } from '@mui/material';
-import { useRequiredQueryParam } from 'hooks/useRequiredQueryParam';
 import { IFeatureStrategy } from 'interfaces/strategy';
 import SplitPreviewSlider from './SplitPreviewSlider/SplitPreviewSlider';
 import { HelpIcon } from '../../common/HelpIcon/HelpIcon';
 import { StrategyVariantsUpgradeAlert } from '../../common/StrategyVariantsUpgradeAlert/StrategyVariantsUpgradeAlert';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledVariantForms = styled('div')({
     display: 'flex',
@@ -27,6 +26,7 @@ export const StrategyVariants: FC<{
     projectId: string;
     environment: string;
 }> = ({ strategy, setStrategy, projectId, environment }) => {
+    const { trackEvent } = usePlausibleTracker();
     const [variantsEdit, setVariantsEdit] = useState<IFeatureVariantEdit[]>([]);
     const theme = useTheme();
     const stickiness =
@@ -84,6 +84,11 @@ export const StrategyVariants: FC<{
                 id,
             },
         ]);
+        trackEvent('strategy-variants', {
+            props: {
+                eventType: 'variant added',
+            },
+        });
     };
 
     return (
diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts
index 63095aff5a..6a248e60c1 100644
--- a/frontend/src/hooks/usePlausibleTracker.ts
+++ b/frontend/src/hooks/usePlausibleTracker.ts
@@ -41,7 +41,8 @@ export type CustomEvents =
     | 'segment-usage'
     | 'strategy-add'
     | 'playground'
-    | 'feature-type-edit';
+    | 'feature-type-edit'
+    | 'strategy-variants';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);