@elementor/editor-app-bar 3.32.0-34 → 3.32.0-36

package/src/extensions/connect/hooks/use-connect-link-config.tsx

@@ -0,0 +1,60 @@
+import { useCallback } from 'react';
+import { UserIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+import { type ExtendedWindow } from '../../../types';
+
+export default function useConnectLinkConfig() {
+	const extendedWindow = window as unknown as ExtendedWindow;
+	let isUserConnected = false;
+	const isPro = extendedWindow?.elementor?.helpers.hasPro();
+	let target = '_blank';
+	if ( isPro ) {
+		isUserConnected = extendedWindow?.elementorPro?.config.isActive ?? false;
+	} else {
+		isUserConnected = extendedWindow?.elementorCommon?.config.library_connect.is_connected ?? false;
+		target = '_self';
+	}
+
+	const handleConnectClick = useCallback(
+		( event: React.MouseEvent< HTMLElement > ) => {
+			event.preventDefault();
+
+			if ( extendedWindow.jQuery && extendedWindow.jQuery.fn?.elementorConnect ) {
+				const connectUrl = extendedWindow?.elementor?.config.user.top_bar.connect_url;
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				const $tempButton = ( extendedWindow as any ).jQuery( '<a>' );
+				$tempButton
+					?.attr( 'href', connectUrl )
+					?.attr( 'target', '_blank' )
+					?.attr( 'rel', 'opener' )
+					?.css( 'display', 'none' )
+					?.appendTo( 'body' );
+
+				$tempButton.elementorConnect();
+
+				$tempButton[ 0 ].click();
+
+				setTimeout( () => {
+					$tempButton.remove();
+				}, 1000 );
+			}
+		},
+		[ extendedWindow ]
+	);
+
+	return isUserConnected
+		? {
+				title: __( 'My Elementor', 'elementor' ),
+				href: extendedWindow?.elementor?.config.user.top_bar.my_elementor_url,
+				icon: UserIcon,
+				target: '_blank',
+		  }
+		: {
+				title: __( 'Connect my account', 'elementor' ),
+				href: extendedWindow?.elementor?.config.user.top_bar.connect_url,
+				icon: UserIcon,
+				target,
+				onClick: handleConnectClick,
+		  };
+}

package/src/extensions/connect/index.ts

@@ -0,0 +1,11 @@
+import { mainMenu } from '../../locations';
+import useConnectLinkConfig from './hooks/use-connect-link-config';
+
+export function init() {
+	mainMenu.registerLink( {
+		id: 'app-bar-connect',
+		group: 'exits',
+		priority: 10,
+		useProps: useConnectLinkConfig,
+	} );
+}

package/src/extensions/help/index.ts

@@ -14,6 +14,7 @@ export function init() {
 				href: 'https://go.elementor.com/editor-top-bar-learn/',
 				icon: HelpIcon,
 				target: '_blank',
+				showExternalLinkIcon: true,
 				onClick: () => {
 					const extendedWindow = window as unknown as ExtendedWindow;
 					const config = extendedWindow?.elementorCommon?.eventsManager?.config;

package/src/extensions/index.ts

@@ -3,6 +3,7 @@
  * The code should be moved to the appropriate packages.
  */
 
+import { init as initConnect } from './connect';
 import { init as initDocumentsIndicator } from './documents-indicator';
 import { init as initDocumentsPreview } from './documents-preview';
 import { init as initDocumentsSave } from './documents-save';
@@ -33,4 +34,5 @@ export function init() {
 	initThemeBuilder();
 	initUserPreferences();
 	initWordpress();
+	initConnect();
 }

package/src/extensions/wordpress/index.ts

@@ -9,6 +9,7 @@ export function init() {
 	mainMenu.registerLink( {
 		id: 'exit-to-wordpress',
 		group: 'exits',
+		priority: 20,
 		useProps: () => {
 			const document = useActiveDocument();
 			return {

package/src/types.ts

@@ -12,6 +12,34 @@ export type ExtendedWindow = Window & {
 				};
 			};
 		};
+		config: {
+			library_connect: {
+				is_connected: boolean;
+			};
+		};
+	};
+	elementor: {
+		helpers: {
+			hasPro: () => boolean;
+		};
+		config: {
+			user: {
+				top_bar: {
+					my_elementor_url: string;
+					connect_url: string;
+				};
+			};
+		};
+	};
+	elementorPro: {
+		config: {
+			isActive: boolean;
+		};
+	};
+	jQuery: {
+		fn?: {
+			elementorConnect?: ( selector: string ) => never;
+		};
 	};
 };