Design Picker: Remove Trending for your goals section (#98074)

Automattic · Jan 10, 2025 · c3996cc · c3996cc
1 parent 9421f30
commit c3996cc
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 73 deletions.
diff --git a/...tepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx b/...tepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx
@@ -964,7 +964,6 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 				showActiveThemeBadge={ intent !== 'build' }
 				isMultiFilterEnabled={ isGoalCentricFeature }
 				isBigSkyEligible={ isBigSkyEligible }
-				recommendedDesignSlugs={ allDesigns?.recommendation || [] }
 			/>
 		</>
 	);

diff --git a/packages/data-stores/src/starter-designs-queries/types.ts b/packages/data-stores/src/starter-designs-queries/types.ts
@@ -3,5 +3,4 @@ import type { Category, Design } from '@automattic/design-picker/src/types';
 export interface StarterDesigns {
 	filters: { subject: Record< string, Category > };
 	designs: Design[];
-	recommendation: string[];
 }
diff --git a/packages/data-stores/src/starter-designs-queries/use-starter-designs-query.ts b/packages/data-stores/src/starter-designs-queries/use-starter-designs-query.ts
@@ -26,7 +26,6 @@ interface Options extends QueryOptions< StarterDesignsResponse > {
 interface StarterDesignsResponse {
 	filters: { subject: Record< string, Category > };
 	static: { designs: StarterDesign[] };
-	recommendation: string[];
 }
 
 export type ThemeTier = {
@@ -66,7 +65,6 @@ export function useStarterDesignsQuery(
 					subject: response.filters?.subject || {},
 				},
 				designs: response.static?.designs?.map( apiStarterDesignsToDesign ),
-				recommendation: response.recommendation,
 			};
 
 			return select ? select( allDesigns ) : allDesigns;

diff --git a/packages/design-picker/src/components/unified-design-picker.tsx b/packages/design-picker/src/components/unified-design-picker.tsx
@@ -1,5 +1,6 @@
 import { recordTracksEvent } from '@automattic/calypso-analytics';
 import { Button } from '@automattic/components';
+import { useHasEnTranslation } from '@automattic/i18n-utils';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { useCallback, useMemo, useRef, useState } from 'react';
@@ -303,7 +304,6 @@ interface DesignPickerProps {
 	showActiveThemeBadge?: boolean;
 	isMultiFilterEnabled?: boolean;
 	isBigSkyEligible?: boolean;
-	recommendedDesignSlugs?: string[];
 }
 
 const DesignPicker: React.FC< DesignPickerProps > = ( {
@@ -322,9 +322,9 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 	showActiveThemeBadge = false,
 	isMultiFilterEnabled = false,
 	isBigSkyEligible = false,
-	recommendedDesignSlugs = [],
 } ) => {
 	const translate = useTranslate();
+	const hasEnTranslation = useHasEnTranslation();
 	const { selectedCategoriesWithoutDesignTier } = useDesignPickerFilters();
 
 	const categories = categorization?.categories || [];
@@ -341,32 +341,12 @@ 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 showRecommendedAtTop =
-		isMultiFilterEnabled &&
-		! categorization?.isSelectionsChanged &&
-		recommendedDesigns.length === 3;
-	const showRecommendedAtBottom =
-		isMultiFilterEnabled && categorization?.isSelectionsChanged && recommendedDesigns.length === 3;
-	const showRecommendedDesigns = showRecommendedAtTop || showRecommendedAtBottom;
-
-	const { all, best, ...designsByGroup } = useFilteredDesignsByGroup( designs, {
-		excludeDesigns: showRecommendedDesigns ? recommendedDesigns : [],
-	} );
+	const { all, best, ...designsByGroup } = useFilteredDesignsByGroup( designs );
 
-	// 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 );
+	// Show no results only when no design matches the selected categories and tiers.
+	const showNoResults = Object.values( designsByGroup ).every(
+		( categoryDesigns ) => categoryDesigns.length === 0
+	);
 
 	const getCategoryName = ( value: string ) =>
 		categories.find( ( { slug } ) => slug === value )?.name || '';
@@ -428,23 +408,20 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 			{ isMultiFilterEnabled && selectedCategoriesWithoutDesignTier.length > 1 && (
 				<DesignCardGroup
 					{ ...designCardProps }
-					title={ translate( 'Best matching themes' ) }
+					title={
+						hasEnTranslation( 'Best theme matches' )
+							? translate( 'Best theme matches' )
+							: translate( 'Best matching themes' )
+					}
 					category="best"
 					designs={ best }
 				/>
 			) }
-			{ showRecommendedAtTop && (
-				<DesignCardGroup
-					{ ...designCardProps }
-					title={ translate( 'Trending for your goals' ) }
-					category="recommended"
-					designs={ recommendedDesigns }
-				/>
-			) }
 
 			{ isMultiFilterEnabled && selectedCategoriesWithoutDesignTier.length === 0 && (
 				<DesignCardGroup { ...designCardProps } designs={ all } />
 			) }
+
 			{ /* We want to show the last one on top first. */ }
 			{ Object.entries( designsByGroup )
 				.reverse()
@@ -466,15 +443,6 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 						showNoResults={ index === array.length - 1 && showNoResults }
 					/>
 				) ) }
