cleanup

client/landing/stepper/declarative-flow/internals/hooks/use-sign-up-start-tracking/index.tsx

@@ -19,12 +19,10 @@ export const useSignUpStartTracking = ( { flow }: Props ) => {
 	const [ queryParams ] = useSearchParams();
 	const ref = queryParams.get( 'ref' ) || '';
 	const flowName = flow.name;
+	const flowVariant = flow.variantSlug;
 	const isSignupFlow = flow.isSignupFlow;
-	const extraProps = useSnakeCasedKeys( {
-		input: {
-			flowVariant: flow.variantSlug,
-			...flow.useTracksEventProps?.()[ STEPPER_TRACKS_EVENT_SIGNUP_START ],
-		},
+	const signupStartEventProps = useSnakeCasedKeys( {
+		input: flow.useTracksEventProps?.()[ STEPPER_TRACKS_EVENT_SIGNUP_START ],
 	} );
 
 	/**
@@ -50,6 +48,13 @@ export const useSignUpStartTracking = ( { flow }: Props ) => {
 			return;
 		}
 
-		recordSignupStart( { flow: flowName, ref, optionalProps: extraProps || {} } );
-	}, [ isSignupFlow, flowName, ref, extraProps ] );
+		recordSignupStart( {
+			flow: flowName,
+			ref,
+			optionalProps: {
+				...signupStartEventProps,
+				...( flowVariant && { flow_variant: flowVariant } ),
+			},
+		} );
+	}, [ isSignupFlow, flowName, ref, signupStartEventProps, flowVariant ] );
 };

client/landing/stepper/declarative-flow/internals/hooks/use-sign-up-start-tracking/test/index.tsx

@@ -135,7 +135,9 @@ describe( 'useSignUpTracking', () => {
 			const { rerender } = render( {
 				flow: {
 					...signUpFlow,
-					useSignupStartEventProps: () => ( { extra: 'props' } ),
+					useTracksEventProps: () => ( {
+						[ STEPPER_TRACKS_EVENT_SIGNUP_START ]: { extra: 'props' },
+					} ),
 				} satisfies Flow,
 			} );