Add personalizationTags state to custom editor

[MAILPOET-6354]

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

@@ -38,6 +38,15 @@ export function togglePreviewModal( isOpen: boolean ) {
 	} as const;
 }
 
+export function togglePersonalizationTagsModal( isOpen: boolean ) {
+	return {
+		type: 'CHANGE_PERSONALIZATION_TAGS_STATE',
+		state: { isModalOpened: isOpen } as Partial<
+			State[ 'personalizationTags' ]
+		>,
+	} as const;
+}
+
 export function updateSendPreviewEmail( toEmail: string ) {
 	return {
 		type: 'CHANGE_PREVIEW_STATE',

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

@@ -38,5 +38,8 @@ export function getInitialState(): State {
 			isSendingPreviewEmail: false,
 			sendingPreviewStatus: null,
 		},
+		personalizationTags: {
+			isModalOpened: false,
+		},
 	};
 }

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

@@ -7,6 +7,14 @@ export function reducer( state: State, action ): State {
 				...state,
 				preview: { ...state.preview, ...action.state },
 			};
+		case 'CHANGE_PERSONALIZATION_TAGS_STATE':
+			return {
+				...state,
+				personalizationTags: {
+					...state.personalizationTags,
+					...action.state,
+				},
+			};
 		case 'TOGGLE_SETTINGS_SIDEBAR_ACTIVE_TAB':
 			return {
 				...state,

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

@@ -280,6 +280,12 @@ export function getPreviewState( state: State ): State[ 'preview' ] {
 	return state.preview;
 }
 
+export function getPersonalizationTagsState(
+	state: State
+): State[ 'personalizationTags' ] {
+	return state.personalizationTags;
+}
+
 export const getDeviceType = createRegistrySelector(
 	( select ) => () =>
 		// @ts-expect-error getDeviceType is missing in types.

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

@@ -193,6 +193,9 @@ export type State = {
 		isSendingPreviewEmail: boolean;
 		sendingPreviewStatus: SendingPreviewStatus | null;
 	};
+	personalizationTags: {
+		isModalOpened: boolean;
+	};
 };
 
 export type MailPoetEmailData = {