@elementor/editor-controls 4.0.0-manual → 4.0.1

package/src/controls/transition-control/transition-selector.tsx

@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
 import { useBoundProp } from '../../bound-prop-context';
 import { ItemSelector } from '../../components/item-selector';
 import ControlActions from '../../control-actions/control-actions';
+import { trackUpgradePromotionClick } from '../../utils/tracking';
 import { transitionProperties, transitionsItemsList } from './data';
 
 const toTransitionSelectorValue = ( label: string ) => {
@@ -170,6 +171,12 @@ export const TransitionSelector = ( {
 									'elementor'
 								) }
 								upgradeUrl={ PRO_UPGRADE_URL }
+								onCtaClick={ () =>
+									trackUpgradePromotionClick( {
+										target_name: 'transition_property',
+										location_l2: 'style',
+									} )
+								}
 							/>
 						) : null
 					}

package/src/hooks/use-font-families.ts

@@ -1,52 +1,49 @@
 import { useMemo } from 'react';
-import { getElementorConfig, type SupportedFonts } from '@elementor/editor-v1-adapters';
-import { __ } from '@wordpress/i18n';
+import { getElementorConfig } from '@elementor/editor-v1-adapters';
 
 import { type FontCategory } from '../controls/font-family-control/font-family-control';
 
-const supportedCategories: Record< SupportedFonts, string > = {
-	system: __( 'System', 'elementor' ),
-	custom: __( 'Custom Fonts', 'elementor' ),
-	googlefonts: __( 'Google Fonts', 'elementor' ),
+type FontControlConfig = {
+	groups?: Record< string, string >;
+	options?: Record< string, string >;
 };
 
-const getFontFamilies = () => {
+const getFontControlConfig = (): FontControlConfig => {
 	const { controls } = getElementorConfig();
 
-	const options = controls?.font?.options;
-
-	if ( ! options ) {
-		return null;
-	}
-
-	return options;
+	return controls?.font ?? {};
 };
 
 export const useFontFamilies = () => {
-	const fontFamilies = getFontFamilies();
+	const { groups, options } = getFontControlConfig();
 
 	return useMemo( () => {
-		const categoriesOrder: SupportedFonts[] = [ 'system', 'custom', 'googlefonts' ];
+		if ( ! groups || ! options ) {
+			return [];
+		}
+
+		const groupKeys = Object.keys( groups );
+		const groupIndexMap = new Map( groupKeys.map( ( key, index ) => [ key, index ] ) );
 
-		return Object.entries( fontFamilies || {} )
+		return Object.entries( options )
 			.reduce< FontCategory[] >( ( acc, [ font, category ] ) => {
-				if ( ! supportedCategories[ category as SupportedFonts ] ) {
+				const groupIndex = groupIndexMap.get( category );
+
+				if ( groupIndex === undefined ) {
 					return acc;
 				}
 
-				const categoryIndex = categoriesOrder.indexOf( category );
-
-				if ( ! acc[ categoryIndex ] ) {
-					acc[ categoryIndex ] = {
-						label: supportedCategories[ category as SupportedFonts ],
+				if ( ! acc[ groupIndex ] ) {
+					acc[ groupIndex ] = {
+						label: groups[ category ],
 						fonts: [],
 					};
 				}
 
-				acc[ categoryIndex ].fonts.push( font );
+				acc[ groupIndex ].fonts.push( font );
 
 				return acc;
 			}, [] )
 			.filter( Boolean );
-	}, [ fontFamilies ] );
+	}, [ groups, options ] );
 };

package/src/index.ts

@@ -38,6 +38,7 @@ export { transitionProperties, transitionsItemsList } from './controls/transitio
 export { DateTimeControl } from './controls/date-time-control';
 export { InlineEditingControl } from './controls/inline-editing-control';
 export { EmailFormActionControl } from './controls/email-form-action-control';
+export { UnstableSizeControl } from './controls/size-control/unstable-size-control';
 
 // components
 export { ControlFormLabel } from './components/control-form-label';
@@ -58,6 +59,7 @@ export { InlineEditor } from './components/inline-editor';
 export { InlineEditorToolbar } from './components/inline-editor-toolbar';
 export { UnstableSizeField } from './components/size/unstable-size-field';
 export { NumberInput } from './components/number-input';
+export { SizeComponent } from './controls/size-control/size-component';
 
 // types
 export type { ControlComponent } from './create-control';
@@ -80,6 +82,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',
+	} ) );
+};