Internal: Add Upgrade to Pro button in Hello Theme top bar [TMZ-1067]

modules/admin-home/assets/js/components/top-bar/top-bar-content.js

@@ -1,6 +1,7 @@
 import Stack from '@elementor/ui/Stack';
 import DynamicIcon from '../dynamic-icon';
 import Typography from '@elementor/ui/Typography';
+import { UpgradeButton } from './upgrade-button';
 import { __ } from '@wordpress/i18n';
 
 export const TopBarContent = ({ sx = {}, iconSize = 'medium' }) => {
@@ -23,6 +24,7 @@ export const TopBarContent = ({ sx = {}, iconSize = 'medium' }) => {
 					{__('Hello', 'hello-elementor')}
 				</Typography>
 			</Stack>
+			<UpgradeButton />
 		</Stack>
 	);
 };

modules/admin-home/assets/js/components/top-bar/upgrade-button.js

@@ -0,0 +1,25 @@
+import Button from '@elementor/ui/Button';
+import CrownIcon from '@elementor/icons/CrownIcon';
+import { __ } from '@wordpress/i18n';
+
+export const UpgradeButton = () => {
+	const upgradeUrl = window.ehpTopBarConfig?.upgradeUrl;
+
+	if (!upgradeUrl) {
+		return null;
+	}
+
+	return (
+		<Button
+			href={upgradeUrl}
+			target="_blank"
+			rel="noopener noreferrer"
+			color="promotion"
+			size="small"
+			startIcon={<CrownIcon />}
+			sx={{ '&:hover': { backgroundColor: 'transparent' } }}
+		>
+			{__('Upgrade Now', 'hello-elementor')}
+		</Button>
+	);
+};

modules/admin-home/assets/js/hello-elementor-topbar.js

@@ -1,8 +1,13 @@
 import { createRoot } from 'react-dom/client';
+import { ThemeProvider } from '@elementor/ui/styles';
 import { TopBar } from './components/top-bar/top-bar';
 
 const App = () => {
-	return <TopBar />;
+	return (
+		<ThemeProvider colorScheme="auto">
+			<TopBar />
+		</ThemeProvider>
+	);
 };
 
 document.addEventListener('DOMContentLoaded', () => {

modules/admin-home/components/admin-top-bar.php

@@ -11,6 +11,9 @@
 
 class Admin_Top_Bar {
 
+	const CONFIG_OBJECT_NAME = 'ehpTopBarConfig';
+	const UPGRADE_PRO_URL = 'https://go.elementor.com/hello-upgrade-epro/';
+
 	private function render_admin_top_bar() {
 		?>
 		<div id="ehe-admin-top-bar-root" style="height: 50px">
@@ -30,6 +33,16 @@ private function enqueue_scripts() {
 		);
 
 		$script->enqueue();
+
+		if ( Utils::has_pro() ) {
+			return;
+		}
+
+		wp_localize_script(
+			'hello-elementor-topbar',
+			self::CONFIG_OBJECT_NAME,
+			[ 'upgradeUrl' => self::UPGRADE_PRO_URL ]
+		);
 	}
 
 	public function __construct() {

modules/admin-home/components/settings-controller.php

@@ -22,6 +22,8 @@ class Settings_Controller {
 		'HELLO_THEME'          => '_hello_theme',
 	];
 
+	private string $parent_slug = '';
+
 	public static function get_settings_mapping(): array {
 		return array_map(
 			function ( $key ) {
@@ -134,6 +136,8 @@ public function enqueue_hello_plus_settings_scripts() {
 	}
 
 	public function register_settings_page( $parent_slug ): void {
+		$this->parent_slug = $parent_slug;
+
 		add_submenu_page(
 			$parent_slug,
 			__( 'Settings', 'hello-elementor' ),
@@ -144,12 +148,18 @@ public function register_settings_page( $parent_slug ): void {
 		);
 	}
 
+	// Runs on `admin_head`, not `admin_menu`: removing the submenu earlier breaks the page hook resolution and makes the page unreachable.
+	public function hide_settings_submenu_item(): void {
+		remove_submenu_page( $this->parent_slug, self::SETTINGS_PAGE_SLUG );
+	}
+
 	public function render_settings_page(): void {
 		echo '<div id="ehe-admin-settings"></div>';
 	}
 
 	public function __construct() {
 		add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_hello_plus_settings_scripts' ] );
+		add_action( 'admin_head', [ $this, 'hide_settings_submenu_item' ] );
 		add_action( 'hello-plus-theme/admin-menu', [ $this, 'register_settings_page' ], 10, 1 );
 	}
 }

tests/playwright/tests/theme-settings.test.ts

@@ -25,7 +25,7 @@ test.describe('Admin Menu', () => {
 		await expect(page).toHaveURL(/page=hello-elementor-settings/);
 	});
 
-	test('does not show Home submenu', async ({
+	test('does not show submenu items', async ({
 		page,
 		apiRequests,
 	}, testInfo) => {
@@ -36,8 +36,6 @@ test.describe('Admin Menu', () => {
 		const helloMenu = page.locator('#toplevel_page_hello-elementor');
 		await helloMenu.hover();
 
-		await expect(
-			page.locator('#toplevel_page_hello-elementor .wp-submenu'),
-		).not.toContainText('Home');
+		await expect(helloMenu.locator('.wp-submenu li')).toHaveCount(0);
 	});
 });