@elementor/editor-global-classes 4.1.0-719 → 4.1.0-721

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "4.1.0-719",
+  "version": "4.1.0-721",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,28 +39,28 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-719",
-    "@elementor/editor-current-user": "4.1.0-719",
-    "@elementor/editor-documents": "4.1.0-719",
-    "@elementor/editor-editing-panel": "4.1.0-719",
-    "@elementor/editor-mcp": "4.1.0-719",
-    "@elementor/editor-panels": "4.1.0-719",
-    "@elementor/editor-props": "4.1.0-719",
-    "@elementor/editor-variables": "4.1.0-719",
-    "@elementor/editor-styles": "4.1.0-719",
-    "@elementor/editor-canvas": "4.1.0-719",
-    "@elementor/editor-styles-repository": "4.1.0-719",
-    "@elementor/editor-ui": "4.1.0-719",
-    "@elementor/editor-v1-adapters": "4.1.0-719",
-    "@elementor/http-client": "4.1.0-719",
+    "@elementor/editor": "4.1.0-721",
+    "@elementor/editor-current-user": "4.1.0-721",
+    "@elementor/editor-documents": "4.1.0-721",
+    "@elementor/editor-editing-panel": "4.1.0-721",
+    "@elementor/editor-mcp": "4.1.0-721",
+    "@elementor/editor-panels": "4.1.0-721",
+    "@elementor/editor-props": "4.1.0-721",
+    "@elementor/editor-variables": "4.1.0-721",
+    "@elementor/editor-styles": "4.1.0-721",
+    "@elementor/editor-canvas": "4.1.0-721",
+    "@elementor/editor-styles-repository": "4.1.0-721",
+    "@elementor/editor-ui": "4.1.0-721",
+    "@elementor/editor-v1-adapters": "4.1.0-721",
+    "@elementor/http-client": "4.1.0-721",
     "@elementor/icons": "^1.68.0",
-    "@elementor/query": "4.1.0-719",
-    "@elementor/schema": "4.1.0-719",
-    "@elementor/store": "4.1.0-719",
+    "@elementor/query": "4.1.0-721",
+    "@elementor/schema": "4.1.0-721",
+    "@elementor/store": "4.1.0-721",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.1.0-719",
+    "@elementor/utils": "4.1.0-721",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/events": "4.1.0-719"
+    "@elementor/events": "4.1.0-721"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/class-manager/class-manager-panel.tsx

@@ -34,6 +34,7 @@ import { useDirtyState } from '../../hooks/use-dirty-state';
 import { useFilters } from '../../hooks/use-filters';
 import { saveGlobalClasses } from '../../save-global-classes';
 import { slice } from '../../store';
+import { trackGlobalClasses } from '../../utils/tracking';
 import { ActiveFilters } from '../search-and-filter/components/filter/active-filters';
 import { CssClassFilter } from '../search-and-filter/components/filter/css-class-filter';
 import { ClassManagerSearch } from '../search-and-filter/components/search/class-manager-search';
@@ -113,6 +114,7 @@ export function ClassManagerPanel() {
 				},
 			} )
 		);
+		trackGlobalClasses( { event: 'classSyncToV3', classId, action: 'unsync' } );
 		setStopSyncConfirmation( null );
 	}, [] );
 
@@ -125,6 +127,7 @@ export function ClassManagerPanel() {
 				},
 			} )
 		);
+		trackGlobalClasses( { event: 'classSyncToV3', classId, action: 'sync' } );
 		setStartSyncConfirmation( null );
 	}, [] );
 
