Stepper: Make framework tracking of submit-step the default. Updates …

…remaining flows (#93319)
Automattic · Aug 22, 2024 · e27db4a · e27db4a
1 parent eb03c56
commit e27db4a
Show file tree

Hide file tree

Showing 36 changed files with 50 additions and 137 deletions.
diff --git a/client/landing/stepper/declarative-flow/ai-assembler.ts b/client/landing/stepper/declarative-flow/ai-assembler.ts
@@ -12,7 +12,6 @@ import { getCurrentUserSiteCount, isUserLoggedIn } from 'calypso/state/current-u
 import { getTheme } from 'calypso/state/themes/selectors';
 import { ONBOARD_STORE, SITE_STORE } from '../stores';
 import { stepsWithRequiredLogin } from '../utils/steps-with-required-login';
-import { recordSubmitStep } from './internals/analytics/record-submit-step';
 import { STEPS } from './internals/steps';
 import { ProcessingResult } from './internals/steps-repository/processing-step/constants';
 import {
@@ -80,11 +79,6 @@ const withAIAssemblerFlow: Flow = {
 	},
 
 	useStepNavigation( _currentStep, navigate ) {
-		const flowName = this.name;
-		const intent = useSelect(
-			( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getIntent(),
-			[]
-		);
 		const siteId = useSelect(
 			( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getSelectedSite(),
 			[]
@@ -169,7 +163,6 @@ const withAIAssemblerFlow: Flow = {
 			providedDependencies: ProvidedDependencies = {},
 			...results: string[]
 		) => {
-			recordSubmitStep( providedDependencies, intent, flowName, _currentStep );
 			const selectedSiteSlug = providedDependencies?.siteSlug as string;
 			const selectedSiteId = providedDependencies?.siteId as string;
 

diff --git a/client/landing/stepper/declarative-flow/assembler-first-flow.ts b/client/landing/stepper/declarative-flow/assembler-first-flow.ts
@@ -11,7 +11,6 @@ import { getTheme } from 'calypso/state/themes/selectors';
 import { useSiteData } from '../hooks/use-site-data';
 import { ONBOARD_STORE, SITE_STORE } from '../stores';
 import { stepsWithRequiredLogin } from '../utils/steps-with-required-login';
-import { recordSubmitStep } from './internals/analytics/record-submit-step';
 import { STEPS } from './internals/steps';
 import { ProcessingResult } from './internals/steps-repository/processing-step/constants';
 import {
@@ -80,11 +79,6 @@ const assemblerFirstFlow: Flow = {
 	},
 
 	useStepNavigation( _currentStep, navigate ) {
-		const flowName = this.name;
-		const intent = useSelect(
-			( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getIntent(),
-			[]
-		);
 		const { setPendingAction, setSelectedSite } = useDispatch( ONBOARD_STORE );
 		const { saveSiteSettings, setIntentOnSite } = useDispatch( SITE_STORE );
 		const { site, siteSlug, siteId } = useSiteData();
@@ -133,8 +127,6 @@ const assemblerFirstFlow: Flow = {
 			providedDependencies: ProvidedDependencies = {},
 			...results: string[]
 		) => {
-			recordSubmitStep( providedDependencies, intent, flowName, _currentStep );
-
 			switch ( _currentStep ) {
 				case 'check-sites': {
 					// Check for unlaunched sites

diff --git a/client/landing/stepper/declarative-flow/build.ts b/client/landing/stepper/declarative-flow/build.ts
@@ -4,7 +4,6 @@ import { skipLaunchpad } from 'calypso/landing/stepper/utils/skip-launchpad';
 import { triggerGuidesForStep } from 'calypso/lib/guides/trigger-guides-for-step';
 import { useSiteIdParam } from '../hooks/use-site-id-param';
 import { useSiteSlug } from '../hooks/use-site-slug';
-import { recordSubmitStep } from './internals/analytics/record-submit-step';
 import LaunchPad from './internals/steps-repository/launchpad';
 import Processing from './internals/steps-repository/processing-step';
 import { Flow, ProvidedDependencies } from './internals/types';
@@ -30,8 +29,6 @@ const build: Flow = {
 		triggerGuidesForStep( flowName, _currentStep );
 
 		const submit = ( providedDependencies: ProvidedDependencies = {} ) => {
-			recordSubmitStep( providedDependencies, '', flowName, _currentStep );
-
 			switch ( _currentStep ) {
 				case 'processing':
 					if ( providedDependencies?.goToHome && providedDependencies?.siteSlug ) {

diff --git a/client/landing/stepper/declarative-flow/connect-domain.ts b/client/landing/stepper/declarative-flow/connect-domain.ts
@@ -152,7 +152,6 @@ const connectDomain: Flow = {
 			submit,
 		};
 	},
-	use__Temporary__ShouldTrackEvent: ( event ) => 'submit' === event,
 };
 
 export default connectDomain;
diff --git a/client/landing/stepper/declarative-flow/copy-site.tsx b/client/landing/stepper/declarative-flow/copy-site.tsx
@@ -12,7 +12,6 @@ import {
 	setSignupCompleteFlowName,
 } from 'calypso/signup/storageUtils';
 import { useSiteCopy } from '../hooks/use-site-copy';
-import { recordSubmitStep } from './internals/analytics/record-submit-step';
 import AutomatedCopySite from './internals/steps-repository/automated-copy-site';
 import CreateSite from './internals/steps-repository/create-site';
 import DomainsStep from './internals/steps-repository/domains';
@@ -108,8 +107,6 @@ const copySite: Flow = {
 		const urlQueryParams = useQuery();
 
 		const submit = async ( providedDependencies: ProvidedDependencies = {} ) => {
-			recordSubmitStep( providedDependencies, '', flowName, _currentStepSlug );
-
 			switch ( _currentStepSlug ) {
 				case 'domains': {
 					return navigate( 'create-site', {

diff --git a/client/landing/stepper/declarative-flow/design-first.ts b/client/landing/stepper/declarative-flow/design-first.ts
@@ -5,7 +5,6 @@ import { useEffect } from '@wordpress/element';
 import { addQueryArgs, getQueryArg } from '@wordpress/url';
 import { translate } from 'i18n-calypso';
 import { useSelector } from 'react-redux';
-import { recordSubmitStep } from 'calypso/landing/stepper/declarative-flow/internals/analytics/record-submit-step';
 import { redirect } from 'calypso/landing/stepper/declarative-flow/internals/steps-repository/import/util';
 import {
 	type AssertConditionResult,
@@ -92,8 +91,6 @@ const designFirst: Flow = {
 		}, [ siteSlug, setIntentOnSite, isSiteLaunched ] );
 
 		async function submit( providedDependencies: ProvidedDependencies = {} ) {
-			recordSubmitStep( providedDependencies, '', flowName, currentStep );
-
 			switch ( currentStep ) {
 				case 'check-sites':
 					// Check for unlaunched sites

diff --git a/client/landing/stepper/declarative-flow/domain-transfer.ts b/client/landing/stepper/declarative-flow/domain-transfer.ts
@@ -11,7 +11,6 @@ import {
 import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
 import { USER_STORE } from '../stores';
 import { useLoginUrl } from '../utils/path';
-import { recordSubmitStep } from './internals/analytics/record-submit-step';
 import {
 	Flow,
 	ProvidedDependencies,
@@ -70,8 +69,6 @@ const domainTransfer: Flow = {
 		} );
 
 		const submit = ( providedDependencies: ProvidedDependencies = {} ) => {
-			recordSubmitStep( providedDependencies, '', flowName, _currentStepSlug );
-
 			switch ( _currentStepSlug ) {
 				case 'intro':
 					clearSignupDestinationCookie();

diff --git a/client/landing/stepper/declarative-flow/domain-user-transfer.ts b/client/landing/stepper/declarative-flow/domain-user-transfer.ts
@@ -1,6 +1,5 @@
 import { useEffect } from '@wordpress/element';
 import { translate } from 'i18n-calypso';
-import { recordSubmitStep } from 'calypso/landing/stepper/declarative-flow/internals/analytics/record-submit-step';
 import { redirect } from 'calypso/landing/stepper/declarative-flow/internals/steps-repository/import/util';
 import {
 	AssertConditionResult,
@@ -23,10 +22,7 @@ const domainUserTransfer: Flow = {
 	},
 
 	useStepNavigation( currentStep, navigate ) {
-		const flowName = this.name;
-
 		function submit( providedDependencies: ProvidedDependencies = {} ) {
-			recordSubmitStep( providedDependencies, '', flowName, currentStep );
 			switch ( currentStep ) {
 				case 'domain-contact-info':
 					return window.location.assign(

diff --git a/client/landing/stepper/declarative-flow/entrepreneur-flow.ts b/client/landing/stepper/declarative-flow/entrepreneur-flow.ts
@@ -8,7 +8,6 @@ import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
 import { useFlowLocale } from '../hooks/use-flow-locale';
 import { USER_STORE, ONBOARD_STORE } from '../stores';
 import { getLoginUrl } from '../utils/path';
-import { recordSubmitStep } from './internals/analytics/record-submit-step';
 import { STEPS } from './internals/steps';
 import { ProcessingResult } from './internals/steps-repository/processing-step/constants';
 import { ENTREPRENEUR_TRIAL_SURVEY_KEY } from './internals/steps-repository/segmentation-survey';
@@ -78,8 +77,6 @@ const entrepreneurFlow: Flow = {
 		};
 
 		function submit( providedDependencies: ProvidedDependencies = {}, ...params: string[] ) {
-			recordSubmitStep( providedDependencies, '' /* intent */, flowName, currentStep );
-
 			switch ( currentStep ) {
 				case SEGMENTATION_SURVEY_SLUG: {
 					setIsMigrationFlow( !! providedDependencies.isMigrationFlow );

diff --git a/client/landing/stepper/declarative-flow/free-post-setup.ts b/client/landing/stepper/declarative-flow/free-post-setup.ts
@@ -50,7 +50,6 @@ const freePostSetup: Flow = {
 
 		return { goNext, goBack, goToStep, submit };
 	},
-	use__Temporary__ShouldTrackEvent: ( event ) => 'submit' === event,
 };
 
 export default freePostSetup;
diff --git a/client/landing/stepper/declarative-flow/free.ts b/client/landing/stepper/declarative-flow/free.ts
@@ -16,7 +16,6 @@ import { useSiteIdParam } from '../hooks/use-site-id-param';
 import { useSiteSlug } from '../hooks/use-site-slug';
 import { ONBOARD_STORE } from '../stores';
 import { stepsWithRequiredLogin } from '../utils/steps-with-required-login';
-import { recordSubmitStep } from './internals/analytics/record-submit-step';
 import { STEPS } from './internals/steps';
 import { ProcessingResult } from './internals/steps-repository/processing-step/constants';
 import { Flow, ProvidedDependencies } from './internals/types';
@@ -68,8 +67,6 @@ const free: Flow = {
 		};
 
 		const submit = ( providedDependencies: ProvidedDependencies = {}, ...results: string[] ) => {
-			recordSubmitStep( providedDependencies, '', flowName, _currentStep );
-
 			switch ( _currentStep ) {
 				case 'freeSetup':
 					return navigate( 'create-site' );

diff --git a/client/landing/stepper/declarative-flow/hundred-year-plan.ts b/client/landing/stepper/declarative-flow/hundred-year-plan.ts
@@ -11,7 +11,6 @@ import {
 import { SiteId, SiteSlug } from 'calypso/types';
 import { ONBOARD_STORE, USER_STORE } from '../stores';
 import { stepsWithRequiredLogin } from '../utils/steps-with-required-login';
-import { recordSubmitStep } from './internals/analytics/record-submit-step';
 import type { ProvidedDependencies, Flow } from './internals/types';
 
 const HundredYearPlanFlow: Flow = {
@@ -88,8 +87,6 @@ const HundredYearPlanFlow: Flow = {
 		const { setPlanCartItem, setPendingAction } = useDispatch( ONBOARD_STORE );
 
 		function submit( providedDependencies: ProvidedDependencies = {} ) {
-			recordSubmitStep( providedDependencies, '', flowName, _currentStep );
-
 			const updateCartForExistingSite = async () => {
 				if ( ! providedDependencies?.siteSlug || ! providedDependencies?.siteId ) {
 					return;

diff --git a/client/landing/stepper/declarative-flow/link-in-bio-post-setup.ts b/client/landing/stepper/declarative-flow/link-in-bio-post-setup.ts
@@ -1,9 +1,11 @@
+import { Onboard } from '@automattic/data-stores';
 import { LINK_IN_BIO_POST_SETUP_FLOW } from '@automattic/onboarding';
+import { useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 import { translate } from 'i18n-calypso';
 import { useSiteSlug } from '../hooks/use-site-slug';
-import { recordSubmitStep } from './internals/analytics/record-submit-step';
+import { ONBOARD_STORE } from '../stores';
 import LinkInBioPostSetup from './internals/steps-repository/link-in-bio-post-setup';
-import { ProvidedDependencies } from './internals/types';
 import type { Flow } from './internals/types';
 
 const linkInBioPostSetup: Flow = {
@@ -15,14 +17,18 @@ const linkInBioPostSetup: Flow = {
 	useSteps() {
 		return [ { slug: 'linkInBioPostSetup', component: LinkInBioPostSetup } ];
 	},
+	useSideEffect() {
+		const { setIntent } = useDispatch( ONBOARD_STORE );
+
+		useEffect( () => {
+			setIntent( Onboard.SiteIntent.LinkInBioPostSetup );
+		}, [] );
+	},
 
 	useStepNavigation( currentStep ) {
-		const flowName = this.name;
 		const siteSlug = useSiteSlug();
 
-		function submit( providedDependencies: ProvidedDependencies = {} ) {
-			recordSubmitStep( providedDependencies, 'link-in-bio-post-setup', flowName, currentStep );
-
+		function submit() {
 			switch ( currentStep ) {
 				case 'linkInBioPostSetup':
 					return window.location.assign( `/setup/link-in-bio/launchpad?siteSlug=${ siteSlug }` );

diff --git a/client/landing/stepper/declarative-flow/link-in-bio-tld.ts b/client/landing/stepper/declarative-flow/link-in-bio-tld.ts
@@ -12,7 +12,6 @@ import {
 import { useSiteIdParam } from '../hooks/use-site-id-param';
 import { useSiteSlug } from '../hooks/use-site-slug';
 import { stepsWithRequiredLogin } from '../utils/steps-with-required-login';
-import { recordSubmitStep } from './internals/analytics/record-submit-step';
 import CreateSite from './internals/steps-repository/create-site';
 import DesignCarousel from './internals/steps-repository/design-carousel';
 import DomainsStep from './internals/steps-repository/domains';
@@ -48,8 +47,6 @@ const linkInBio: Flow = {
 		triggerGuidesForStep( flowName, _currentStepSlug );
 
 		const submit = ( providedDependencies: ProvidedDependencies = {} ) => {
-			recordSubmitStep( providedDependencies, '', flowName, _currentStepSlug );
-
 			switch ( _currentStepSlug ) {
 				case 'domains':
 					clearSignupDestinationCookie();

diff --git a/client/landing/stepper/declarative-flow/link-in-bio.ts b/client/landing/stepper/declarative-flow/link-in-bio.ts
@@ -16,7 +16,6 @@ import { useSiteIdParam } from '../hooks/use-site-id-param';
 import { useSiteSlug } from '../hooks/use-site-slug';
 import { USER_STORE, ONBOARD_STORE } from '../stores';
 import { stepsWithRequiredLogin } from '../utils/steps-with-required-login';
-import { recordSubmitStep } from './internals/analytics/record-submit-step';
 import type { Flow, ProvidedDependencies } from './internals/types';
 
 const linkInBio: Flow = {
@@ -77,8 +76,6 @@ const linkInBio: Flow = {
 		triggerGuidesForStep( flowName, _currentStepSlug );
 
 		const submit = ( providedDependencies: ProvidedDependencies = {} ) => {
-			recordSubmitStep( providedDependencies, '', flowName, _currentStepSlug );
-
 			switch ( _currentStepSlug ) {
 				case 'intro':
 					clearSignupDestinationCookie();

diff --git a/client/landing/stepper/declarative-flow/migration-signup.ts b/client/landing/stepper/declarative-flow/migration-signup.ts
@@ -10,11 +10,10 @@ import { useSiteSlugParam } from '../hooks/use-site-slug-param';
 import { USER_STORE, ONBOARD_STORE, SITE_STORE } from '../stores';
 import { goToCheckout } from '../utils/checkout';
 import { stepsWithRequiredLogin } from '../utils/steps-with-required-login';
-import { recordSubmitStep } from './internals/analytics/record-submit-step';
 import { STEPS } from './internals/steps';
 import { type SiteMigrationIdentifyAction } from './internals/steps-repository/site-migration-identify';
 import type { Flow, ProvidedDependencies } from './internals/types';
-import type { OnboardSelect, SiteSelect, UserSelect } from '@automattic/data-stores';
+import type { SiteSelect, UserSelect } from '@automattic/data-stores';
 
 const FLOW_NAME = MIGRATION_SIGNUP_FLOW;
 
@@ -71,11 +70,6 @@ const migrationSignup: Flow = {
 	},
 
 	useStepNavigation( currentStep, navigate ) {
-		const flowName = this.name;
-		const intent = useSelect(
-			( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getIntent(),
-			[]
-		);
 		const siteSlugParam = useSiteSlugParam();
 		const urlQueryParams = useQuery();
 		const fromQueryParam = urlQueryParams.get( 'from' );
@@ -87,7 +81,6 @@ const migrationSignup: Flow = {
 
 		// TODO - We may need to add `...params: string[]` back once we start adding more steps.
 		function submit( providedDependencies: ProvidedDependencies = {} ) {
-			recordSubmitStep( providedDependencies, intent, flowName, currentStep );
 			const siteSlug = ( providedDependencies?.siteSlug as string ) || siteSlugParam || '';
 			const siteId = getSiteIdBySlug( siteSlug ) || urlQueryParams.get( 'siteId' );
 

diff --git a/client/landing/stepper/declarative-flow/migration/index.tsx b/client/landing/stepper/declarative-flow/migration/index.tsx
@@ -266,6 +266,4 @@ export default {
 
 		return stepHandlers[ currentStep ];
 	},
-
-	use__Temporary__ShouldTrackEvent: ( event ) => 'submit' === event,
 } satisfies Flow;
diff --git a/client/landing/stepper/declarative-flow/new-hosted-site-flow-user-included.ts b/client/landing/stepper/declarative-flow/new-hosted-site-flow-user-included.ts
@@ -15,7 +15,6 @@ import { isUserEligibleForFreeHostingTrial } from 'calypso/state/selectors/is-us
 import { setSelectedSiteId } from 'calypso/state/ui/actions/index';
 import { useQuery } from '../hooks/use-query';
 import { ONBOARD_STORE, USER_STORE } from '../stores';
-import { recordSubmitStep } from './internals/analytics/record-submit-step';
 import { Flow, ProvidedDependencies } from './internals/types';
 import type { OnboardSelect, UserSelect } from '@automattic/data-stores';
 import type { MinimalRequestCartProduct } from '@automattic/shopping-cart';
@@ -60,8 +59,6 @@ const hosting: Flow = {
 		};
 
 		const submit = ( providedDependencies: ProvidedDependencies = {} ) => {
-			recordSubmitStep( providedDependencies, '', flowName, _currentStepSlug );
-
 			switch ( _currentStepSlug ) {
 				case 'user': {
 					return navigate( 'plans' );

diff --git a/client/landing/stepper/declarative-flow/new-hosted-site-flow.ts b/client/landing/stepper/declarative-flow/new-hosted-site-flow.ts
@@ -15,7 +15,6 @@ import { setSelectedSiteId } from 'calypso/state/ui/actions';
 import { useQuery } from '../hooks/use-query';
 import { ONBOARD_STORE, USER_STORE } from '../stores';
 import { useLoginUrl } from '../utils/path';
-import { recordSubmitStep } from './internals/analytics/record-submit-step';
 import { Flow, ProvidedDependencies } from './internals/types';
 import type { OnboardSelect, UserSelect } from '@automattic/data-stores';
 import type { MinimalRequestCartProduct } from '@automattic/shopping-cart';
@@ -63,8 +62,6 @@ const hosting: Flow = {
 		};
 
 		const submit = ( providedDependencies: ProvidedDependencies = {} ) => {
-			recordSubmitStep( providedDependencies, '', flowName, _currentStepSlug );
-
 			switch ( _currentStepSlug ) {
 				case 'plans': {
 					const productSlug = ( providedDependencies.plan as MinimalRequestCartProduct )

diff --git a/client/landing/stepper/declarative-flow/newsletter-post-setup.ts b/client/landing/stepper/declarative-flow/newsletter-post-setup.ts
@@ -1,7 +1,10 @@
+import { Onboard } from '@automattic/data-stores';
 import { NEWSLETTER_POST_SETUP_FLOW } from '@automattic/onboarding';
+import { useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 import { translate } from 'i18n-calypso';
 import { useSiteSlug } from '../hooks/use-site-slug';
-import { recordSubmitStep } from './internals/analytics/record-submit-step';
+import { ONBOARD_STORE } from '../stores';
 import NewsletterPostSetup from './internals/steps-repository/newsletter-post-setup';
 import { ProvidedDependencies } from './internals/types';
 import type { Flow } from './internals/types';
@@ -15,14 +18,17 @@ const newsletterPostSetup: Flow = {
 	useSteps() {
 		return [ { slug: 'newsletterPostSetup', component: NewsletterPostSetup } ];
 	},
+	useSideEffect() {
+		const { setIntent } = useDispatch( ONBOARD_STORE );
 
+		useEffect( () => {
+			setIntent( Onboard.SiteIntent.NewsletterPostSetup );
+		}, [] );
+	},
 	useStepNavigation( currentStep, navigate ) {
-		const flowName = this.name;
 		const siteSlug = useSiteSlug();
 
 		function submit( providedDependencies: ProvidedDependencies = {} ) {
-			recordSubmitStep( providedDependencies, 'newsletter-post-setup', flowName, currentStep );
-
 			switch ( currentStep ) {
 				case 'newsletterPostSetup':
 					return window.location.assign(

diff --git a/client/landing/stepper/declarative-flow/newsletter.ts b/client/landing/stepper/declarative-flow/newsletter.ts
@@ -173,7 +173,6 @@ const newsletter: Flow = {
 
 		return { goNext, goBack, goToStep, submit };
 	},
-	use__Temporary__ShouldTrackEvent: ( event ) => 'submit' === event,
 };
 
 export default newsletter;
-Original file line number
+Diff line change
@@ Expand Up / @@ -152,7 +152,6 @@ const connectDomain: Flow = { @@
     			submit,
     		};
     	},
-    	use__Temporary__ShouldTrackEvent: ( event ) => 'submit' === event,
     };
     export default connectDomain;