Fix Multilingual Reporting of Event Values

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteBuild/index.js

@@ -109,7 +109,7 @@
 					select( nfdOnboardingStore ).getPluginInstallHash(),
 			};
 		},
 		[ location.pathname ]
 	);
 
 	const [ isRequestPlaced, setIsRequestPlaced ] = useState( false );
@@ -297,7 +297,7 @@
 				trackOnboardingEvent(
 					new OnboardingEvent(
 						ACTION_STARTER_PAGES_SELECTED,
-						sitePages.map( ( sitePage ) => sitePage.title ),
+						sitePages.map( ( sitePage ) => sitePage.key ),
 						{
 							count: sitePages.length,
 						},
@@ -378,7 +378,7 @@
 
 	useEffect( () => {
 		trackChapters();
 	}, [ currentStep ] );
 
 	const prioritizeFlow = () => {
 		const currentFlow = window.nfdOnboarding.currentFlow;
@@ -419,13 +419,13 @@
 			initializeSettings();
 			setInterval( cronTrigger, 45000 );
 		}
 	}, [ initialize ] );
 
 	useEffect( () => {
 		if ( false !== brandConfig?.prioritization ) {
 			return prioritizeFlow();
 		}
 	}, [ experienceLevel, topPriority ] );
 
 	useEffect( () => {
 		document.body.classList.add( `nfd-brand-${ newfoldBrand }` );
@@ -435,7 +435,7 @@
 		syncStoreToDB();
 		handlePreviousStepTracking();
 		handleConditionalDesignStepsRoutes();
 	}, [ location.pathname, onboardingFlow ] );
 
 	const isForkStep =
 		currentStep === stepTheFork ||

src/OnboardingSPA/data/models/Step.js

