feat: enhance category selection and update filters for onboarding

Author: Soare-Robert-Daniel

onboarding/src/Components/CategoryButtons.js

@@ -2,6 +2,7 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import classnames from 'classnames';
 import { track } from '../utils/rest';
+import { useMemo } from '@wordpress/element';
 
 const CategoryButtons = ( { categories, style } ) => {
 	const data = useSelect( ( select ) => ( {
@@ -13,6 +14,13 @@ const CategoryButtons = ( { categories, style } ) => {
 
 	const { setOnboardingStep, setCategory } = useDispatch( 'ti-onboarding' );
 
+	// Show "All" and "Free" categories after user selection. Marketing trick.
+	const availableCategories = useMemo(() => {
+		return Object.keys(categories).filter((key) => 
+			data.category || (key !== 'all' && key !== 'free')
+		);
+	}, [categories, data.category]);
+
 	const onClick = ( newCategory ) => {
 		setCategory( newCategory );
 
@@ -38,20 +46,20 @@ const CategoryButtons = ( { categories, style } ) => {
 
 	return (
 		<div className="ob-cat-wrap" style={ style }>
-			{ Object.keys( categories ).map( ( key, index ) => {
+			{ availableCategories.map( ( catSlug ) => {
 				const classes = classnames( {
 					cat: true,
-					[ key ]: true,
-					active: key === data.category,
+					[ catSlug ]: true,
+					active: catSlug === data.category,
 				} );
 
 				return (
 					<button
 						className={ classes }
-						key={ index }
-						onClick={ () => onClick( key ) }
+						key={ catSlug }
+						onClick={ () => onClick( catSlug ) }
 					>
-						{ categories[ key ] }
+						{ categories[ catSlug ] }
 					</button>
 				);
 			} ) }

onboarding/src/Components/Filters.js

@@ -6,6 +6,7 @@ import { ONBOARDING_CAT } from '../utils/common';
 const Filters = () => {
 	const categories = {
 		all: __( 'All', 'templates-patterns-collection' ),
+		free: __( 'Free', 'templates-patterns-collection' ),
 		...ONBOARDING_CAT,
 	};
 

onboarding/src/Components/Search.js

@@ -78,7 +78,6 @@ export default compose(
 			deleteQuery: () => setSearchQuery( '' ),
 			handleSubmit: ( e ) => {
 				e.preventDefault();
-				setCategory( 'all' );
 				if ( step === 1 ) {
 					setOnboardingStep( 2 );
 					const data = {

onboarding/src/Components/Sites.js

@@ -50,7 +50,7 @@ const Sites = ( { getSites, editor, category, searchQuery } ) => {
 			return items.filter( ( item ) => ! item.upsell );
 		}
 
-		if ( 'all' !== cat ) {
+		if ( cat && 'all' !== cat ) {
 			return items.filter( ( item ) => item.keywords.includes( cat ) );
 		}
 

onboarding/src/store/reducer.js

@@ -19,7 +19,7 @@ const initialLicense = licenseTIOB || {
 const initialState = {
 	sites: onboarding.sites || {},
 	editor: selectedEditor,
-	category: 'all',
+	category: '',
 	currentSite: null,
 	fetching: false,
 	searchQuery: '',

onboarding/src/utils/common.js

@@ -5,10 +5,11 @@ const trailingSlashIt = ( str ) => untrailingSlashIt( str ) + '/';
 
 const ONBOARDING_CAT = {
 	business: __( 'Business', 'templates-patterns-collection' ),
-	personal: __( 'Personal', 'templates-patterns-collection' ),
-	blog: __( 'Blogging', 'templates-patterns-collection' ),
-	portfolio: __( 'Portfolio', 'templates-patterns-collection' ),
-	woocommerce: __( 'E-Shop', 'templates-patterns-collection' ),
+	education: __( 'Education', 'templates-patterns-collection' ),
+	woocommerce: __( 'eCommerce', 'templates-patterns-collection' ),
+	news: __( 'News', 'templates-patterns-collection' ),
+	nonprofit: __( 'Non-Profit', 'templates-patterns-collection' ),
+	health: __( 'Health', 'templates-patterns-collection' ),
 };
 
 const EDITOR_MAP = {