Design Picker: Sort the selected categories to the top and keep the order between them unchanged

client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/categories.ts

@@ -59,8 +59,9 @@ const GOALS_TO_CATEGORIES: { [ key in Onboard.SiteGoal ]: string[] } = {
  */
 function makeSortCategoryToTop( slugs: string[] ) {
 	const slugsSet = new Set( slugs );
+
 	return ( a: Category, b: Category ) => {
-		if ( a.slug === b.slug ) {
+		if ( slugsSet.has( a.slug ) && slugsSet.has( b.slug ) ) {
 			return 0;
 		} else if ( slugsSet.has( a.slug ) ) {
 			return -1;
@@ -129,40 +130,16 @@ function getCategorizationFromGoals(
 	goals: Onboard.SiteGoal[],
 	isMultiSelection: boolean = false
 ) {
-	// Sorted according to which theme category makes the most consequential impact
-	// on the user's site e.g. if you want a store, then choosing a Woo compatible
-	// theme is more important than choosing a theme that is good for blogging.
-	// Missing categories are treated as equally inconsequential.
-	const mostConsequentialDesignCategories = [
-		CATEGORIES.STORE,
-		CATEGORIES.EDUCATION,
-		CATEGORIES.COMMUNITY_NON_PROFIT,
-		CATEGORIES.ENTERTAINMENT,
-		CATEGORIES.PORTFOLIO,
-		CATEGORIES.BLOG,
-		CATEGORIES.AUTHORS_WRITERS,
-	];
-
-	const defaultSelections = goals
-		.map( ( goal ) => {
-			const preferredCategories = getGoalsPreferredCategories( goal );
-			return isMultiSelection ? preferredCategories : preferredCategories.slice( 0, 1 );
-		} )
-		.flat()
-		.sort( ( a, b ) => {
-			let aIndex = mostConsequentialDesignCategories.indexOf( a );
-			let bIndex = mostConsequentialDesignCategories.indexOf( b );
-
-			// If the category is not in the list, it should be sorted to the end.
-			if ( aIndex === -1 ) {
-				aIndex = mostConsequentialDesignCategories.length;
-			}
-			if ( bIndex === -1 ) {
-				bIndex = mostConsequentialDesignCategories.length;
-			}
-
-			return aIndex - bIndex;
-		} ) ?? [ CATEGORIES.BUSINESS ];
+	const defaultSelections = Array.from(
+		new Set(
+			goals
+				.map( ( goal ) => {
+					const preferredCategories = getGoalsPreferredCategories( goal );
+					return isMultiSelection ? preferredCategories : preferredCategories.slice( 0, 1 );
+				} )
+				.flat() ?? [ CATEGORIES.BUSINESS ]
+		)
+	);
 
 	return {
 		defaultSelections,

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

@@ -84,7 +84,7 @@ const GoalsStep: Step = ( { navigation } ) => {
 			...commonEventProps,
 			intent,
 			goals: serializeGoals( goals ),
-			combo: goals.sort().join( ',' ),
+			combo: goals.slice().sort().join( ',' ),
 			total: goals.length,
 			is_goals_big_sky_eligible: isGoalsBigSkyEligible( goals ),
 		};

packages/data-stores/src/onboard/reducer.ts

@@ -353,7 +353,7 @@ const progressTitle: Reducer< string | undefined, OnboardAction > = ( state, act
 
 const goals: Reducer< SiteGoal[], OnboardAction > = ( state = [], action ) => {
 	if ( action.type === 'SET_GOALS' ) {
-		return action.goals;
+		return [ ...action.goals ];
 	}
 	if ( action.type === 'CLEAR_IMPORT_GOAL' ) {
 		return state.filter( ( goal ) => goal !== SiteGoal.Import );