Disable calypso_stepper_flow_start track when flows starts only with …

…lang

client/landing/stepper/declarative-flow/internals/hooks/use-flow-analytics/index.tsx

@@ -7,7 +7,10 @@ export const DURATION = 20 * 60 * 1000; // 20 min
 interface Params {
 	flow: string | null;
 	variant?: string;
-	step: string;
+	step: string | null;
+}
+interface Options {
+	enabled: boolean;
 }
 
 interface SessionKeys {
@@ -56,7 +59,7 @@ const startSession = ( keys: SessionKeys, extra: Record< string, any > ) => {
  * Same flow with same parameters will be tracked only once whitin the DURATION time
  * returns void
  */
-export const useFlowAnalytics = ( params: Params ) => {
+export const useFlowAnalytics = ( params: Params, options: Options = { enabled: true } ) => {
 	const [ search ] = useSearchParams();
 	const { flow, step, variant } = params;
 	const ref = search.get( 'ref' );
@@ -85,8 +88,8 @@ export const useFlowAnalytics = ( params: Params ) => {
 	);
 
 	useEffect( () => {
-		if ( ! flowStarted && flow ) {
+		if ( ! flowStarted && flow && step && options.enabled ) {
 			startSession( sessionKeys, extraTrackingParams );
 		}
-	}, [ extraTrackingParams, flow, flowStarted, sessionKeys ] );
+	}, [ extraTrackingParams, flow, flowStarted, sessionKeys, step, options.enabled ] );
 };

client/landing/stepper/declarative-flow/internals/hooks/use-flow-analytics/test/index.tsx

@@ -14,10 +14,13 @@ describe( 'useFlowAnalytics', () => {
 		( { initialEntries } ) =>
 		( { children } ) => <MemoryRouter initialEntries={ initialEntries }>{ children }</MemoryRouter>;
 
-	const render = ( options = { initialEntries: [ '/setup/flow' ] } ) => {
-		const Wrapper = buildWrapper( options );
+	const render = (
+		renderOptions = { initialEntries: [ '/setup/flow' ] },
+		hookOptions: Parameters< typeof useFlowAnalytics >[ 1 ] = { enabled: true }
+	) => {
+		const Wrapper = buildWrapper( renderOptions );
 		return renderHook(
-			() => useFlowAnalytics( { flow: 'flow', step: 'step', variant: 'variant' } ),
+			() => useFlowAnalytics( { flow: 'flow', step: 'step', variant: 'variant' }, hookOptions ),
 			{ wrapper: Wrapper }
 		);
 	};
@@ -75,6 +78,12 @@ describe( 'useFlowAnalytics', () => {
 		expect( recordFlowStart ).toHaveBeenCalledTimes( 1 );
 	} );
 
+	it( 'doesn`t track the flow when the hook is disabled', () => {
+		render( { initialEntries: [ '/setup/flow' ] }, { enabled: false } );
+
+		expect( recordFlowStart ).not.toHaveBeenCalled();
+	} );
+
 	it( 'tracks the same flow after 20 min', () => {
 		render();
 		jest.advanceTimersByTime( DURATION + 100 );

client/landing/stepper/declarative-flow/internals/index.tsx

@@ -75,10 +75,14 @@ export const FlowRenderer: React.FC< { flow: Flow } > = ( { flow } ) => {
 	const currentStepRoute = params.step || '';
 	const isLoggedIn = useSelector( isUserLoggedIn );
 	const { lang = null } = useParams();
+	const isValidStep = params.step != null && stepPaths.includes( params.step );
 
 	// Start tracking performance for this step.
 	useStartStepperPerformanceTracking( params.flow || '', currentStepRoute );
-	useFlowAnalytics( { flow: params.flow, step: currentStepRoute, variant: flow.variantSlug } );
+	useFlowAnalytics(
+		{ flow: params.flow, step: params.step, variant: flow.variantSlug },
+		{ enabled: isValidStep }
+	);
 
 	const { __ } = useI18n();
 	useSaveQueryParams();