From 182901aab67c3e49b46775e47766b5db4bbcdaff Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Thu, 4 Jan 2024 14:38:54 +0200
Subject: [PATCH] feat: plausible for feedback (#5763)

---
 frontend/src/component/feedbackNew/FeedbackComponent.tsx | 8 ++++++++
 frontend/src/component/feedbackNew/FeedbackProvider.tsx  | 9 +++++++++
 frontend/src/hooks/usePlausibleTracker.ts                | 3 ++-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/feedbackNew/FeedbackComponent.tsx b/frontend/src/component/feedbackNew/FeedbackComponent.tsx
index a59810fb8c..6916e69c99 100644
--- a/frontend/src/component/feedbackNew/FeedbackComponent.tsx
+++ b/frontend/src/component/feedbackNew/FeedbackComponent.tsx
@@ -19,6 +19,7 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { IToast } from 'interfaces/toast';
 import { useTheme } from '@mui/material/styles';
 import { FeedbackData, FeedbackMode } from './FeedbackContext';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 export const ParentContainer = styled('div')(({ theme }) => ({
     position: 'relative',
@@ -198,6 +199,7 @@ export const FeedbackComponent = ({
     feedbackMode,
 }: IFeedbackComponent) => {
     const { setToastData } = useToast();
+    const { trackEvent } = usePlausibleTracker();
     const theme = useTheme();
     const { isPro, isOss, isEnterprise } = useUiConfig();
     const { addFeedback } = useUserFeedbackApi();
@@ -221,6 +223,12 @@ export const FeedbackComponent = ({
     const dontAskAgain = () => {
         closeFeedback();
         setHasSubmittedFeedback(true);
+        trackEvent('feedback', {
+            props: {
+                eventType: `dont ask again`,
+                category: feedbackData.category,
+            },
+        });
     };
 
     const onSubmission = async (event: React.FormEvent<HTMLFormElement>) => {
diff --git a/frontend/src/component/feedbackNew/FeedbackProvider.tsx b/frontend/src/component/feedbackNew/FeedbackProvider.tsx
index f2de2421b0..b37a028924 100644
--- a/frontend/src/component/feedbackNew/FeedbackProvider.tsx
+++ b/frontend/src/component/feedbackNew/FeedbackProvider.tsx
@@ -1,11 +1,13 @@
 import { FeedbackComponentWrapper } from './FeedbackComponent';
 import { FeedbackContext, FeedbackData, FeedbackMode } from './FeedbackContext';
 import { FC, useState } from 'react';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 export const FeedbackProvider: FC = ({ children }) => {
     const [feedbackData, setFeedbackData] = useState<
         FeedbackData | undefined
     >();
+    const { trackEvent } = usePlausibleTracker();
 
     const [showFeedback, setShowFeedback] = useState(false);
     const [feedbackMode, setFeedbackMode] = useState<
@@ -15,6 +17,13 @@ export const FeedbackProvider: FC = ({ children }) => {
         setFeedbackData(data);
         setShowFeedback(true);
         setFeedbackMode(mode);
+
+        trackEvent('feedback', {
+            props: {
+                eventType: `feedback opened`,
+                category: data.category,
+            },
+        });
     };
 
     const closeFeedback = () => {
diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts
index 5587bebfb5..23a209b2d8 100644
--- a/frontend/src/hooks/usePlausibleTracker.ts
+++ b/frontend/src/hooks/usePlausibleTracker.ts
@@ -54,7 +54,8 @@ export type CustomEvents =
     | 'search-filter'
     | 'scheduled-configuration-changes'
     | 'search-feature-buttons'
-    | 'new-strategy-form';
+    | 'new-strategy-form'
+    | 'feedback';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);