@elementor/editor-app-bar 4.1.0-838 → 4.1.0-beta2

package/package.json

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

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,54 @@
+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 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>
+					{ onInstall && (
+						<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,91 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { useCurrentUserCapabilities } from '@elementor/editor-current-user';
+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';
+import { useAutoShow } from '../hooks/use-auto-show';
+
+export function AngieGuideLocation() {
+	useAutoShow();
+	const [ anchorEl, setAnchorEl ] = useState< Element | null >( null );
+	const { dispatchEvent } = useMixpanel();
+	const { isAdmin } = useCurrentUserCapabilities();
+
+	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={ isAdmin ? handleInstall : undefined }
+						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

@@ -1,29 +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';
 
-const CREATE_WIDGET_EVENT = 'elementor/editor/create-widget';
+import { AI_WIDGET_CTA_VIEWED_EVENT, ANGIE_GUIDE_TOGGLE_EVENT } from '../angie-consts';
 
-const CREATE_WIDGET_PROMPT = `Create a widget for me.
-Goal: [What should this widget help me accomplish?]
-Placement: [Where will I see it in the editor/UI?]
-How it should work: `;
+export 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 ] );
 
-export default function useActionProps() {
 	return {
 		title: __( 'Angie', 'elementor' ),
 		icon: AngieIcon,
 		onClick: () => {
-			window.dispatchEvent(
-				new CustomEvent( CREATE_WIDGET_EVENT, {
-					detail: {
-						prompt: CREATE_WIDGET_PROMPT,
-						entry_point: 'top_bar',
-					},
-				} )
-			);
+			window.dispatchEvent( new CustomEvent( ANGIE_GUIDE_TOGGLE_EVENT ) );
 		},
 		selected: false,
-		visible: ! isAngieAvailable(),
+		visible,
 	};
 }

package/src/extensions/angie/hooks/use-auto-show.ts

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+
+import { ANGIE_GUIDE_TOGGLE_EVENT } from '../angie-consts';
+
+export function useAutoShow() {
+	useEffect( () => {
+		if ( ! window.elementor?.config?.angie?.autoShow ) {
+			return;
+		}
+
+		const id = setTimeout( () => {
+			window.dispatchEvent( new CustomEvent( ANGIE_GUIDE_TOGGLE_EVENT ) );
+		}, 0 );
+
+		return () => clearTimeout( id );
+	}, [] );
+}

package/src/extensions/angie/index.ts

@@ -1,5 +1,5 @@
 import { toolsMenu } from '../../locations';
-import useActionProps from './hooks/use-action-props';
+import { useActionProps } from './hooks/use-action-props';
 
 export function init() {
 	toolsMenu.registerToggleAction( {