CYS: add badge that informs how many patterns have been inserted from each category (#48668)

* add badge

* Add changefile(s) from automation for the following project(s): woocommerce

* no show 0

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen-homepage-ptk.tsx

@@ -16,10 +16,15 @@ import {
 import {
 	createInterpolateElement,
 	useContext,
+	useMemo,
 	useState,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import interpolateComponents from '@automattic/interpolate-components';
+import {
+	store as coreStore,
+	// @ts-expect-error No types for this exist yet.
+} from '@wordpress/core-data';
 // @ts-expect-error Missing type.
 import SidebarNavigationItem from '@wordpress/edit-site/build-module/components/sidebar-navigation-item';
 
@@ -40,6 +45,7 @@ import { useSelect } from '@wordpress/data';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
 import { useNetworkStatus } from '~/utils/react-hooks/use-network-status';
 import { isIframe, sendMessageToParent } from '~/customize-store/utils';
+import { useEditorBlocks } from '../hooks/use-editor-blocks';
 
 export const SidebarNavigationScreenHomepagePTK = ( {
 	onNavigateBackClick,
@@ -55,6 +61,48 @@ export const SidebarNavigationScreenHomepagePTK = ( {
 	);
 	const isTrackingDisallowed = trackingAllowed === 'no' || ! trackingAllowed;
 
+	const currentTemplate = useSelect(
+		( sel ) =>
+			// @ts-expect-error No types for this exist yet.
+			sel( coreStore ).__experimentalGetTemplateForLink( '/' ),
+		[]
+	);
+
+	const [ blocks ] = useEditorBlocks(
+		'wp_template',
+		currentTemplate?.id ?? ''
+	);
+
+	const numberOfPatternsAdded = useMemo( () => {
+		const categories = Object.keys( PATTERN_CATEGORIES );
+
+		const initialAccumulator = categories.reduce(
+			( acc, cat ) => ( {
+				...acc,
+				[ cat ]: 0,
+			} ),
+			{} as Record< string, number >
+		);
+
+		return blocks.reduce( ( acc, block ) => {
+			const blockCategories: Array< string > =
+				block.attributes?.metadata?.categories ?? [];
+
+			const foundCategory = blockCategories.find( ( blockCategory ) =>
+				categories.includes( blockCategory )
+			);
+
+			if ( foundCategory ) {
+				return {
+					...acc,
+					[ foundCategory ]: acc[ foundCategory ] + 1,
+				};
+			}
+
+			return acc;
+		}, initialAccumulator );
+	}, [ blocks ] );
+
 	let notice;
 	if ( isNetworkOffline ) {
 		notice = __(
@@ -151,7 +199,21 @@ export const SidebarNavigationScreenHomepagePTK = ( {
 										as={ SidebarNavigationItem }
 										withChevron
 									>
-										{ capitalize( label ) }
+										<div className="edit-site-sidebar-navigation-screen-patterns__group-homepage-label-container">
+											<span>{ capitalize( label ) }</span>
+											{ blocks.length > 0 &&
+												numberOfPatternsAdded[
+													categoryKey
+												] > 0 && (
+													<span className="edit-site-sidebar-navigation-screen-patterns__group-homepage-number-pattern">
+														{
+															numberOfPatternsAdded[
+																categoryKey
+															]
+														}
+													</span>
+												) }
+										</div>
 									</NavigatorButton>
 								</ItemGroup>
 							)

plugins/woocommerce-admin/client/customize-store/assembler-hub/style.scss

@@ -839,3 +839,12 @@ body.woocommerce-assembler {
 		max-width: 700px;
 	}
 }
+
+.edit-site-sidebar-navigation-screen-patterns__group-homepage-label-container {
+	display: flex;
+	justify-content: space-between;
+
+	.edit-site-sidebar-navigation-screen-patterns__group-homepage-number-pattern {
+		color: var(--gutenberg-gray-400, #ccc);
+	}
+}

plugins/woocommerce/changelog/48668-47464-cys-full-composability-ensure-adiscreetbadge-is-displayed-informing-how-many-patterns-have-been-inserted-from-each-category

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+CYS: add badge that informs how many patterns have been inserted from each category.