Stepper: Provision for flows to override the default Tracks event pro…

…ps (#93273)

client/landing/stepper/constants.ts

@@ -14,3 +14,12 @@ export const HOW_TO_MIGRATE_OPTIONS = {
 	DO_IT_FOR_ME: 'difm',
 	DO_IT_MYSELF: 'myself',
 };
+
+/**
+ * All Tracks events related to Stepper.
+ * Prefixed with `STEPPER_TRACKS_EVENT_[scope]_[action]` to avoid conflicts with other Tracks events.
+ * Example: `STEPPER_TRACKS_EVENT_STEP_NAV_SUBMIT` -> scope = `STEP_NAV`, action = `SUBMIT`
+ */
+export const STEPPER_TRACKS_EVENT_STEP_NAV_SUBMIT = 'calypso_signup_actions_submit_step';
+
+export const STEPPER_TRACKS_EVENTS = < const >[ STEPPER_TRACKS_EVENT_STEP_NAV_SUBMIT ];

client/landing/stepper/declarative-flow/internals/hooks/use-step-navigation-with-tracking/index.ts

@@ -1,5 +1,7 @@
 import { OnboardSelect } from '@automattic/data-stores';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { STEPPER_TRACKS_EVENT_STEP_NAV_SUBMIT } from 'calypso/landing/stepper/constants';
 import { ONBOARD_STORE } from 'calypso/landing/stepper/stores';
 import { recordSubmitStep } from '../../analytics/record-submit-step';
 import type { Flow, Navigate, ProvidedDependencies, StepperStep } from '../../types';
@@ -24,21 +26,23 @@ export const useStepNavigationWithTracking = ( {
 	);
 	const intent =
 		useSelect( ( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getIntent(), [] ) ?? '';
+	const tracksEventPropsFromFlow = flow.useTracksEventProps?.();
 
-	const shouldTrackSubmit = flow.use__Temporary__ShouldTrackEvent?.( 'submit' ) ?? false;
-
-	return {
-		...stepNavigation,
-		submit: ( providedDependencies: ProvidedDependencies = {}, ...params: string[] ) => {
-			shouldTrackSubmit &&
+	return useMemo(
+		() => ( {
+			...stepNavigation,
+			submit: ( providedDependencies: ProvidedDependencies = {}, ...params: string[] ) => {
 				recordSubmitStep(
 					providedDependencies,
 					intent,
 					flow.name,
 					currentStepRoute,
-					flow.variantSlug
+					flow.variantSlug,
+					tracksEventPropsFromFlow?.[ STEPPER_TRACKS_EVENT_STEP_NAV_SUBMIT ]
 				);
-			stepNavigation.submit?.( providedDependencies, ...params );
-		},
-	};
+				stepNavigation.submit?.( providedDependencies, ...params );
+			},
+		} ),
+		[ stepNavigation, intent, flow, currentStepRoute, tracksEventPropsFromFlow ]
+	);
 };

client/landing/stepper/declarative-flow/internals/types.ts

@@ -1,5 +1,6 @@
 import { StepperInternal } from '@automattic/data-stores';
 import React from 'react';
+import { STEPPER_TRACKS_EVENTS } from '../../constants';
 
 /**
  * This is the return type of useStepNavigation hook
@@ -106,6 +107,14 @@ export type UseSideEffectHook< FlowSteps extends StepperStep[] > = (
 	navigate: Navigate< FlowSteps >
 ) => void;
 
+/**
+ * Used for overriding props recorded by the default Tracks event loggers.
+ * Can pass any properties that should be recorded for the respective events.
+ */
+export type UseTracksEventPropsHook = () => {
+	[ key in ( typeof STEPPER_TRACKS_EVENTS )[ number ] ]?: Record< string, string | number | null >;
+};
+
 export type Flow = {
 	name: string;
 	/**
@@ -139,7 +148,7 @@ export type Flow = {
 	 * A hook that is called in the flow's root at every render. You can use this hook to setup side-effects, call other hooks, etc..
 	 */
 	useSideEffect?: UseSideEffectHook< ReturnType< Flow[ 'useSteps' ] > >;
-
+	useTracksEventProps?: UseTracksEventPropsHook;
 	/**
 	 * Temporary hook to allow gradual migration of flows to the globalised/default event tracking.
 	 * IMPORTANT: This hook will be removed in the future.

client/landing/stepper/types.ts

@@ -1,5 +1,4 @@
 /** Step */
-
 export type StepOptions = Record< string, unknown >;
 
 export interface Step {