Design Picker: Group results by the best matching and categories (2nd…

… try) (#97314) * Design Picker: Group results by the best matching and categories * Design Picker: Show no result only when no themes match any selected category * Update tests * Fix types * Design Picker: Limit the best matches to at least 2 selected categories * Fix lint * Update copy * Show last selected filter on top first * Make the category header sticky * Fix weird scrolling * Fix e2e tests
Automattic · Dec 11, 2024 · fd674b4 · fd674b4
1 parent 287fe55
commit fd674b4
Show file tree

Hide file tree

Showing 8 changed files with 193 additions and 101 deletions.
diff --git a/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/index.tsx b/client/landing/stepper/declarative-flow/internals/steps-repository/design-setup/index.tsx
@@ -1,3 +1,4 @@
+import { useHasEnTranslation } from '@automattic/i18n-utils';
 import { useTranslate } from 'i18n-calypso';
 import DocumentHead from 'calypso/components/data/document-head';
 import UnifiedDesignPicker from './unified-design-picker';
@@ -8,8 +9,11 @@ import type { Step } from '../../types';
  */
 const DesignSetup: Step = ( props ) => {
 	const translate = useTranslate();
+	const hasEnTranslation = useHasEnTranslation();
 
-	const headerText = translate( 'Pick a design' );
+	const headerText = hasEnTranslation( 'Pick a theme' )
+		? translate( 'Pick a theme' )
+		: translate( 'Pick a design' );
 
 	return (
 		<>

diff --git a/...r/declarative-flow/internals/steps-repository/design-setup/test/unified-design-picker.tsx b/...r/declarative-flow/internals/steps-repository/design-setup/test/unified-design-picker.tsx
@@ -182,7 +182,7 @@ describe( 'UnifiedDesignPickerStep', () => {
 			);
 
 			await waitFor( () => {
-				expect( screen.getByText( 'Pick a design' ) ).toBeInTheDocument();
+				expect( screen.getByText( 'Pick a theme' ) ).toBeInTheDocument();
 				expect( container.getElementsByClassName( 'unified-design-picker__designs' ) ).toHaveLength(
 					1
 				);

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
@@ -23,7 +23,7 @@ import {
 	isAssemblerDesign,
 	PERSONAL_THEME,
 } from '@automattic/design-picker';
-import { useLocale } from '@automattic/i18n-utils';
+import { useLocale, useHasEnTranslation } from '@automattic/i18n-utils';
 import { StepContainer, DESIGN_FIRST_FLOW } from '@automattic/onboarding';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
@@ -130,6 +130,7 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 
 	const translate = useTranslate();
 	const locale = useLocale();
+	const hasEnTranslation = useHasEnTranslation();
 
 	const { intent, goals } = useSelect( ( select ) => {
 		const onboardStore = select( ONBOARD_STORE ) as OnboardSelect;
@@ -914,7 +915,11 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 	const heading = (
 		<FormattedHeader
 			id="step-header"
-			headerText={ translate( 'Pick a design' ) }
+			headerText={
+				hasEnTranslation( 'Pick a theme' )
+					? translate( 'Pick a theme' )
+					: translate( 'Pick a design' )
+			}
 			subHeaderText={ translate(
 				'One of these homepage options could be great to start with. You can always change later.'
 			) }

diff --git a/packages/calypso-e2e/src/lib/flows/start-site-flow.ts b/packages/calypso-e2e/src/lib/flows/start-site-flow.ts
@@ -167,6 +167,6 @@ export class StartSiteFlow {
 	 * @param {string} themeName Name of theme, e.g. "Zoologist".
 	 */
 	async selectTheme( themeName: string ): Promise< void > {
-		await this.page.getByRole( 'link', { name: themeName } ).click();
+		await this.page.getByRole( 'link', { name: themeName } ).first().click();
 	}
 }
diff --git a/packages/design-picker/src/components/no-results/index.tsx b/packages/design-picker/src/components/no-results/index.tsx
@@ -3,7 +3,7 @@ import { useTranslate } from 'i18n-calypso';
 const NoResults = () => {
 	const translate = useTranslate();
 
-	return <span>{ translate( 'No designs matched.' ) }</span>;
+	return <span>{ translate( 'No themes matched.' ) }</span>;
 };
 
 export default NoResults;
diff --git a/packages/design-picker/src/components/style.scss b/packages/design-picker/src/components/style.scss
@@ -89,16 +89,28 @@
 		}
 	}
 
-	.design-picker__grid,
-	.design-picker__grid-minimal {
-		flex: 5;
-	}
+	.design-picker__design-card-group {
+		.design-picker__design-card-title {
+			position: sticky;
+			top: 0;
+			padding: 16px 12px;
+			margin: 0 -12px 8px;
+			color: var(--studio-black);
+			background-color: var(--color-body-background);
+			font-size: $font-body;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 24px;
+			z-index: 10;
+		}
 
-	.design-picker__grid {
-		margin: 0 -12px 30px;
+		.design-picker__grid {
+			margin-bottom: 24px;
+		}
 	}
 
-	.design-picker__grid-minimal {
+	.design-picker__grid {
+		flex: 5;
 		margin: 0 -12px 30px;
 	}
 
@@ -157,23 +169,6 @@
 			}
 		}
 
-		.design-picker__grid-minimal {
-			display: grid;
-			grid-template-columns: 1fr;
-			row-gap: 36px;
-			margin: 0 0 30px;
-
-			@include break-medium {
-				grid-template-columns: 1fr 1fr;
-				column-gap: 24px;
-			}
-
-			@include break-xlarge {
-				grid-template-columns: 1fr 1fr 1fr;
-				column-gap: 32px;
-			}
-		}
-
 		.design-button-container {
 			width: auto;
 			margin: 0;
@@ -438,7 +433,7 @@
 
 	.design-picker__grid {
 		@supports ( display: grid ) {
-			row-gap: 32px;
+			row-gap: 24px;
 
 			@include break-medium {
 				grid-template-columns: 1fr 1fr 1fr;

diff --git a/packages/design-picker/src/components/unified-design-picker.tsx b/packages/design-picker/src/components/unified-design-picker.tsx
@@ -3,9 +3,9 @@ import { Button } from '@automattic/components';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { useCallback, useMemo, useRef, useState } from 'react';
-import { useInView } from 'react-intersection-observer';
+import { InView } from 'react-intersection-observer';
 import { SHOW_ALL_SLUG } from '../constants';
-import { useFilteredDesigns } from '../hooks/use-filtered-designs';
+import { useFilteredDesignsByGroup } from '../hooks/use-filtered-designs';
 import {
 	isDefaultGlobalStylesVariationSlug,
 	isFeatureCategory,
@@ -171,6 +171,78 @@ const DesignCard: React.FC< DesignCardProps > = ( {
 	);
 };
 
+interface DesignCardGroup {
+	title?: string | React.ReactNode;
+	designs: Design[];
+	locale: string;
+	category?: string | null;
+	isPremiumThemeAvailable?: boolean;
+	shouldLimitGlobalStyles?: boolean;
+	oldHighResImageLoading?: boolean; // Temporary for A/B test.
+	showActiveThemeBadge?: boolean;
+	siteActiveTheme?: string | null;
+	showNoResults?: boolean;
+	onChangeVariation: ( design: Design, variation?: StyleVariation ) => void;
+	onPreview: ( design: Design, variation?: StyleVariation ) => void;
+	getBadge: ( themeId: string, isLockedStyleVariation: boolean ) => React.ReactNode;
+}
+
+const DesignCardGroup = ( {
+	title,
+	designs,
+	category,
+	locale,
+	isPremiumThemeAvailable,
+	shouldLimitGlobalStyles,
+	oldHighResImageLoading,
+	showActiveThemeBadge = false,
+	siteActiveTheme,
+	showNoResults,
+	onChangeVariation,
+	onPreview,
+	getBadge,
+}: DesignCardGroup ) => {
+	const content = (
+		<div className="design-picker__grid">
+			{ designs.map( ( design, index ) => {
+				return (
+					<DesignCard
+						key={ design.recipe?.slug ?? design.slug ?? index }
+						category={ category }
+						design={ design }
+						locale={ locale }
+						isPremiumThemeAvailable={ isPremiumThemeAvailable }
+						shouldLimitGlobalStyles={ shouldLimitGlobalStyles }
+						onChangeVariation={ onChangeVariation }
+						onPreview={ onPreview }
+						getBadge={ getBadge }
+						oldHighResImageLoading={ oldHighResImageLoading }
+						isActive={ showActiveThemeBadge && design.recipe?.stylesheet === siteActiveTheme }
+					/>
+				);
+			} ) }
+			{ showNoResults && designs.length === 0 && <NoResults /> }
+		</div>
+	);
+
+	if ( ! showNoResults && designs.length === 0 ) {
+		return null;
+	}
+
+	if ( ! title || designs.length === 0 ) {
+		return content;
+	}
+
+	return (
+		<div className="design-picker__design-card-group">
+			<div className="design-picker__design-card-title">
+				{ title } ({ designs.length })
+			</div>
+			{ content }
+		</div>
+	);
+};
+
 interface DesignPickerFilterGroupProps {
 	title?: string;
 	grow?: boolean;
@@ -227,18 +299,35 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 	onChangeTier,
 	isBigSkyEligible = false,
 } ) => {
-	const filteredDesigns = useFilteredDesigns( designs );
+	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(
-		() => ( categorization?.categories || [] ).filter( ( { slug } ) => isFeatureCategory( slug ) ),
+		() => categories.filter( ( { slug } ) => isFeatureCategory( slug ) ),
 		[ categorization?.categories ]
 	);
 	const categoryTopics = useMemo(
-		() =>
-			( categorization?.categories || [] ).filter( ( { slug } ) => ! isFeatureCategory( slug ) ),
+		() => categories.filter( ( { slug } ) => ! isFeatureCategory( slug ) ),
 		[ categorization?.categories ]
 	);
 
-	const translate = useTranslate();
+	const getCategoryName = ( value: string ) =>
+		categories.find( ( { slug } ) => slug === value )?.name || '';
+
+	const designCardProps = {
+		locale,
+		isPremiumThemeAvailable,
+		shouldLimitGlobalStyles,
+		onChangeVariation,
+		onPreview,
+		getBadge,
+		oldHighResImageLoading,
+		showActiveThemeBadge,
+		siteActiveTheme,
+	};
 
 	return (
 		<div>
@@ -284,26 +373,34 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 				</DesignPickerFilterGroup>
 			</div>
 
-			<div className="design-picker__grid">
-				{ filteredDesigns.map( ( design, index ) => {
-					return (
-						<DesignCard
-							key={ design.recipe?.slug ?? design.slug ?? index }
-							category={ categorization?.selections.join( ',' ) }
-							design={ design }
-							locale={ locale }
-							isPremiumThemeAvailable={ isPremiumThemeAvailable }
-							shouldLimitGlobalStyles={ shouldLimitGlobalStyles }
-							onChangeVariation={ onChangeVariation }
-							onPreview={ onPreview }
-							getBadge={ getBadge }
-							oldHighResImageLoading={ oldHighResImageLoading }
-							isActive={ showActiveThemeBadge && design.recipe?.stylesheet === siteActiveTheme }
-						/>
-					);
-				} ) }
-				{ filteredDesigns.length === 0 && <NoResults /> }
-			</div>
+			{ isMultiFilterEnabled && categorization && categorization.selections.length > 1 && (
+				<DesignCardGroup
+					{ ...designCardProps }
+					title={ translate( 'Best matching themes' ) }
+					category="best"
+					designs={ best }
+				/>
+			) }
+			{ /* We want to show the last one on top first. */ }
+			{ Object.entries( designsByGroup )
+				.reverse()
+				.map( ( [ categorySlug, categoryDesigns ], index, array ) => (
+					<DesignCardGroup
+						key={ categorySlug }
+						{ ...designCardProps }
+						title={
+							isMultiFilterEnabled
+								? translate( '%s themes', {
+										args: getCategoryName( categorySlug ),
+										comment: '%s will be a name of the theme category. e.g. Blog.',
+								  } )
+								: ''
+						}
+						category={ categorySlug }
+						designs={ categoryDesigns }
+						showNoResults={ index === array.length - 1 && isNoResults }
+					/>
+				) ) }
 		</div>
 	);
 };
@@ -351,16 +448,6 @@ const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
 } ) => {
 	const hasCategories = !! Object.keys( categorization?.categories || {} ).length;
 
-	const { ref } = useInView( {
-		onChange: ( inView ) => {
-			if ( inView ) {
-				onViewAllDesigns();
-			}
-		},
-	} );
-	// eslint-disable-next-line wpcalypso/jsx-classname-namespace
-	const bottomAnchorContent = <div className="design-picker__bottom_anchor" ref={ ref }></div>;
-
 	return (
 		<div
 			className={ clsx( 'design-picker', `design-picker--theme-light`, 'design-picker__unified', {
@@ -387,7 +474,7 @@ const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
 					onChangeTier={ onChangeTier }
 					isBigSkyEligible={ isBigSkyEligible }
 				/>
-				{ bottomAnchorContent }
+				<InView onChange={ ( inView ) => inView && onViewAllDesigns() } />
 			</div>
 		</div>
 	);