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

package/package.json

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

package/src/components/controls/easing.tsx

@@ -5,6 +5,8 @@ import { type FieldProps } from '../../types';
 import { PromotionSelect } from '../../ui/promotion-select';
 import { DEFAULT_VALUES } from '../interaction-details';
 
+const TRACKING_DATA = { target_name: 'interactions_easing', location_l2: 'interactions' } as const;
+
 export const EASING_OPTIONS = {
 	easeIn: __( 'Ease In', 'elementor' ),
 	easeInOut: __( 'Ease In Out', 'elementor' ),
@@ -33,6 +35,7 @@ export function Easing( {}: FieldProps ) {
 			disabledOptions={ disabledOptions }
 			promotionContent={ __( 'Upgrade to control the smoothness of the interaction.', 'elementor' ) }
 			upgradeUrl="https://go.elementor.com/go-pro-interactions-easing-modal/"
+			trackingData={ TRACKING_DATA }
 		/>
 	);
 }

package/src/components/controls/effect.tsx

@@ -5,6 +5,8 @@ import { type FieldProps } from '../../types';
 import { PromotionSelect } from '../../ui/promotion-select';
 import { DEFAULT_VALUES } from '../interaction-details';
 
+const TRACKING_DATA = { target_name: 'interactions_effect', location_l2: 'interactions' } as const;
+
 export const EFFECT_OPTIONS = {
 	fade: __( 'Fade', 'elementor' ),
 	slide: __( 'Slide', 'elementor' ),
@@ -35,6 +37,7 @@ export function Effect( { value, onChange }: FieldProps ) {
 				'elementor'
 			) }
 			upgradeUrl="https://go.elementor.com/go-pro-interactions-custom-effect-modal/"
+			trackingData={ TRACKING_DATA }
 		/>
 	);
 }

package/src/components/controls/replay.tsx

@@ -7,6 +7,8 @@ import { __ } from '@wordpress/i18n';
 import { type ReplayFieldProps } from '../../types';
 import { InteractionsPromotionChip } from '../../ui/interactions-promotion-chip';
 
+const TRACKING_DATA = { target_name: 'interactions_replay', location_l2: 'interactions' } as const;
+
 export const REPLAY_OPTIONS = {
 	no: __( 'No', 'elementor' ),
 	yes: __( 'Yes', 'elementor' ),
@@ -45,6 +47,7 @@ export function Replay( { onChange, anchorRef }: ReplayFieldProps ) {
 					content={ __( 'Upgrade to run the animation every time its trigger occurs.', 'elementor' ) }
 					upgradeUrl={ 'https://go.elementor.com/go-pro-interactions-replay-modal/' }
 					anchorRef={ anchorRef }
+					trackingData={ TRACKING_DATA }
 				/>
 			</Box>
 		</Box>

package/src/components/controls/trigger.tsx

@@ -5,6 +5,8 @@ import { type FieldProps } from '../../types';
 import { PromotionSelect } from '../../ui/promotion-select';
 import { DEFAULT_VALUES } from '../interaction-details';
 
+const TRACKING_DATA = { target_name: 'interactions_trigger', location_l2: 'interactions' } as const;
+
 export const TRIGGER_OPTIONS = {
 	load: __( 'Page load', 'elementor' ),
 	scrollIn: __( 'Scroll into view', 'elementor' ),
@@ -33,6 +35,7 @@ export function Trigger( { value, onChange }: FieldProps ) {
 			promotionLabel={ __( 'PRO triggers', 'elementor' ) }
 			promotionContent={ __( 'Upgrade to unlock more interactions triggers.', 'elementor' ) }
 			upgradeUrl="https://go.elementor.com/go-pro-interactions-triggers-modal/"
+			trackingData={ TRACKING_DATA }
 		/>
 	);
 }

package/src/ui/interactions-promotion-chip.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { forwardRef, type MouseEvent, type RefObject, useImperativeHandle, useState } from 'react';
+import { forwardRef, type MouseEvent, type RefObject, useCallback, useImperativeHandle, useState } from 'react';
+import { type PromotionTrackingData, trackUpgradePromotionClick, trackViewPromotion } from '@elementor/editor-controls';
 import { PromotionChip, PromotionPopover, useCanvasClickHandler } from '@elementor/editor-ui';
 import { Box } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -8,6 +9,7 @@ export type InteractionsPromotionChipProps = {
 	content: string;
 	upgradeUrl: string;
 	anchorRef?: RefObject< HTMLElement | null >;
+	trackingData: PromotionTrackingData;
 };
 
 export type InteractionsPromotionChipRef = {
@@ -15,14 +17,21 @@ export type InteractionsPromotionChipRef = {
 };
 
 export const InteractionsPromotionChip = forwardRef< InteractionsPromotionChipRef, InteractionsPromotionChipProps >(
-	( { content, upgradeUrl, anchorRef }, ref ) => {
+	( { content, upgradeUrl, anchorRef, trackingData }, ref ) => {
 		const [ isOpen, setIsOpen ] = useState( false );
 
 		useCanvasClickHandler( isOpen, () => setIsOpen( false ) );
 
-		const toggle = () => setIsOpen( ( prev ) => ! prev );
+		const toggle = useCallback( () => {
+			setIsOpen( ( prev ) => {
+				if ( ! prev ) {
+					trackViewPromotion( trackingData );
+				}
+				return ! prev;
+			} );
+		}, [ trackingData ] );
 
-		useImperativeHandle( ref, () => ( { toggle } ), [] );
+		useImperativeHandle( ref, () => ( { toggle } ), [ toggle ] );
 
 		const handleToggle = ( e: MouseEvent ) => {
 			e.stopPropagation();
@@ -42,6 +51,7 @@ export const InteractionsPromotionChip = forwardRef< InteractionsPromotionChipRe
 					e.stopPropagation();
 					setIsOpen( false );
 				} }
+				onCtaClick={ () => trackUpgradePromotionClick( trackingData ) }
 			>
 				<Box
 					onMouseDown={ ( e: MouseEvent ) => e.stopPropagation() }

package/src/ui/promotion-select.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { type MouseEvent, useRef } from 'react';
+import { type PromotionTrackingData } from '@elementor/editor-controls';
 import { MenuListItem } from '@elementor/editor-ui';
 import { MenuSubheader, Select, type SelectChangeEvent } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -14,6 +15,7 @@ type PromotionSelectProps = {
 	promotionLabel?: string;
 	promotionContent: string;
 	upgradeUrl: string;
+	trackingData: PromotionTrackingData;
 };
 
 export function PromotionSelect( {
@@ -24,6 +26,7 @@ export function PromotionSelect( {
 	promotionLabel,
 	promotionContent,
 	upgradeUrl,
+	trackingData,
 }: PromotionSelectProps ) {
 	const promotionRef = useRef< InteractionsPromotionChipRef >( null );
 	const anchorRef = useRef< HTMLElement >( null );
@@ -63,6 +66,7 @@ export function PromotionSelect( {
 					upgradeUrl={ upgradeUrl }
 					ref={ promotionRef }
 					anchorRef={ anchorRef }
+					trackingData={ trackingData }
 				/>
 			</MenuSubheader>