Feature: Add tooltip to direct users to Hello+ Components [TMZ-250]

modules/admin/classes/rest/onboarding-settings.php

@@ -30,6 +30,7 @@ public function rest_api_init() {
 
 	public function get_kits() {
 		$kits = get_transient( self::KITS_TRANSIENT );
+
 		if ( ! empty( $kits ) ) {
 			return $kits;
 		}

modules/admin/classes/rest/set-editor-visited.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace HelloPlus\Modules\Admin\Classes\Rest;
+
+use HelloPlus\Modules\TemplateParts\Module;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+class Set_Editor_Visited {
+	const ROUTE_NAMESPACE = 'elementor-hello-plus/v1';
+
+	public function rest_api_init() {
+		register_rest_route(
+			self::ROUTE_NAMESPACE,
+			'/set-editor-visited',
+			[
+				'methods' => \WP_REST_Server::CREATABLE,
+				'callback' => [ $this, 'increment_editor_visited' ],
+				'permission_callback' => [ $this, 'permission_callback' ],
+			]
+		);
+	}
+
+	public function increment_editor_visited() {
+		$user_id = get_current_user_id();
+		$current_count = (int) get_user_meta( $user_id, Module::USER_META_TIMES_EDITOR_OPENED, true );
+		$new_count = $current_count + 1;
+		update_user_meta( $user_id, Module::USER_META_TIMES_EDITOR_OPENED, $new_count );
+
+		return rest_ensure_response( [ 'new_count' => $new_count ] );
+	}
+
+	public function permission_callback() {
+		return is_user_logged_in();
+	}
+
+	public function __construct() {
+		add_action( 'rest_api_init', [ $this, 'rest_api_init' ] );
+	}
+}

modules/admin/components/api-controller.php

@@ -8,7 +8,7 @@
 
 use HelloPlus\Modules\Admin\Classes\Ajax\Setup_Wizard;
 use HelloPlus\Modules\Admin\Classes\Rest\Onboarding_Settings;
-
+use HelloPlus\Modules\Admin\Classes\Rest\Set_Editor_Visited;
 
 class Api_Controller {
 
@@ -26,6 +26,7 @@ public function get_endpoint( string $endpoint ) {
 
 	public function __construct() {
 		$this->endpoints['onboarding-settings'] = new Onboarding_Settings();
+		$this->endpoints['set-editor-visited'] = new Set_Editor_Visited();
 
 		$this->ajax_classes['setup-wizard'] = new Setup_Wizard();
 	}

modules/template-parts/assets/js/editor/dialog.js

@@ -0,0 +1,110 @@
+export default class extends elementorModules.Module {
+    defaultOptions = {
+        title: '',
+        content: '',
+        targetElement: null,
+        position: {
+            blockStart: null,
+            inlineStart: null,
+        },
+        actionButton: {
+            url: null,
+            text: null,
+            classes: [ 'elementor-button', 'e-accent' ],
+        },
+    };
+
+    elements = {
+        $title: null,
+        $closeButton: null,
+        $header: null,
+    };
+
+    constructor() {
+        super();
+
+        this.initDialog();
+    }
+
+    initDialog() {
+        this.dialog = elementor.dialogsManager.createWidget( 'buttons', {
+            id: 'elementor-element--ehp__dialog',
+            effects: {
+                show: 'show',
+                hide: 'hide',
+            },
+            hide: {
+                onOutsideClick: false,
+            },
+            position: {
+                my: ( elementorCommon.config.isRTL ? 'right' : 'left' ) + '+5 top',
+            },
+        } );
+
+        this.elements.$header = this.dialog.getElements( 'header' );
+
+        this.elements.$title = jQuery( '<div>', { id: 'elementor-element--promotion__dialog__title' } );
+        this.elements.$closeButton = jQuery( '<i>', { class: 'eicon-close' } );
+
+        this.elements.$closeButton.on( 'click', () => this.dialog.hide() );
+
+        this.elements.$header.append(
+            this.elements.$title,
+            this.elements.$titleBadge,
+            this.elements.$closeButton,
+        );
+    }
+
+    createButton( options ) {
+        const $actionButton = this.dialog.getElements( 'action' );
+
+        if ( $actionButton ) {
+            $actionButton.remove();
+        }
+
+        this.dialog.addButton( {
+            name: 'action',
+            text: options.text,
+            classes: options.classes.join( ' ' ),
+            callback: options.callback,
+        } );
+    }
+
+    parseOptions( options = {} ) {
+        return {
+            ...this.defaultOptions,
+            ...options,
+            position: {
+                ...this.defaultOptions.position,
+                ...( options?.position || {} ),
+            },
+            actionButton: {
+                ...this.defaultOptions.actionButton,
+                ...( options?.actionButton || {} ),
+            },
+        };
+    }
+
+    showDialog( options = {} ) {
+        if ( ! this.dialog ) {
+            this.initDialog();
+        }
+
+        options = this.parseOptions( options );
+
+        this.createButton( options.actionButton );
+
+        this.elements.$title.text( options.title );
+
+        const inlineStartKey = elementorCommon.config.isRTL ? 'left' : 'right';
+
+        this.dialog
+            .setMessage( options.content )
+            .setSettings( 'position', {
+                of: options.targetElement,
+                at: `${ inlineStartKey }${ options.position.inlineStart || '' } top${ options.position.blockStart || '' }`,
+            } );
+
+        return this.dialog.show();
+    }
+}

modules/template-parts/assets/js/editor/module.js

@@ -1,12 +1,16 @@
 import Component from './component';
+import { __ } from '@wordpress/i18n';
+import apiFetch from '@wordpress/api-fetch';
+import Dialog from './dialog';
 
 export default class TemplatesModule extends elementorModules.editor.utils.Module {
 	onElementorInit() {
 		$e.components.register( new Component( { manager: this } ) );
 		elementor.channels.editor.on( 'helloPlusLogo:change', this.openSiteIdentity );
 		elementor.hooks.addFilter( 'elements/widget/controls/common/default', this.resetCommonControls.bind( this ) );
 		elementor.hooks.addFilter( 'elements/widget/controls/common-optimized/default', this.resetCommonControls.bind( this ) );
-
+		$e.routes.on( 'run:after', this.maybeShowDialog.bind( this ) );
+		document.addEventListener( 'click', this.takeUserToHelloPlusWidgets );
 		const types = [
 			'core/modal/close/ehp-footer',
 			'core/modal/close/ehp-header',
@@ -16,6 +20,8 @@
 			window.addEventListener( type, this.redirectToHelloPlus );
 		} );
 
+		this.dialog = new Dialog();
+
 		window.templatesModule = this;
 	}
 
@@ -28,6 +34,59 @@
 		$e.route( 'panel/global/settings-site-identity' );
 	}
 
+	async maybeShowDialog( component, route ) {
+		const howManyTimesOpened = parseInt( window.helloplusEditor.timesEditorOpened, 10 );
+
+		if ( ! howManyTimesOpened ) {
+			try {
+				await apiFetch( {
+					path: '/elementor-hello-plus/v1/set-editor-visited',
+					method: 'POST',
+				} );
+			} catch ( error ) {
+				console.error( error );
+			}
+			return;
+		}
+
+		if ( 'panel/elements/categories' === route && 1 === howManyTimesOpened ) {
+			this.dialog.showDialog( {
+				// eslint-disable-next-line @wordpress/valid-sprintf
+				title: __( 'Building your website?', 'hello-plus' ),
+				// eslint-disable-next-line @wordpress/valid-sprintf
+				content: __( 'Did you know we have theme specific widgets that can take you there faster?', 'hello-plus' ),
+				targetElement: document.querySelector( '#elementor-panel-category-layout' ),
+				position: {
+					blockStart: '-7',
+				},
+				actionButton: {
+					url: '',
+					text: __( 'Take Me There', 'hello-plus' ),
+					classes: [ 'take-me-there', 'elementor-button', 'go-pro' ],
+					callback: async () => {
+						const parentElement = document.getElementById( 'elementor-panel-content-wrapper' );
+						const targetElement = parentElement.querySelector( '#elementor-panel-category-helloplus' );
+
+						if ( targetElement ) {
+							const relativePosition = targetElement.offsetTop - parentElement.offsetTop;
+							const container = document.querySelector( '#elementor-panel-content-wrapper' );
+							container.scrollTop = relativePosition;
+
+							try {
+								await apiFetch( {
+									path: '/elementor-hello-plus/v1/set-editor-visited',
+									method: 'POST',
+								} );
+							} catch ( error ) {
+								console.error( error );
+							}
+						}
+					},
+				},
+			} );
+		}
+	}
+
 	resetCommonControls( commonControls, widgetType ) {
 		if ( [ 'ehp-footer', 'ehp-header' ].includes( widgetType ) ) {
 			return null;

modules/template-parts/assets/scss/editor.scss

@@ -1,3 +1,4 @@
 @import "../../../../assets/dev/scss/variables";
 @import 'editor/_template-modal';
 @import 'editor/_hello-plus-template-parts-preview';
+@import 'editor/_dialog';

modules/template-parts/assets/scss/editor/_dialog.scss

@@ -0,0 +1,62 @@
+#elementor-element--ehp__dialog {
+	position: absolute;
+	width: 300px;
+	z-index: 1;
+	background-color: var(--e-a-bg-default);
+	box-shadow: var(--e-a-popover-shadow);
+	border-radius: var(--e-a-border-radius);
+
+	&:after {
+		content: '';
+		position: absolute;
+		top: 15px;
+		@include end(100%);
+		transform: scaleY(0.7);
+		border: 10px solid transparent;
+		border-inline-end-color: var(--e-a-bg-default);
+	}
+
+	&__title {
+		font-size: 14px;
+	}
+
+	.dialog {
+
+		&-header {
+			display: flex;
+			padding: 20px;
+			border-block-end: var(--e-a-border);
+			font-weight: 500;
+			justify-content: space-between;
+
+			.eicon-pro-icon {
+				flex-grow: 1;
+				margin-inline-start: 10px;
+				font-size: 14px;
+				color: var(--e-a-color-accent);
+			}
+
+			.eicon-close {
+				cursor: pointer;
+				color: var(--e-a-color-txt-disabled);
+
+				&:hover {
+					color: var(--e-a-color-txt-muted);
+				}
+			}
+		}
+
+		&-message {
+			padding: 20px;
+		}
+
+		&-buttons-wrapper {
+			padding: 0 20px 20px;
+		}
+
+		&-button {
+			padding: 7px 25px;
+			font-size: 12px;
+		}
+	}
+}

modules/template-parts/module.php

@@ -16,6 +16,8 @@
  **/
 class Module extends Module_Base {
 
+	const USER_META_TIMES_EDITOR_OPENED = 'helloplus_editor_opened';
+
 	/**
 	 * @inheritDoc
 	 */
@@ -83,10 +85,22 @@ public function enqueue_editor_scripts(): void {
 		wp_enqueue_script(
 			'helloplus-editor',
 			HELLOPLUS_SCRIPTS_URL . 'helloplus-editor.js',
-			[ 'elementor-editor' ],
+			[ 'elementor-editor', 'wp-api-fetch' ],
 			HELLOPLUS_VERSION,
 			true
 		);
+
+		wp_localize_script(
+			'helloplus-editor',
+			'helloplusEditor',
+			[
+				'timesEditorOpened' => (int) get_user_meta(
+					get_current_user_id(),
+					self::USER_META_TIMES_EDITOR_OPENED,
+					true
+				),
+			]
+		);
 	}
 
 	/**