Design picker: Include partial category matches in best matching resu…

…lts (#98205)

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

@@ -1,6 +1,5 @@
 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';
@@ -324,7 +323,6 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 	isBigSkyEligible = false,
 } ) => {
 	const translate = useTranslate();
-	const hasEnTranslation = useHasEnTranslation();
 	const { selectedCategoriesWithoutDesignTier } = useDesignPickerFilters();
 
 	const categories = categorization?.categories || [];
@@ -408,11 +406,7 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 			{ isMultiFilterEnabled && selectedCategoriesWithoutDesignTier.length > 1 && (
 				<DesignCardGroup
 					{ ...designCardProps }
-					title={
-						hasEnTranslation( 'Best theme matches' )
-							? translate( 'Best theme matches' )
-							: translate( 'Best matching themes' )
-					}
+					title={ translate( 'Best matching themes' ) }
 					category="best"
 					designs={ best }
 				/>

packages/design-picker/src/hooks/use-filtered-designs.ts

@@ -45,7 +45,7 @@ export const getFilteredDesignsByCategory = (
 
 		// For designs that match all selected categories.
 		// Limit the best matches to at least 2 selected categories.
-		if ( categorySlugs.length > 1 && matchedCount === categorySlugs.length ) {
+		if ( categorySlugs.length > 1 && matchedCount > 1 ) {
 			filteredDesignsByCategory.best.push( design );
 			continue;
 		}
@@ -59,6 +59,21 @@ export const getFilteredDesignsByCategory = (
 		}
 	}
 
+	// sort best designs by highest number of matched categories
+	filteredDesignsByCategory.best.sort( ( a, b ) => {
+		const aMatchedCategorySlugs = categorySlugs.filter( ( categorySlug ) =>
+			a.categories.map( ( category ) => category.slug ).includes( categorySlug )
+		);
+		const bMatchedCategorySlugs = categorySlugs.filter( ( categorySlug ) =>
+			b.categories.map( ( category ) => category.slug ).includes( categorySlug )
+		);
+
+		return bMatchedCategorySlugs.length - aMatchedCategorySlugs.length;
+	} );
+
+	// limit the best designs to 6
+	filteredDesignsByCategory.best = filteredDesignsByCategory.best.slice( 0, 6 );
+
 	return filteredDesignsByCategory;
 };