Add event tracking for MoreMenu, SaveAllButton, SendButton and TrashModal components

MAILPOET-6365

packages/js/email-editor/src/components/header/more-menu.tsx

@@ -8,6 +8,7 @@ import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { storeName } from '../../store';
 import { TrashModal } from './trash-modal';
+import { recordEvent } from '../../events';
 
 // See:
 //   https://github.com/WordPress/gutenberg/blob/9601a33e30ba41bac98579c8d822af63dd961488/packages/edit-post/src/components/header/more-menu/index.js
@@ -42,8 +43,13 @@ export function MoreMenu(): JSX.Element {
 				} }
 				icon={ moreVertical }
 				label={ __( 'More', 'mailpoet' ) }
+				onToggle={ ( isOpened ) =>
+					recordEvent( 'header_more_menu_dropdown_toggle', {
+						isOpened,
+					} )
+				}
 			>
-				{ () => (
+				{ ( { onClose } ) => (
 					<>
 						<MenuGroup label={ _x( 'View', 'noun', 'mailpoet' ) }>
 							<PreferenceToggleMenuItem
@@ -62,6 +68,11 @@ export function MoreMenu(): JSX.Element {
 									'Top toolbar deactivated',
 									'mailpoet'
 								) }
+								onToggle={ () =>
+									recordEvent(
+										'header_more_menu_fixed_toolbar_toggle'
+									)
+								}
 							/>
 							<PreferenceToggleMenuItem
 								scope="core"
@@ -79,6 +90,11 @@ export function MoreMenu(): JSX.Element {
 									'Spotlight mode deactivated',
 									'mailpoet'
 								) }
+								onToggle={ () =>
+									recordEvent(
+										'header_more_menu_focus_mode_toggle'
+									)
+								}
 							/>
 							<PreferenceToggleMenuItem
 								scope={ storeName }
@@ -97,6 +113,11 @@ export function MoreMenu(): JSX.Element {
 									'mailpoet'
 								) }
 								shortcut={ displayShortcut.secondary( 'f' ) }
+								onToggle={ () =>
+									recordEvent(
+										'header_more_menu_fullscreen_mode_toggle'
+									)
+								}
 							/>
 						</MenuGroup>
 						<MenuGroup>
@@ -109,13 +130,22 @@ export function MoreMenu(): JSX.Element {
 											''
 										);
 										await saveEditedEmail();
+										recordEvent(
+											'header_more_menu_restore_from_trash_button_clicked'
+										);
 									} }
 								>
 									{ __( 'Restore from trash', 'mailpoet' ) }
 								</MenuItem>
 							) : (
 								<MenuItem
-									onClick={ () => setShowTrashModal( true ) }
+									onClick={ () => {
+										setShowTrashModal( true );
+										recordEvent(
+											'header_more_menu_move_to_trash_button_clicked'
+										);
+										onClose();
+									} }
 									isDestructive
 								>
 									{ __( 'Move to trash', 'mailpoet' ) }

packages/js/email-editor/src/components/header/save-all-button.tsx

@@ -7,6 +7,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { storeName } from '../../store';
+import { recordEvent } from '../../events';
 
 const SaveAllContent = ( { onToggle } ) => {
 	// Hacky way to change the text in the templates row of the save dropdown
@@ -60,7 +61,12 @@ export function SaveAllButton() {
 				contentClassName="mailpoet-email-editor-save-button__dropdown"
 				renderToggle={ ( { onToggle } ) => (
 					<Button
-						onClick={ onToggle }
+						onClick={ () => {
+							recordEvent(
+								'header_save_all_button_save_button_clicked'
+							);
+							onToggle();
+						} }
 						variant="primary"
 						disabled={ isSaving }
 					>

packages/js/email-editor/src/components/header/send-button.tsx

@@ -8,6 +8,7 @@ import { useEntityProp } from '@wordpress/core-data';
 import { MailPoetEmailData, storeName } from '../../store';
 import { useSelect } from '@wordpress/data';
 import { useContentValidation, useEditorMode } from '../../hooks';
+import { recordEvent } from '../../events';
 
 export function SendButton() {
 	const [ mailpoetEmail ] = useEntityProp(
@@ -41,6 +42,7 @@ export function SendButton() {
 		<Button
 			variant="primary"
 			onClick={ () => {
+				recordEvent( 'header_send_button_clicked' );
 				if ( validateContent() ) {
 					window.location.href = `admin.php?page=mailpoet-newsletters#/send/${ mailpoetEmailData.id }`;
 				}

packages/js/email-editor/src/components/header/trash-modal.tsx

@@ -3,6 +3,7 @@ import { Button, Modal } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
+import { recordEvent } from '../../events';
 
 export function TrashModal( {
 	onClose,
@@ -20,6 +21,7 @@ export function TrashModal( {
 		onClose();
 	};
 	const trashCallback = async () => {
+		recordEvent( 'trash_modal_move_to_trash_button_clicked' );
 		const success = await deleteEntityRecord(
 			'postType',
 			'mailpoet_email',
@@ -45,6 +47,9 @@ export function TrashModal( {
 							'An error occurred while moving the email to the trash.',
 							'mailpoet'
 					  );
+				recordEvent( 'trash_modal_move_to_trash_error', {
+					errorMessage,
+				} );
 				await createErrorNotice( errorMessage, {
 					type: 'snackbar',
 					isDismissible: true,
@@ -57,8 +62,11 @@ export function TrashModal( {
 		<Modal
 			className="mailpoet-move-to-trash-modal"
 			title={ __( 'Move to trash', 'mailpoet' ) }
-			onRequestClose={ closeCallback }
-			focusOnMount="firstContentElement"
+			onRequestClose={ () => {
+				closeCallback();
+				recordEvent( 'trash_modal_closed' );
+			} }
+			focusOnMount
 		>
 			<p>
 				{ __(
@@ -67,7 +75,13 @@ export function TrashModal( {
 				) }
 			</p>
 			<div className="mailpoet-send-preview-modal-footer">
-				<Button variant="tertiary" onClick={ closeCallback }>
+				<Button
+					variant="tertiary"
+					onClick={ () => {
+						closeCallback();
+						recordEvent( 'trash_modal_cancel_button_clicked' );
+					} }
+				>
 					{ __( 'Cancel', 'mailpoet' ) }
 				</Button>
 				<Button variant="primary" onClick={ trashCallback }>