@elementor/editor-app-bar 4.0.7 → 4.0.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-app-bar",
   "description": "App Bar extension for @elementor/editor",
-  "version": "4.0.7",
+  "version": "4.0.8",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,18 +40,19 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-ui": "4.0.7",
-    "@elementor/http-client": "4.0.7",
-    "@elementor/editor": "4.0.7",
-    "@elementor/editor-documents": "4.0.7",
-    "@elementor/editor-responsive": "4.0.7",
-    "@elementor/editor-v1-adapters": "4.0.7",
-    "@elementor/icons": "^1.68.0",
-    "@elementor/locations": "4.0.7",
-    "@elementor/menus": "4.0.7",
-    "@elementor/events": "4.0.7",
+    "@elementor/editor-ui": "4.0.8",
+    "@elementor/http-client": "4.0.8",
+    "@elementor/editor": "4.0.8",
+    "@elementor/editor-documents": "4.0.8",
+    "@elementor/editor-responsive": "4.0.8",
+    "@elementor/editor-v1-adapters": "4.0.8",
+    "@elementor/icons": "~1.75.1",
+    "@elementor/locations": "4.0.8",
+    "@elementor/menus": "4.0.8",
+    "@elementor/events": "4.0.8",
     "@elementor/ui": "1.36.17",
