Design Picker: Update the feature categories (#97215)

Automattic · Dec 9, 2024 · dd5c9e2 · dd5c9e2
1 parent 935ae6d
commit dd5c9e2
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
diff --git a/packages/design-picker/src/components/unified-design-picker.tsx b/packages/design-picker/src/components/unified-design-picker.tsx
@@ -6,8 +6,12 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { SHOW_ALL_SLUG } from '../constants';
 import { useFilteredDesigns } from '../hooks/use-filtered-designs';
-import { getAssemblerDesign, isDefaultGlobalStylesVariationSlug } from '../utils';
-import { isLockedStyleVariation } from '../utils/is-locked-style-variation';
+import {
+	getAssemblerDesign,
+	isDefaultGlobalStylesVariationSlug,
+	isFeatureCategory,
+	isLockedStyleVariation,
+} from '../utils';
 import DesignPickerCategoryFilter from './design-picker-category-filter';
 import DesignPickerTierFilter from './design-picker-tier-filter';
 import DesignPreviewImage from './design-preview-image';
@@ -227,14 +231,13 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 } ) => {
 	const hasCategories = !! Object.keys( categorization?.categories || {} ).length;
 	const filteredDesigns = useFilteredDesigns( designs, categorization );
-	const features = [ 'blog', 'portfolio', 'podcast', 'store' ];
 	const featureCategories = useMemo(
-		() => ( categorization?.categories || [] ).filter( ( { slug } ) => features.includes( slug ) ),
+		() => ( categorization?.categories || [] ).filter( ( { slug } ) => isFeatureCategory( slug ) ),
 		[ categorization?.categories ]
 	);
 	const subjectCategories = useMemo(
 		() =>
-			( categorization?.categories || [] ).filter( ( { slug } ) => ! features.includes( slug ) ),
+			( categorization?.categories || [] ).filter( ( { slug } ) => ! isFeatureCategory( slug ) ),
 		[ categorization?.categories ]
 	);
 

diff --git a/packages/design-picker/src/constants.ts b/packages/design-picker/src/constants.ts
@@ -42,3 +42,14 @@ export const PREMIUM_THEME = 'premium';
 export const DOT_ORG_THEME = 'dot-org';
 export const BUNDLED_THEME = 'bundled';
 export const MARKETPLACE_THEME = 'marketplace';
+
+/**
+ * Categories
+ */
+export const FEATURE_CATEGORIES = {
+	BLOG: 'blog',
+	NEWSLETTER: 'newsletter',
+	PORTFOLIO: 'portfolio',
+	PODCAST: 'podcast',
+	STORE: 'store',
+};
diff --git a/packages/design-picker/src/utils/index.ts b/packages/design-picker/src/utils/index.ts
@@ -1,4 +1,5 @@
 export * from './available-designs';
 export * from './designs';
 export * from './global-styles';
+export * from './is-feature-category';
 export * from './is-locked-style-variation';
diff --git a/packages/design-picker/src/utils/is-feature-category.ts b/packages/design-picker/src/utils/is-feature-category.ts
@@ -0,0 +1,5 @@
+import { FEATURE_CATEGORIES } from '../constants';
+
+const featureCategorySet = new Set( Object.values( FEATURE_CATEGORIES ) );
+
+export const isFeatureCategory = ( categorySlug: string ) => featureCategorySet.has( categorySlug );