@elementor/editor-variables 4.1.0-720 → 4.1.0-721

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "4.1.0-720",
+  "version": "4.1.0-721",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-720",
-    "@elementor/editor-canvas": "4.1.0-720",
-    "@elementor/editor-controls": "4.1.0-720",
-    "@elementor/editor-current-user": "4.1.0-720",
-    "@elementor/editor-mcp": "4.1.0-720",
-    "@elementor/editor-panels": "4.1.0-720",
-    "@elementor/editor-props": "4.1.0-720",
-    "@elementor/editor-ui": "4.1.0-720",
-    "@elementor/editor-v1-adapters": "4.1.0-720",
-    "@elementor/menus": "4.1.0-720",
-    "@elementor/http-client": "4.1.0-720",
+    "@elementor/editor": "4.1.0-721",
+    "@elementor/editor-canvas": "4.1.0-721",
+    "@elementor/editor-controls": "4.1.0-721",
+    "@elementor/editor-current-user": "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-ui": "4.1.0-721",
+    "@elementor/editor-v1-adapters": "4.1.0-721",
+    "@elementor/menus": "4.1.0-721",
+    "@elementor/http-client": "4.1.0-721",
     "@elementor/icons": "^1.72.0",
-    "@elementor/events": "4.1.0-720",
-    "@elementor/schema": "4.1.0-720",
+    "@elementor/events": "4.1.0-721",
+    "@elementor/schema": "4.1.0-721",
     "@elementor/ui": "1.37.2",
-    "@elementor/utils": "4.1.0-720",
+    "@elementor/utils": "4.1.0-721",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

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

@@ -25,7 +25,7 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { trackVariablesManagerEvent } from '../../utils/tracking';
+import { trackVariablesManagerEvent, trackVariableSyncToV3 } from '../../utils/tracking';
 import { type ErrorResponse, type MappedError, mapServerError } from '../../utils/validations';
 import { getMenuActionsForVariable, getVariableType } from '../../variables-registry/variable-type-registry';
 import { DeleteConfirmationDialog } from '../ui/delete-confirmation-dialog';
@@ -76,8 +76,8 @@ export function VariablesManagerPanel() {
 		handleOnChange,
 		createVariable,
 		handleDeleteVariable,
-		handleStartSync,
-		handleStopSync,
+		handleStartSync: startSyncFromState,
+		handleStopSync: stopSyncFromState,
 		handleSave,
 		isSaving,
 		handleSearch,
@@ -151,23 +151,37 @@ export function VariablesManagerPanel() {
 		[ handleDeleteVariable ]
 	);
 
-	const handleStopSyncWithConfirmation = useCallback(
+	const commitStopSync = useCallback(
 		( itemId: string ) => {
-			handleStopSync( itemId );
-			setStopSyncConfirmation( null );
+			stopSyncFromState( itemId );
+			const variable = variables[ itemId ];
+			if ( variable ) {
+				trackVariableSyncToV3( { variableLabel: variable.label, action: 'unsync' } );
+			}
 		},
-		[ handleStopSync ]
+		[ stopSyncFromState, variables ]
 	);
 
-	const handleShowStopSyncDialog = useCallback(
+	const handleStartSync = useCallback(
+		( itemId: string ) => {
+			startSyncFromState( itemId );
+			const variable = variables[ itemId ];
+			if ( variable ) {
+				trackVariableSyncToV3( { variableLabel: variable.label, action: 'sync' } );
+			}
+		},
+		[ startSyncFromState, variables ]
+	);
+
+	const handleStopSync = useCallback(
 		( itemId: string ) => {
 			if ( ! isStopSyncSuppressed ) {
 				setStopSyncConfirmation( itemId );
 			} else {
-				handleStopSync( itemId );
+				commitStopSync( itemId );
 			}
 		},
-		[ isStopSyncSuppressed, handleStopSync ]
+		[ isStopSyncSuppressed, commitStopSync ]
 	);
 
 	const buildMenuActions = useCallback(
@@ -182,7 +196,7 @@ export function VariablesManagerPanel() {
 				variableId,
 				handlers: {
 					onStartSync: handleStartSync,
-					onStopSync: handleShowStopSyncDialog,
+					onStopSync: handleStopSync,
 				},
 			} );
 
@@ -203,7 +217,7 @@ export function VariablesManagerPanel() {
 
 			return [ ...typeActions, deleteAction ];
 		},
-		[ variables, handleStartSync, handleShowStopSyncDialog ]
+		[ variables, handleStartSync, handleStopSync ]
 	);
 
 	const hasVariables = Object.keys( variables ).length > 0;
@@ -368,7 +382,10 @@ export function VariablesManagerPanel() {
 				<StopSyncConfirmationDialog
 					open
 					onClose={ () => setStopSyncConfirmation( null ) }
-					onConfirm={ () => handleStopSyncWithConfirmation( stopSyncConfirmation ) }
+					onConfirm={ () => {
+						commitStopSync( stopSyncConfirmation );
+						setStopSyncConfirmation( null );
+					} }
 				/>
 			) }
 

package/src/utils/tracking.ts

@@ -52,3 +52,32 @@ export const trackVariablesManagerEvent = ( { action, varType, controlPath }: Va
 
 	dispatchEvent?.( name, eventData );
 };
+
+type VariableSyncToV3Data = {
+	variableLabel: string;
+	action: 'sync' | 'unsync';
+};
+
+export const trackVariableSyncToV3 = ( { variableLabel, action }: VariableSyncToV3Data ) => {
+	try {
+		const { dispatchEvent, config } = getMixpanel();
+		if ( ! config?.names?.variables?.variableSyncToV3 ) {
+			return;
+		}
+
+		const name = config.names.variables.variableSyncToV3;
+		const isSync = action === 'sync';
+
+		dispatchEvent?.( name, {
+			interaction_type: 'click',
+			target_type: variableLabel,
+			target_name: isSync ? 'sync_to_v3' : 'unsync_to_v3',
+			interaction_result: isSync ? 'var_is_synced_to_V3' : 'var_is_unsynced_from_V3',
+			target_location: 'widget_panel',
+			location_l1: 'var_manager',
+			interaction_description: isSync
+				? `user_synced_${ variableLabel }_to_v3`
+				: `user_unsync_${ variableLabel }_from_v3`,
+		} );
+	} catch {}
+};