-
-			{ showRecommendedAtBottom && (
-				<DesignCardGroup
-					{ ...designCardProps }
-					title={ translate( 'Trending for your goals' ) }
-					category="recommended"
-					designs={ recommendedDesigns }
-				/>
-			) }
 		</div>
 	);
 };
@@ -497,7 +465,6 @@ export interface UnifiedDesignPickerProps {
 	showActiveThemeBadge?: boolean;
 	isMultiFilterEnabled?: boolean;
 	isBigSkyEligible?: boolean;
-	recommendedDesignSlugs?: string[];
 }
 
 const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
@@ -518,7 +485,6 @@ const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
 	showActiveThemeBadge = false,
 	isMultiFilterEnabled = false,
 	isBigSkyEligible = false,
-	recommendedDesignSlugs = [],
 } ) => {
 	const hasCategories = !! ( categorization?.categories || [] ).length;
 
@@ -546,7 +512,6 @@ const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
 					showActiveThemeBadge={ showActiveThemeBadge }
 					isMultiFilterEnabled={ isMultiFilterEnabled }
 					isBigSkyEligible={ isBigSkyEligible }
-					recommendedDesignSlugs={ recommendedDesignSlugs }
 				/>
 				<InView onChange={ ( inView ) => inView && onViewAllDesigns() } />
 			</div>

diff --git a/packages/design-picker/src/hooks/use-filtered-designs.ts b/packages/design-picker/src/hooks/use-filtered-designs.ts
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { isBlankCanvasDesign, getDesignSlug } from '../utils';
+import { isBlankCanvasDesign } from '../utils';
 import { useDesignPickerFilters } from './use-design-picker-filters';
 import type { Design } from '../types';
 
@@ -62,38 +62,22 @@ export const getFilteredDesignsByCategory = (
 	return filteredDesignsByCategory;
 };
 
-interface UseFilteredDesignsByGroupOptions {
-	excludeDesigns?: Design[];
-}
-
-export const useFilteredDesignsByGroup = (
-	designs: Design[],
-	{ excludeDesigns }: UseFilteredDesignsByGroupOptions = {}
-): { [ key: string ]: Design[] } => {
+export const useFilteredDesignsByGroup = ( designs: Design[] ): { [ key: string ]: Design[] } => {
 	const { selectedCategoriesWithoutDesignTier, selectedDesignTiers } = useDesignPickerFilters();
 
 	const filteredDesigns = useMemo( () => {
-		const excludeDesignSlugs = excludeDesigns
-			? excludeDesigns.map( ( design ) => getDesignSlug( design ) )
-			: [];
-		const excludeDesignSlugsSet = new Set( excludeDesignSlugs );
-		const all =
-			excludeDesignSlugs.length > 0
-				? designs.filter( ( design ) => ! excludeDesignSlugsSet.has( getDesignSlug( design ) ) )
-				: designs;
-
 		if ( selectedCategoriesWithoutDesignTier.length > 0 || selectedDesignTiers.length > 0 ) {
 			return getFilteredDesignsByCategory(
-				all,
+				designs,
 				selectedCategoriesWithoutDesignTier,
 				selectedDesignTiers
 			);
 		}
 
 		return {
-			all,
+			all: designs,
 		};
-	}, [ designs, excludeDesigns, selectedCategoriesWithoutDesignTier, selectedDesignTiers ] );
+	}, [ designs, selectedCategoriesWithoutDesignTier, selectedDesignTiers ] );
 
 	return filteredDesigns;
 };