Add rendering Personalization tags to modal

[MAILPOET-6354]

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

@@ -0,0 +1,42 @@
+.mailpoet-personalization-tags-modal {
+  p:first-child {
+    margin-top: 0;
+  }
+  .mailpoet-personalization-tags-modal__category {
+    display: inline-block;
+    font-size: 11px;
+    line-height: 16px;
+    padding-bottom: 8px;
+    padding-top: 16px;
+    text-transform: uppercase;
+  }
+  .mailpoet-personalization-tags-modal__category-group {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .mailpoet-personalization-tags-modal__category-group-item {
+      align-items: stretch;
+      border-bottom: 1px solid #ddd;
+      display: flex;
+      padding: 16px 0;
+
+      .mailpoet-personalization-tags-modal__item-text {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        font-size: 12px;
+        gap: 5px;
+        justify-content: center;
+        line-height: 18px;
+      }
+
+      button.is-link {
+        flex: 0 0 auto;
+        font-size: 14px;
+        height: auto;
+        line-height: 2;
+      }
+    }
+  }
+}

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

@@ -1,12 +1,14 @@
-import { Modal } from '@wordpress/components';
+import { Modal, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { storeName } from '../../store';
+import { PersonalizationTag, storeName } from '../../store';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { external, Icon } from '@wordpress/icons';
+import './index.scss';
 
 const PersonalizationTagsModal = () => {
 	const { togglePersonalizationTagsModal } = useDispatch( storeName );
 
-	const { isModalOpened } = useSelect(
+	const { isModalOpened, list } = useSelect(
 		( select ) => select( storeName ).getPersonalizationTagsState(),
 		[]
 	);
@@ -14,13 +16,54 @@ const PersonalizationTagsModal = () => {
 	if ( ! isModalOpened ) {
 		return null;
 	}
+
+	const groupedTags: Record< string, PersonalizationTag[] > = list.reduce(
+		( groups, item ) => {
+			const { category } = item;
+			if ( ! groups[ category ] ) {
+				groups[ category ] = [];
+			}
+			groups[ category ].push( item );
+			return groups;
+		},
+		{} as Record< string, PersonalizationTag[] >
+	);
+
 	return (
 		<Modal
 			size="medium"
 			title={ __( 'Personalization Tags', 'mailpoet' ) }
 			onRequestClose={ () => togglePersonalizationTagsModal( false ) }
+			className="mailpoet-personalization-tags-modal"
 		>
-			<p>There will be a list of personalization tags here.</p>
+			<p>
+				Insert shortcodes to dynamically fill in information and
+				personalize your emails. Learn more{ ' ' }
+				<Icon icon={ external } size={ 16 } />
+			</p>
+			{ 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>
+			) ) }
 		</Modal>
 	);
 };

packages/js/email-editor/src/store/types.ts

@@ -166,6 +166,13 @@ export type EmailEditorUrls = {
 	listings: string;
 };
 
+export type PersonalizationTag = {
+	name: string;
+	token: string;
+	category: string;
+	attributes: string[];
+};
+
 export type State = {
 	inserterSidebar: {
 		isOpened: boolean;
@@ -195,12 +202,7 @@ export type State = {
 	};
 	personalizationTags: {
 		isModalOpened: boolean;
-		list: {
-			name: string;
-			token: string;
-			category: string;
-			attributes: string[];
-		}[];
+		list: PersonalizationTag[];
 	};
 };