Goals First: Add goals in the launchpad step `calypso_signup_step_s…

…tart` event (#98448)

* capture list of goals and is_goals_first flag in the build flow for launchpad step

* skip clearing goals from onboarding store since we need to capture them in launchpad step

* pass the goals-at-front-experiment to the launchpad step so we know if we are in the experiment

client/landing/stepper/declarative-flow/build.ts

@@ -1,15 +1,26 @@
+import { OnboardSelect } from '@automattic/data-stores';
 import { BUILD_FLOW } from '@automattic/onboarding';
+import { useSelect } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
+import { useMemo, useRef } from 'react';
 import { skipLaunchpad } from 'calypso/landing/stepper/utils/skip-launchpad';
 import { triggerGuidesForStep } from 'calypso/lib/guides/trigger-guides-for-step';
+import { useSelector } from 'calypso/state';
+import getInitialQueryArguments from 'calypso/state/selectors/get-initial-query-arguments';
+import { STEPPER_TRACKS_EVENT_SIGNUP_STEP_START } from '../constants';
 import { useExitFlow } from '../hooks/use-exit-flow';
 import { useSiteIdParam } from '../hooks/use-site-id-param';
 import { useSiteSlug } from '../hooks/use-site-slug';
+import { ONBOARD_STORE } from '../stores';
 import { useLaunchpadDecider } from './internals/hooks/use-launchpad-decider';
 import LaunchPad from './internals/steps-repository/launchpad';
 import Processing from './internals/steps-repository/processing-step';
 import { Flow, ProvidedDependencies } from './internals/types';
 
+function useGoalsAtFrontExperimentQueryParam() {
+	return Boolean( useSelector( getInitialQueryArguments )?.[ 'goals-at-front-experiment' ] );
+}
+
 const build: Flow = {
 	name: BUILD_FLOW,
 	get title() {
@@ -22,6 +33,32 @@ const build: Flow = {
 			{ slug: 'processing', component: Processing },
 		];
 	},
+	useTracksEventProps() {
+		const isGoalsAtFrontExperiment = useGoalsAtFrontExperimentQueryParam();
+		const goals = useSelect(
+			( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getGoals(),
+			[]
+		);
+
+		// we are only interested in the initial values and not when they values change
+		const initialGoals = useRef( goals );
+
+		return useMemo(
+			() => ( {
+				eventsProperties: {
+					[ STEPPER_TRACKS_EVENT_SIGNUP_STEP_START ]: {
+						...( isGoalsAtFrontExperiment && {
+							is_goals_first: 'true',
+						} ),
+						...( initialGoals.current.length && {
+							goals: initialGoals.current.join( ',' ),
+						} ),
+					},
+				},
+			} ),
+			[ isGoalsAtFrontExperiment, initialGoals ]
+		);
+	},
 
 	useStepNavigation( _currentStep, navigate ) {
 		const flowName = this.name;

client/landing/stepper/declarative-flow/site-setup-flow.ts

@@ -96,6 +96,7 @@ const siteSetupFlow: Flow = {
 	},
 	useStepNavigation( currentStep, navigate ) {
 		const isGoalsHoldout = useIsGoalsHoldout( currentStep );
+		const isGoalsAtFrontExperiment = useGoalsAtFrontExperimentQueryParam();
 
 		const intent = useSelect(
 			( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getIntent(),
@@ -222,6 +223,7 @@ const siteSetupFlow: Flow = {
 						redirectionUrl = addQueryArgs(
 							{
 								showLaunchpad: true,
+								...( isGoalsAtFrontExperiment && { 'goals-at-front-experiment': true } ),
 								...( skippedCheckout && { skippedCheckout: 1 } ),
 							},
 							to
@@ -247,7 +249,7 @@ const siteSetupFlow: Flow = {
 			navigate( 'processing' );
 
 			// Clean-up the store so that if onboard for new site will be launched it will be launched with no preselected values
-			resetOnboardStoreWithSkipFlags( [ 'skipPendingAction', 'skipIntent' ] );
+			resetOnboardStoreWithSkipFlags( [ 'skipPendingAction', 'skipIntent', 'skipGoals' ] );
 		};
 
 		const { getPostFlowUrl, initializeLaunchpadState } = useLaunchpadDecider( {

packages/data-stores/src/onboard/reducer.ts

@@ -386,9 +386,14 @@ const goals: Reducer< SiteGoal[], OnboardAction > = ( state = [], action ) => {
 	if ( action.type === 'CLEAR_DIFM_GOAL' ) {
 		return state.filter( ( goal ) => goal !== SiteGoal.DIFM );
 	}
+	if ( action.type === 'RESET_ONBOARD_STORE' && action?.skipFlags?.includes( 'skipGoals' ) ) {
+		return state;
+	}
+
 	if ( [ 'RESET_GOALS', 'RESET_ONBOARD_STORE' ].includes( action.type ) ) {
 		return [];
 	}
+
 	return state;
 };