Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add filtering personalization tags by category

Browse Source 
[MAILPOET-6354]
This commit is contained in:
Jan Lysý
2024-12-03 17:24:56 +01:00
committed by Aschepikov
parent d17faaa13a
commit 9282cf91c6
2 changed files with 105 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
}
}
}

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

@ -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 ] ) => (
<div key={ category }>
<MenuGroup className="mailpoet-personalization-tags-modal__menu">
<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>
);
};