feat: improvements to upsell link positioning

assets/apps/dashboard/src/Components/Content/FreePro.js

@@ -2,17 +2,10 @@
 
 import { __ } from '@wordpress/i18n';
 
-import {
-	CheckCircle2,
-	XCircle,
-	HelpCircle,
-	ArrowRight,
-	BookOpen,
-} from 'lucide-react';
+import { CheckCircle2, XCircle, HelpCircle } from 'lucide-react';
 
 import Card from '../../Layout/Card';
 import Tooltip from '../Common/Tooltip';
-import Button from '../Common/Button';
 import TransitionWrapper from '../Common/TransitionWrapper';
 
 const FreeProCard = () => (
@@ -80,63 +73,12 @@ const FreeProCard = () => (
 	</Card>
 );
 
-const UpsellCard = () => {
-	return (
-		<Card>
-			<div className="max-w-2xl mx-auto">
-				<h3 className="text-lg font-semibold mb-4">
-					{__('Need help deciding?', 'neve')}
-				</h3>
-				<div className="space-y-4 mb-6 text-gray-600">
-					<p>
-						{__(
-							'Our support team is happy to answer your questions about specific Pro features and help you determine if they match your needs.',
-							'neve'
-						)}
-					</p>
-					<div className="flex items-start space-x-2">
-						<div className="bg-gray-100 px-3 py-1.5 rounded">
-							{__(
-								'Average response time: ~8 hours during business days',
-								'neve'
-							)}
-						</div>
-					</div>
-				</div>
-				<div className="flex gap-4">
-					<Button
-						isPrimary
-						href={neveDash.upgradeURL}
-						target="_blank"
-						className="gap-"
-					>
-						{__('View Pro Plans', 'neve')}
-						<ArrowRight className="ml-2" size={16} />
-					</Button>
-					<Button
-						isLink
-						href="https://themeisle.com/contact"
-						target="_blank"
-						className="!border-gray-300"
-					>
-						{__('Contact Support', 'neve')}
-						<BookOpen className="ml-2" size={16} />
-					</Button>
-				</div>
-			</div>
-		</Card>
-	);
-};
-
 export default () => {
 	return (
 		<div className="grid gap-6">
 			<TransitionWrapper from="top">
 				<FreeProCard />
 			</TransitionWrapper>
-			<TransitionWrapper className="delay-150">
-				<UpsellCard />
-			</TransitionWrapper>
 		</div>
 	);
 };

assets/apps/dashboard/src/Components/Content/ModuleGrid.js

@@ -2,7 +2,12 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { LoaderCircle, LucideCheck, LucideSettings } from 'lucide-react';
+import {
+	LoaderCircle,
+	LucideCheck,
+	LucideSettings,
+	LucideExternalLink,
+} from 'lucide-react';
 
 import useLicenseData from '../../Hooks/useLicenseData';
 import Card from '../../Layout/Card';
@@ -137,12 +142,14 @@ const ModulesHeader = () => {
 					: __('Neve Pro Modules', 'neve')}
 			</h2>
 			{!isLicenseValid && (
-				<Link
-					className="text-sm font-medium"
-					text={__('Get Neve Pro', 'neve')}
-					url={neveDash.upgradeURLModules}
-					isExternal
-				/>
+				<Button
+					isPrimary
+					href={neveDash.upgradeURLModules}
+					target="_blank"
+				>
+					{__('Get Neve Pro', 'neve')}
+					<LucideExternalLink size={16} className="shrink-0" />
+				</Button>
 			)}
 		</div>
 	);

assets/apps/dashboard/src/Components/Content/Settings/GeneralTabContent.js

@@ -7,6 +7,7 @@ import {
 	LucideMonitorDown,
 	LucideTags,
 	LucideType,
+	LucideExternalLink,
 } from 'lucide-react';
 import useLicenseData from '../../../Hooks/useLicenseData';
 import { NEVE_HAS_VALID_PRO } from '../../../utils/constants';
@@ -16,6 +17,7 @@ import OptionGroup from './OptionGroup';
 import ControlWrap from '../../Controls/ControlWrap';
 import Toggle from '../../Common/Toggle';
 import Select from '../../Common/Select';
