Add onInsert callback into PersonalizationTags from store

[MAILPOET-6354]

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

@@ -1,6 +1,7 @@
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { PersonalizationTag } from '../../store';
+import { PersonalizationTag, storeName } from '../../store';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 const CategorySection = ( {
 	groupedTags,
@@ -9,6 +10,13 @@ const CategorySection = ( {
 	groupedTags: Record< string, PersonalizationTag[] >;
 	activeCategory: string | null;
 } ) => {
+	const { togglePersonalizationTagsModal } = useDispatch( storeName );
+
+	const { onInsert } = useSelect(
+		( select ) => select( storeName ).getPersonalizationTagsState(),
+		[]
+	);
+
 	const categoriesToRender: [ string, PersonalizationTag[] ][] =
 		activeCategory === null
 			? Object.entries( groupedTags ) // Render all categories
@@ -32,7 +40,17 @@ const CategorySection = ( {
 										<strong>{ item.name }</strong>
 										{ item.token }
 									</div>
-									<Button variant="link">
+									<Button
+										variant="link"
+										onClick={ () => {
+											if ( onInsert ) {
+												onInsert( item.token );
+											}
+											togglePersonalizationTagsModal(
+												false
+											);
+										} }
+									>
 										{ __( 'Insert' ) }
 									</Button>
 								</div>

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

@@ -38,12 +38,16 @@ export function togglePreviewModal( isOpen: boolean ) {
 	} as const;
 }
 
-export function togglePersonalizationTagsModal( isOpen: boolean ) {
+export function togglePersonalizationTagsModal(
+	isOpen: boolean,
+	payload: Partial< State[ 'personalizationTags' ] > = {}
+) {
 	return {
 		type: 'CHANGE_PERSONALIZATION_TAGS_STATE',
-		state: { isModalOpened: isOpen } as Partial<
+		state: {
-			State[ 'personalizationTags' ]
+			isModalOpened: isOpen,
-		>,
+			...payload,
+		} as Partial< State[ 'personalizationTags' ] >,
 	} as const;
 }
 
@@ -266,6 +270,7 @@ export function revertAndSaveTemplate( template ) {
 				);
 		}
 	};
+}
 
 export function* loadPersonalizationTags() {
 	const data = yield apiFetch( {

packages/js/email-editor/src/store/initial-state.ts

@@ -41,6 +41,7 @@ export function getInitialState(): State {
 		personalizationTags: {
 			isModalOpened: false,
 			list: [],
+			onInsert: null,
 		},
 	};
 }

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

@@ -203,6 +203,7 @@ export type State = {
 	personalizationTags: {
 		isModalOpened: boolean;
 		list: PersonalizationTag[];
+		onInsert: ( ( value: string ) => void ) | null;
 	};
 };