From 182f1cbad3ce370d9f6b662e86ce513b01173192 Mon Sep 17 00:00:00 2001 From: vykes-mac Date: Thu, 9 Jan 2025 16:05:28 -0500 Subject: [PATCH 1/4] provide a memoized based that's not dependent on goals to prevent event from firing each time goals are selected --- .../landing/stepper/declarative-flow/onboarding.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/client/landing/stepper/declarative-flow/onboarding.ts b/client/landing/stepper/declarative-flow/onboarding.ts index c03bb939a7318..96f213f8db8ca 100644 --- a/client/landing/stepper/declarative-flow/onboarding.ts +++ b/client/landing/stepper/declarative-flow/onboarding.ts @@ -57,7 +57,7 @@ const onboarding: Flow = { [] ); - return useMemo( + const memoizedBase = useMemo( () => ( { [ STEPPER_TRACKS_EVENT_SIGNUP_START ]: { is_goals_first: isGoalsAtFrontExperiment.toString(), @@ -68,11 +68,18 @@ const onboarding: Flow = { ...( isGoalsAtFrontExperiment && { is_goals_first: isGoalsAtFrontExperiment.toString(), } ), - ...( goals.length && { goals: goals.join( ',' ) } ), }, } ), - [ isGoalsAtFrontExperiment, userIsLoggedIn, goals ] + [ isGoalsAtFrontExperiment, userIsLoggedIn ] ); + + return { + ...memoizedBase, + [ STEPPER_TRACKS_EVENT_SIGNUP_STEP_START ]: { + ...memoizedBase[ STEPPER_TRACKS_EVENT_SIGNUP_STEP_START ], + ...( goals.length && { goals: goals.join( ',' ) } ), + }, + }; }, useSteps() { // We have already checked the value has loaded in useAssertConditions From eed525a639d03485c2571258e797bb0317394447 Mon Sep 17 00:00:00 2001 From: vykes-mac Date: Thu, 9 Jan 2025 16:31:05 -0500 Subject: [PATCH 2/4] stringify the goals --- client/landing/stepper/declarative-flow/onboarding.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/landing/stepper/declarative-flow/onboarding.ts b/client/landing/stepper/declarative-flow/onboarding.ts index 96f213f8db8ca..0919f5b0c0da3 100644 --- a/client/landing/stepper/declarative-flow/onboarding.ts +++ b/client/landing/stepper/declarative-flow/onboarding.ts @@ -57,6 +57,8 @@ const onboarding: Flow = { [] ); + const stringifiedGoals = goals.length && goals?.join( ',' ); + const memoizedBase = useMemo( () => ( { [ STEPPER_TRACKS_EVENT_SIGNUP_START ]: { @@ -77,7 +79,7 @@ const onboarding: Flow = { ...memoizedBase, [ STEPPER_TRACKS_EVENT_SIGNUP_STEP_START ]: { ...memoizedBase[ STEPPER_TRACKS_EVENT_SIGNUP_STEP_START ], - ...( goals.length && { goals: goals.join( ',' ) } ), + ...( stringifiedGoals && { goals: stringifiedGoals } ), }, }; }, From 758b641f781a19053f59afb8ed4655072f8eaa13 Mon Sep 17 00:00:00 2001 From: vykes-mac Date: Thu, 9 Jan 2025 16:42:59 -0500 Subject: [PATCH 3/4] use only the initial goal reference to trigger event --- .../stepper/declarative-flow/onboarding.ts | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/client/landing/stepper/declarative-flow/onboarding.ts b/client/landing/stepper/declarative-flow/onboarding.ts index 0919f5b0c0da3..8ac8ea3bec8fa 100644 --- a/client/landing/stepper/declarative-flow/onboarding.ts +++ b/client/landing/stepper/declarative-flow/onboarding.ts @@ -2,7 +2,7 @@ import { OnboardSelect, Onboard, UserSelect } from '@automattic/data-stores'; import { ONBOARDING_FLOW, clearStepPersistedState } from '@automattic/onboarding'; import { useDispatch, useSelect } from '@wordpress/data'; import { addQueryArgs, getQueryArg, getQueryArgs, removeQueryArgs } from '@wordpress/url'; -import { useState, useMemo, useEffect } from 'react'; +import { useState, useMemo, useEffect, useRef } from 'react'; import { SIGNUP_DOMAIN_ORIGIN } from 'calypso/lib/analytics/signup'; import { pathToUrl } from 'calypso/lib/url'; import { @@ -57,9 +57,9 @@ const onboarding: Flow = { [] ); - const stringifiedGoals = goals.length && goals?.join( ',' ); + const initialGoals = useRef( goals ); - const memoizedBase = useMemo( + return useMemo( () => ( { [ STEPPER_TRACKS_EVENT_SIGNUP_START ]: { is_goals_first: isGoalsAtFrontExperiment.toString(), @@ -70,18 +70,13 @@ const onboarding: Flow = { ...( isGoalsAtFrontExperiment && { is_goals_first: isGoalsAtFrontExperiment.toString(), } ), + ...( initialGoals.current.length && { + goals: initialGoals.current.join( ',' ), + } ), }, } ), - [ isGoalsAtFrontExperiment, userIsLoggedIn ] + [ isGoalsAtFrontExperiment, userIsLoggedIn, initialGoals ] ); - - return { - ...memoizedBase, - [ STEPPER_TRACKS_EVENT_SIGNUP_STEP_START ]: { - ...memoizedBase[ STEPPER_TRACKS_EVENT_SIGNUP_STEP_START ], - ...( stringifiedGoals && { goals: stringifiedGoals } ), - }, - }; }, useSteps() { // We have already checked the value has loaded in useAssertConditions From c45832e4ba23daaca0bef7283462b5f8e39e2b9c Mon Sep 17 00:00:00 2001 From: vykes-mac Date: Thu, 9 Jan 2025 16:51:21 -0500 Subject: [PATCH 4/4] add comment for clarity --- client/landing/stepper/declarative-flow/onboarding.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/client/landing/stepper/declarative-flow/onboarding.ts b/client/landing/stepper/declarative-flow/onboarding.ts index 8ac8ea3bec8fa..8d3c9f086aa8e 100644 --- a/client/landing/stepper/declarative-flow/onboarding.ts +++ b/client/landing/stepper/declarative-flow/onboarding.ts @@ -57,6 +57,7 @@ const onboarding: Flow = { [] ); + // we are only interested in the initial goals value when the user enters the goals step const initialGoals = useRef( goals ); return useMemo(