From c3cb92cd47abc136ab9751e30aa4baf4d66e3efe Mon Sep 17 00:00:00 2001
From: Oluwaseun Olorunsola <seun.olorunsola@automattic.com>
Date: Fri, 20 Dec 2024 15:03:25 +0100
Subject: [PATCH] Add events for PersonalizationTags usage

MAILPOET-6365
---
 .../personalization-tags-modal.tsx            | 48 +++++++++++++++++--
 .../rich-text-with-button.tsx                 | 25 +++++++++-
 .../src/components/sidebar/details-panel.tsx  |  7 ++-
 3 files changed, 72 insertions(+), 8 deletions(-)

diff --git a/packages/js/email-editor/src/components/personalization-tags/personalization-tags-modal.tsx b/packages/js/email-editor/src/components/personalization-tags/personalization-tags-modal.tsx
index bd3f23c33d..b08d97c36b 100644
--- a/packages/js/email-editor/src/components/personalization-tags/personalization-tags-modal.tsx
+++ b/packages/js/email-editor/src/components/personalization-tags/personalization-tags-modal.tsx
@@ -7,6 +7,7 @@ import { useState } from '@wordpress/element';
 import { CategoryMenu } from './category-menu';
 import { CategorySection } from './category-section';
 import { LinkModal } from './link-modal';
+import { recordEvent, recordEventOnce } from '../../events';
 
 const PersonalizationTagsModal = ( {
 	onInsert,
@@ -42,6 +43,8 @@ const PersonalizationTagsModal = ( {
 		return null;
 	}
 
+	recordEventOnce( 'personalization_tags_modal_opened' );
+
 	const groupedTags: Record< string, PersonalizationTag[] > = list.reduce(
 		( groups, item ) => {
 			const { category, name, token } = item;
@@ -65,7 +68,10 @@ const PersonalizationTagsModal = ( {
 		<Modal
 			size="medium"
 			title={ __( 'Personalization Tags', 'mailpoet' ) }
-			onRequestClose={ closeCallback }
+			onRequestClose={ () => {
+				recordEvent( 'personalization_tags_modal_closed' );
+				closeCallback();
+			} }
 			className="mailpoet-personalization-tags-modal"
 		>
 			<p>
@@ -73,20 +79,52 @@ const PersonalizationTagsModal = ( {
 					'Insert personalization tags to dynamically fill in information and personalize your emails.',
 					'mailpoet'
 				) }{ ' ' }
-				<ExternalLink href="https://kb.mailpoet.com/article/435-a-guide-to-personalisation-tags-for-tailored-newsletters#list">
+				<ExternalLink
+					href="https://kb.mailpoet.com/article/435-a-guide-to-personalisation-tags-for-tailored-newsletters#list"
+					onClick={ () =>
+						recordEvent(
+							'personalization_tags_modal_learn_more_link_clicked'
+						)
+					}
+				>
 					{ __( 'Learn more', 'mailpoet' ) }
 				</ExternalLink>
 			</p>
-			<SearchControl onChange={ setSearchQuery } value={ searchQuery } />
+			<SearchControl
+				onChange={ ( theSearchQuery ) => {
+					setSearchQuery( theSearchQuery );
+					recordEventOnce(
+						'personalization_tags_modal_search_control_input_updated'
+					);
+				} }
+				value={ searchQuery }
+			/>
 			<CategoryMenu
 				groupedTags={ groupedTags }
 				activeCategory={ activeCategory }
-				onCategorySelect={ setActiveCategory }
+				onCategorySelect={ ( category ) => {
+					setActiveCategory( category );
+					recordEvent(
+						'personalization_tags_modal_category_menu_clicked',
+						{
+							category,
+						}
+					);
+				} }
 			/>
 			<CategorySection
 				groupedTags={ groupedTags }
 				activeCategory={ activeCategory }
-				onInsert={ onInsert }
+				onInsert={ ( insertedTag ) => {
+					onInsert( insertedTag );
+					recordEvent(
+						'personalization_tags_modal_tag_insert_button_clicked',
+						{
+							insertedTag,
+							activeCategory,
+						}
+					);
+				} }
 				closeCallback={ closeCallback }
 				canInsertLink={ canInsertLink }
 				openLinkModal={ ( tag ) => {
diff --git a/packages/js/email-editor/src/components/personalization-tags/rich-text-with-button.tsx b/packages/js/email-editor/src/components/personalization-tags/rich-text-with-button.tsx
index 971dd6e330..5206e3ca64 100644
--- a/packages/js/email-editor/src/components/personalization-tags/rich-text-with-button.tsx
+++ b/packages/js/email-editor/src/components/personalization-tags/rich-text-with-button.tsx
@@ -12,6 +12,7 @@ import { RichText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { PersonalizationTagsPopover } from './personalization-tags-popover';
 import { create, insert, toHTMLString } from '@wordpress/rich-text';
+import { recordEvent, recordEventOnce } from '../../events';
 
 export function RichTextWithButton( {
 	label,
@@ -67,7 +68,16 @@ export function RichTextWithButton( {
 				className="mailpoet-settings-panel__personalization-tags-button"
 				icon="shortcode"
 				title={ __( 'Personalization Tags', 'mailpoet' ) }
-				onClick={ () => setIsModalOpened( true ) }
+				onClick={ () => {
+					setIsModalOpened( true );
+					recordEvent(
+						'rich_text_with_button_personalization_tags_shortcode_icon_clicked',
+						{
+							attributeName,
+							label,
+						}
+					);
+				} }
 			/>
 			{ labelSuffix }
 		</>
@@ -94,6 +104,13 @@ export function RichTextWithButton( {
 						selectionRange
 					);
 					setIsModalOpened( false );
+					recordEvent(
+						'rich_text_with_button_personalization_tags_inserted',
+						{
+							attributeName,
+							value,
+						}
+					);
 				} }
 				closeCallback={ () => setIsModalOpened( false ) }
 			/>
@@ -147,6 +164,12 @@ export function RichTextWithButton( {
 						list
 					);
 					updateEmailMailPoetProperty( attributeName, value );
+					recordEventOnce(
+						'rich_text_with_button_input_field_updated',
+						{
+							attributeName,
+						}
+					);
 				} }
 				value={ mailpoetEmailData[ attributeName ] ?? '' }
 				data-automation-id={ `email_${ attributeName }` }
diff --git a/packages/js/email-editor/src/components/sidebar/details-panel.tsx b/packages/js/email-editor/src/components/sidebar/details-panel.tsx
index df5a85fe76..b162a7522f 100644
--- a/packages/js/email-editor/src/components/sidebar/details-panel.tsx
+++ b/packages/js/email-editor/src/components/sidebar/details-panel.tsx
@@ -72,7 +72,8 @@ export function DetailsPanel() {
 					onClick={ () =>
 						recordEvent(
 							'details_panel_preheader_help_text_link_clicked'
-						)}
+						)
+					}
 				/>
 			),
 		}
@@ -93,7 +94,9 @@ export function DetailsPanel() {
 					<ExternalLink
 						href="https://kb.mailpoet.com/article/435-a-guide-to-personalisation-tags-for-tailored-newsletters#list"
 						onClick={ () =>
-							recordEvent( 'details_panel_personalisation_tags_guide_link_clicked' )
+							recordEvent(
+								'details_panel_personalisation_tags_guide_link_clicked'
+							)
 						}
 					>
 						{ __( 'Guide', 'mailpoet' ) }