Add filtering personalization tags by category

[MAILPOET-6354]

packages/js/email-editor/src/components/personalization-tags/index.scss

@@ -1,3 +1,5 @@
+@import '~@wordpress/base-styles/colors';
+
 .mailpoet-personalization-tags-modal {
   p:first-child {
     margin-top: 0;
@@ -17,7 +19,7 @@
 
     .mailpoet-personalization-tags-modal__category-group-item {
       align-items: stretch;
-      border-bottom: 1px solid #ddd;
+      border-bottom: 1px solid var(--wp-components-color-gray-300, #ddd);
       display: flex;
       padding: 16px 0;
 
@@ -39,4 +41,33 @@
       }
     }
   }
+
+  .mailpoet-personalization-tags-modal__menu {
+    div[role="group"] {
+      display: flex;
+    }
+
+    .mailpoet-personalization-tags-modal__menu-item-active {
+      color: black;
+      font-weight: bold;
+    }
+
+    button {
+      align-items: center;
+      color: #0a7aff;
+      display: flex;
+      gap: 8px;
+      padding: 6px;
+      width: auto;
+      span  {
+        min-width: auto;
+      }
+    }
+    .mailpoet-personalization-tags-modal__menu-separator {
+      background-color: var(--wp-components-color-gray-700, #757575);
+      height: 16px;
+      margin: 10px 4px;
+      width: 1px;
+    }
+  }
 }

packages/js/email-editor/src/components/personalization-tags/personalization-tags-modal.tsx

@@ -1,11 +1,15 @@
-import { Modal, Button } from '@wordpress/components';
+import * as React from '@wordpress/element';
+import { Modal, Button, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { PersonalizationTag, storeName } from '../../store';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { external, Icon } from '@wordpress/icons';
 import './index.scss';
+import { useState } from '@wordpress/element';
 
 const PersonalizationTagsModal = () => {
+	const [ activeCategory, setActiveCategory ] = useState( null );
+
 	const { togglePersonalizationTagsModal } = useDispatch( storeName );
 
 	const { isModalOpened, list } = useSelect(
@@ -29,6 +33,11 @@ const PersonalizationTagsModal = () => {
 		{} as Record< string, PersonalizationTag[] >
 	);
 
+	const getMenuItemClass = ( category ) =>
+		category === activeCategory
+			? 'mailpoet-personalization-tags-modal__menu-item-active'
+			: '';
+
 	return (
 		<Modal
 			size="medium"
@@ -41,13 +50,71 @@ const PersonalizationTagsModal = () => {
 				personalize your emails. Learn more{ ' ' }
 				<Icon icon={ external } size={ 16 } />
 			</p>
-			{ Object.entries( groupedTags ).map( ( [ category, items ] ) => (
+			<MenuGroup className="mailpoet-personalization-tags-modal__menu">
-				<div key={ category }>
+				<MenuItem
+					onClick={ () => setActiveCategory( null ) }
+					className={ `${ getMenuItemClass( null ) }` }
+				>
+					{ __( 'All' ) }
+				</MenuItem>
+				<div
+					className="mailpoet-personalization-tags-modal__menu-separator"
+					aria-hidden="true"
+				></div>
+				{ Object.entries( groupedTags ).map(
+					( [ category ], index, array ) => (
+						<React.Fragment key={ category }>
+							<MenuItem
+								onClick={ () => setActiveCategory( category ) }
+								className={ `${ getMenuItemClass(
+									category
+								) }` }
+							>
+								{ category }
+							</MenuItem>
+							{ index < array.length - 1 && (
+								<div
+									className="mailpoet-personalization-tags-modal__menu-separator"
+									aria-hidden="true"
+								></div>
+							) }
+						</React.Fragment>
+					)
+				) }
+			</MenuGroup>
+			{ activeCategory === null ? (
+				// Render all categories
+				Object.entries( groupedTags ).map( ( [ category, items ] ) => (
+					<div key={ category }>
+						<div className="mailpoet-personalization-tags-modal__category">
+							{ category }
+						</div>
+						<div className="mailpoet-personalization-tags-modal__category-group">
+							{ items.map( ( item ) => (
+								<div
+									className="mailpoet-personalization-tags-modal__category-group-item"
+									key={ item.token }
+								>
+									<div className="mailpoet-personalization-tags-modal__item-text">
+										<strong>{ item.name }</strong>
+										{ item.token }
+									</div>
+									<Button variant="link">
+										{ __( 'Insert' ) }
+									</Button>
+								</div>
+							) ) }
+						</div>
+					</div>
+				) )
+			) : (
+				// Render selected category
+				<div>
 					<div className="mailpoet-personalization-tags-modal__category">
-						{ category }
+						{ activeCategory }
 					</div>
 					<div className="mailpoet-personalization-tags-modal__category-group">
-						{ items.map( ( item ) => (
+						{ groupedTags[ activeCategory ]?.map( ( item ) => (
 							<div
 								className="mailpoet-personalization-tags-modal__category-group-item"
 								key={ item.token }
@@ -63,7 +130,7 @@ const PersonalizationTagsModal = () => {
 						) ) }
 					</div>
 				</div>
-			) ) }
+			) }
 		</Modal>
 	);
 };