Stepper: Apply extended props to calypso_signup_step_start (#93983)

client/landing/stepper/constants.ts

@@ -27,6 +27,7 @@ export const STEPPER_TRACKS_EVENT_STEP_NAV_GO_TO = 'calypso_signup_step_nav_go_t
 export const STEPPER_TRACKS_EVENT_STEP_NAV_EXIT_FLOW = 'calypso_signup_step_nav_exit_flow';
 export const STEPPER_TRACKS_EVENT_STEP_COMPLETE = 'calypso_signup_actions_complete_step';
 export const STEPPER_TRACKS_EVENT_SIGNUP_START = 'calypso_signup_start';
+export const STEPPER_TRACKS_EVENT_SIGNUP_STEP_START = 'calypso_signup_step_start';
 
 export const STEPPER_TRACKS_EVENTS_STEP_NAV = < const >[
 	STEPPER_TRACKS_EVENT_STEP_NAV_SUBMIT,
@@ -40,4 +41,5 @@ export const STEPPER_TRACKS_EVENTS = < const >[
 	...STEPPER_TRACKS_EVENTS_STEP_NAV,
 	STEPPER_TRACKS_EVENT_STEP_COMPLETE,
 	STEPPER_TRACKS_EVENT_SIGNUP_START,
+	STEPPER_TRACKS_EVENT_SIGNUP_STEP_START,
 ];

client/landing/stepper/declarative-flow/internals/analytics/record-step-start.ts

@@ -1,12 +1,13 @@
 import { resolveDeviceTypeByViewPort } from '@automattic/viewport';
+import { STEPPER_TRACKS_EVENT_SIGNUP_STEP_START } from 'calypso/landing/stepper/constants';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 
 const recordStepStart = (
 	flow: string,
 	step: string,
 	optionalProps?: { [ key: string ]: unknown }
 ) => {
-	recordTracksEvent( 'calypso_signup_step_start', {
+	recordTracksEvent( STEPPER_TRACKS_EVENT_SIGNUP_STEP_START, {
 		flow,
 		step,
 		device: resolveDeviceTypeByViewPort(),

client/landing/stepper/declarative-flow/internals/components/step-route/hooks/use-step-route-tracking/index.tsx

@@ -2,6 +2,7 @@
 
 import { isAnyHostingFlow } from '@automattic/onboarding';
 import { useEffect, useRef } from '@wordpress/element';
+import { STEPPER_TRACKS_EVENT_SIGNUP_STEP_START } from 'calypso/landing/stepper/constants';
 import { getStepOldSlug } from 'calypso/landing/stepper/declarative-flow/helpers/get-step-old-slug';
 import { getAssemblerSource } from 'calypso/landing/stepper/declarative-flow/internals/analytics/record-design';
 import recordStepComplete, {
@@ -12,13 +13,15 @@ import { useIntent } from 'calypso/landing/stepper/hooks/use-intent';
 import { useSelectedDesign } from 'calypso/landing/stepper/hooks/use-selected-design';
 import { useSiteData } from 'calypso/landing/stepper/hooks/use-site-data';
 import kebabCase from 'calypso/landing/stepper/utils/kebabCase';
+import useSnakeCasedKeys from 'calypso/landing/stepper/utils/use-snake-cased-keys';
 import { recordPageView } from 'calypso/lib/analytics/page-view';
 import {
 	getSignupCompleteFlowNameAndClear,
 	getSignupCompleteStepNameAndClear,
 } from 'calypso/signup/storageUtils';
 import { useSelector } from 'calypso/state';
 import { isRequestingSite } from 'calypso/state/sites/selectors';
+import type { Flow } from 'calypso/landing/stepper/declarative-flow/internals/types';
 
 /**
  * We wait for the site to be fetched before tracking the step route when a site ID/slug are defined in the params.
@@ -35,26 +38,25 @@ const useHasRequestedSelectedSite = () => {
 };
 
 interface Props {
-	flowName: string;
+	flow: Flow;
 	stepSlug: string;
-	flowVariantSlug?: string;
 	skipStepRender?: boolean;
 }
 
 /**
  * Hook to track the step route in the declarative flow.
  */
-export const useStepRouteTracking = ( {
-	flowName,
-	stepSlug,
-	flowVariantSlug,
-	skipStepRender,
-}: Props ) => {
+export const useStepRouteTracking = ( { flow, stepSlug, skipStepRender }: Props ) => {
 	const intent = useIntent();
 	const design = useSelectedDesign();
 	const hasRequestedSelectedSite = useHasRequestedSelectedSite();
 	const stepCompleteEventPropsRef = useRef< RecordStepCompleteProps | null >( null );
 	const pathname = window.location.pathname;
+	const flowVariantSlug = flow.variantSlug;
+	const flowName = flow.name;
+	const signupStepStartProps = useSnakeCasedKeys( {
+		input: flow.useTracksEventProps?.()?.[ STEPPER_TRACKS_EVENT_SIGNUP_STEP_START ],
+	} );
 
 	/**
 	 * Cleanup effect to record step-complete event when `StepRoute` unmounts.
@@ -89,6 +91,7 @@ export const useStepRouteTracking = ( {
 				...( design && { assembler_source: getAssemblerSource( design ) } ),
 				...( flowVariantSlug && { flow_variant: flowVariantSlug } ),
 				...( skipStepRender && { skip_step_render: skipStepRender } ),
+				...signupStepStartProps,
 			} );
 
 			// Apply the props to record in the exit/step-complete event. We only record this if start event gets recorded.
@@ -99,14 +102,14 @@ export const useStepRouteTracking = ( {
 			};
 
 			const stepOldSlug = getStepOldSlug( stepSlug );
-
 			if ( stepOldSlug ) {
 				recordStepStart( flowName, kebabCase( stepOldSlug ), {
 					intent,
 					is_in_hosting_flow: isAnyHostingFlow( flowName ),
 					...( design && { assembler_source: getAssemblerSource( design ) } ),
 					...( flowVariantSlug && { flow_variant: flowVariantSlug } ),
 					...( skipStepRender && { skip_step_render: skipStepRender } ),
+					...signupStepStartProps,
 				} );
 			}
 		}

client/landing/stepper/declarative-flow/internals/components/step-route/index.tsx

@@ -29,9 +29,8 @@ const StepRoute = ( { step, flow, showWooLogo, renderStep, navigate }: StepRoute
 	const useBuiltItInAuth = flow.__experimentalUseBuiltinAuth;
 
 	useStepRouteTracking( {
-		flowName: flow.name,
+		flow,
 		stepSlug: step.slug,
-		flowVariantSlug: flow.variantSlug,
 		skipStepRender: shouldSkipRender,
 	} );