Revert "Design Picker: Group results by the best matching and categor…

…ies (#97…" (#97313) This reverts commit 98b37ca.
Automattic · Dec 11, 2024 · e03cc69 · e03cc69
1 parent 98b37ca
commit e03cc69
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 192 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,4 +1,3 @@
-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';
@@ -9,11 +8,8 @@ import type { Step } from '../../types';
  */
 const DesignSetup: Step = ( props ) => {
 	const translate = useTranslate();
-	const hasEnTranslation = useHasEnTranslation();
 
-	const headerText = hasEnTranslation( 'Pick a theme' )
-		? translate( 'Pick a theme' )
-		: translate( 'Pick a design' );
+	const headerText = 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 theme' ) ).toBeInTheDocument();
+				expect( screen.getByText( 'Pick a design' ) ).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, useHasEnTranslation } from '@automattic/i18n-utils';
+import { useLocale } from '@automattic/i18n-utils';
 import { StepContainer, DESIGN_FIRST_FLOW } from '@automattic/onboarding';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
@@ -130,7 +130,6 @@ 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;
@@ -915,11 +914,7 @@ const UnifiedDesignPickerStep: Step = ( { navigation, flow, stepName } ) => {
 	const heading = (
 		<FormattedHeader
 			id="step-header"
-			headerText={
-				hasEnTranslation( 'Pick a theme' )
-					? translate( 'Pick a theme' )
-					: translate( 'Pick a design' )
-			}
+			headerText={ 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/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 themes matched.' ) }</span>;
+	return <span>{ translate( 'No designs matched.' ) }</span>;
 };
 
 export default NoResults;
diff --git a/packages/design-picker/src/components/style.scss b/packages/design-picker/src/components/style.scss
@@ -76,28 +76,16 @@
 		}
 	}
 
-	.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-bottom: 24px;
-		}
+	.design-picker__grid,
+	.design-picker__grid-minimal {
+		flex: 5;
 	}
 
 	.design-picker__grid {
-		flex: 5;
+		margin: 0 -12px 30px;
+	}
+
+	.design-picker__grid-minimal {
 		margin: 0 -12px 30px;
 	}
 
@@ -156,6 +144,23 @@
 			}
 		}
 
+		.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;
@@ -420,7 +425,7 @@
 
 	.design-picker__grid {
 		@supports ( display: grid ) {
-			row-gap: 24px;
+			row-gap: 32px;
 
 			@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
@@ -2,9 +2,9 @@ import { recordTracksEvent } from '@automattic/calypso-analytics';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { useCallback, useMemo, useRef, useState } from 'react';
-import { InView } from 'react-intersection-observer';
+import { useInView } from 'react-intersection-observer';
 import { SHOW_ALL_SLUG } from '../constants';
-import { useFilteredDesignsByGroup } from '../hooks/use-filtered-designs';
+import { useFilteredDesigns } from '../hooks/use-filtered-designs';
 import {
 	isDefaultGlobalStylesVariationSlug,
 	isFeatureCategory,
@@ -170,78 +170,6 @@ 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;
@@ -294,35 +222,18 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 	isMultiFilterEnabled = false,
 	onChangeTier,
 } ) => {
-	const translate = useTranslate();
-	const { all, best, ...designsByGroup } = useFilteredDesignsByGroup( designs );
-	const categories = categorization?.categories || [];
-	const isNoResults = Object.values( designsByGroup ).every(
-		( categoryDesigns ) => categoryDesigns.length === 0
-	);
+	const filteredDesigns = useFilteredDesigns( designs );
 	const categoryTypes = useMemo(
-		() => categories.filter( ( { slug } ) => isFeatureCategory( slug ) ),
+		() => ( categorization?.categories || [] ).filter( ( { slug } ) => isFeatureCategory( slug ) ),
 		[ categorization?.categories ]
 	);
 	const categoryTopics = useMemo(
-		() => categories.filter( ( { slug } ) => ! isFeatureCategory( slug ) ),
+		() =>
+			( categorization?.categories || [] ).filter( ( { slug } ) => ! isFeatureCategory( slug ) ),
 		[ categorization?.categories ]
 	);
 
-	const getCategoryName = ( value: string ) =>
-		categories.find( ( { slug } ) => slug === value )?.name || '';
-
-	const designCardProps = {
-		locale,
-		isPremiumThemeAvailable,
-		shouldLimitGlobalStyles,
-		onChangeVariation,
-		onPreview,
-		getBadge,
-		oldHighResImageLoading,
-		showActiveThemeBadge,
-		siteActiveTheme,
-	};
+	const translate = useTranslate();
 
 	return (
 		<div>
@@ -357,34 +268,26 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 				) }
 			</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 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>
 		</div>
 	);
 };
@@ -428,6 +331,16 @@ 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', {
@@ -452,7 +365,7 @@ const UnifiedDesignPicker: React.FC< UnifiedDesignPickerProps > = ( {
 					isMultiFilterEnabled={ isMultiFilterEnabled }
 					onChangeTier={ onChangeTier }
 				/>
-				<InView onChange={ ( inView ) => inView && onViewAllDesigns() } />
+				{ bottomAnchorContent }
 			</div>
 		</div>
 	);