@elementor/editor-app-bar 4.1.0-beta1 → 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-beta1",
+  "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-beta1",
-    "@elementor/http-client": "4.1.0-beta1",
-    "@elementor/editor": "4.1.0-beta1",
-    "@elementor/editor-documents": "4.1.0-beta1",
-    "@elementor/editor-mcp": "4.1.0-beta1",
-    "@elementor/editor-responsive": "4.1.0-beta1",
-    "@elementor/editor-v1-adapters": "4.1.0-beta1",
+    "@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-beta1",
-    "@elementor/menus": "4.1.0-beta1",
-    "@elementor/events": "4.1.0-beta1",
+    "@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,6 +1,6 @@
 import * as React from 'react';
 
-import AngieGuideLocation from '../../extensions/angie/components/angie-guide-location';
+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';

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

@@ -6,11 +6,11 @@ type Props = {
 	imageUrl: string;
 	description: string;
 	learnMoreUrl: string;
-	onInstall: () => void;
+	onInstall?: () => void;
 	onClose: () => void;
 };
 
-export default function AngieGuideCard( { imageUrl, description, learnMoreUrl, onInstall, onClose }: Props ) {
+export function AngieGuideCard( { imageUrl, description, learnMoreUrl, onInstall, onClose }: Props ) {
 	return (
 		<ClickAwayListener onClickAway={ onClose }>
 			<Stack sx={ { width: 296 } } data-testid="e-angie-guide-card">
@@ -42,9 +42,11 @@ export default function AngieGuideCard( { imageUrl, description, learnMoreUrl, o
 					>
 						{ __( 'Learn More', 'elementor' ) }
 					</Button>
-					<Button variant="contained" size="small" color="accent" onClick={ onInstall }>
-						{ __( 'Try for free', '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

@@ -1,5 +1,6 @@
 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';
@@ -13,11 +14,14 @@ import {
 	ANGIE_TOP_BAR_PROMOTION_IMAGE_URL,
 	CREATE_WIDGET_EVENT,
 } from '../angie-consts';
-import AngieGuideCard from '../components/angie-guide-card';
+import { AngieGuideCard } from '../components/angie-guide-card';
+import { useAutoShow } from '../hooks/use-auto-show';
 
-export default function AngieGuideLocation() {
+export function AngieGuideLocation() {
+	useAutoShow();
 	const [ anchorEl, setAnchorEl ] = useState< Element | null >( null );
 	const { dispatchEvent } = useMixpanel();
+	const { isAdmin } = useCurrentUserCapabilities();
 
 	const isOpen = Boolean( anchorEl );
 
@@ -63,7 +67,7 @@ export default function AngieGuideLocation() {
 						imageUrl={ ANGIE_TOP_BAR_PROMOTION_IMAGE_URL }
 						description={ ANGIE_TOP_BAR_DESCRIPTION }
 						learnMoreUrl={ ANGIE_LEARN_MORE_URL }
-						onInstall={ handleInstall }
+						onInstall={ isAdmin ? handleInstall : undefined }
 						onClose={ handleClose }
 					/>
 				}

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

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 
 import { AI_WIDGET_CTA_VIEWED_EVENT, ANGIE_GUIDE_TOGGLE_EVENT } from '../angie-consts';
 
-export default function useActionProps() {
+export function useActionProps() {
 	const hasAngieInstalled = isAngieAvailable();
 	const visible = ! hasAngieInstalled;
 

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( {