-    "@wordpress/i18n": "^5.13.0"
+    "@wordpress/i18n": "^5.13.0",
+    "@elementor/editor-mcp": "4.0.8"
   },
   "devDependencies": {
     "tsup": "^8.3.5"

package/src/components/locations/tools-menu-location.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import AngieGuideLocation from '../../extensions/angie/components/angie-guide-location';
 import { toolsMenu } from '../../locations';
 import ToolbarMenu from '../ui/toolbar-menu';
 import ToolbarMenuMore from '../ui/toolbar-menu-more';
@@ -21,6 +22,7 @@ export default function ToolsMenuLocation() {
 			{ toolbarMenuItems.map( ( { MenuItem, id } ) => (
 				<MenuItem key={ id } />
 			) ) }
+			<AngieGuideLocation />
 			<SendFeedbackPopupLocation />
 			<IntegrationsMenuLocation />
 			{ popoverMenuItems.length > 0 && (

package/src/extensions/angie/angie-consts.ts

@@ -0,0 +1,20 @@
+import { __ } from '@wordpress/i18n';
+
+export const ANGIE_GUIDE_TOGGLE_EVENT = 'elementor/editor/toggle-angie-guide';
+export const CREATE_WIDGET_EVENT = 'elementor/editor/create-widget';
+
+export const ANGIE_BUTTON_ARIA_LABEL = __( 'Angie', 'elementor' );
+
+export const ANGIE_PROMOTION_IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/angie-promotion.svg';
+
+export const ANGIE_LEARN_MORE_URL = 'https://go.elementor.com/angie-learn-more';
+
+export const ANGIE_DESCRIPTION = __(
+	'Angie lets you generate custom widgets, sections, and code using simple instructions.',
+	'elementor'
+);
+
+export const AI_WIDGET_CTA_VIEWED_EVENT = 'ai_widget_cta_viewed' as const;
+export const ANGIE_TOP_BAR_PROMOTION_IMAGE_URL =
+	'https://assets.elementor.com/packages/v1/images/angie-top-bar-promotion.svg';
+export const ANGIE_TOP_BAR_DESCRIPTION = __( 'Build custom widgets using simple instructions.', 'elementor' );

package/src/extensions/angie/components/angie-guide-card.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Button, Chip, ClickAwayListener, CloseButton, Image, Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type Props = {
+	imageUrl: string;
+	description: string;
+	learnMoreUrl: string;
+	onInstall: () => void;
+	onClose: () => void;
+};
+
+export default function AngieGuideCard( { imageUrl, description, learnMoreUrl, onInstall, onClose }: Props ) {
+	return (
+		<ClickAwayListener onClickAway={ onClose }>
+			<Stack sx={ { width: 296 } } data-testid="e-angie-guide-card">
+				<Stack direction="row" alignItems="center" gap={ 1 } py={ 1 } px={ 2 }>
+					<Typography variant="subtitle2">{ __( 'Meet Angie', 'elementor' ) }</Typography>
+					<Chip label={ __( 'New', 'elementor' ) } size="small" color="info" variant="standard" />
+					<CloseButton
+						edge="end"
+						sx={ { ml: 'auto' } }
+						slotProps={ { icon: { fontSize: 'small' } } }
+						onClick={ onClose }
+					/>
+				</Stack>
+				<Image src={ imageUrl } alt={ __( 'Angie', 'elementor' ) } sx={ { height: 150, width: '100%' } } />
+				<Stack px={ 2 } pt={ 1.5 } pb={ 1 }>
+					<Typography variant="body2" color="secondary">
+						{ description }
+					</Typography>
+				</Stack>
+				<Stack direction="row" justifyContent="flex-end" gap={ 1 } pt={ 1 } pb={ 1.5 } px={ 2 }>
+					<Button
+						variant="text"
+						size="small"
+						color="secondary"
+						onClick={ () => {
+							window.open( learnMoreUrl, '_blank', 'noopener,noreferrer' );
+							onClose();
+						} }
+					>
+						{ __( 'Learn More', 'elementor' ) }
+					</Button>
+					<Button variant="contained" size="small" color="accent" onClick={ onInstall }>
+						{ __( 'Try for free', 'elementor' ) }
+					</Button>
+				</Stack>
+			</Stack>
+		</ClickAwayListener>
+	);
+}

package/src/extensions/angie/components/angie-guide-location.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { ThemeProvider } from '@elementor/editor-ui';
+import { useMixpanel } from '@elementor/events';
+import { Infotip } from '@elementor/ui';
+
+import {
+	AI_WIDGET_CTA_VIEWED_EVENT,
+	ANGIE_BUTTON_ARIA_LABEL,
+	ANGIE_GUIDE_TOGGLE_EVENT,
+	ANGIE_LEARN_MORE_URL,
+	ANGIE_TOP_BAR_DESCRIPTION,
+	ANGIE_TOP_BAR_PROMOTION_IMAGE_URL,
+	CREATE_WIDGET_EVENT,
+} from '../angie-consts';
+import AngieGuideCard from '../components/angie-guide-card';
+
+export default function AngieGuideLocation() {
+	const [ anchorEl, setAnchorEl ] = useState< Element | null >( null );
+	const { dispatchEvent } = useMixpanel();
+
+	const isOpen = Boolean( anchorEl );
+
+	useEffect( () => {
+		const handleToggle = () => {
+			setAnchorEl( ( prev ) => {
+				if ( prev ) {
+					return null;
+				}
+
+				return document.querySelector( `[aria-label="${ ANGIE_BUTTON_ARIA_LABEL }"]` );
+			} );
+		};
+
+		window.addEventListener( ANGIE_GUIDE_TOGGLE_EVENT, handleToggle );
+
+		return () => {
+			window.removeEventListener( ANGIE_GUIDE_TOGGLE_EVENT, handleToggle );
+		};
+	}, [] );
+
+	const handleClose = () => setAnchorEl( null );
+
+	const handleInstall = async () => {
+		dispatchEvent?.( AI_WIDGET_CTA_VIEWED_EVENT, {
+			entry_point: 'top_bar_icon',
+		} );
+		window.dispatchEvent(
+			new CustomEvent( CREATE_WIDGET_EVENT, {
+				detail: {
+					entry_point: 'top_bar_icon',
+				},
+			} )
+		);
+		handleClose();
+	};
+
+	return (
+		<ThemeProvider>
+			<Infotip
+				content={
+					<AngieGuideCard
+						imageUrl={ ANGIE_TOP_BAR_PROMOTION_IMAGE_URL }
+						description={ ANGIE_TOP_BAR_DESCRIPTION }
+						learnMoreUrl={ ANGIE_LEARN_MORE_URL }
+						onInstall={ handleInstall }
+						onClose={ handleClose }
+					/>
+				}
+				placement="bottom-start"
+				open={ isOpen }
+				disableHoverListener={ true }
+				PopperProps={ {
+					anchorEl,
+					modifiers: [
+						{
+							name: 'offset',
+							options: { offset: [ -4, -4 ] },
+						},
+					],
+				} }
+			>
+				<span />
+			</Infotip>
+		</ThemeProvider>
+	);
+}

package/src/extensions/angie/hooks/use-action-props.ts

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { isAngieAvailable } from '@elementor/editor-mcp';
+import { trackEvent } from '@elementor/events';
+import { AngieIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+import { AI_WIDGET_CTA_VIEWED_EVENT, ANGIE_GUIDE_TOGGLE_EVENT } from '../angie-consts';
+
+export default function useActionProps() {
+	const hasAngieInstalled = isAngieAvailable();
+	const visible = ! hasAngieInstalled;
+
+	useEffect( () => {
+		if ( ! visible ) {
+			return;
+		}
+
+		trackEvent( {
+			eventName: AI_WIDGET_CTA_VIEWED_EVENT,
+			entry_point: 'top_bar_icon',
+			has_angie_installed: false,
+		} );
+	}, [ visible ] );
+
+	return {
+		title: __( 'Angie', 'elementor' ),
+		icon: AngieIcon,
+		onClick: () => {
+			window.dispatchEvent( new CustomEvent( ANGIE_GUIDE_TOGGLE_EVENT ) );
+		},
+		selected: false,
+		visible,
+	};
+}

package/src/extensions/angie/index.ts

@@ -0,0 +1,10 @@
+import { toolsMenu } from '../../locations';
+import useActionProps from './hooks/use-action-props';
+
+export function init() {
+	toolsMenu.registerToggleAction( {
+		id: 'toggle-angie',
+		priority: 2,
+		useProps: useActionProps,
+	} );
+}

package/src/extensions/documents-settings/index.ts

@@ -4,7 +4,7 @@ import useActionProps from './hooks/use-action-props';
 export function init() {
 	toolsMenu.registerToggleAction( {
 		id: 'document-settings-button',
-		priority: 2,
+		priority: 3,
 		useProps: useActionProps,
 	} );
 }

package/src/extensions/index.ts

@@ -3,6 +3,7 @@
  * The code should be moved to the appropriate packages.
  */
 
+import { init as initAngie } from './angie';
 import { init as initConnect } from './connect';
 import { init as initDocumentsPreview } from './documents-preview';
 import { init as initDocumentsSave } from './documents-save';
@@ -21,6 +22,7 @@ import { init as initUserPreferences } from './user-preferences';
 import { init as initWordpress } from './wordpress';
 
 export function init() {
+	initAngie();
 	initDocumentsPreview();
 	initDocumentsSave();
 	initDocumentsSettings();