Goals First experiment should only be assigned in onboarding flow (#9…

…7438)

client/landing/stepper/declarative-flow/helpers/use-goals-first-experiment.ts

@@ -1,5 +1,7 @@
 import { isEnabled } from '@automattic/calypso-config';
-import { useEffect, useState } from 'react';
+import { ONBOARDING_FLOW } from '@automattic/onboarding';
+import { useEffect, useMemo, useState } from 'react';
+import { getFlowFromURL } from '../../utils/get-flow-from-url';
 
 /**
  * Check whether the user should have the "goals first" onboarding experience.
@@ -12,19 +14,22 @@ import { useEffect, useState } from 'react';
  * i.e. when the feature flag is disabled.
  */
 export function useGoalsFirstExperiment(): [ boolean, boolean ] {
+	const flow = useMemo( () => getFlowFromURL(), [] );
+	const isEligible = isEnabled( 'onboarding/goals-first' ) && flow === ONBOARDING_FLOW;
+
 	const [ isLoading, setIsLoading ] = useState( true );
 	useEffect( () => {
-		if ( ! isEnabled( 'onboarding/goals-first' ) ) {
+		if ( ! isEligible ) {
 			return;
 		}
 
 		const id = setTimeout( () => setIsLoading( false ), 700 );
 		return () => {
 			clearTimeout( id );
 		};
-	}, [] );
+	}, [ isEligible ] );
 
-	if ( ! isEnabled( 'onboarding/goals-first' ) ) {
+	if ( ! isEligible ) {
 		return [ false, false ];
 	}
 

client/landing/stepper/index.tsx

@@ -16,7 +16,7 @@ import { useDispatch } from '@wordpress/data';
 import defaultCalypsoI18n from 'i18n-calypso';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
-import { BrowserRouter, matchPath } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import { requestAllBlogsAccess } from 'wpcom-proxy-request';
 import { setupErrorLogger } from 'calypso/boot/common';
 import { setupLocale } from 'calypso/boot/locale';
@@ -43,6 +43,7 @@ import { USER_STORE } from './stores';
 import { setupWpDataDebug } from './utils/devtools';
 import { enhanceFlowWithAuth } from './utils/enhanceFlowWithAuth';
 import redirectPathIfNecessary from './utils/flow-redirect-handler';
+import { getFlowFromURL } from './utils/get-flow-from-url';
 import { startStepperPerformanceTracking } from './utils/performance-tracking';
 import { WindowLocaleEffectManager } from './utils/window-locale-effect-manager';
 import type { Flow } from './declarative-flow/internals/types';
@@ -79,13 +80,6 @@ interface AppWindow extends Window {
 
 const DEFAULT_FLOW = 'site-setup';
 
-const getFlowFromURL = () => {
-	const fromPath = matchPath( { path: '/setup/:flow/*' }, window.location.pathname )?.params?.flow;
-	// backward support the old Stepper URL structure (?flow=something)
-	const fromQuery = new URLSearchParams( window.location.search ).get( 'flow' );
-	return fromPath || fromQuery;
-};
-
 const getSiteIdFromURL = () => {
 	const siteId = new URLSearchParams( window.location.search ).get( 'siteId' );
 	return siteId ? Number( siteId ) : null;

client/landing/stepper/utils/get-flow-from-url.ts

@@ -0,0 +1,8 @@
+import { matchPath } from 'react-router-dom';
+
+export const getFlowFromURL = () => {
+	const fromPath = matchPath( { path: '/setup/:flow/*' }, window.location.pathname )?.params?.flow;
+	// backward support the old Stepper URL structure (?flow=something)
+	const fromQuery = new URLSearchParams( window.location.search ).get( 'flow' );
+	return fromPath || fromQuery;
+};