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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.0.0-676",
+  "version": "4.0.0-678",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.0.0-676",
-    "@elementor/editor-elements": "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/env": "4.0.0-676",
-    "@elementor/http-client": "4.0.0-676",
+    "@elementor/editor-current-user": "4.0.0-678",
+    "@elementor/editor-elements": "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/env": "4.0.0-678",
+    "@elementor/http-client": "4.0.0-678",
     "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.0.0-676",
-    "@elementor/events": "4.0.0-676",
-    "@elementor/query": "4.0.0-676",
-    "@elementor/session": "4.0.0-676",
+    "@elementor/locations": "4.0.0-678",
+    "@elementor/events": "4.0.0-678",
+    "@elementor/query": "4.0.0-678",
+    "@elementor/session": "4.0.0-678",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-676",
-    "@elementor/wp-media": "4.0.0-676",
+    "@elementor/utils": "4.0.0-678",
+    "@elementor/wp-media": "4.0.0-678",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/components/promotions/attributes-control.tsx

@@ -8,6 +8,7 @@ import { createControl } from '../../create-control';
 import { PromotionTrigger, type PromotionTriggerRef } from './promotion-trigger';
 
 const ARIA_LABEL = __( 'Attributes', 'elementor' );
+const TRACKING_DATA = { target_name: 'attributes', location_l2: 'general' } as const;
 
 export const AttributesControl = createControl( () => {
 	const triggerRef = useRef< PromotionTriggerRef >( null );
@@ -21,7 +22,7 @@ export const AttributesControl = createControl( () => {
 				alignItems: 'center',
 			} }
 		>
-			<PromotionTrigger ref={ triggerRef } promotionKey="attributes" />
+			<PromotionTrigger ref={ triggerRef } promotionKey="attributes" trackingData={ TRACKING_DATA } />
 			<Tooltip title={ ARIA_LABEL } placement="top">
 				<PlusIcon
 					aria-label={ ARIA_LABEL }

package/src/components/promotions/display-conditions-control.tsx

@@ -8,6 +8,7 @@ import { createControl } from '../../create-control';
 import { PromotionTrigger, type PromotionTriggerRef } from './promotion-trigger';
 
 const ARIA_LABEL = __( 'Display Conditions', 'elementor' );
+const TRACKING_DATA = { target_name: 'display_conditions', location_l2: 'general' } as const;
 
 export const DisplayConditionsControl = createControl( () => {
 	const triggerRef = useRef< PromotionTriggerRef >( null );
@@ -21,7 +22,7 @@ export const DisplayConditionsControl = createControl( () => {
 				alignItems: 'center',
 			} }
 		>
-			<PromotionTrigger ref={ triggerRef } promotionKey="displayConditions" />
+			<PromotionTrigger ref={ triggerRef } promotionKey="displayConditions" trackingData={ TRACKING_DATA } />
 			<Tooltip title={ ARIA_LABEL } placement="top">
 				<IconButton
 					size="tiny"

package/src/components/promotions/promotion-trigger.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { forwardRef, type ReactNode, useImperativeHandle, useState } from 'react';
+import { forwardRef, type ReactNode, useCallback, useImperativeHandle, useState } from 'react';
 import { PromotionChip, PromotionInfotip } from '@elementor/editor-ui';
 import { Box } from '@elementor/ui';
 
+import { type PromotionTrackingData, trackUpgradePromotionClick, trackViewPromotion } from '../../utils/tracking';
 import type { V4PromotionData, V4PromotionKey } from './types';
 
 function getV4Promotion( key: V4PromotionKey ): V4PromotionData | undefined {
@@ -12,6 +13,7 @@ function getV4Promotion( key: V4PromotionKey ): V4PromotionData | undefined {
 type PromotionTriggerProps = {
 	promotionKey: V4PromotionKey;
 	children?: ReactNode;
+	trackingData: PromotionTrackingData;
 };
 
 export type PromotionTriggerRef = {
@@ -19,13 +21,20 @@ export type PromotionTriggerRef = {
 };
 
 export const PromotionTrigger = forwardRef< PromotionTriggerRef, PromotionTriggerProps >(
-	( { promotionKey, children }, ref ) => {
+	( { promotionKey, children, trackingData }, ref ) => {
 		const [ isOpen, setIsOpen ] = useState( false );
 		const promotion = getV4Promotion( promotionKey );
 
-		const toggle = () => setIsOpen( ( prev ) => ! prev );
+		const toggle = useCallback( () => {
+			setIsOpen( ( prev ) => {
+				if ( ! prev ) {
+					trackViewPromotion( trackingData );
+				}
+				return ! prev;
+			} );
+		}, [ trackingData ] );
 
-		useImperativeHandle( ref, () => ( { toggle } ), [] );
+		useImperativeHandle( ref, () => ( { toggle } ), [ toggle ] );
 
 		return (
 			<>
@@ -40,6 +49,7 @@ export const PromotionTrigger = forwardRef< PromotionTriggerRef, PromotionTrigge
 							e.stopPropagation();
 							setIsOpen( false );
 						} }
+						onCtaClick={ () => trackUpgradePromotionClick( trackingData ) }
 					>
 						<Box
 							onClick={ ( e: MouseEvent ) => {

package/src/controls/number-control.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { numberPropTypeUtil, type PropType } from '@elementor/editor-props';
-import { InputAdornment } from '@elementor/ui';
+import { InputAdornment, Typography } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import { NumberInput } from '../components/number-input';
@@ -12,7 +12,13 @@ const isEmptyOrNaN = ( value?: string | number | null ) =>
 
 const renderSuffix = ( propType: PropType ) => {
 	if ( propType.meta?.suffix ) {
-		return <InputAdornment position="end">{ propType.meta.suffix }</InputAdornment>;
+		return (
+			<InputAdornment position="end">
+				<Typography variant="caption" color="text.secondary">
+					{ propType.meta.suffix as string }
+				</Typography>
+			</InputAdornment>
+		);
 	}
 	return <></>;
 };

package/src/index.ts

@@ -80,6 +80,8 @@ export type { FontCategory } from './controls/font-family-control/font-family-co
 export type { InlineEditorToolbarProps } from './components/inline-editor-toolbar';
 export type { V4PromotionData, V4PromotionKey } from './components/promotions/types';
 export type { PromotionTriggerRef } from './components/promotions/promotion-trigger';
+export { trackViewPromotion, trackUpgradePromotionClick } from './utils/tracking';
+export type { PromotionTrackingData } from './utils/tracking';
 
 // providers
 export {

package/src/utils/tracking.ts

@@ -0,0 +1,61 @@
+import { getSelectedElements } from '@elementor/editor-elements';
+import { getMixpanel } from '@elementor/events';
+
+export type PromotionTrackingData = {
+	target_name: string;
+	target_location?: 'widget_panel' | 'variables_manager';
+	location_l1?: string;
+	location_l2?: 'style' | 'general' | 'interactions';
+};
+
+type PromotionEventOptions = {
+	eventName: string | undefined;
+	interactionResult: string;
+	interactionDescription: string;
+};
+
+type MixpanelConfig = ReturnType< typeof getMixpanel >[ 'config' ];
+
+const getBaseEventProperties = ( data: PromotionTrackingData, config: MixpanelConfig ) => ( {
+	app_type: config?.appTypes?.editor ?? 'editor',
+	window_name: config?.appTypes?.editor ?? 'editor',
+	interaction_type: config?.triggers?.click ?? 'Click',
+	target_name: data.target_name,
+	target_location: data.target_location ?? 'widget_panel',
+	location_l1: data.location_l1 ?? getSelectedElements()[ 0 ]?.type ?? '',
+	...( data.location_l2 && { location_l2: data.location_l2 } ),
+} );
+
+const dispatchPromotionEvent = (
+	data: PromotionTrackingData,
+	resolveOptions: ( config: MixpanelConfig ) => PromotionEventOptions
+) => {
+	const { dispatchEvent, config } = getMixpanel();
+	const { eventName, interactionResult, interactionDescription } = resolveOptions( config );
+
+	if ( ! eventName ) {
+		return;
+	}
+
+	dispatchEvent?.( eventName, {
+		...getBaseEventProperties( data, config ),
+		interaction_result: interactionResult,
+		interaction_description: interactionDescription,
+	} );
+};
+
+export const trackViewPromotion = ( data: PromotionTrackingData ) => {
+	dispatchPromotionEvent( data, ( config ) => ( {
+		eventName: config?.names?.promotions?.viewPromotion,
+		interactionResult: config?.interactionResults?.promotionViewed ?? 'promotion_viewed',
+		interactionDescription: 'user_viewed_promotion',
+	} ) );
+};
+
+export const trackUpgradePromotionClick = ( data: PromotionTrackingData ) => {
+	dispatchPromotionEvent( data, ( config ) => ( {
+		eventName: config?.names?.promotions?.upgradePromotionClick,
+		interactionResult: config?.interactionResults?.upgradeNow ?? 'upgrade_now',
+		interactionDescription: 'user_clicked_upgrade_now',
+	} ) );
+};