Fix the multilingual reporting of event values

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

@@ -297,7 +297,7 @@ const SiteBuild = () => {
 				trackOnboardingEvent(
 					new OnboardingEvent(
 						ACTION_STARTER_PAGES_SELECTED,
-						sitePages.map( ( sitePage ) => sitePage.title ),
+						sitePages.map( ( sitePage ) => sitePage.key ),
 						{
 							count: sitePages.length,
 						},

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

@@ -86,13 +86,14 @@ const StepSitePages = () => {
 	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;
 	};
 

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

@@ -121,7 +121,7 @@ const StepTopPriority = () => {
 		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,