From 1124fbb71ba9d33c83eddf98677a0eb68413cdc0 Mon Sep 17 00:00:00 2001
From: Iva <iva@citizenlab.co>
Date: Thu, 14 Mar 2024 14:45:35 +0200
Subject: [PATCH 1/4] Add stars icon

---
 cl2-component-library/package.json                  |  2 +-
 cl2-component-library/src/components/Icon/index.tsx | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/cl2-component-library/package.json b/cl2-component-library/package.json
index eb940c45797f..aead71e6eaef 100644
--- a/cl2-component-library/package.json
+++ b/cl2-component-library/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.11.34",
+  "version": "0.11.35",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
diff --git a/cl2-component-library/src/components/Icon/index.tsx b/cl2-component-library/src/components/Icon/index.tsx
index 50e1f75824f6..348ffa934100 100644
--- a/cl2-component-library/src/components/Icon/index.tsx
+++ b/cl2-component-library/src/components/Icon/index.tsx
@@ -755,6 +755,18 @@ export const icons = {
       <path d="M7,2V13H10V22L17,10H13L17,2H7Z" />
     </Svg>
   ),
+  stars: (props: IconPropsWithoutName) => (
+    <Svg
+      className={`cl-icon ${props.className ? props.className : ''}`}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z" />
+    </Svg>
+  ),
   database: (props: IconPropsWithoutName) => (
     <Svg
       className={`cl-icon ${props.className ? props.className : ''}`}

From ba29a028f42715706c9facd7cdac76dd63277ca7 Mon Sep 17 00:00:00 2001
From: Iva <iva@citizenlab.co>
Date: Thu, 14 Mar 2024 14:50:20 +0200
Subject: [PATCH 2/4] Change icon

---
 .../projects/project/analysis/Insights/SummarizeButton.tsx    | 2 +-
 .../projects/project/analysis/Insights/SummaryHeader.tsx      | 2 +-
 .../Admin/projects/project/analysis/LaunchModal/index.tsx     | 2 +-
 .../projects/project/analysis/Tags/AutoTaggingModal/Step1.tsx | 4 ++--
 .../containers/Admin/projects/project/analysis/Tags/index.tsx | 2 +-
 .../Admin/projects/project/ideas/AnalysisBanner.tsx           | 4 ++--
 .../FormResultsQuestion/TextQuestion/Analysis/index.tsx       | 4 ++--
 .../FormResultsQuestion/TextQuestion/AnalysisUpsell/index.tsx | 2 +-
 .../reporting/components/ReportBuilder/Toolbox/index.tsx      | 2 +-
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/front/app/containers/Admin/projects/project/analysis/Insights/SummarizeButton.tsx b/front/app/containers/Admin/projects/project/analysis/Insights/SummarizeButton.tsx
index 94a469fdb016..f542231e4850 100644
--- a/front/app/containers/Admin/projects/project/analysis/Insights/SummarizeButton.tsx
+++ b/front/app/containers/Admin/projects/project/analysis/Insights/SummarizeButton.tsx
@@ -92,7 +92,7 @@ const SummarizeButton = () => {
     >
       <Box h="100%">
         <Button
-          icon="flash"
+          icon="stars"
           mb="4px"
           size="s"
           w="100%"
diff --git a/front/app/containers/Admin/projects/project/analysis/Insights/SummaryHeader.tsx b/front/app/containers/Admin/projects/project/analysis/Insights/SummaryHeader.tsx
index f5e3f70c140f..c72d8e41c20d 100644
--- a/front/app/containers/Admin/projects/project/analysis/Insights/SummaryHeader.tsx
+++ b/front/app/containers/Admin/projects/project/analysis/Insights/SummaryHeader.tsx
@@ -28,7 +28,7 @@ const SummaryHeader = () => {
         <Text m="0px" fontWeight="bold">
           {formatMessage(messages.aiSummary)}
         </Text>
-        <Icon name="flash" />
+        <Icon name="stars" />
       </Box>
     </Tippy>
   );
diff --git a/front/app/containers/Admin/projects/project/analysis/LaunchModal/index.tsx b/front/app/containers/Admin/projects/project/analysis/LaunchModal/index.tsx
index 0a832683a745..ba56980a8a07 100644
--- a/front/app/containers/Admin/projects/project/analysis/LaunchModal/index.tsx
+++ b/front/app/containers/Admin/projects/project/analysis/LaunchModal/index.tsx
@@ -28,7 +28,7 @@ const LaunchModal = ({ onClose }: LaunchModalProps) => {
       id="e2e-analysis-launch-modal"
     >
       <Box display="flex" gap="16px" alignItems="center">
-        <Icon name="flash" fill={colors.orange} width="40px" height="40px" />
+        <Icon name="stars" fill={colors.orange} width="40px" height="40px" />
         <Title>{formatMessage(messages.title)}</Title>
       </Box>
       <Box>
diff --git a/front/app/containers/Admin/projects/project/analysis/Tags/AutoTaggingModal/Step1.tsx b/front/app/containers/Admin/projects/project/analysis/Tags/AutoTaggingModal/Step1.tsx
index f72dd90829d2..1aaefddc435c 100644
--- a/front/app/containers/Admin/projects/project/analysis/Tags/AutoTaggingModal/Step1.tsx
+++ b/front/app/containers/Admin/projects/project/analysis/Tags/AutoTaggingModal/Step1.tsx
@@ -121,7 +121,7 @@ const AutoTagOption = ({
               alignItems="center"
             >
               <Icon
-                name="flash"
+                name="stars"
                 fill={colors.white}
                 width="16px"
                 height="16px"
@@ -197,7 +197,7 @@ const Step1 = ({
   return (
     <>
       <Title mb="32px">
-        <Icon name="flash" height="32px" width="32px" />{' '}
+        <Icon name="stars" height="32px" width="32px" />{' '}
         {formatMessage(messages.autoTagTitle)}
       </Title>
       <Text mb="32px">{formatMessage(messages.autoTagDescription)}</Text>
diff --git a/front/app/containers/Admin/projects/project/analysis/Tags/index.tsx b/front/app/containers/Admin/projects/project/analysis/Tags/index.tsx
index a931717ddd6d..7b8bcbe16db9 100644
--- a/front/app/containers/Admin/projects/project/analysis/Tags/index.tsx
+++ b/front/app/containers/Admin/projects/project/analysis/Tags/index.tsx
@@ -195,7 +195,7 @@ const Tags = () => {
           <Button
             id="auto-tag-button"
             onClick={() => setAutotaggingModalIsOpened(true)}
-            icon="flash"
+            icon="stars"
             mb="12px"
             size="s"
             buttonStyle="admin-dark"
diff --git a/front/app/containers/Admin/projects/project/ideas/AnalysisBanner.tsx b/front/app/containers/Admin/projects/project/ideas/AnalysisBanner.tsx
index 4547982a41d1..dc2407fcc29d 100644
--- a/front/app/containers/Admin/projects/project/ideas/AnalysisBanner.tsx
+++ b/front/app/containers/Admin/projects/project/ideas/AnalysisBanner.tsx
@@ -77,7 +77,7 @@ const AnalysisBanner = () => {
       bgColor={colors.errorLight}
     >
       <Box display="flex" gap="16px" alignItems="center">
-        <Icon name="flash" width="50px" height="50px" fill={colors.orange} />
+        <Icon name="stars" width="50px" height="50px" fill={colors.orange} />
         <Text fontWeight="bold">
           {formatMessage(messages.analysisSubtitle)}
         </Text>
@@ -92,7 +92,7 @@ const AnalysisBanner = () => {
             textColor={colors.orange}
             onClick={handleGoToAnalysis}
             fontWeight="bold"
-            icon={isAnalysisEnabled ? 'flash' : 'lock'}
+            icon={isAnalysisEnabled ? 'stars' : 'lock'}
             iconColor={colors.orange}
             id="e2e-analysis-banner-button"
             processing={isLoading}
diff --git a/front/app/containers/Admin/projects/project/nativeSurvey/FormResults/FormResultsQuestion/TextQuestion/Analysis/index.tsx b/front/app/containers/Admin/projects/project/nativeSurvey/FormResults/FormResultsQuestion/TextQuestion/Analysis/index.tsx
index 8f7663df99bc..01456fbbebdb 100644
--- a/front/app/containers/Admin/projects/project/nativeSurvey/FormResults/FormResultsQuestion/TextQuestion/Analysis/index.tsx
+++ b/front/app/containers/Admin/projects/project/nativeSurvey/FormResults/FormResultsQuestion/TextQuestion/Analysis/index.tsx
@@ -117,7 +117,7 @@ const Analysis = ({
               )
             }
             buttonStyle="secondary"
-            icon="flash"
+            icon="stars"
           >
             {formatMessage(messages.createAIAnalysis)}
           </Button>
@@ -192,7 +192,7 @@ const Analysis = ({
               })
             }
             buttonStyle="secondary"
-            icon="flash"
+            icon="stars"
           >
             {formatMessage(messages.showSummaries)}
           </Button>
diff --git a/front/app/containers/Admin/projects/project/nativeSurvey/FormResults/FormResultsQuestion/TextQuestion/AnalysisUpsell/index.tsx b/front/app/containers/Admin/projects/project/nativeSurvey/FormResults/FormResultsQuestion/TextQuestion/AnalysisUpsell/index.tsx
index 4affac4a3581..09c283796d56 100644
--- a/front/app/containers/Admin/projects/project/nativeSurvey/FormResults/FormResultsQuestion/TextQuestion/AnalysisUpsell/index.tsx
+++ b/front/app/containers/Admin/projects/project/nativeSurvey/FormResults/FormResultsQuestion/TextQuestion/AnalysisUpsell/index.tsx
@@ -18,7 +18,7 @@ const AnalysisUpsell = () => {
   const { formatMessage } = useIntl();
   return (
     <Box px="20px">
-      <Icon name="flash" width="40px" height="40px" fill={colors.primary} />
+      <Icon name="stars" width="40px" height="40px" fill={colors.primary} />
       <Title as="h3">{formatMessage(messages.title)}</Title>
       <ul>
         <Text as="li" color="textSecondary">
diff --git a/front/app/containers/Admin/reporting/components/ReportBuilder/Toolbox/index.tsx b/front/app/containers/Admin/reporting/components/ReportBuilder/Toolbox/index.tsx
index dbf27ba75703..724adbb97a81 100644
--- a/front/app/containers/Admin/reporting/components/ReportBuilder/Toolbox/index.tsx
+++ b/front/app/containers/Admin/reporting/components/ReportBuilder/Toolbox/index.tsx
@@ -142,7 +142,7 @@ const ReportBuilderToolbox = ({
           </Box>
           <Box flex="1">
             <Button
-              icon="flash"
+              icon="stars"
               id="e2e-report-builder-ai-tab"
               onClick={() => setSelectedTab('ai')}
               buttonStyle={selectedTab === 'ai' ? 'text' : 'secondary'}

From 8646aa7bc9f4991de811fef9ff6a6f88bd722f98 Mon Sep 17 00:00:00 2001
From: Iva <iva@citizenlab.co>
Date: Thu, 14 Mar 2024 14:59:05 +0200
Subject: [PATCH 3/4] Add tracks

---
 .../Admin/projects/project/analysis/tracks.ts     | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/front/app/containers/Admin/projects/project/analysis/tracks.ts b/front/app/containers/Admin/projects/project/analysis/tracks.ts
index 7bfdb912b1cb..0dca513976d6 100644
--- a/front/app/containers/Admin/projects/project/analysis/tracks.ts
+++ b/front/app/containers/Admin/projects/project/analysis/tracks.ts
@@ -65,4 +65,19 @@ export default {
   inputPreviewedFromSummary: {
     name: 'Input previewed from summary',
   },
+  addQuestionToAIAnalysis: {
+    name: 'Add question to AI analysis',
+  },
+  removeQuestionFromAIAnalysis: {
+    name: 'Remove question from AI analysis',
+  },
+  regenerateAIInsights: {
+    name: 'Regenerate AI insights',
+  },
+  openReportBuilderAITab: {
+    name: 'Open report builder AI tab',
+  },
+  dragAndDropInsightInReportBuilder: {
+    name: 'Drag and drop insight in report builder',
+  },
 };

From 80f9c64ebcd6106e8420da96f496836428b251d4 Mon Sep 17 00:00:00 2001
From: Iva <iva@citizenlab.co>
Date: Thu, 14 Mar 2024 15:28:15 +0200
Subject: [PATCH 4/4] Implement events

---
 .../project/analysis/InputPreview/index.tsx   | 21 +++++++++++++++----
 .../Analysis/AnalysisInsights.tsx             |  3 +++
 .../Analysis/DraggableInsights.tsx            |  5 +++++
 .../ReportBuilder/Toolbox/index.tsx           |  7 ++++++-
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/front/app/containers/Admin/projects/project/analysis/InputPreview/index.tsx b/front/app/containers/Admin/projects/project/analysis/InputPreview/index.tsx
index 14c7a0e45bfc..657180bac955 100644
--- a/front/app/containers/Admin/projects/project/analysis/InputPreview/index.tsx
+++ b/front/app/containers/Admin/projects/project/analysis/InputPreview/index.tsx
@@ -17,11 +17,13 @@ import Divider from 'components/admin/Divider';
 import Avatar from 'components/Avatar';
 import Button from 'components/UI/Button';
 
+import { trackEventByName } from 'utils/analytics';
 import { useIntl } from 'utils/cl-intl';
 import { getFullName } from 'utils/textUtils';
 
 import { useSelectedInputContext } from '../SelectedInputContext';
 import Taggings from '../Taggings';
+import tracks from '../tracks';
 
 import LongFieldValue from './LongFieldValue';
 import messages from './messages';
@@ -75,10 +77,21 @@ const InputListItem = () => {
       ? additionalCustomFieldIds.filter((id) => id !== customFieldId)
       : [...(additionalCustomFieldIds || []), customFieldId];
 
-    updateAnalysis({
-      id: analysisId,
-      additional_custom_field_ids: newAdditionalCustomFieldIds,
-    });
+    updateAnalysis(
+      {
+        id: analysisId,
+        additional_custom_field_ids: newAdditionalCustomFieldIds,
+      },
+      {
+        onSuccess: () => {
+          trackEventByName(
+            additionalCustomFieldIds?.includes(customFieldId)
+              ? tracks.removeQuestionFromAIAnalysis.name
+              : tracks.addQuestionToAIAnalysis.name
+          );
+        },
+      }
+    );
   };
 
   return (
diff --git a/front/app/containers/Admin/projects/project/nativeSurvey/FormResults/FormResultsQuestion/TextQuestion/Analysis/AnalysisInsights.tsx b/front/app/containers/Admin/projects/project/nativeSurvey/FormResults/FormResultsQuestion/TextQuestion/Analysis/AnalysisInsights.tsx
index b9f0aee5827f..3d8e6ca94fb9 100644
--- a/front/app/containers/Admin/projects/project/nativeSurvey/FormResults/FormResultsQuestion/TextQuestion/Analysis/AnalysisInsights.tsx
+++ b/front/app/containers/Admin/projects/project/nativeSurvey/FormResults/FormResultsQuestion/TextQuestion/Analysis/AnalysisInsights.tsx
@@ -27,9 +27,11 @@ import InsightBody from 'containers/Admin/projects/project/analysis/Insights/Ins
 import InsightFooter from 'containers/Admin/projects/project/analysis/Insights/InsightFooter';
 import QuestionHeader from 'containers/Admin/projects/project/analysis/Insights/QuestionHeader';
 import SummaryHeader from 'containers/Admin/projects/project/analysis/Insights/SummaryHeader';
+import tracks from 'containers/Admin/projects/project/analysis/tracks';
 
 import Button from 'components/UI/Button';
 
+import { trackEventByName } from 'utils/analytics';
 import { FormattedMessage, useIntl } from 'utils/cl-intl';
 
 import messages from '../../../messages';
@@ -129,6 +131,7 @@ const Summary = ({
             icon="refresh"
             onClick={() => {
               regenerateSummary({ analysisId, summaryId });
+              trackEventByName(tracks.regenerateAIInsights.name);
             }}
             processing={isLoadingRegenerateSummary}
           >
diff --git a/front/app/containers/Admin/reporting/components/ReportBuilder/Analysis/DraggableInsights.tsx b/front/app/containers/Admin/reporting/components/ReportBuilder/Analysis/DraggableInsights.tsx
index 27c8147c8920..8582db06d1ee 100644
--- a/front/app/containers/Admin/reporting/components/ReportBuilder/Analysis/DraggableInsights.tsx
+++ b/front/app/containers/Admin/reporting/components/ReportBuilder/Analysis/DraggableInsights.tsx
@@ -3,6 +3,10 @@ import React from 'react';
 import { Box } from '@citizenlab/cl2-component-library';
 import { useEditor } from '@craftjs/core';
 
+import tracks from 'containers/Admin/projects/project/analysis/tracks';
+
+import { trackEventByName } from 'utils/analytics';
+
 const DraggableInsight = ({
   id,
   component,
@@ -25,6 +29,7 @@ const DraggableInsight = ({
         connectors.create(ref, component, {
           onCreate: (node) => {
             selectNode(node.rootNodeId);
+            trackEventByName(tracks.dragAndDropInsightInReportBuilder.name);
           },
         })
       }
diff --git a/front/app/containers/Admin/reporting/components/ReportBuilder/Toolbox/index.tsx b/front/app/containers/Admin/reporting/components/ReportBuilder/Toolbox/index.tsx
index 724adbb97a81..a6c98eeb548d 100644
--- a/front/app/containers/Admin/reporting/components/ReportBuilder/Toolbox/index.tsx
+++ b/front/app/containers/Admin/reporting/components/ReportBuilder/Toolbox/index.tsx
@@ -17,6 +17,7 @@ import useProjects from 'api/projects/useProjects';
 
 import useAppConfigurationLocales from 'hooks/useAppConfigurationLocales';
 
+import tracks from 'containers/Admin/projects/project/analysis/tracks';
 import { useReportContext } from 'containers/Admin/reporting/context/ReportContext';
 import { createMultiloc } from 'containers/Admin/reporting/utils/multiloc';
 
@@ -24,6 +25,7 @@ import Container from 'components/admin/ContentBuilder/Toolbox/Container';
 import DraggableElement from 'components/admin/ContentBuilder/Toolbox/DraggableElement';
 import WhiteSpace from 'components/admin/ContentBuilder/Widgets/WhiteSpace';
 
+import { trackEventByName } from 'utils/analytics';
 import {
   useIntl,
   useFormatMessageWithLocale,
@@ -144,7 +146,10 @@ const ReportBuilderToolbox = ({
             <Button
               icon="stars"
               id="e2e-report-builder-ai-tab"
-              onClick={() => setSelectedTab('ai')}
+              onClick={() => {
+                setSelectedTab('ai');
+                trackEventByName(tracks.openReportBuilderAITab.name);
+              }}
               buttonStyle={selectedTab === 'ai' ? 'text' : 'secondary'}
             >
               {formatMessage(messages.ai)}