feat(pci-savings-plan): add tracking (#14401)

ref: TAPC-1632 Signed-off-by: Lionel Bueno <[email protected]>
ovh · Jan 15, 2025 · 262091c · 262091c
1 parent 7a72d13
commit 262091c
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 13 deletions.
diff --git a/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.test.tsx b/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { vi, describe, it, expect } from 'vitest';
+import * as reactShellClientModule from '@ovh-ux/manager-react-shell-client';
 import { screen } from '@testing-library/react';
 import Commitment from './Commitment';
 import '@testing-library/jest-dom';
@@ -15,6 +16,18 @@ const defaultProps = {
   quantity: 1,
 };
 
+const trackingSpy = vi.fn();
+
+vi.mock('@ovh-ux/manager-react-shell-client', async (importOriginal) => {
+  const original: typeof reactShellClientModule = await importOriginal();
+  return {
+    ...original,
+    useOvhTracking: () => ({
+      trackClick: trackingSpy,
+    }),
+  };
+});
+
 vi.mock('@ovh-ux/manager-react-components', async (importOriginal) => {
   const mod = await importOriginal<
     typeof import('@ovh-ux/manager-react-components')

diff --git a/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx b/packages/manager/apps/pci-savings-plan/src/components/Commitment/Commitment.tsx
@@ -2,6 +2,11 @@ import {
   ODS_THEME_COLOR_INTENT,
   ODS_THEME_TYPOGRAPHY_SIZE,
 } from '@ovhcloud/ods-common-theming';
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import { ODS_TILE_SIZE, ODS_TILE_VARIANT } from '@ovhcloud/ods-components';
 import { OsdsText, OsdsTile } from '@ovhcloud/ods-components/react';
 import React from 'react';
@@ -29,7 +34,7 @@ const Commitment = ({
   quantity: number;
 }) => {
   const { t } = useTranslation('create');
-
+  const { trackClick } = useOvhTracking();
   const { getTextPrice } = useCatalogPrice();
   const priceByMonthWithoutCommitment =
     convertHourlyPriceToMonthly(hourlyPriceWithoutCommitment) * quantity;
@@ -41,6 +46,16 @@ const Commitment = ({
     priceNumber,
   );
 
+  const onClickTracking = () => {
+    trackClick({
+      location: PageLocation.funnel,
+      buttonType: ButtonType.button,
+      actionType: 'action',
+      actions: [`add_savings_plan::add_billing::add_${duration}`],
+    });
+    onClick();
+  };
+
   return (
     <OsdsTile
       size={ODS_TILE_SIZE.sm}
@@ -57,7 +72,7 @@ const Commitment = ({
           ? ODS_THEME_COLOR_INTENT.primary
           : ODS_THEME_COLOR_INTENT.default
       }
-      onClick={onClick}
+      onClick={onClickTracking}
     >
       <span slot="start" className="flex flex-row items-center justify-center">
         <OsdsText color={ODS_THEME_COLOR_INTENT.text}>

diff --git a/packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlan.test.tsx b/packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlan.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { vi, describe, it, expect } from 'vitest';
 import { screen, fireEvent, waitFor } from '@testing-library/react';
+import * as reactShellClientModule from '@ovh-ux/manager-react-shell-client';
 import '@testing-library/jest-dom';
 import CreatePlanForm, { CreatePlanFormProps } from './CreatePlanForm';
 import {
@@ -17,6 +18,17 @@ vi.mock('react-i18next', () => ({
 }));
 
 const mockedUsedNavigate = vi.fn();
+const trackingSpy = vi.fn();
+
+vi.mock('@ovh-ux/manager-react-shell-client', async (importOriginal) => {
+  const original: typeof reactShellClientModule = await importOriginal();
+  return {
+    ...original,
+    useOvhTracking: () => ({
+      trackClick: trackingSpy,
+    }),
+  };
+});
 
 vi.mock('react-router-dom', async (importOriginal) => {
   const actual = await importOriginal();

diff --git a/packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlanForm.tsx b/packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlanForm.tsx
@@ -39,6 +39,11 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { MutationStatus, useMutationState } from '@tanstack/react-query';
 
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import QuantitySelector, {
   MAX_QUANTITY,
 } from '@/components/QuantitySelector/QuantitySelector';
@@ -142,6 +147,7 @@ const CreatePlanForm: FC<CreatePlanFormProps> = ({
   isDiscoveryProject,
 }: CreatePlanFormProps) => {
   const pciUrl = usePciUrl();
+  const { trackClick } = useOvhTracking();
   const navigate = useNavigate();
   const { t } = useTranslation('create');
   const [selectedResource, setSelectedResource] = useState<ResourceType>(
@@ -448,7 +454,15 @@ const CreatePlanForm: FC<CreatePlanFormProps> = ({
           slot="actions"
           variant={ODS_BUTTON_VARIANT.stroked}
           color={ODS_THEME_COLOR_INTENT.primary}
-          onClick={() => navigate('..')}
+          onClick={() => {
+            trackClick({
+              location: PageLocation.funnel,
+              buttonType: ButtonType.button,
+              actionType: 'action',
+              actions: [`add_savings_plan::cancell`],
+            });
+            navigate('..');
+          }}
         >
           {t('cta_cancel')}
         </OsdsButton>

diff --git a/packages/manager/apps/pci-savings-plan/src/components/Table/ActionsCell.tsx b/packages/manager/apps/pci-savings-plan/src/components/Table/ActionsCell.tsx
@@ -16,6 +16,11 @@ import {
   OsdsMenuItem,
 } from '@ovhcloud/ods-components/react';
 import { usePciUrl } from '@ovh-ux/manager-pci-common';
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import {
   SavingsPlanPlanedChangeStatus,
   SavingsPlanStatus,
@@ -46,6 +51,7 @@ const MenuItems = ({
   pciUrl: string;
 }) => {
   const { t } = useTranslation('listing');
+  const { trackClick } = useOvhTracking();
 
   // We don't have a better way to check that, api return only a specific code and not an id related to scope (instance, rancher),
   // So if we have number in the flavor (b3-8, c3-16) it's an instance else it's a Rancher
@@ -93,6 +99,14 @@ const MenuItems = ({
           size={ODS_BUTTON_SIZE.sm}
           variant={ODS_BUTTON_VARIANT.ghost}
           text-align="start"
+          onClick={() => {
+            trackClick({
+              location: PageLocation.page,
+              buttonType: ButtonType.button,
+              actionType: 'navigation',
+              actions: ['add_instance'],
+            });
+          }}
           href={
             isInstance ? `${pciUrl}/instances/new` : `${pciUrl}/rancher/new`
           }

diff --git a/packages/manager/apps/pci-savings-plan/src/hooks/useSavingsPlan.tsx b/packages/manager/apps/pci-savings-plan/src/hooks/useSavingsPlan.tsx
@@ -1,6 +1,11 @@
 import { v6 } from '@ovh-ux/manager-core-api';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useMutation, useQuery } from '@tanstack/react-query';
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import { useServices } from './useService';
 import {
   SavingsPlanContract,
@@ -65,8 +70,8 @@ export const postSavingsPlan = async ({
   offerId: string;
   displayName: string;
   size: number;
-}): Promise<SavingsPlanService[]> => {
-  const { data } = await v6.post<SavingsPlanService[]>(
+}): Promise<SavingsPlanService> => {
+  const { data } = await v6.post<SavingsPlanService>(
     `/services/${serviceId}/savingsPlans/subscribe/execute`,
     {
       displayName,
@@ -145,13 +150,23 @@ export const useSavingsPlanEditName = (savingsPlanId: string) => {
 
 export const useSavingsPlanCreate = () => {
   const { refetch } = useSavingsPlan();
+  const { trackClick } = useOvhTracking();
   const serviceId = useServiceId();
   const navigate = useNavigate();
   const { projectId } = useParams();
 
   return useMutation({
-    onSuccess: async () => {
+    onSuccess: async (res) => {
       const { data } = await refetch();
+      trackClick({
+        location: PageLocation.funnel,
+        buttonType: ButtonType.button,
+        actionType: 'action',
+        actions: [
+          `add_savings_plan::confirm::savings_plan_created_${res.period}_${res.flavor}_${res.model}_${res.size}`,
+        ],
+      });
+
       if (data?.length) {
         navigate(getSavingsPlansUrl(projectId));
       }

diff --git a/packages/manager/apps/pci-savings-plan/src/pages/listing/index.tsx b/packages/manager/apps/pci-savings-plan/src/pages/listing/index.tsx
@@ -17,9 +17,14 @@ import {
   OsdsMessage,
   OsdsText,
 } from '@ovhcloud/ods-components/react';
-import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { Title } from '@ovh-ux/manager-react-components';
 
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+  ShellContext,
+} from '@ovh-ux/manager-react-shell-client';
 import TableContainer from '@/components/Table/TableContainer';
 import {
   getMutationKeyCreateSavingsPlan,
@@ -91,6 +96,7 @@ const ListingTablePage: React.FC<ListingProps> = ({
   const { t } = useTranslation('listing');
   const { environment } = useContext(ShellContext);
   const locale = environment.getUserLocale();
+  const { trackClick } = useOvhTracking();
 
   const hrefDashboard = useHref('');
   const serviceId = useServiceId();
@@ -136,6 +142,14 @@ const ListingTablePage: React.FC<ListingProps> = ({
           color={ODS_THEME_COLOR_INTENT.primary}
           inline
           href={`${hrefDashboard}/new`}
+          onClick={() => {
+            trackClick({
+              location: PageLocation.page,
+              buttonType: ButtonType.button,
+              actionType: 'navigation',
+              actions: ['add_savings_plan'],
+            });
+          }}
         >
           <span slot="start" className="flex justify-center items-center">
             <OsdsIcon

diff --git a/packages/manager/apps/pci-savings-plan/src/pages/onboarding/index.tsx b/packages/manager/apps/pci-savings-plan/src/pages/onboarding/index.tsx
@@ -2,13 +2,19 @@ import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { OnboardingLayout } from '@ovh-ux/manager-react-components';
 import { useNavigate } from 'react-router-dom';
-import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import {
+  ButtonType,
+  PageLocation,
+  ShellContext,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 import onboardingImgSrc from './onboarding-img.png';
 import { SAVINGS_PLAN_INFO_URL } from '../../constants';
 
 export default function Onboarding() {
   const { t } = useTranslation('onboarding');
   const navigate = useNavigate();
+  const { trackClick } = useOvhTracking();
 
   const context = useContext(ShellContext);
   const { ovhSubsidiary } = context.environment.getUser();
@@ -25,9 +31,25 @@ export default function Onboarding() {
       }}
       description={t('description')}
       orderButtonLabel={t('orderButtonLabel')}
-      onOrderButtonClick={() => navigate('../new')}
+      onOrderButtonClick={() => {
+        navigate('../new');
+        trackClick({
+          location: PageLocation.page,
+          buttonType: ButtonType.button,
+          actionType: 'navigation',
+          actions: ['add_savings_plan'],
+        });
+      }}
       moreInfoButtonLabel={t('moreInfoButtonLabel')}
       moreInfoHref={savingsPlanUrl}
+      onmoreInfoButtonClick={() => {
+        trackClick({
+          location: PageLocation.page,
+          buttonType: ButtonType.button,
+          actionType: 'navigation',
+          actions: ['go-to-savings-plan'],
+        });
+      }}
     />
   );
 }
diff --git a/packages/manager/apps/pci-savings-plan/src/routes/routes.tsx b/packages/manager/apps/pci-savings-plan/src/routes/routes.tsx
@@ -27,7 +27,6 @@ export const Routes = [
         handle: {
           tracking: {
             pageName: 'listing',
-            pageType: PageType.listing,
           },
         },
         children: [
@@ -69,7 +68,7 @@ export const Routes = [
         ...lazyRouteConfig(() => import('@/pages/create')),
         handle: {
           tracking: {
-            pageName: 'create',
+            pageName: 'add_savings_plan',
             pageType: PageType.funnel,
           },
         },

diff --git a/packages/manager/apps/pci-savings-plan/src/tracking.constant.ts b/packages/manager/apps/pci-savings-plan/src/tracking.constant.ts
@@ -16,5 +16,5 @@ export const LEVEL2 = {
   },
 };
 export const UNIVERSE = 'PublicCloud';
-export const SUB_UNIVERSE = 'PublicCloud';
-export const APP_NAME = 'pci-savings-plan';
+export const SUB_UNIVERSE = 'settings';
+export const APP_NAME = 'savings-plan';