Implement the tracking config object

client/landing/stepper/README.md

@@ -38,7 +38,9 @@ To create a flow, you only have to implement `useSteps` and `useStepNavigation`.
 
 There is also an optional `useSideEffect` hook. You can implement this hook to run any side-effects to the flow. You can prefetch information, send track events when something changes, etc...
 
-There is a required `isSignupFlow` flag that _MUST be `true` for signup flows_ (generally where a new site may be created), and should be `false` for other flows. The `isSignupFlow` flag controls whether we'll trigger a `calypso_signup_start` Tracks event when the flow starts. For signup flows, you can also supply additional event props to the `calypso_signup_start` event by implementing the optional `useSignupStartEventProps()` hook on the flow.
+### Tracking Config
+
+A configuration `trackingConfig` object which controls how tracking works inside the stepper frameworks
 
 ```tsx
 // prettier-ignore

client/landing/stepper/declarative-flow/ai-assembler.ts

@@ -29,7 +29,10 @@ const SiteIntent = Onboard.SiteIntent;
 
 const withAIAssemblerFlow: Flow = {
 	name: AI_ASSEMBLER_FLOW,
-	isSignupFlow: true,
+	trackingConfig: {
+		isRecordSignupStart: true,
+		isRecordSignupComplete: true,
+	},
 	useSideEffect() {
 		const selectedDesign = useSelect(
 			( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getSelectedDesign(),

client/landing/stepper/declarative-flow/assembler-first-flow.ts

@@ -28,7 +28,10 @@ const SiteIntent = Onboard.SiteIntent;
 
 const assemblerFirstFlow: Flow = {
 	name: ASSEMBLER_FIRST_FLOW,
-	isSignupFlow: true,
+	trackingConfig: {
+		isRecordSignupStart: true,
+		isRecordSignupComplete: true,
+	},
 	useSideEffect() {
 		const selectedDesign = useSelect(
 			( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getSelectedDesign(),

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

@@ -17,7 +17,10 @@ const Blog: Flow = {
 	get title() {
 		return translate( 'Blog' );
 	},
-	isSignupFlow: false,
+	trackingConfig: {
+		isRecordSignupStart: false,
+		isRecordSignupComplete: false,
+	},
 	useSteps() {
 		return [
 			{

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

@@ -14,7 +14,10 @@ const build: Flow = {
 	get title() {
 		return 'WordPress';
 	},
-	isSignupFlow: false,
+	trackingConfig: {
+		isRecordSignupStart: false,
+		isRecordSignupComplete: false,
+	},
 	useSteps() {
 		return [
 			{ slug: 'launchpad', component: LaunchPad },

client/landing/stepper/declarative-flow/connect-domain.ts

@@ -30,7 +30,10 @@ const connectDomain: Flow = {
 	get title() {
 		return translate( 'Connect your domain' );
 	},
-	isSignupFlow: false,
+	trackingConfig: {
+		isRecordSignupStart: false,
+		isRecordSignupComplete: false,
+	},
 	useAssertConditions: () => {
 		const { domain, provider } = useDomainParams();
 		const flowName = CONNECT_DOMAIN_FLOW;

client/landing/stepper/declarative-flow/copy-site.tsx

@@ -75,7 +75,10 @@ const copySite: Flow = {
 	get title() {
 		return '';
 	},
-	isSignupFlow: false,
+	trackingConfig: {
+		isRecordSignupStart: false,
+		isRecordSignupComplete: false,
+	},
 
 	useSteps() {
 		return [

client/landing/stepper/declarative-flow/design-first.ts

@@ -26,7 +26,10 @@ const designFirst: Flow = {
 	get title() {
 		return translate( 'Blog' );
 	},
-	isSignupFlow: true,
+	trackingConfig: {
+		isRecordSignupStart: true,
+		isRecordSignupComplete: true,
+	},
 	useSteps() {
 		return [
 			{

client/landing/stepper/declarative-flow/domain-transfer.ts

@@ -25,7 +25,10 @@ const domainTransfer: Flow = {
 	get title() {
 		return translate( 'Bulk domain transfer' );
 	},
-	isSignupFlow: false,
+	trackingConfig: {
+		isRecordSignupStart: false,
+		isRecordSignupComplete: false,
+	},
 	useSteps() {
 		return [
 			{

client/landing/stepper/declarative-flow/domain-upsell.ts

@@ -16,7 +16,10 @@ const domainUpsell: Flow = {
 	get title() {
 		return translate( 'Domain Upsell' );
 	},
-	isSignupFlow: false,
+	trackingConfig: {
+		isRecordSignupStart: false,
+		isRecordSignupComplete: false,
+	},
 
 	useSteps() {
 		return [

client/landing/stepper/declarative-flow/domain-user-transfer.ts

@@ -18,7 +18,10 @@ import DomainContactInfo from './internals/steps-repository/domain-contact-info'
 
 const domainUserTransfer: Flow = {
 	name: 'domain-user-transfer',
-	isSignupFlow: false,
+	trackingConfig: {
+		isRecordSignupStart: false,
+		isRecordSignupComplete: false,
+	},
 	useSteps() {
 		return [ { slug: 'domain-contact-info', component: DomainContactInfo } ];
 	},

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

@@ -3,8 +3,6 @@ import { ENTREPRENEUR_FLOW } from '@automattic/onboarding';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from 'react';
 import { anonIdCache } from 'calypso/data/segmentaton-survey';
-import { useSelector } from 'calypso/state';
-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';
@@ -18,8 +16,10 @@ const SEGMENTATION_SURVEY_SLUG = 'start';
 
 const entrepreneurFlow: Flow = {
 	name: ENTREPRENEUR_FLOW,
-
-	isSignupFlow: true,
+	trackingConfig: {
+		isRecordSignupStart: true,
+		isRecordSignupComplete: true,
+	},
 
 	useSteps() {
 		return [
@@ -142,8 +142,6 @@ const entrepreneurFlow: Flow = {
 	},
 
 	useSideEffect() {
-		const isLoggedIn = useSelector( isUserLoggedIn );
-
 		useEffect( () => {
 			// We need to store the anonymous user ID in localStorage because
 			// we need to pass it to the server on site creation, i.e. after the user signs up or logs in.

client/landing/stepper/declarative-flow/free-post-setup.ts

@@ -11,7 +11,10 @@ const freePostSetup: Flow = {
 	get title() {
 		return translate( 'Free' );
 	},
-	isSignupFlow: false,
+	trackingConfig: {
+		isRecordSignupStart: false,
+		isRecordSignupComplete: false,
+	},
 	useSteps() {
 		return [ STEPS.FREE_POST_SETUP ];
 	},

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

@@ -33,7 +33,10 @@ const free: Flow = {
 	get title() {
 		return translate( 'Free' );
 	},
-	isSignupFlow: true,
+	trackingConfig: {
+		isRecordSignupStart: true,
+		isRecordSignupComplete: true,
+	},
 	useSteps() {
 		const { resetOnboardStore } = useDispatch( ONBOARD_STORE );
 

client/landing/stepper/declarative-flow/hundred-year-plan.ts

@@ -20,7 +20,10 @@ const HundredYearPlanFlow: Flow = {
 	get title() {
 		return translate( '100-year Plan' );
 	},
-	isSignupFlow: true,
+	trackingConfig: {
+		isRecordSignupStart: true,
+		isRecordSignupComplete: true,
+	},
 	useSteps() {
 		const currentUser = useSelect(
 			( select ) => ( select( USER_STORE ) as UserSelect ).getCurrentUser(),

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

@@ -43,7 +43,10 @@ import type { SiteExcerptData } from '@automattic/sites';
 
 const importFlow: Flow = {
 	name: IMPORT_FOCUSED_FLOW,
-	isSignupFlow: true,
+	trackingConfig: {
+		isRecordSignupStart: true,
+		isRecordSignupComplete: true,
+	},
 
 	useSteps() {
 		return [

client/landing/stepper/declarative-flow/import-hosted-site.ts

@@ -33,7 +33,10 @@ import type { SiteExcerptData } from '@automattic/sites';
 
 const importHostedSiteFlow: Flow = {
 	name: IMPORT_HOSTED_SITE_FLOW,
-	isSignupFlow: true,
+	trackingConfig: {
+		isRecordSignupStart: true,
+		isRecordSignupComplete: true,
+	},
 
 	useSteps() {
 		const { resetOnboardStore } = useDispatch( ONBOARD_STORE );

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

@@ -160,20 +160,13 @@ export const FlowRenderer: React.FC< { flow: Flow } > = ( { flow } ) => {
 		window.scrollTo( 0, 0 );
 	}, [ location ] );
 
-	// Get any flow-specific event props to include in the
-	// `calypso_signup_start` Tracks event triggerd in the effect below.
-	const signupStartEventProps = useMemo( () => flow.useSignupStartEventProps?.() ?? {}, [ flow ] );
 	const isLoggedIn = useSelector( isUserLoggedIn );
 
 	useEffect( () => {
-		if ( flow.isSignupFlow && ! isLoggedIn ) {
-			return;
-		}
-
-		if ( flow.isSignupFlow && isFlowStart() ) {
-			recordSignupStart( flow.name, ref, signupStartEventProps );
+		if ( flow.trackingConfig?.isRecordSignupStart && isFlowStart() ) {
+			recordSignupStart( flow.name, ref, flow.trackingConfig?.signupStartProps );
 		}
-	}, [ flow, ref, isFlowStart, isLoggedIn, signupStartEventProps ] );
+	}, [ flow, ref, isFlowStart, isLoggedIn ] );
 
 	useEffect( () => {
 		// We record the event only when the step is not empty. Additionally, we should not fire this event whenever the intent is changed
@@ -182,7 +175,7 @@ export const FlowRenderer: React.FC< { flow: Flow } > = ( { flow } ) => {
 		}
 
 		// We do not log stats if the user is not logged in and if this is a signup flow.
-		if ( flow.isSignupFlow && ! isLoggedIn ) {
+		if ( flow.trackingConfig?.isSignupFlow && ! isLoggedIn ) {
 			return;
 		}
 

client/landing/stepper/declarative-flow/internals/steps-repository/processing-step/index.tsx

@@ -103,8 +103,8 @@ const ProcessingStep: React.FC< ProcessingStepProps > = function ( props ) {
 			// We should only trigger signup completion for signup flows, so check if we have one.
 			if ( availableFlows[ flow ] ) {
 				availableFlows[ flow ]().then( ( flowExport ) => {
-					if ( flowExport.default.isSignupFlow ) {
-						recordSignupComplete();
+					if ( flowExport.default.trackingConfig?.isRecordSignupComplete ) {
+						recordSignupComplete( flowExport.default.trackingConfig?.signupStartProps );
 					}
 				} );
 			}

client/landing/stepper/declarative-flow/internals/types.ts

@@ -102,18 +102,31 @@ export type Flow = {
 	variantSlug?: string;
 	title?: string;
 	classnames?: string | [ string ];
-	/**
-	 * Required flag to indicate if the flow is a signup flow.
-	 */
-	isSignupFlow: boolean;
-	useSignupStartEventProps?: () => Record< string, string | number >;
 	useSteps: UseStepsHook;
 	useStepNavigation: UseStepNavigationHook< ReturnType< Flow[ 'useSteps' ] > >;
 	useAssertConditions?: UseAssertConditionsHook< ReturnType< Flow[ 'useSteps' ] > >;
 	/**
 	 * A hook that is called in the flow's root at every render. You can use this hook to setup side-effects, call other hooks, etc..
 	 */
 	useSideEffect?: UseSideEffectHook< ReturnType< Flow[ 'useSteps' ] > >;
+	trackingConfig?: {
+		/**
+		 * Should signup start be tracked at the start of the flow
+		 */
+		isRecordSignupStart: boolean;
+		/**
+		 * Should signup complete be tracked at the end of the flow
+		 */
+		isRecordSignupComplete: boolean;
+		/**
+		 * Supply additional event props to the `calypso_signup_start` event
+		 */
+		signupStartProps?: Record< string, string | number >;
+		/**
+		 * Supply additional event props to the `calypso_signup_complete` event
+		 */
+		signupCompleteProps?: Record< string, string | number >;
+	};
 };
 
 export type StepProps = {

client/landing/stepper/declarative-flow/link-in-bio-domain.ts

@@ -28,7 +28,10 @@ const linkInBioDomain: Flow = {
 	get title() {
 		return translate( 'Link in Bio' );
 	},
-	isSignupFlow: true,
+	trackingConfig: {
+		isRecordSignupStart: true,
+		isRecordSignupComplete: true,
+	},
 	variantSlug: LINK_IN_BIO_DOMAIN_FLOW,
 	useAssertConditions: () => {
 		const { domain } = useDomainParams();

client/landing/stepper/declarative-flow/link-in-bio-post-setup.ts

@@ -11,7 +11,10 @@ const linkInBioPostSetup: Flow = {
 	get title() {
 		return translate( 'Link in Bio' );
 	},
-	isSignupFlow: false,
+	trackingConfig: {
+		isRecordSignupStart: false,
+		isRecordSignupComplete: false,
+	},
 	useSteps() {
 		return [ { slug: 'linkInBioPostSetup', component: LinkInBioPostSetup } ];
 	},

client/landing/stepper/declarative-flow/link-in-bio-tld.ts

@@ -30,7 +30,10 @@ const linkInBio: Flow = {
 	get title() {
 		return translate( 'Link in Bio' );
 	},
-	isSignupFlow: true,
+	trackingConfig: {
+		isRecordSignupStart: true,
+		isRecordSignupComplete: true,
+	},
 	useSteps() {
 		return [
 			{ slug: 'domains', component: DomainsStep },

client/landing/stepper/declarative-flow/link-in-bio.ts

@@ -24,7 +24,10 @@ const linkInBio: Flow = {
 	get title() {
 		return translate( 'Link in Bio' );
 	},
-	isSignupFlow: true,
+	trackingConfig: {
+		isRecordSignupStart: true,
+		isRecordSignupComplete: true,
+	},
 	useSteps() {
 		return [
 			{ slug: 'intro', asyncComponent: () => import( './internals/steps-repository/intro' ) },

client/landing/stepper/declarative-flow/migration-signup.ts

@@ -23,7 +23,10 @@ const FLOW_NAME = MIGRATION_SIGNUP_FLOW;
 
 const migrationSignup: Flow = {
 	name: FLOW_NAME,
-	isSignupFlow: true,
+	trackingConfig: {
+		isRecordSignupStart: true,
+		isRecordSignupComplete: true,
+	},
 
 	useSteps() {
 		const { resetOnboardStore } = useDispatch( ONBOARD_STORE );

client/landing/stepper/declarative-flow/new-hosted-site-flow.ts

@@ -21,7 +21,10 @@ import './internals/new-hosted-site-flow.scss';
 
 const hosting: Flow = {
 	name: NEW_HOSTED_SITE_FLOW,
-	isSignupFlow: true,
+	trackingConfig: {
+		isRecordSignupStart: true,
+		isRecordSignupComplete: true,
+	},
 	useSteps() {
 		return [
 			{ slug: 'plans', asyncComponent: () => import( './internals/steps-repository/plans' ) },

client/landing/stepper/declarative-flow/newsletter-post-setup.ts

@@ -11,7 +11,10 @@ const newsletterPostSetup: Flow = {
 	get title() {
 		return translate( 'Newsletter' );
 	},
-	isSignupFlow: false,
+	trackingConfig: {
+		isRecordSignupStart: false,
+		isRecordSignupComplete: false,
+	},
 	useSteps() {
 		return [ { slug: 'newsletterPostSetup', component: NewsletterPostSetup } ];
 	},

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

@@ -26,7 +26,10 @@ const newsletter: Flow = {
 	get title() {
 		return translate( 'Newsletter' );
 	},
-	isSignupFlow: true,
+	trackingConfig: {
+		isRecordSignupStart: true,
+		isRecordSignupComplete: true,
+	},
 	useSteps() {
 		const query = useQuery();
 		const isComingFromMarketingPage = query.get( 'ref' ) === 'newsletter-lp';