@@ -221,6 +224,7 @@ export function ClassManagerPanel() {
 			{ startSyncConfirmation && (
 				<StartSyncToV3Modal
 					externalOpen
+					classId={ startSyncConfirmation }
 					onExternalClose={ () => setStartSyncConfirmation( null ) }
 					onConfirm={ () => handleStartSync( startSyncConfirmation ) }
 				/>

package/src/components/class-manager/start-sync-to-v3-modal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
 	Box,
 	Button,
@@ -12,22 +12,48 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { trackGlobalClasses } from '../../utils/tracking';
+
 const IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/class-manager-sync-modal.png';
 
 type StartSyncToV3ModalProps = {
 	externalOpen?: boolean;
+	classId?: string;
 	onExternalClose?: () => void;
 	onConfirm?: () => void;
 };
 
-export const StartSyncToV3Modal = ( { externalOpen, onExternalClose, onConfirm }: StartSyncToV3ModalProps = {} ) => {
+export const StartSyncToV3Modal = ( {
+	externalOpen,
+	classId,
+	onExternalClose,
+	onConfirm,
+}: StartSyncToV3ModalProps = {} ) => {
 	const [ shouldShowAgain, setShouldShowAgain ] = useState( true );
+	const hasTrackedExposure = useRef( false );
+
+	useEffect( () => {
+		if ( externalOpen && classId && ! hasTrackedExposure.current ) {
+			hasTrackedExposure.current = true;
+			trackGlobalClasses( { event: 'classSyncToV3PopupShown', classId } );
+		}
+
+		if ( ! externalOpen ) {
+			hasTrackedExposure.current = false;
+		}
+	}, [ externalOpen, classId ] );
 
 	const handleClose = () => {
+		if ( classId ) {
+			trackGlobalClasses( { event: 'classSyncToV3PopupClick', classId, action: 'cancel' } );
+		}
 		onExternalClose?.();
 	};
 
 	const handleConfirm = () => {
+		if ( classId ) {
+			trackGlobalClasses( { event: 'classSyncToV3PopupClick', classId, action: 'sync' } );
+		}
 		onConfirm?.();
 		onExternalClose?.();
 	};

package/src/utils/tracking.ts

@@ -72,6 +72,17 @@ type EventMap = {
 		type: string;
 		source: 'global' | 'local';
 	};
+	classSyncToV3PopupShown: {
+		classId: StyleDefinitionID;
+	};
+	classSyncToV3: {
+		classId: StyleDefinitionID;
+		action: 'sync' | 'unsync';
+	};
+	classSyncToV3PopupClick: {
+		classId: StyleDefinitionID;
+		action: 'sync' | 'cancel';
+	};
 };
 
 export type TrackingEvent = {
@@ -138,6 +149,43 @@ const getSanitizedData = async ( payload: TrackingEvent ): Promise< Record< stri
 				return { ...payload, classTitle: getCssClass( payload.classId ).label };
 			}
 			break;
+		case 'classSyncToV3PopupShown':
+			return {
+				...payload,
+				interaction_type: 'popup_shown',
+				target_type: 'popup',
+				target_name: 'sync_to_v3_popup',
+				interaction_result: 'popup_viewed',
+				target_location: 'widget_panel',
+				location_l1: 'class_manager',
+			};
+		case 'classSyncToV3': {
+			const classLabel = getCssClass( payload.classId ).label;
+			const isSync = payload.action === 'sync';
+			return {
+				...payload,
+				interaction_type: 'click',
+				target_type: classLabel,
+				target_name: isSync ? 'sync_to_v3' : 'unsync_to_v3',
+				interaction_result: isSync ? 'class_is_synced_to_V3' : 'class_is_unsynced_from_V3',
+				target_location: 'widget_panel',
+				location_l1: 'class_manager',
+				interaction_description: isSync
+					? `user_synced_${ classLabel }_to_v3`
+					: `user_unsync_${ classLabel }_from_v3`,
+			};
+		}
+		case 'classSyncToV3PopupClick': {
+			const isSyncAction = payload.action === 'sync';
+			return {
+				...payload,
+				interaction_type: 'click',
+				target_type: 'button',
+				target_name: isSyncAction ? 'sync_to_v3' : 'cancel',
+				interaction_result: isSyncAction ? 'class_is_synced' : 'cancel',
+				target_location: 'sync_to_v3_popup',
+			};
+		}
 		default:
 			return payload;
 	}