@elementor/editor-components 3.33.0-261 → 3.33.0-262

package/src/components/create-component-form/create-component-form.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useEffect, useMemo, useState } from 'react';
-import { getElementLabel, type V1Element, type V1ElementData } from '@elementor/editor-elements';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { getElementLabel, type V1ElementData } from '@elementor/editor-elements';
 import { ThemeProvider } from '@elementor/editor-ui';
 import { StarIcon } from '@elementor/icons';
 import { __useDispatch as useDispatch } from '@elementor/store';
@@ -11,13 +11,20 @@ import { __ } from '@wordpress/i18n';
 import { useComponents } from '../../hooks/use-components';
 import { slice } from '../../store/store';
 import { type ComponentFormValues } from '../../types';
+import { trackComponentEvent } from '../../utils/tracking';
 import { useForm } from './hooks/use-form';
 import { createBaseComponentSchema, createSubmitComponentSchema } from './utils/component-form-schema';
+import {
+	type ComponentEventData,
+	type ContextMenuEventOptions,
+	getComponentEventData,
+} from './utils/get-component-event-data';
 import { replaceElementWithComponent } from './utils/replace-element-with-component';
 
 type SaveAsComponentEventData = {
-	element: V1Element;
+	element: V1ElementData;
 	anchorPosition: { top: number; left: number };
+	options?: ContextMenuEventOptions;
 };
 
 type ResultNotification = {
@@ -28,7 +35,7 @@ type ResultNotification = {
 
 export function CreateComponentForm() {
 	const [ element, setElement ] = useState< {
-		element: V1Element;
+		element: V1ElementData;
 		elementLabel: string;
 	} | null >( null );
 
@@ -38,12 +45,20 @@ export function CreateComponentForm() {
 
 	const dispatch = useDispatch();
 
+	const eventData = useRef< ComponentEventData | null >( null );
+
 	useEffect( () => {
 		const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = 'elementor/editor/open-save-as-component-form';
 
 		const openPopup = ( event: CustomEvent< SaveAsComponentEventData > ) => {
 			setElement( { element: event.detail.element, elementLabel: getElementLabel( event.detail.element.id ) } );
 			setAnchorPosition( event.detail.anchorPosition );
+
+			eventData.current = getComponentEventData( event.detail.element, event.detail.options );
+			trackComponentEvent( {
+				action: 'createClicked',
+				...eventData.current,
+			} );
 		};
 
 		window.addEventListener( OPEN_SAVE_AS_COMPONENT_FORM_EVENT, openPopup as EventListener );
@@ -65,7 +80,7 @@ export function CreateComponentForm() {
 				slice.actions.addUnpublished( {
 					uid,
 					name: values.componentName,
-					elements: [ element.element.model.toJSON( { remove: [ 'default' ] } ) as V1ElementData ],
+					elements: [ element.element ],
 				} )
 			);
 
@@ -73,6 +88,13 @@ export function CreateComponentForm() {
 
 			replaceElementWithComponent( element.element, { uid, name: values.componentName } );
 
+			trackComponentEvent( {
+				action: 'created',
+				component_uid: uid,
+				component_name: values.componentName,
+				...eventData.current,
+			} );
+
 			setResultNotification( {
 				show: true,
 				// Translators: %1$s: Component name, %2$s: Component UID
@@ -100,6 +122,11 @@ export function CreateComponentForm() {
 
 	const cancelSave = () => {
 		resetAndClosePopup();
+
+		trackComponentEvent( {
+			action: 'createCancelled',
+			...eventData.current,
+		} );
 	};
 
 	return (

package/src/components/create-component-form/utils/get-component-event-data.ts

@@ -0,0 +1,54 @@
+import { type V1ElementData } from '@elementor/editor-elements';
+
+export type ComponentEventData = {
+	nested_elements_count: number;
+	nested_components_count: number;
+	top_element_type: string;
+	location?: string;
+	secondary_location?: string;
+	trigger?: string;
+};
+
+export type ContextMenuEventOptions = Record< string, unknown > & {
+	location: string;
+	secondaryLocation: string;
+	trigger: string;
+};
+
+export const getComponentEventData = (
+	containerElement: V1ElementData,
+	options?: ContextMenuEventOptions
+): ComponentEventData => {
+	const { elementsCount, componentsCount } = countNestedElements( containerElement );
+
+	return {
+		nested_elements_count: elementsCount,
+		nested_components_count: componentsCount,
+		top_element_type: containerElement.elType,
+		location: options?.location,
+		secondary_location: options?.secondaryLocation,
+		trigger: options?.trigger,
+	};
+};
+
+function countNestedElements( container: V1ElementData ): { elementsCount: number; componentsCount: number } {
+	if ( ! container.elements || container.elements.length === 0 ) {
+		return { elementsCount: 0, componentsCount: 0 };
+	}
+
+	let elementsCount = container.elements.length;
+	let componentsCount = 0;
+
+	for ( const element of container.elements ) {
+		if ( element.widgetType === 'e-component' ) {
+			componentsCount++;
+		}
+
+		const { elementsCount: nestedElementsCount, componentsCount: nestedComponentsCount } =
+			countNestedElements( element );
+		elementsCount += nestedElementsCount;
+		componentsCount += nestedComponentsCount;
+	}
+
+	return { elementsCount, componentsCount };
+}

package/src/components/create-component-form/utils/replace-element-with-component.ts

@@ -1,4 +1,4 @@
-import { replaceElement, type V1Element, type V1ElementModelProps } from '@elementor/editor-elements';
+import { replaceElement, type V1ElementData, type V1ElementModelProps } from '@elementor/editor-elements';
 
 type ComponentInstanceParams = {
 	id?: number;
@@ -6,7 +6,7 @@ type ComponentInstanceParams = {
 	uid: string;
 };
 
-export const replaceElementWithComponent = ( element: V1Element, component: ComponentInstanceParams ) => {
+export const replaceElementWithComponent = ( element: V1ElementData, component: ComponentInstanceParams ) => {
 	replaceElement( {
 		currentElement: element,
 		newElement: createComponentModel( component ),

package/src/create-component-type.ts

@@ -12,6 +12,10 @@ import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters
 import { __ } from '@wordpress/i18n';
 
 import { apiClient } from './api';
+import { type ExtendedWindow } from './types';
+import { trackComponentEvent } from './utils/tracking';
+
+type ContextMenuEventData = { location: string; secondaryLocation: string; trigger: string };
 
 export const TYPE = 'e-component';
 
@@ -35,7 +39,8 @@ function createComponentView(
 	options: CreateTemplatedElementTypeOptions & { showLockedByModal?: ( lockedBy: string ) => void }
 ): typeof ElementView {
 	return class extends createTemplatedElementView( options ) {
-		legacyWindow = window as unknown as LegacyWindow;
+		legacyWindow = window as unknown as LegacyWindow & ExtendedWindow;
+		eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
 
 		afterSettingsResolve( settings: { [ key: string ]: unknown } ) {
 			if ( settings.component ) {
@@ -86,7 +91,8 @@ function createComponentView(
 							icon: 'eicon-edit',
 							title: () => __( 'Edit Component', 'elementor' ),
 							isEnabled: () => true,
-							callback: () => this.switchDocument(),
+							callback: ( _: unknown, eventData: ContextMenuEventData ) =>
+								this.editComponent( eventData ),
 						},
 					],
 				},
@@ -111,10 +117,31 @@ function createComponentView(
 			}
 		}
 
+		editComponent( { trigger, location, secondaryLocation }: ContextMenuEventData ) {
+			this.switchDocument();
+
+			const editorSettings = this.model.get( 'editor_settings' );
+
+			trackComponentEvent( {
+				action: 'edited',
+				component_uid: editorSettings?.component_uid,
+				component_name: editorSettings?.title,
+				location,
+				secondary_location: secondaryLocation,
+				trigger,
+			} );
+		}
+
 		handleDblClick( e: MouseEvent ) {
 			e.stopPropagation();
 
-			this.switchDocument();
+			const { triggers, locations, secondaryLocations } = this.eventsManagerConfig;
+
+			this.editComponent( {
+				trigger: triggers.doubleClick,
+				location: locations.canvas,
+				secondaryLocation: secondaryLocations.canvasElement,
+			} );
 		}
 
 		events() {

package/src/init.ts

@@ -25,15 +25,19 @@ import { removeComponentStyles } from './store/remove-component-styles';
 import { slice } from './store/store';
 import { beforeSave } from './sync/before-save';
 import { type ExtendedWindow } from './types';
+import { onElementDrop } from './utils/tracking';
 
 const COMPONENT_DOCUMENT_TYPE = 'elementor_component';
 
 export function init() {
 	stylesRepository.register( componentsStylesProvider );
+
 	registerSlice( slice );
+
 	registerElementType( TYPE, ( options: CreateTemplatedElementTypeOptions ) =>
 		createComponentType( { ...options, showLockedByModal: openEditModeDialog } )
 	);
+
 	registerDataHook( 'dependency', 'editor/documents/close', ( args ) => {
 		const document = getV1CurrentDocument();
 		if ( document.config.type === COMPONENT_DOCUMENT_TYPE ) {
@@ -42,6 +46,8 @@ export function init() {
 		return true;
 	} );
 
+	registerDataHook( 'after', 'preview/drop', onElementDrop );
+
 	( window as unknown as ExtendedWindow ).elementorCommon.__beforeSave = beforeSave;
 
 	injectTab( {

package/src/utils/tracking.ts

@@ -0,0 +1,47 @@
+import { type V1Element } from '@elementor/editor-elements';
+import { getMixpanel } from '@elementor/mixpanel';
+import { __getState as getState } from '@elementor/store';
+
+import { selectCreatedThisSession } from '../store/store';
+import { type ExtendedWindow } from '../types';
+
+type ComponentEventData = Record< string, unknown > & {
+	action: 'createClicked' | 'created' | 'createCancelled' | 'instanceAdded' | 'edited';
+};
+
+export const trackComponentEvent = ( { action, ...data }: ComponentEventData ) => {
+	const { dispatchEvent, config } = getMixpanel();
+	if ( ! config?.names?.components?.[ action ] ) {
+		return;
+	}
+
+	const name = config.names.components[ action ];
+	dispatchEvent?.( name, data );
+};
+
+export const onElementDrop = ( _args: unknown, element: V1Element ) => {
+	if ( ! ( element.model.get( 'widgetType' ) === 'e-component' ) ) {
+		return;
+	}
+
+	const editorSettings = element.model.get( 'editor_settings' );
+	const componentName = editorSettings?.title;
+	const componentUID = editorSettings?.component_uid;
+	const instanceId = element.id;
+
+	const createdThisSession = selectCreatedThisSession( getState() );
+	const isSameSessionReuse = componentUID && createdThisSession.includes( componentUID );
+
+	const eventsManagerConfig = ( window as unknown as ExtendedWindow ).elementorCommon.eventsManager.config;
+	const { locations, secondaryLocations } = eventsManagerConfig;
+
+	trackComponentEvent( {
+		action: 'instanceAdded',
+		instance_id: instanceId,
+		component_uid: componentUID,
+		component_name: componentName,
+		is_same_session_reuse: isSameSessionReuse,
+		location: locations.widgetPanel,
+		secondary_location: secondaryLocations.componentsTab,
+	} );
+};