Design Picker: Display the recommended themes

client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/hooks/use-track-filters.ts

@@ -21,7 +21,7 @@ const useTrackFilters = ( { preselectedFilters, isBigSkyEligible, isMultiSelecti
 			( result, filterSlug, index ) => ( {
 				...result,
 				// The property cannot contain `-` character.
-				[ `filters_${ filterSlug.replace( '-', '_' ) }` ]: `${ getCategoryType(
+				[ `filters_${ filterSlug.replaceAll( '-', '_' ) }` ]: `${ getCategoryType(
 					filterSlug
 				) }:${ index }`,
 			} ),

client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx

@@ -213,6 +213,7 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 	const { data: allDesigns, isLoading: isLoadingDesigns } = useStarterDesignsQuery(
 		{
 			seed: siteSlugOrId ? String( siteSlugOrId ) : undefined,
+			goals: goals.length > 0 ? goals : [ 'none' ],
 			_locale: locale,
 		},
 		{
@@ -968,6 +969,7 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 				isMultiFilterEnabled={ isGoalCentricFeature }
 				onChangeTier={ handleChangeTier }
 				isBigSkyEligible={ isBigSkyEligible }
+				recommendedDesignSlugs={ allDesigns?.recommendation || [] }
 			/>
 		</>
 	);

packages/data-stores/src/starter-designs-queries/types.ts

@@ -1,17 +1,7 @@
-import type { Category, DesignRecipe, Design } from '@automattic/design-picker/src/types';
-
-export interface StarterDesignsGeneratedQueryParams {
-	seed?: string;
-	_locale: string;
-}
-
-export interface StarterDesignsGenerated {
-	slug: string;
-	title: string;
-	recipe: DesignRecipe;
-}
+import type { Category, Design } from '@automattic/design-picker/src/types';
 
 export interface StarterDesigns {
 	filters: { subject: Record< string, Category > };
 	designs: Design[];
+	recommendation: string[];
 }

packages/data-stores/src/starter-designs-queries/use-starter-designs-query.ts

@@ -14,6 +14,7 @@ import type {
 
 interface StarterDesignsQueryParams {
 	seed?: string;
+	goals?: string[];
 	_locale: string;
 }
 
@@ -25,6 +26,7 @@ interface Options extends QueryOptions< StarterDesignsResponse > {
 interface StarterDesignsResponse {
 	filters: { subject: Record< string, Category > };
 	static: { designs: StarterDesign[] };
+	recommendation: string[];
 }
 
 export type ThemeTier = {
@@ -63,6 +65,7 @@ export function useStarterDesignsQuery(
 					subject: response.filters?.subject || {},
 				},
 				designs: response.static?.designs?.map( apiStarterDesignsToDesign ),
+				recommendation: response.recommendation,
 			};
 
 			return select ? select( allDesigns ) : allDesigns;

packages/design-picker/src/components/unified-design-picker.tsx

@@ -279,6 +279,7 @@ interface DesignPickerProps {
 	isMultiFilterEnabled?: boolean;
 	onChangeTier?: ( value: boolean ) => void;
 	isBigSkyEligible?: boolean;
+	recommendedDesignSlugs?: string[];
 }
 
 const DesignPicker: React.FC< DesignPickerProps > = ( {
@@ -298,13 +299,12 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 	isMultiFilterEnabled = false,
 	onChangeTier,
 	isBigSkyEligible = false,
+	recommendedDesignSlugs = [],
 } ) => {
 	const translate = useTranslate();
 	const { all, best, ...designsByGroup } = useFilteredDesignsByGroup( designs );
 	const categories = categorization?.categories || [];
-	const isNoResults = Object.values( designsByGroup ).every(
-		( categoryDesigns ) => categoryDesigns.length === 0
-	);
+
 	const categoryTypes = useMemo(
 		() => categories.filter( ( { slug } ) => isFeatureCategory( slug ) ),
 		[ categorization?.categories ]
@@ -314,6 +314,26 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 		[ categorization?.categories ]
 	);
 
+	const recommendedDesigns = useMemo( () => {
+		const recommendedDesignSlugsSet = new Set( recommendedDesignSlugs );
+
+		// The number should be a multiple of 3 but no more than 5
+		return designs
+			.filter( ( design ) => recommendedDesignSlugsSet.has( design.recipe?.stylesheet || '' ) )
+			.slice( 0, 3 );
+	}, [ designs, recommendedDesignSlugs ] );
+
+	// Show recommended themes only when the selected categories are never changed.
+	const showRecommendedDesigns =
+		isMultiFilterEnabled &&
+		! categorization?.isSelectionsChanged &&
+		recommendedDesigns.length === 3;
+
+	// Show no results only when the recommended themes is hidden and no design matches the selected categories and tiers.
+	const showNoResults =
+		! showRecommendedDesigns &&
+		Object.values( designsByGroup ).every( ( categoryDesigns ) => categoryDesigns.length === 0 );
+
 	const getCategoryName = ( value: string ) =>
 		categories.find( ( { slug } ) => slug === value )?.name || '';
 
@@ -373,6 +393,15 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 				</DesignPickerFilterGroup>
 			</div>
 
+			{ showRecommendedDesigns && (
+				<DesignCardGroup
+					{ ...designCardProps }
+					title={ translate( 'Recommended themes' ) }
+					category="recommended"
+					designs={ recommendedDesigns }
+				/>
+			) }
+
 			{ isMultiFilterEnabled && categorization && categorization.selections.length > 1 && (
 				<DesignCardGroup
 					{ ...designCardProps }
@@ -401,7 +430,7 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 						}
 						category={ categorySlug }
 						designs={ categoryDesigns }
-						showNoResults={ index === array.length - 1 && isNoResults }
+						showNoResults={ index === array.length - 1 && showNoResults }
 					/>
 				) ) }
 		</div>
@@ -427,6 +456,7 @@ export interface UnifiedDesignPickerProps {
 	isMultiFilterEnabled?: boolean;
 	onChangeTier?: ( value: boolean ) => void;
 	isBigSkyEligible?: boolean;
+	recommendedDesignSlugs?: string[];
 }
 
 const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
@@ -448,8 +478,9 @@ const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
 	isMultiFilterEnabled = false,
 	onChangeTier,
 	isBigSkyEligible = false,
+	recommendedDesignSlugs = [],
 } ) => {
-	const hasCategories = !! Object.keys( categorization?.categories || {} ).length;
+	const hasCategories = !! ( categorization?.categories || [] ).length;
 
 	return (
 		<div
@@ -476,6 +507,7 @@ const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
 					isMultiFilterEnabled={ isMultiFilterEnabled }
 					onChangeTier={ onChangeTier }
 					isBigSkyEligible={ isBigSkyEligible }
+					recommendedDesignSlugs={ recommendedDesignSlugs }
 				/>
 				<InView onChange={ ( inView ) => inView && onViewAllDesigns() } />
 			</div>

packages/design-picker/src/hooks/use-categorization.ts

@@ -1,10 +1,11 @@
-import { useEffect, useMemo, useCallback, useRef } from 'react';
+import { useEffect, useMemo, useCallback, useRef, useState } from 'react';
 import { useDesignPickerFilters } from './use-design-picker-filters';
 import type { Category } from '../types';
 
 export interface Categorization {
 	categories: Category[];
 	selections: string[];
+	isSelectionsChanged: boolean;
 	onSelect: ( selectedSlug: string ) => void;
 }
 
@@ -27,6 +28,7 @@ export function useCategorization(
 	}: UseCategorizationOptions
 ): Categorization {
 	const isInitRef = useRef( false );
+	const [ isSelectionsChanged, setIsSelectionsChanged ] = useState( false );
 	const categories = useMemo( () => {
 		const categoryMapKeys = Object.keys( categoryMap ) || [];
 		const result = categoryMapKeys.map( ( slug ) => ( {
@@ -47,6 +49,10 @@ export function useCategorization(
 				return;
 			}
 
+			if ( ! isSelectionsChanged ) {
+				setIsSelectionsChanged( true );
+			}
+
 			const index = selectedCategories.findIndex( ( selection ) => selection === value );
 			if ( index === -1 ) {
 				handleSelect?.( value );
@@ -59,7 +65,15 @@ export function useCategorization(
 				...selectedCategories.slice( index + 1 ),
 			] );
 		},
-		[ selectedCategories, isMultiSelection, setSelectedCategories, handleSelect, handleDeselect ]
+		[
+			selectedCategories,
+			isMultiSelection,
+			isSelectionsChanged,
+			setSelectedCategories,
+			handleSelect,
+			handleDeselect,
+			setIsSelectionsChanged,
+		]
 	);
 
 	useEffect( () => {
@@ -72,6 +86,7 @@ export function useCategorization(
 	return {
 		categories,
 		selections: selectedCategories,
+		isSelectionsChanged,
 		onSelect,
 	};
 }