Skip to content

feat: improvements to upsell link positioning #4450

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HardeepAsrani merged 4 commits into from
Nov 21, 2025
Merged

feat: improvements to upsell link positioning #4450

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eeb887b
feat: improvements to upsell link positioning
HardeepAsrani Nov 6, 2025
2602109
Merge branch 'development' into feat/issue-3062
selul Nov 10, 2025
1d8942d
feat: add buttons to all pages
HardeepAsrani Nov 13, 2025
c80041e
fix: make nav tab reactive
HardeepAsrani Nov 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 1 addition & 59 deletions assets/apps/dashboard/src/Components/Content/FreePro.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => (
Expand Down Expand Up @@ -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>
);
};
21 changes: 14 additions & 7 deletions assets/apps/dashboard/src/Components/Content/ModuleGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
);
Expand Down
61 changes: 60 additions & 1 deletion assets/apps/dashboard/src/Components/Content/Sidebar/Sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* global neveDash */
import { changeOption } from '../../../utils/rest';
import SupportCard from './SupportCard';
import LicenseCard from './LicenseCard';
Expand All @@ -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')}>
Expand Down Expand Up @@ -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')}>
Expand All @@ -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 />}
Expand Down
28 changes: 24 additions & 4 deletions assets/apps/dashboard/src/Components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -119,9 +123,14 @@ const Navigation = ({ setTab, currentTab }) => {
'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',
},
]);

Expand All @@ -136,6 +145,9 @@ const Navigation = ({ setTab, currentTab }) => {

if (!url) {
linkProps.onClick = handleLinkClick;
} else {
linkProps.target = '_blank';
linkProps.rel = 'noopener noreferrer';
}

return (
Expand All @@ -144,7 +156,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>
);
})}
Expand Down
12 changes: 11 additions & 1 deletion assets/apps/dashboard/src/utils/common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -52,6 +57,11 @@ if (neveDash.pro || neveDash.hasOldPro) {
delete tabs['free-pro'];
}

// Only show "Get Neve Pro" tab for users without valid licenses
if (neveDash.pro && neveDash.license && 'valid' === neveDash.license.valid) {
delete tabs['get-neve-pro'];
}

if (neveDash.whiteLabel) {
delete tabs.changelog;
if (neveDash.whiteLabel.hideStarterSites) {
Expand All @@ -68,7 +78,7 @@ const getTabHash = () => {

hash = hash.substring(1);

if (!tabs[hash]?.render) {
if (!tabs[hash]?.render && !tabs[hash]?.url) {
return null;
}

Expand Down
Loading