feat(generator): implemente useovhtracking hook

ref: MANAGER-13929 Signed-off-by: Alex Boungnaseng <alex.boungnaseng.ext@corp.ovh.com>
ovh · Apr 16, 2024 · 43c1465 · 43c1465
1 parent b512795
commit 43c1465
Show file tree

Hide file tree

Showing 10 changed files with 70 additions and 168 deletions.
diff --git a/packages/components/ovh-at-internet/src/ovh-at-internet.ts b/packages/components/ovh-at-internet/src/ovh-at-internet.ts
@@ -1,4 +1,4 @@
-import { capitalize, isString, mapValues, trimEnd } from 'lodash-es';
+import { capitalize, isString, mapValues } from 'lodash-es';
 import { OvhAtInternetConfig } from './config';
 import {
   IOvhAtInternetTrack,
@@ -16,7 +16,6 @@ import { loadManagerTMS } from './manager-tms';
 import { debug } from './utils';
 
 import initMixCommander from './mix-commander';
-import { toBeRequired } from '@testing-library/jest-dom/matchers';
 
 function getPageTrackingData(
   page: LegacyTrackingData,
@@ -108,7 +107,6 @@ export default class OvhAtInternet extends OvhAtInternetConfig {
   }
 
   canTrack(): boolean {
-    return true;
     return this.isDefaultSet() && this.enabled && this.tag;
   }
 
@@ -126,7 +124,6 @@ export default class OvhAtInternet extends OvhAtInternetConfig {
   }
 
   shouldUsePianoAnalytics() {
-    return true;
     if (isTrackingDebug()) {
       return true;
     }

diff --git a/packages/manager/core/generator/app/conditional-templates/dashboard/_layout.tsx.hbs b/packages/manager/core/generator/app/conditional-templates/dashboard/_layout.tsx.hbs
@@ -65,24 +65,10 @@ export default function DashboardPage() {
     title: serviceName,
   };
 
-  const linkProps = {
-    label: t('manager_dashboard_back_link'),
-    href: '/',
-    target: OdsHTMLAnchorElementTarget._blank,
-    type: LinkType.back,
-  };
-
-  const onClickReturn = (href: string) => navigate(href);
-
   return (
     <div>
       <DashboardLayout
         header={header}
-        {{#if this.isPCI}}
-        {{else}}
-        linkProps={linkProps}
-        onClickReturn={() => onClickReturn(linkProps.href)}
-        {{/if}}
         tabs={
           <OsdsTabs panel={panel}>
             <OsdsTabBar slot="top">

diff --git a/packages/manager/core/generator/app/conditional-templates/onboarding/index.tsx.hbs b/packages/manager/core/generator/app/conditional-templates/onboarding/index.tsx.hbs
@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Card, OnboardingLayout } from "@ovhcloud/manager-components";
-import { useGuideUtils } from '@/hooks/useGuideUtils';
+import useGuideUtils from '@/hooks/useGuideUtils';
 import Breadcrumb from '@/components/Breadcrumb/Breadcrumb';
 import onboardingImgSrc from "./onboarding-img.png";
 

diff --git a/packages/manager/core/generator/app/templates/src/hooks/useCustomTracking.tsx b/packages/manager/core/generator/app/templates/src/hooks/useCustomTracking.tsx
diff --git a/packages/manager/core/generator/app/templates/src/hooks/useGuideUtils.tsx b/packages/manager/core/generator/app/templates/src/hooks/useGuideUtils.tsx
@@ -80,12 +80,16 @@ interface GuideLinkProps {
 }
 
 function useGuideUtils() {
-  const { subsidiary } = useAuthentication();
   const [linkTabs, setLinkTabs] = useState<GuideLinkProps>({});
 
-  useEffect(() => {
-    setLinkTabs(getGuideListLink({ subsidiary: subsidiary as CountryCode }));
-  }, [subsidiary]);
+  try {
+    const { subsidiary } = useAuthentication();
+    useEffect(() => {
+      setLinkTabs(getGuideListLink({ subsidiary: subsidiary as CountryCode }));
+    }, [subsidiary]);
+  } catch (error) {
+    console.error('error: useGuideUtils : ', error);
+  }
 
   return linkTabs;
 }

diff --git a/packages/manager/core/generator/app/templates/src/index.tsx.hbs b/packages/manager/core/generator/app/templates/src/index.tsx.hbs
@@ -10,8 +10,19 @@ import '@ovhcloud/ods-theme-blue-jeans/dist/index.css';
 import './global.css';
 import './vite-hmr';
 
+import { UNIVERSE, SUB_UNIVERSE, APP_NAME, LEVEL2 } from './tracking.constant';
+
+const trackingContext = {
+  chapter1: UNIVERSE,
+  chapter2: SUB_UNIVERSE,
+  chapter3: APP_NAME,
+  appName: APP_NAME,
+  level2: LEVEL2,
+  pageTheme: UNIVERSE,
+};
+
 const init = async (appName: string) => {
-  const context = await initShellContext(appName);
+  const context = await initShellContext(appName, trackingContext);
 
   await initI18n({
     context,

diff --git a/packages/manager/core/generator/app/templates/src/pages/layout.tsx.hbs b/packages/manager/core/generator/app/templates/src/pages/layout.tsx.hbs
@@ -1,40 +1,32 @@
 import React, { useEffect, useContext } from 'react';
 import { defineCurrentPage } from '@ovh-ux/request-tagger';
 import { Outlet, useLocation, useMatches } from 'react-router-dom';
-import { useRouting } from '@ovh-ux/manager-react-shell-client';
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 
 import {
-  useOvhCustomTracking,
-} from '@/hooks/useCustomTracking';
+  useOvhTracking,
+  useRouteSynchro,
+} from '@ovh-ux/manager-react-shell-client';
 
 export default function Layout() {
   const location = useLocation();
-  const routing = useRouting();
   const { shell } = useContext(ShellContext);
   const matches = useMatches();
-  const { trackClick } = useOvhCustomTracking();
+  const { trackCurrentPage } = useOvhTracking();
+  useRouteSynchro();
 
   useEffect(() => {
     const match = matches.slice(-1);
     defineCurrentPage(`app.{{appName}}-${match[0]?.id}`);
   }, [location]);
 
   useEffect(() => {
-    trackPage();
+    trackCurrentPage();
   }, [location]);
 
   useEffect(() => {
     shell.ux.hidePreloader();
   }, []);
 
-  useEffect(() => {
-    routing.stopListenForHashChange();
-  }, []);
-
-  useEffect(() => {
-    routing.onHashChange();
-  }, [location]);
-
   return <Outlet />;
 }
diff --git a/packages/manager/core/generator/app/templates/src/routes.tsx.hbs b/packages/manager/core/generator/app/templates/src/routes.tsx.hbs
@@ -1,7 +1,7 @@
 import React from 'react';
 import { RouteObject } from 'react-router-dom';
 import NotFound from './pages/404';
-import { PageType } from './hooks/useCustomTracking';
+import { PageType } from '@ovh-ux/manager-react-shell-client';
 
 const lazyRouteConfig = (importFn: CallableFunction): Partial<RouteObject> => {
   return {
@@ -25,6 +25,12 @@ export const Routes: any = [
         id: 'listing',
         path: '',
         ...lazyRouteConfig(() => import('@/pages/listing')),
+        handle: {
+          tracking: {
+            pageName: 'listing',
+            pageType: PageType.listing,
+          },
+        },
       },
       {
         path: ':serviceName',
@@ -34,18 +40,36 @@ export const Routes: any = [
             id: 'dashboard',
             path: '',
             ...lazyRouteConfig(() => import('@/pages/dashboard/index')),
+            handle: {
+              tracking: {
+                pageName: 'dashboard',
+                pageType: PageType.dashboard,
+              },
+            },
           },
           {
             id: 'tab2',
             path: 'Tab2',
             ...lazyRouteConfig(() => import('@/pages/dashboard/Tab2')),
+            handle: {
+              tracking: {
+                pageName: 'tab2',
+                pageType: PageType.dashboard,
+              },
+            },
           },
         ],
       },
       {
         id: 'onboarding',
         path: 'onboarding',
         ...lazyRouteConfig(() => import('@/pages/onboarding')),
+        handle: {
+          tracking: {
+            pageName: 'onboarding',
+            pageType: PageType.onboarding,
+          },
+        },
       },
     ],
   },
@@ -65,9 +89,9 @@ export const Routes: any = [
         path: '',
         ...lazyRouteConfig(() => import('@/pages/listing')),
         handle: {
-          OvhTracking: {
-            name: 'listing',
-            type: PageType.listing,
+          tracking: {
+            pageName: 'listing',
+            pageType: PageType.listing,
           },
         },
       },
@@ -81,9 +105,9 @@ export const Routes: any = [
             ...lazyRouteConfig(
               () => import('@/pages/dashboard/index')),
             handle: {
-              OvhTracking: {
-                name: 'dashboard',
-                type: PageType.dashboard,
+              tracking: {
+                pageName: 'dashboard',
+                pageType: PageType.dashboard,
               },
             },
           },
@@ -93,9 +117,9 @@ export const Routes: any = [
             ...lazyRouteConfig(
               () => import('@/pages/dashboard/Tab2')),
             handle: {
-              OvhTracking: {
-                name: 'tab2',
-                type: PageType.dashboard,
+              tracking: {
+                pageName: 'tab2',
+                pageType: PageType.dashboard,
               },
             },
           },
@@ -106,9 +130,9 @@ export const Routes: any = [
         path: 'onboarding',
         ...lazyRouteConfig(() => import('@/pages/onboarding')),
         handle: {
-          OvhTracking: {
-            name: 'tab2',
-            type: PageType.onboarding,
+          tracking: {
+            pageName: 'onboarding',
+            pageType: PageType.onboarding,
           },
         },
       },

diff --git a/packages/manager/core/generator/app/templates/src/tracking.constant.ts.hbs b/packages/manager/core/generator/app/templates/src/tracking.constant.ts.hbs
@@ -1,5 +1,4 @@
 export const LEVEL2 = '86';
 export const UNIVERSE = '{{universe}}';
-export const SUBUNIVERSE = '{{subuniverse}}';
+export const SUB_UNIVERSE = '{{subuniverse}}';
 export const APP_NAME = '{{appName}}'
-export const PAGE_PREFIX = [UNIVERSE, SUBUNIVERSE, APP_NAME].join('::');