@@ -1,5 +1,6 @@
 export class Step {
 	constructor( {
+		slug,
 		path,
 		title,
 		Component,
@@ -10,6 +11,7 @@ export class Step {
 		data,
 		drawerNavigation,
 	} ) {
+		this.slug = slug;
 		this.path = path;
 		this.title = title;
 		this.Component = Component;

src/OnboardingSPA/steps/BasicInfo/step.js

@@ -9,6 +9,7 @@ import { VIEW_NAV_PRIMARY } from '../../../constants';
 const StepBasicInfo = lazy( () => import( './index' ) );
 
 export const stepBasicInfo = new Step( {
+	slug: 'basic-info',
 	path: '/wp-setup/step/basic-info',
 	title: __( 'Basic Info', 'wp-module-onboarding' ),
 	Component: StepBasicInfo,

src/OnboardingSPA/steps/Complete/step.js

@@ -4,6 +4,7 @@ import { Step } from '../../data/models/Step';
 const StepComplete = lazy( () => import( './index' ) );
 
 export const stepComplete = new Step( {
+	slug: 'complete',
 	path: '/wp-setup/step/complete',
 	Component: StepComplete,
 } );

src/OnboardingSPA/steps/DesignColors/step.js

@@ -8,6 +8,7 @@ import { VIEW_DESIGN_COLORS } from '../../../constants';
 const StepDesignColors = lazy( () => import( './index' ) );
 
 export const stepDesignColors = new Step( {
+	slug: 'design-colors',
 	path: '/wp-setup/step/design/colors',
 	title: __( 'Colors', 'wp-module-onboarding' ),
 	Component: StepDesignColors,

src/OnboardingSPA/steps/DesignFonts/step.js

@@ -8,6 +8,7 @@ import { VIEW_DESIGN_FONTS } from '../../../constants';
 const StepDesignFonts = lazy( () => import( './index' ) );
 
 export const stepDesignFonts = new Step( {
+	slug: 'design-typography',
 	path: '/wp-setup/step/design/typography',
 	title: __( 'Fonts', 'wp-module-onboarding' ),
 	Component: StepDesignFonts,

src/OnboardingSPA/steps/DesignHeaderMenu/step.js

@@ -8,6 +8,7 @@ import { VIEW_DESIGN_HEADER_MENU } from '../../../constants';
 const StepDesignHeaderMenu = lazy( () => import( './index' ) );
 
 export const stepDesignHeaderMenu = new Step( {
+	slug: 'design-header-menu',
 	path: '/wp-setup/step/design/header-menu',
 	title: __( 'Header & Menu', 'wp-module-onboarding' ),
 	Component: StepDesignHeaderMenu,

src/OnboardingSPA/steps/DesignHomepageMenu/step.js

@@ -8,6 +8,7 @@ import { VIEW_NAV_DESIGN } from '../../../constants';
 const StepDesignHomepageMenu = lazy( () => import( './index' ) );
 
 export const stepDesignHomepageMenu = new Step( {
+	slug: 'design-homepage-menu',
 	path: '/wp-setup/step/design/homepage-menu',
 	title: __( 'Homepage Layouts', 'wp-module-onboarding' ),
 	Component: StepDesignHomepageMenu,

src/OnboardingSPA/steps/DesignThemeStyles/Menu/step.js

@@ -8,6 +8,7 @@ import { VIEW_NAV_DESIGN } from '../../../../constants';
 const StepDesignThemeStylesMenu = lazy( () => import( './index' ) );
 
 export const stepDesignThemeStylesMenu = new Step( {
+	slug: 'design-theme-styles-menu',
 	path: '/wp-setup/step/design/theme-styles/menu',
 	title: __( 'Theme Styles', 'wp-module-onboarding' ),
 	Component: StepDesignThemeStylesMenu,

src/OnboardingSPA/steps/DesignThemeStyles/Preview/step.js

@@ -8,6 +8,7 @@ import { VIEW_DESIGN_THEME_STYLES_PREVIEW } from '../../../../constants';
 const StepDesignThemeStylesPreview = lazy( () => import( './index' ) );
 
 export const stepDesignThemeStylesPreview = new Step( {
+	slug: 'design-theme-styles-preview',
 	path: '/wp-setup/step/design/theme-styles/preview',
 	title: __( 'Theme Styles', 'wp-module-onboarding' ),
 	Component: StepDesignThemeStylesPreview,

src/OnboardingSPA/steps/Ecommerce/StepAddress/step.js

@@ -8,6 +8,7 @@ import { VIEW_NAV_ECOMMERCE_STORE_INFO } from '../../../../constants';
 const StepAddress = lazy( () => import( './index' ) );
 
 export const stepAddress = new Step( {
+	slug: 'ecommerce-address',
 	path: '/ecommerce/step/address',
 	title: __( 'Street Address', 'wp-module-onboarding' ),
 	Component: StepAddress,

src/OnboardingSPA/steps/Ecommerce/StepProducts/step.js

@@ -8,6 +8,7 @@ import { VIEW_NAV_ECOMMERCE_STORE_INFO } from '../../../../constants';
 const StepProducts = lazy( () => import( './index' ) );
 
 export const stepProducts = new Step( {
+	slug: 'ecommerce-products',
 	path: '/ecommerce/step/products',
 	title: __( 'Product Info', 'wp-module-onboarding' ),
 	Component: StepProducts,

src/OnboardingSPA/steps/Ecommerce/StepTax/step.js

@@ -8,6 +8,7 @@ import { VIEW_NAV_ECOMMERCE_STORE_INFO } from '../../../../constants';
 const StepTax = lazy( () => import( './index' ) );
 
 export const stepTax = new Step( {
+	slug: 'ecommerce-tax',
 	path: '/ecommerce/step/tax',
 	title: __( 'Tax Info', 'wp-module-onboarding' ),
 	Component: StepTax,

src/OnboardingSPA/steps/GetStarted/GetStartedExperience/step.js

@@ -8,6 +8,7 @@ import { VIEW_NAV_GET_STARTED } from '../../../../constants';
 const GetStartedExperience = lazy( () => import( './index' ) );
 
 export const stepExperience = new Step( {
+	slug: 'get-started-experience',
 	path: '/wp-setup/step/get-started/experience',
 	title: __( 'WordPress Experience', 'wp-module-onboarding' ),
 	Component: GetStartedExperience,

src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/PrimarySite/step.js

@@ -8,6 +8,7 @@ import { translations } from '../../../../utils/locales/translations';
 const StepPrimarySetup = lazy( () => import( './index' ) );
 
 export const stepPrimarySetup = new Step( {
+	slug: 'get-started-site-primary',
 	path: '/wp-setup/step/get-started/site-primary',
 	title: sprintf(
 		/* translators: %s: website or store */

src/OnboardingSPA/steps/GetStarted/SiteTypeSetup/SecondarySite/step.js

@@ -8,6 +8,7 @@ import { translations } from '../../../../utils/locales/translations';
 const StepSecondaryStep = lazy( () => import( './index' ) );
 
 export const stepSecondarySetup = new Step( {
+	slug: 'get-started-site-secondary',
 	path: '/wp-setup/step/get-started/site-secondary',
 	title: sprintf(
 		/* translators: %s: website or store */

src/OnboardingSPA/steps/GetStarted/Welcome/step.js

@@ -8,6 +8,7 @@ import { VIEW_NAV_GET_STARTED } from '../../../../constants';
 const StepWelcome = lazy( () => import( './index' ) );
 
 export const stepWelcome = new Step( {
+	slug: 'get-started-welcome',
 	path: '/wp-setup/step/get-started/welcome',
 	title: __( 'Welcome', 'wp-module-onboarding' ),
 	Component: StepWelcome,

src/OnboardingSPA/steps/SiteFeatures/step.js

@@ -7,6 +7,7 @@ import LearnMore from './Sidebar/LearnMore';
 const StepSiteFeatures = lazy( () => import( './index' ) );
 
 export const stepSiteFeatures = new Step( {
+	slug: 'site-features',
 	path: '/wp-setup/step/site-features',
 	title: __( 'Features', 'wp-module-onboarding' ),
 	Component: StepSiteFeatures,

src/OnboardingSPA/steps/SiteGen/Editor/step.js

@@ -8,6 +8,7 @@ import Customize from './Sidebar/Customize';
 const StepSiteGenEditor = lazy( () => import( './index' ) );
 
 export const stepSiteGenEditor = new Step( {
+	slug: 'sitegen-editor',
 	path: '/sitegen/step/editor',
 	title: __( 'Page Layouts', 'wp-module-onboarding' ),
 	Component: StepSiteGenEditor,

src/OnboardingSPA/steps/SiteGen/Experience/step.js

@@ -6,6 +6,7 @@ import { Step } from '../../../data/models/Step';
 const SiteGenExperience = lazy( () => import( './index' ) );
 
 export const stepSiteGenExperience = new Step( {
+	slug: 'sitegen-experience',
 	path: '/sitegen/step/experience',
 	title: __( 'Page Layouts', 'wp-module-onboarding' ),
 	Component: SiteGenExperience,

src/OnboardingSPA/steps/SiteGen/Migration/step.js

@@ -6,6 +6,7 @@ import { Step } from '../../../data/models/Step';
 const StepSiteGenMigration = lazy( () => import( './index' ) );
 
 export const stepSiteGenMigration = new Step( {
+	slug: 'sitegen-migration',
 	path: '/sitegen/step/migration',
 	title: __( 'Migration', 'wp-module-onboarding' ),
 	Component: StepSiteGenMigration,

src/OnboardingSPA/steps/SiteGen/Preview/step.js

@@ -6,6 +6,7 @@ import { Step } from '../../../data/models/Step';
 const SiteGenPreview = lazy( () => import( './index' ) );
 
 export const stepSiteGenPreview = new Step( {
+	slug: 'sitegen-preview',
 	path: '/sitegen/step/preview',
 	title: __( 'Page Layouts', 'wp-module-onboarding' ),
 	Component: SiteGenPreview,

src/OnboardingSPA/steps/SiteGen/SiteDetails/step.js

@@ -6,6 +6,7 @@ import { Step } from '../../../data/models/Step';
 const SiteGenSiteDetails = lazy( () => import( './index' ) );
 
 export const stepSiteGenSiteDetails = new Step( {
+	slug: 'sitegen-site-details',
 	path: '/sitegen/step/site-details',
 	title: __( 'Site Details', 'wp-module-onboarding' ),
 	Component: SiteGenSiteDetails,

src/OnboardingSPA/steps/SiteGen/SiteLogo/step.js

@@ -6,6 +6,7 @@ import { Step } from '../../../data/models/Step';
 const SiteGenSiteLogo = lazy( () => import( './index' ) );
 
 export const stepSiteGenSiteLogo = new Step( {
+	slug: 'sitegen-site-logo',
 	path: '/sitegen/step/site-logo',
 	title: __( 'Page Layouts', 'wp-module-onboarding' ),
 	Component: SiteGenSiteLogo,

src/OnboardingSPA/steps/SiteGen/SocialMedia/step.js

@@ -6,6 +6,7 @@ import { Step } from '../../../data/models/Step';
 const SiteGenSiteSocialMedia = lazy( () => import( './index' ) );
 
 export const stepSiteGenSocialMedia = new Step( {
+	slug: 'sitegen-social-media',
 	path: '/sitegen/step/social-media',
 	title: __( 'Page Layouts', 'wp-module-onboarding' ),
 	Component: SiteGenSiteSocialMedia,

src/OnboardingSPA/steps/SiteGen/Welcome/step.js

@@ -6,6 +6,7 @@ import { Step } from '../../../data/models/Step';
 const SiteGenWelcome = lazy( () => import( './index' ) );
 
 export const stepSiteGenWelcome = new Step( {
+	slug: 'sitegen-welcome',
 	path: '/sitegen/step/welcome',
 	title: __( 'Welcome', 'wp-module-onboarding' ),
 	Component: SiteGenWelcome,

src/OnboardingSPA/steps/SitePages/index.js

@@ -38,7 +38,7 @@
 				themeVariations:
 					select( nfdOnboardingStore ).getStepPreviewData(),
 			};
 		}, [] );
 
 	const {
 		setDrawerActiveView,
@@ -50,7 +50,7 @@
 	useEffect( () => {
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
 		setDrawerActiveView( VIEW_NAV_DESIGN );
 	}, [] );
 
 	const getSitePages = async () => {
 		const sitePagesResponse = await getPatterns(
@@ -86,13 +86,14 @@
 	const stateToFlowData = ( selectedPages, pages ) => {
 		return pages !== false
 			? pages?.reduce( ( newSitePages, sitePage ) => {
-					return selectedPages.includes( sitePage.slug )
-						? newSitePages.concat( {
-								slug: sitePage.slug,
-								title: sitePage.title,
-						  } )
-						: newSitePages;
-			  }, [] )
+				return selectedPages.includes( sitePage.slug )
+					? newSitePages.concat( {
+						slug: sitePage.slug,
+						title: sitePage.title,
+						key: undefined !== sitePage.key ? sitePage.key : sitePage.title,
+					} )
+					: newSitePages;
+			}, [] )
 			: undefined;
 	};
 
@@ -151,7 +152,7 @@
 		if ( themeStatus === THEME_STATUS_ACTIVE ) {
 			getSitePages();
 		}
 	}, [ themeStatus ] );
 
 	const content = getContents();
 

src/OnboardingSPA/steps/SitePages/step.js

@@ -7,6 +7,7 @@ import LearnMore from './Sidebar/LearnMore';
 const StepSitePages = lazy( () => import( './index' ) );
 
 export const stepSitePages = new Step( {
+	slug: 'design-site-pages',
 	path: '/wp-setup/step/design/site-pages',
 	title: __( 'Page Layouts', 'wp-module-onboarding' ),
 	Component: StepSitePages,

src/OnboardingSPA/steps/TheFork/step.js

@@ -6,6 +6,7 @@ import { Step } from '../../data/models/Step';
 const StepTheFork = lazy( () => import( './index' ) );
 
 export const stepTheFork = new Step( {
+	slug: 'fork',
 	path: '/wp-setup/step/fork',
 	title: __( 'The Fork', 'wp-module-onboarding' ),
 	Component: StepTheFork,

src/OnboardingSPA/steps/TopPriority/index.js

@@ -68,7 +68,7 @@
 		setIsDrawerSuppressed( false );
 		setDrawerActiveView( VIEW_NAV_PRIMARY );
 		setIsHeaderNavigationEnabled( true );
 	}, [] );
 
 	useEffect( () => {
 		async function setInitialData() {
@@ -87,7 +87,7 @@
 		if ( ! isLoaded ) {
 			setInitialData();
 		}
 	}, [ isLoaded ] );
 
 	const handleSelling = () => {
 		if ( ECOMMERCE_FLOW !== window.nfdOnboarding.currentFlow ) {
@@ -121,7 +121,7 @@
 		trackOnboardingEvent(
 			new OnboardingEvent(
 				ACTION_ONBOARDING_STEP_SKIPPED,
-				currentStep.title
+				currentStep.slug
 			)
 		);
 	};

src/OnboardingSPA/steps/TopPriority/step.js

@@ -6,6 +6,7 @@ import { navigation } from '@wordpress/icons';
 const StepTopPriority = lazy( () => import( './index' ) );
 
 export const stepTopPriority = new Step( {
+	slug: 'top-priority',
 	path: '/wp-setup/step/top-priority',
 	title: __( 'Top Priority', 'wp-module-onboarding' ),
 	tooltipText: __( 'Tell us your top priority', 'wp-module-onboarding' ),

src/OnboardingSPA/steps/WhatNext/step.js

@@ -7,6 +7,7 @@ import LearnMore from './Sidebar/LearnMore';
 const StepWhatNext = lazy( () => import( './index' ) );
 
 export const stepWhatNext = new Step( {
+	slug: 'what-next',
 	path: '/wp-setup/step/what-next',
 	title: __( 'What Next', 'wp-module-onboarding' ),
 	Component: StepWhatNext,