@elementor/editor-interactions 4.0.0-678 → 4.0.0-679

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-interactions",
-  "version": "4.0.0-678",
+  "version": "4.0.0-679",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,18 +39,19 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-controls": "4.0.0-678",
-    "@elementor/editor-elements": "4.0.0-678",
-    "@elementor/editor-mcp": "4.0.0-678",
-    "@elementor/editor-props": "4.0.0-678",
-    "@elementor/editor-responsive": "4.0.0-678",
-    "@elementor/editor-ui": "4.0.0-678",
-    "@elementor/editor-v1-adapters": "4.0.0-678",
+    "@elementor/editor-controls": "4.0.0-679",
+    "@elementor/editor-elements": "4.0.0-679",
+    "@elementor/editor-mcp": "4.0.0-679",
+    "@elementor/editor-props": "4.0.0-679",
+    "@elementor/editor-responsive": "4.0.0-679",
+    "@elementor/editor-ui": "4.0.0-679",
+    "@elementor/editor-v1-adapters": "4.0.0-679",
     "@elementor/icons": "^1.68.0",
-    "@elementor/schema": "4.0.0-678",
-    "@elementor/session": "4.0.0-678",
+    "@elementor/schema": "4.0.0-679",
+    "@elementor/session": "4.0.0-679",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-678",
+    "@elementor/utils": "4.0.0-679",
+    "@elementor/events": "4.0.0-679",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/interactions-list.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { Repeater } from '@elementor/editor-controls';
+import { Repeater, type SetRepeaterValuesMeta } from '@elementor/editor-controls';
 import { InfoCircleFilledIcon, PlayerPlayIcon } from '@elementor/icons';
 import { Alert, AlertTitle, Box, IconButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useInteractionsContext } from '../contexts/interactions-context';
 import { InteractionItemContextProvider } from '../contexts/interactions-item-context';
 import type { ElementInteractions, InteractionItemPropValue, InteractionItemValue } from '../types';
 import { buildDisplayLabel, createDefaultInteractionItem, extractString } from '../utils/prop-value-utils';
+import { trackInteractionCreated } from '../utils/tracking';
 import { InteractionsListItem } from './interactions-list-item';
 export const MAX_NUMBER_OF_INTERACTIONS = 5;
 
@@ -20,6 +22,7 @@ export type InteractionListProps = {
 
 export function InteractionsList( props: InteractionListProps ) {
 	const { interactions, onSelectInteractions, onPlayInteraction, triggerCreateOnShowEmpty } = props;
+	const { elementId } = useInteractionsContext();
 
 	const hasInitializedRef = useRef( false );
 
@@ -62,13 +65,23 @@ export function InteractionsList( props: InteractionListProps ) {
 	) : undefined;
 
 	const handleRepeaterChange = useCallback(
-		( newItems: ElementInteractions[ 'items' ] ) => {
+		(
+			newItems: ElementInteractions[ 'items' ],
+			_: unknown,
+			meta?: SetRepeaterValuesMeta< InteractionItemPropValue >
+		) => {
 			handleUpdateInteractions( {
 				...interactions,
 				items: newItems,
 			} );
+			if ( meta?.action?.type === 'add' ) {
+				const addedItem = meta.action.payload[ 0 ]?.item;
+				if ( addedItem ) {
+					trackInteractionCreated( elementId, addedItem );
+				}
+			}
 		},
-		[ interactions, handleUpdateInteractions ]
+		[ interactions, handleUpdateInteractions, elementId ]
 	);
 
 	const handleInteractionChange = useCallback(

package/src/components/interactions-tab.tsx

@@ -7,6 +7,8 @@ import { InteractionsProvider, useInteractionsContext } from '../contexts/intera
 import { PopupStateProvider } from '../contexts/popup-state-context';
 import { useElementInteractions } from '../hooks/use-element-interactions';
 import type { ElementInteractions } from '../types';
+import { createDefaultInteractionItem } from '../utils/prop-value-utils';
+import { trackInteractionCreated } from '../utils/tracking';
 import { EmptyState } from './empty-state';
 import { InteractionsList } from './interactions-list';
 
@@ -33,6 +35,7 @@ function InteractionsTabContent( { elementId }: { elementId: string } ) {
 				<EmptyState
 					onCreateInteraction={ () => {
 						firstInteractionState[ 1 ]( true );
+						trackInteractionCreated( elementId, createDefaultInteractionItem() );
 					} }
 				/>
 			) }

package/src/contexts/interactions-context.tsx

@@ -9,6 +9,7 @@ import {
 import { useElementInteractions } from '../hooks/use-element-interactions';
 
 type InteractionsContextValue = {
+	elementId: string;
 	interactions: ElementInteractions;
 	setInteractions: ( value: ElementInteractions | undefined ) => void;
 	playInteractions: ( interactionId: string ) => void;
@@ -45,6 +46,7 @@ export const InteractionsProvider = ( { children, elementId }: { children: React
 	};
 
 	const contextValue: InteractionsContextValue = {
+		elementId,
 		interactions,
 		setInteractions,
 		playInteractions,

package/src/utils/tracking.ts

@@ -0,0 +1,42 @@
+import { getElementLabel } from '@elementor/editor-elements';
+import { getMixpanel } from '@elementor/events';
+
+import type { InteractionItemPropValue } from '../types';
+import { extractString } from './prop-value-utils';
+
+const TRIGGER_LABELS: Record< string, string > = {
+	load: 'On page load',
+	scrollIn: 'Scroll into view',
+	scrollOut: 'Scroll out of view',
+	scrollOn: 'While scrolling',
+	hover: 'Hover',
+	click: 'Click',
+};
+
+const capitalize = ( s: string ) => s.charAt( 0 ).toUpperCase() + s.slice( 1 );
+
+export const trackInteractionCreated = ( elementId: string, item: InteractionItemPropValue ) => {
+	const { dispatchEvent, config } = getMixpanel();
+	if ( ! config?.names?.interactions?.created ) {
+		return;
+	}
+
+	const trigger = extractString( item.value.trigger );
+	const effect = extractString( item.value.animation.value.effect );
+	const type = extractString( item.value.animation.value.type );
+
+	dispatchEvent?.( config.names.interactions.created, {
+		app_type: config?.appTypes?.editor,
+		window_name: config?.appTypes?.editor,
+		interaction_type: config?.triggers?.click,
+		target_name: getElementLabel( elementId ),
+		interaction_result: 'interaction_created',
+		target_location: config?.locations?.widgetPanel,
+		location_l1: getElementLabel( elementId ),
+		location_l2: 'interactions',
+		interaction_description: 'interaction_created',
+		interaction_trigger: TRIGGER_LABELS[ trigger ] ?? capitalize( trigger ),
+		interaction_effect:
+			effect === 'custom' ? capitalize( effect ) : `${ capitalize( effect ) } ${ capitalize( type ) }`,
+	} );
+};