+import Button from '../../Common/Button';
 
 const DUMMY_SETTINGS_ARGS = {
 	enable_featured_image_taxonomy: {
@@ -185,9 +187,22 @@ export default () => {
 
 	return (
 		<>
-			<h1 className="text-lg font-semibold mb-6">
-				{__('General Settings', 'neve')}
-			</h1>
+			<div className="flex items-center justify-between mb-6">
+				<h1 className="text-lg font-semibold">
+					{__('General Settings', 'neve')}
+				</h1>
+
+				{!isLicenseValid && (
+					<Button
+						isPrimary
+						href={neveDash.upgradeURLModules}
+						target="_blank"
+					>
+						{__('Get Neve Pro', 'neve')}
+						<LucideExternalLink size={16} className="shrink-0" />
+					</Button>
+				)}
+			</div>
 
 			<div>
 				{(isLicenseValid && <ProModuleSettings />) || <DummySettings />}

assets/apps/dashboard/src/Components/Content/Settings/PerformanceTabContent.js

@@ -1,7 +1,14 @@
 /* global neveDash */
 import { __ } from '@wordpress/i18n';
-import { LucideCode, LucideSmile, LucideText, LucideZap } from 'lucide-react';
+import {
+	LucideCode,
+	LucideSmile,
+	LucideText,
+	LucideZap,
+	LucideExternalLink,
+} from 'lucide-react';
 import ToggleControl from '../../Controls/ToggleControl';
+import Button from '../../Common/Button';
 import useLicenseData from '../../../Hooks/useLicenseData';
 import OptionGroup from './OptionGroup';
 
@@ -78,9 +85,22 @@ export default () => {
 
 	return (
 		<>
-			<h1 className="text-lg font-semibold mb-6">
-				{__('Performance Settings', 'neve')}
-			</h1>
+			<div className="flex items-center justify-between mb-6">
+				<h1 className="text-lg font-semibold">
+					{__('Performance Settings', 'neve')}
+				</h1>
+
+				{!isLicenseValid && (
+					<Button
+						isPrimary
+						href={neveDash.upgradeURLModules}
+						target="_blank"
+					>
+						{__('Get Neve Pro', 'neve')}
+						<LucideExternalLink size={16} className="shrink-0" />
+					</Button>
+				)}
+			</div>
 
 			<div>
 				<ToggleControl

assets/apps/dashboard/src/Components/Content/Sidebar/Sidebar.js

@@ -1,3 +1,4 @@
+/* global neveDash */
 import { changeOption } from '../../../utils/rest';
 import SupportCard from './SupportCard';
 import LicenseCard from './LicenseCard';
@@ -12,8 +13,9 @@ import {
 import Card from '../../../Layout/Card';
 import Link from '../../Common/Link';
 import Toggle from '../../Common/Toggle';
+import Button from '../../Common/Button';
 import PluginsCard from './PluginsCard';
-import { LucideLoaderCircle } from 'lucide-react';
+import { LucideLoaderCircle, ArrowRight, BookOpen } from 'lucide-react';
 
 const ReviewCard = () => (
 	<Card title={__('Leave us a review', 'neve')}>
@@ -107,6 +109,54 @@ const ContributingCard = () => {
 	);
 };
 
+const UpsellCard = () => {
+	return (
+		<Card>
+			<div className="max-w-2xl mx-auto">
+				<h3 className="text-lg font-semibold mb-4">
+					{__('Need help deciding?', 'neve')}
+				</h3>
+				<div className="space-y-4 mb-6 text-gray-600">
+					<p>
+						{__(
+							'Our support team is happy to answer your questions about specific Pro features and help you determine if they match your needs.',
+							'neve'
+						)}
+					</p>
+					<div className="flex items-start space-x-2">
+						<div className="bg-gray-100 px-3 py-1.5 rounded">
+							{__(
+								'Average response time: ~8 hours during business days',
+								'neve'
+							)}
+						</div>
+					</div>
+				</div>
+				<div className="flex gap-4">
+					<Button
+						isPrimary
+						href={neveDash.upgradeURL}
+						target="_blank"
+						className="gap-"
+					>
+						{__('View Pro Plans', 'neve')}
+						<ArrowRight className="ml-2" size={16} />
+					</Button>
+					<Button
+						isLink
+						href="https://themeisle.com/contact"
+						target="_blank"
+						className="!border-gray-300"
+					>
+						{__('Contact Support', 'neve')}
+						<BookOpen className="ml-2" size={16} />
+					</Button>
+				</div>
+			</div>
+		</Card>
+	);
+};
+
 const CommunityCard = () => {
 	return (
 		<Card title={__('Join the Community', 'neve')}>
@@ -127,12 +177,21 @@ const CommunityCard = () => {
 };
 
 const Sidebar = () => {
+	const { currentTab } = useSelect((select) => {
+		const { getTab } = select(NEVE_STORE);
+		return {
+			currentTab: getTab(),
+		};
+	});
+
 	return (
 		<div className="grid gap-6">
 			{NEVE_HAS_PRO && <LicenseCard />}
 
 			{NEVE_HAS_PRO && <SupportCard />}
 
+			{currentTab === 'free-pro' && <UpsellCard />}
+
 			{!NEVE_IS_WHITELABEL && <ReviewCard />}
 
 			{!NEVE_HAS_PRO && <PluginsCard />}

assets/apps/dashboard/src/Components/Header.js

@@ -6,7 +6,11 @@ import { Fragment, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 import { useDispatch, useSelect } from '@wordpress/data';
-import { LucideBookOpen, LucideFileText } from 'lucide-react';
+import {
+	LucideBookOpen,
+	LucideFileText,
+	LucideExternalLink,
+} from 'lucide-react';
 import useLicenseData from '../Hooks/useLicenseData';
 import Container from '../Layout/Container';
 import { NEVE_IS_WHITELABEL, NEVE_STORE } from '../utils/constants';
@@ -107,6 +111,8 @@ const HeaderTopBar = ({ currentTab, setTab }) => {
 };
 
 const Navigation = ({ setTab, currentTab }) => {
+	const { isLicenseValid } = useLicenseData();
+
 	return (
 		<div className="border-b border-gray-200">
 			<Container>
@@ -115,13 +121,22 @@ const Navigation = ({ setTab, currentTab }) => {
 						if (!label) {
 							return null;
 						}
+						// Hide "Get Neve Pro" tab for users with valid licenses
+						if (slug === 'get-neve-pro' && isLicenseValid) {
+							return null;
+						}
 						const itemClasses = cn([
 							'relative px-4 py-3 font-medium border-b-2',
 							{
 								'text-blue-600 border-blue-600':
-									currentTab === slug,
+									currentTab === slug &&
+									slug !== 'get-neve-pro',
 								'border-transparent text-gray-600 hover:text-gray-900 transition-colors duration-150':
-									currentTab !== slug,
+									currentTab !== slug &&
+									slug !== 'get-neve-pro',
+								'border-transparent text-blue-600 transition-colors duration-150':
+									currentTab !== slug &&
+									slug === 'get-neve-pro',
 							},
 						]);
 
@@ -136,6 +151,9 @@ const Navigation = ({ setTab, currentTab }) => {
 
 						if (!url) {
 							linkProps.onClick = handleLinkClick;
+						} else {
+							linkProps.target = '_blank';
+							linkProps.rel = 'noopener noreferrer';
 						}
 
 						return (
@@ -144,7 +162,15 @@ const Navigation = ({ setTab, currentTab }) => {
 								key={slug}
 								className={itemClasses}
 							>
-								{label}
+								<span className="flex items-center gap-1">
+									{label}
+									{url && (
+										<LucideExternalLink
+											size={14}
+											className="opacity-60"
+										/>
+									)}
+								</span>
 							</a>
 						);
 					})}

assets/apps/dashboard/src/utils/common.js

@@ -29,6 +29,11 @@ const tabs = {
 	changelog: {
 		render: () => <Changelog />,
 	},
+	'get-neve-pro': {
+		label: __('Get Neve Pro', 'neve'),
+		url: neveDash.upgradeURLModules,
+		external: true,
+	},
 };
 
 const { plugins } = neveDash;
@@ -68,7 +73,7 @@ const getTabHash = () => {
 
 	hash = hash.substring(1);
 
-	if (!tabs[hash]?.render) {
+	if (!tabs[hash]?.render && !tabs[hash]?.url) {
 		return null;
 	}