AI Logo Generator: fix placement property for open and close modal ev…

…ents (#38574) * Fix placement property on the open and close modal events * changelog * Changelog * Bump version
Automattic · Jul 26, 2024 · 8606d33 · 8606d33
1 parent 7c5e9b9
commit 8606d33
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 7 deletions.
diff --git a/projects/js-packages/ai-client/changelog/upate-jetpack-ai-fix-logo-generation-event-tracking b/projects/js-packages/ai-client/changelog/upate-jetpack-ai-fix-logo-generation-event-tracking
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+AI Logo Generator: support placement property on the generator modal, for tracking purposes.
diff --git a/projects/js-packages/ai-client/package.json b/projects/js-packages/ai-client/package.json
@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.15.1-alpha",
+	"version": "0.16.0-alpha",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {

diff --git a/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx b/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx
@@ -17,7 +17,6 @@ import {
 	EVENT_MODAL_OPEN,
 	EVENT_FEEDBACK,
 	EVENT_MODAL_CLOSE,
-	EVENT_PLACEMENT_QUICK_LINKS,
 	EVENT_GENERATE,
 } from '../constants.js';
 import useLogoGenerator from '../hooks/use-logo-generator.js';
@@ -46,6 +45,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	onApplyLogo,
 	siteDetails,
 	context,
+	placement,
 } ) => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
@@ -148,10 +148,10 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 
 	const handleModalOpen = useCallback( async () => {
 		setContext( context );
-		recordTracksEvent( EVENT_MODAL_OPEN, { context, placement: EVENT_PLACEMENT_QUICK_LINKS } );
+		recordTracksEvent( EVENT_MODAL_OPEN, { context, placement } );
 
 		initializeModal();
-	}, [ setContext, context, initializeModal ] );
+	}, [ setContext, context, placement, initializeModal ] );
 
 	const closeModal = () => {
 		// Reset the state when the modal is closed, so we trigger the modal initialization again when it's opened.
@@ -162,7 +162,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		setNeedsMoreRequests( false );
 		clearErrors();
 		setLogoAccepted( false );
-		recordTracksEvent( EVENT_MODAL_CLOSE, { context, placement: EVENT_PLACEMENT_QUICK_LINKS } );
+		recordTracksEvent( EVENT_MODAL_CLOSE, { context, placement } );
 	};
 
 	const handleApplyLogo = ( mediaId: number ) => {

diff --git a/projects/js-packages/ai-client/src/logo-generator/types.ts b/projects/js-packages/ai-client/src/logo-generator/types.ts
@@ -17,6 +17,7 @@ export interface GeneratorModalProps {
 	onClose: () => void;
 	onApplyLogo: ( mediaId: number ) => void;
 	context: string;
+	placement: string;
 }
 
 export interface LogoPresenterProps {

diff --git a/projects/plugins/jetpack/changelog/upate-jetpack-ai-fix-logo-generation-event-tracking b/projects/plugins/jetpack/changelog/upate-jetpack-ai-fix-logo-generation-event-tracking
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Jetpack AI: fix event tracking of logo generator to inform the proper placement.
diff --git a/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/constants.ts b/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/constants.ts
@@ -1 +1,3 @@
+export const TOOL_PLACEMENT = 'site-logo-block-extension' as const;
+export const PLACEMENT_CONTEXT = 'block-editor' as const;
 export const SITE_LOGO_BLOCK_AI_EXTENSION = 'ai-assistant-site-logo-support' as const;
diff --git a/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx b/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx
@@ -12,7 +12,7 @@ import { addFilter } from '@wordpress/hooks';
  */
 import { getFeatureAvailability } from '../../blocks/ai-assistant/lib/utils/get-feature-availability';
 import AiToolbarButton from './components/ai-toolbar-button.js';
-import { SITE_LOGO_BLOCK_AI_EXTENSION } from './constants.js';
+import { SITE_LOGO_BLOCK_AI_EXTENSION, TOOL_PLACEMENT, PLACEMENT_CONTEXT } from './constants.js';
 
 /**
  * Mininal type definition for the core select function.
@@ -127,7 +127,8 @@ const siteLogoEditWithAiComponents = createHigherOrderComponent( BlockEdit => {
 					isOpen={ isLogoGeneratorModalVisible }
 					onClose={ closeModal }
 					onApplyLogo={ applyLogoHandler }
-					context="block-editor"
+					context={ PLACEMENT_CONTEXT }
+					placement={ TOOL_PLACEMENT }
 					siteDetails={ siteDetails }
 				/>
 			</>