Merge pull request #7361 from CitizenLabDotCo/TAN-1332-tracking

TAN-1332 TAN-1305 Tracking and icon change
CitizenLabDotCo · Mar 14, 2024 · 810a7a2 · 810a7a2
2 parents ff0ea2a + 80f9c64
commit 810a7a2
Show file tree

Hide file tree

Showing 15 changed files with 71 additions and 18 deletions.
diff --git 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
@@ -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 : ''}`}

diff --git 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/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
@@ -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
@@ -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
@@ -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
@@ -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/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',
+  },
 };
diff --git 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/...t/nativeSurvey/FormResults/FormResultsQuestion/TextQuestion/Analysis/AnalysisInsights.tsx b/...t/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/...ects/project/nativeSurvey/FormResults/FormResultsQuestion/TextQuestion/Analysis/index.tsx b/...ects/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/...roject/nativeSurvey/FormResults/FormResultsQuestion/TextQuestion/AnalysisUpsell/index.tsx b/...roject/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/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
@@ -17,13 +17,15 @@ 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';
 
 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,
@@ -142,9 +144,12 @@ const ReportBuilderToolbox = ({
           </Box>
           <Box flex="1">
             <Button
-              icon="flash"
+              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)}