feat: enhance category button logic to handle editor-specific availability and default selection

Author: Soare-Robert-Daniel

onboarding/src/Components/CategoryButtons.js

@@ -2,24 +2,32 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import classnames from 'classnames';
 import { track } from '../utils/rest';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useEffect } from '@wordpress/element';
 
 const CategoryButtons = ( { categories, style } ) => {
 	const data = useSelect( ( select ) => ( {
 		category: select( 'ti-onboarding' ).getCurrentCategory(),
 		query: select( 'ti-onboarding' ).getSearchQuery(),
 		trackingId: select( 'ti-onboarding' ).getTrackingId(),
 		step: select( 'ti-onboarding' ).getCurrentStep(),
+		sitesMetadata: select( 'ti-onboarding' ).getSites(),
+		editor: select( 'ti-onboarding' ).getCurrentEditor(),
 	} ) );
 
 	const { setOnboardingStep, setCategory } = useDispatch( 'ti-onboarding' );
 
-	// Show "All" and "Free" categories after user selection.
 	const availableCategories = useMemo(() => {
 		return Object.keys(categories).filter((key) => 
+			// Show "All" and "Free" categories after user selection.
 			data.category || (key !== 'all' && key !== 'free')
-		);
-	}, [categories, data.category]);
+		).filter((key) => {
+			// Hide "Free" is there is not free template available on the selected editor.
+			if ( key !== 'free' ) {
+				return true;
+			}
+			return Object.values(data.sitesMetadata.sites?.[data.editor])?.some( (s) => ! s?.upsell);
+		});
+	}, [categories, data.category, data.sitesMetadata, data.editor]);
 
 	const onClick = ( newCategory ) => {
 		setCategory( newCategory );
@@ -44,6 +52,15 @@ const CategoryButtons = ( { categories, style } ) => {
 		}
 	};
 
+	/**
+	 * Default the category to 'all' when the current category is unavailable.
+	 */
+	useEffect(() => {
+		if (data.category && !availableCategories.includes(data.category)) {
+			setCategory('all');
+		}
+	}, [data.category, availableCategories, setCategory]);
+
 	return (
 		<div className="ob-cat-wrap" style={ style }>
 			{ availableCategories.map( ( catSlug ) => {