feat(zimbra): add tracking first batch

ref: MANAGER-15910 Signed-off-by: Tristan WAGNER <[email protected]>
ovh · Nov 28, 2024 · a413b57 · a413b57
1 parent ec31708
commit a413b57
Show file tree

Hide file tree

Showing 46 changed files with 1,547 additions and 126 deletions.
diff --git a/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_fr_FR.json b/packages/manager/apps/zimbra/public/translations/accounts/alias/add/Messages_fr_FR.json
@@ -8,6 +8,7 @@
   "zimbra_account_alias_add_input_email_helper_rule_3": "Les caractères spéciaux ne peuvent pas être placés côte à côte",
   "zimbra_account_alias_add_select_domain_placeholder": "Sélectionner un nom de domaine",
   "zimbra_account_alias_add_btn_confirm": "Confirmer",
+  "zimbra_account_alias_add_btn_cancel": "Annuler",
   "zimbra_account_alias_add_success_message": "Votre demande de création d'alias a bien été prise en compte. Elle sera traitée d'ici quelques instants.",
   "zimbra_account_alias_add_error_message": "Votre demande de création d'alias n'a pas pu aboutir. {{ error }}"
 }
diff --git a/...ages/manager/apps/zimbra/public/translations/organizations/addAndEdit/Messages_fr_FR.json b/...ages/manager/apps/zimbra/public/translations/organizations/addAndEdit/Messages_fr_FR.json
@@ -1,5 +1,6 @@
 {
   "zimbra_organization_add": "Confirmer",
+  "zimbra_organization_add_cancel": "Annuler",
   "zimbra_organization_add_modal_title": "Ajouter une organisation",
   "zimbra_organization_add_modal_content_part1": "L'organisation représente un groupement logique de domaines et de boites mails.",
   "zimbra_organization_add_modal_content_part2": "Elle permet de définir des politiques de gestion groupées et définit l'isolation de vos boites mails (limite de l'annuaire d'entreprise).",

diff --git a/packages/manager/apps/zimbra/public/translations/organizations/delete/Messages_fr_FR.json b/packages/manager/apps/zimbra/public/translations/organizations/delete/Messages_fr_FR.json
@@ -1,5 +1,6 @@
 {
   "zimbra_organization_delete": "Supprimer",
+  "zimbra_organization_delete_cancel": "Annuler",
   "zimbra_organization_delete_modal_title": "Supprimer l'organisation",
   "zimbra_organization_delete_modal_content": "Voulez-vous vraiment supprimer l'organisation ?",
   "zimbra_organization_delete_modal_message_disabled_part1": "Au moins un domaine est encore associé à cette organisation.",

diff --git a/packages/manager/apps/zimbra/src/components/GuideLink.tsx b/packages/manager/apps/zimbra/src/components/GuideLink.tsx
@@ -1,4 +1,9 @@
-import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import {
+  ButtonType,
+  PageLocation,
+  ShellContext,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import React, { useContext, useMemo } from 'react';
 import {
   IconLinkAlignmentType,
@@ -7,24 +12,20 @@ import {
 } from '@ovh-ux/manager-react-components';
 import { ODS_LINK_COLOR } from '@ovhcloud/ods-components';
 import { Guide } from '@/guides.constants';
+import { GO_TO } from '@/tracking.constant';
 
 interface GuideLinkProps {
   label: string;
-  guide: string | Guide;
+  guide: Guide;
 }
 
 export default function GuideLink({ label, guide }: Readonly<GuideLinkProps>) {
   const context = useContext(ShellContext);
   const { ovhSubsidiary } = context.environment.getUser();
+  const { trackClick } = useOvhTracking();
 
   const url = useMemo(() => {
-    if (typeof guide === 'string') {
-      return guide;
-    }
-
-    return (typeof guide.url === 'string'
-      ? guide.url
-      : guide.url?.[ovhSubsidiary] || guide.url.DEFAULT) as string;
+    return guide.url?.[ovhSubsidiary] || guide.url.DEFAULT;
   }, [guide, ovhSubsidiary]);
 
   return (
@@ -35,6 +36,14 @@ export default function GuideLink({ label, guide }: Readonly<GuideLinkProps>) {
       target="_blank"
       href={url}
       label={label}
+      onClickReturn={() => {
+        trackClick({
+          location: PageLocation.tile,
+          buttonType: ButtonType.externalLink,
+          actionType: 'navigation',
+          actions: [GO_TO(guide.tracking)],
+        });
+      }}
     />
   );
 }
diff --git a/packages/manager/apps/zimbra/src/components/layout-helpers/Dashboard/Dashboard.tsx b/packages/manager/apps/zimbra/src/components/layout-helpers/Dashboard/Dashboard.tsx
@@ -15,16 +15,31 @@ import {
 } from '@ovh-ux/manager-react-components';
 
 import { useTranslation } from 'react-i18next';
-import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import {
+  ButtonType,
+  PageLocation,
+  ShellContext,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import TabsPanel, { TabItemProps } from './TabsPanel';
 import Breadcrumb from '@/components/Breadcrumb/Breadcrumb';
 import { GUIDES_LIST } from '@/guides.constants';
 import { urls } from '@/routes/routes.constants';
-
-import './Dashboard.scss';
 import { FEATURE_FLAGS } from '@/utils';
+import {
+  AUTO_REPLY,
+  EMAIL_ACCOUNT,
+  DOMAIN,
+  GENERAL_INFORMATIONS,
+  MAILING_LIST,
+  ORGANIZATION,
+  REDIRECTION,
+  GO_TO,
+} from '@/tracking.constant';
+import './Dashboard.scss';
 
 export const Dashboard: React.FC = () => {
+  const { trackClick } = useOvhTracking();
   const { platformId } = useParams();
   const { notifications } = useNotifications();
   const { t } = useTranslation('dashboard');
@@ -36,10 +51,18 @@ export const Dashboard: React.FC = () => {
   const guideItems: GuideItem[] = [
     {
       id: 1,
-      href: `${GUIDES_LIST.administrator_guide.url[ovhSubsidiary] ||
-        GUIDES_LIST.administrator_guide.url.DEFAULT}`,
+      href: (GUIDES_LIST.administrator_guide.url[ovhSubsidiary] ||
+        GUIDES_LIST.administrator_guide.url.DEFAULT) as string,
       target: '_blank',
       label: t('zimbra_dashboard_administrator_guide'),
+      onClick: () => {
+        trackClick({
+          location: PageLocation.tile,
+          buttonType: ButtonType.externalLink,
+          actionType: 'navigation',
+          actions: [GO_TO(GUIDES_LIST.administrator_guide.tracking)],
+        });
+      },
     },
   ];
 
@@ -53,12 +76,14 @@ export const Dashboard: React.FC = () => {
   const tabsList: TabItemProps[] = [
     {
       name: 'general_informations',
+      trackingName: GENERAL_INFORMATIONS,
       title: t('zimbra_dashboard_general_informations'),
       to: basePath,
       pathMatchers: computePathMatchers([urls.dashboard]),
     },
     {
-      name: 'organizations',
+      name: 'organization',
+      trackingName: ORGANIZATION,
       title: t('zimbra_dashboard_organizations'),
       to: `${basePath}/organizations`,
       pathMatchers: computePathMatchers([
@@ -68,7 +93,8 @@ export const Dashboard: React.FC = () => {
       hidden: selectedOrganizationId !== null,
     },
     {
-      name: 'domains',
+      name: 'domain',
+      trackingName: DOMAIN,
       title: t('zimbra_dashboard_domains'),
       to: `${basePath}/domains`,
       pathMatchers: computePathMatchers([
@@ -79,13 +105,15 @@ export const Dashboard: React.FC = () => {
       ]),
     },
     {
-      name: 'email_accounts',
+      name: 'email_account',
+      trackingName: EMAIL_ACCOUNT,
       title: t('zimbra_dashboard_email_accounts'),
       to: `${basePath}/email_accounts`,
       pathMatchers: computePathMatchers([urls.email_accounts]),
     },
     {
-      name: 'mailing_lists',
+      name: 'mailing_list',
+      trackingName: MAILING_LIST,
       title: t('zimbra_dashboard_mailing_lists'),
       to: `${basePath}/mailing_lists`,
       pathMatchers: computePathMatchers([
@@ -95,7 +123,8 @@ export const Dashboard: React.FC = () => {
       hidden: !FEATURE_FLAGS.MAILINGLISTS,
     },
     {
-      name: 'redirections',
+      name: 'redirection',
+      trackingName: REDIRECTION,
       title: t('zimbra_dashboard_redirections'),
       to: `${basePath}/redirections`,
       pathMatchers: computePathMatchers([
@@ -106,7 +135,8 @@ export const Dashboard: React.FC = () => {
       hidden: !FEATURE_FLAGS.REDIRECTIONS,
     },
     {
-      name: 'auto_replies',
+      name: 'auto_reply',
+      trackingName: AUTO_REPLY,
       title: t('zimbra_dashboard_auto_replies'),
       to: `${basePath}/auto_replies`,
       pathMatchers: computePathMatchers([urls.auto_replies]),

diff --git a/packages/manager/apps/zimbra/src/components/layout-helpers/Dashboard/TabsPanel.tsx b/packages/manager/apps/zimbra/src/components/layout-helpers/Dashboard/TabsPanel.tsx
@@ -3,10 +3,17 @@ import { NavLink, useLocation, useNavigate } from 'react-router-dom';
 import { OdsTabs, OdsTab, OdsTag } from '@ovhcloud/ods-components/react';
 import { Headers } from '@ovh-ux/manager-react-components';
 import { ODS_TAG_COLOR, ODS_TAG_SIZE } from '@ovhcloud/ods-components';
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import { useOverridePage, useOrganization } from '@/hooks';
+import { UNSELECT_ORGANIZATION } from '@/tracking.constant';
 
 export type TabItemProps = {
   name: string;
+  trackingName: string;
   title: string;
   pathMatchers?: RegExp[];
   to: string;
@@ -21,6 +28,8 @@ const TabsPanel: React.FC<TabsProps> = ({ tabs }) => {
   const [activePanel, setActivePanel] = useState('');
   const location = useLocation();
   const navigate = useNavigate();
+
+  const { trackClick } = useOvhTracking();
   const { data: organization } = useOrganization();
 
   const isOverriddedPage = useOverridePage();
@@ -50,7 +59,15 @@ const TabsPanel: React.FC<TabsProps> = ({ tabs }) => {
           <Headers subtitle={organization.currentState.name} />
           <OdsTag
             color={ODS_TAG_COLOR.information}
-            onClick={() => navigate(location.pathname)}
+            onClick={() => {
+              trackClick({
+                location: PageLocation.page,
+                buttonType: ButtonType.button,
+                actionType: 'navigation',
+                actions: [UNSELECT_ORGANIZATION],
+              });
+              navigate(location.pathname);
+            }}
             className="ml-4"
             size={ODS_TAG_SIZE.lg}
             label={organization.currentState.label}
@@ -71,6 +88,14 @@ const TabsPanel: React.FC<TabsProps> = ({ tabs }) => {
                       : tab.to
                   }
                   className="no-underline"
+                  onClick={() => {
+                    trackClick({
+                      location: PageLocation.page,
+                      buttonType: ButtonType.tab,
+                      actionType: 'navigation',
+                      actions: [tab.trackingName],
+                    });
+                  }}
                 >
                   <OdsTab
                     id={tab.name}

diff --git a/packages/manager/apps/zimbra/src/guides.constants.ts b/packages/manager/apps/zimbra/src/guides.constants.ts
@@ -1,5 +1,14 @@
+import {
+  GUIDE_ADMINISTRATOR,
+  GUIDE_CNAME,
+  GUIDE_DNS_CONFIG,
+  GUIDE_USER,
+  GUIDE_WEBMAIL,
+} from './tracking.constant';
+
 export interface GuideLinks {
-  [key: string]: string | Guide;
+  [key: string]: string;
+  DEFAULT: string;
   FR?: string;
   GB?: string;
   DE?: string;
@@ -8,7 +17,6 @@ export interface GuideLinks {
   PL?: string;
   PT?: string;
   IE?: string;
-  DEFAULT?: string;
   MA?: string;
   TN?: string;
   SN?: string;
@@ -17,12 +25,15 @@ export interface GuideLinks {
 
 export interface Guide {
   key: string;
-  url: GuideLinks | string;
+  url: GuideLinks;
   tracking: string;
 }
 
 const helpRoot = 'https://help.ovhcloud.com/csm/';
-const WEBMAIL = 'https://webmail.mail.ovh.net/';
+
+const WEBMAIL = {
+  DEFAULT: 'https://webmail.mail.ovh.net/',
+};
 
 export const ZIMBRA_USER_GUIDE: GuideLinks = {
   FR: `${helpRoot}fr-mx-plan-zimbra-faq?id=kb_article_view&sysparm_article=KB0061410`,
@@ -88,27 +99,27 @@ export const GUIDES_LIST = {
   webmail: {
     key: 'zimbra_dashboard_webmail',
     url: WEBMAIL,
-    tracking: '::to define',
+    tracking: GUIDE_WEBMAIL,
   },
   administrator_guide: {
     key: 'zimbra_dashboard_administrator_guide',
     url: ZIMBRA_ADMINISTRATOR_GUIDE,
-    tracking: '::to define',
+    tracking: GUIDE_ADMINISTRATOR,
   },
   user_guide: {
     key: 'zimbra_dashboard_user_guides',
     url: ZIMBRA_USER_GUIDE,
-    tracking: '::to define',
+    tracking: GUIDE_USER,
   },
   cname_guide: {
     key: 'zimbra_cname_guide',
     url: ZIMBRA_CNAME_GUIDE,
-    tracking: '::to define',
+    tracking: GUIDE_CNAME,
   },
   dns_configuration_guide: {
     key: 'zimbra_dns_configuration_guide',
     url: ZIMBRA_DNS_CONFIGURATION_GUIDE,
-    tracking: '::to define',
+    tracking: GUIDE_DNS_CONFIG,
   },
 };
 

diff --git a/packages/manager/apps/zimbra/src/index.tsx b/packages/manager/apps/zimbra/src/index.tsx
@@ -9,9 +9,19 @@ import App from './App';
 import '@ovhcloud/ods-themes/default';
 import './index.scss';
 import './vite-hmr';
+import { APP_NAME, LEVEL2, SUB_UNIVERSE, UNIVERSE } from './tracking.constant';
+
+const trackingContext = {
+  chapter1: UNIVERSE,
+  chapter2: SUB_UNIVERSE,
+  chapter3: APP_NAME,
+  appName: APP_NAME,
+  level2Config: LEVEL2,
+  pageTheme: UNIVERSE,
+};
 
 const init = async (appName: string) => {
-  const context = await initShellContext(appName);
+  const context = await initShellContext(appName, trackingContext);
 
   await initI18n({
     context,