Upsell dialog#1220

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
brendan-kellam merged 5 commits into from
May 22, 2026
Merged

Upsell dialog #1220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0d810f2
wip on upsell dialog
brendan-kellam May 22, 2026
be1cd42
rename to upsell dialog
brendan-kellam May 22, 2026
2e92b7f
use dynamic prices
brendan-kellam May 22, 2026
de5f107
further polish w.r.t., how we hydrate the client with offer information
brendan-kellam May 22, 2026
f972363
feedback
brendan-kellam May 22, 2026
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
3 changes: 0 additions & 3 deletions packages/db/prisma/migrations/20260509000000_add_license_table/migration.sql
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
-- AlterTable
ALTER TABLE "Org" ADD COLUMN "trialUsedAt" TIMESTAMP(3);

-- CreateTable
CREATE TABLE "License" (
"id" TEXT NOT NULL,
Expand Down
4 changes: 0 additions & 4 deletions packages/db/prisma/schema.prisma
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -293,10 +293,6 @@ model Org {
chats Chat[]

license License?

/// Set the first time this instance is seen to be on a trial subscription.
/// Never cleared. Used to gate the "Start trial" CTA in the UI.
trialUsedAt DateTime?
}

model License {
Expand Down
19 changes: 13 additions & 6 deletions packages/shared/src/entitlements.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -88,12 +88,12 @@ const getValidOfflineLicense = (): getValidOfflineLicense | null => {
return payload;
}

// If the license hasn't successfully synced with Lighthouse for this long,
// the locally-cached state is no longer trusted. This guards against an
// operator blocking egress to prevent the license row from hearing about
// a canceled or past-due subscription. 7 days absorbs week-long transient
// outages (weekends, firewall rollouts) without punishing legitimate
// customers.
// If the license hasn't successfully synced with Lighthouse for this long,
// the locally-cached state is no longer trusted. This guards against an
// operator blocking egress to prevent the license row from hearing about
// a canceled or past-due subscription. 7 days absorbs week-long transient
// outages (weekends, firewall rollouts) without punishing legitimate
// customers.
export const STALE_ONLINE_LICENSE_THRESHOLD_MS = 7 * 24 * 60 * 60 * 1000;

// Surface a UI warning (banner + "refreshed" timestamp color) when the
Expand All@@ -116,6 +116,13 @@ const getValidOnlineLicense = (_license: License | null): License | null => {
return null;
}

export const isValidLicenseActive = (_license: License | null): boolean => {
return (
getValidOfflineLicense() !== null ||
getValidOnlineLicense(_license) !== null
);
}

export const isAnonymousAccessAvailable = (_license: License | null): boolean => {
const offlineKey = getValidOfflineLicense();
if (offlineKey) {
Expand Down
1 change: 1 addition & 0 deletions packages/shared/src/index.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ export {
hasEntitlement as _hasEntitlement,
getEntitlements as _getEntitlements,
isAnonymousAccessAvailable as _isAnonymousAccessAvailable,
isValidLicenseActive as _isValidLicenseActive,
getSeatCap,
getOfflineLicenseMetadata,
STALE_ONLINE_LICENSE_THRESHOLD_MS,
Expand Down
1 change: 0 additions & 1 deletion packages/web/src/__mocks__/prisma.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,6 @@ export const MOCK_ORG: Org = {
memberApprovalRequired: false,
inviteLinkEnabled: false,
inviteLinkId: null,
trialUsedAt: null,
}

export const MOCK_API_KEY: ApiKey = {
Expand Down
21 changes: 10 additions & 11 deletions packages/web/src/app/(app)/@sidebar/components/defaultSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,14 +6,13 @@ import { getConnectionStats } from "@/actions";
import { getOrgAccountRequests } from "@/features/userManagement/actions";
import { isServiceError } from "@/lib/utils";
import { ServiceErrorException } from "@/lib/serviceError";
import { __unsafePrisma } from "@/prisma";
import { SINGLE_TENANT_ORG_ID } from "@/lib/constants";
import { OrgRole } from "@prisma/client";
import { SidebarBase } from "@/app/(app)/@sidebar/components/sidebarBase";
import { Nav } from "./nav";
import { ChatHistory } from "./chatHistory";
import { withAuth } from "@/middleware/withAuth";
import { getAuthContext, withAuth } from "@/middleware/withAuth";
import { sew } from "@/middleware/sew";
import { isValidLicenseActive } from "@/lib/entitlements";

const SIDEBAR_CHAT_LIMIT = 30;

Expand All@@ -27,15 +26,13 @@ export async function DefaultSidebar() {
throw new ServiceErrorException(chatHistory);
}

const licenseActive = await isValidLicenseActive();

const authContext = await getAuthContext();
const isOwner = !isServiceError(authContext) && authContext.role === OrgRole.OWNER;

const isSettingsNotificationVisible = await (async () => {
if (!session) {
return false;
}
const membership = await __unsafePrisma.userToOrg.findUnique({
where: { orgId_userId: { orgId: SINGLE_TENANT_ORG_ID, userId: session.user.id } },
select: { role: true },
});
if (membership?.role !== OrgRole.OWNER) {
if (!isOwner) {
return false;
}
const connectionStats = await getConnectionStats();
Expand All@@ -49,6 +46,8 @@ export async function DefaultSidebar() {
<SidebarBase
session={session}
collapsible="icon"
isValidLicenseActive={licenseActive}
isOwner={isOwner}
headerContent={
<Nav
isSettingsNotificationVisible={isSettingsNotificationVisible}
Expand Down
10 changes: 10 additions & 0 deletions packages/web/src/app/(app)/@sidebar/components/settingsSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,9 @@ import { getSidebarNavGroups } from "@/app/(app)/settings/layout";
import { SidebarBase } from "../sidebarBase";
import { Nav } from "./nav";
import { SettingsSidebarHeader } from "./header";
import { isValidLicenseActive } from "@/lib/entitlements";
import { getAuthContext } from "@/middleware/withAuth";
import { OrgRole } from "@prisma/client";

export async function SettingsSidebar() {
const session = await auth();
Expand All@@ -14,10 +17,17 @@ export async function SettingsSidebar() {
throw new ServiceErrorException(sidebarNavGroups);
}

const licenseActive = await isValidLicenseActive();

const authContext = await getAuthContext();
const isOwner = !isServiceError(authContext) && authContext.role === OrgRole.OWNER;

return (
<SidebarBase
session={session}
collapsible="none"
isValidLicenseActive={licenseActive}
isOwner={isOwner}
headerContent={<SettingsSidebarHeader />}
>
<Nav groups={sidebarNavGroups} />
Expand Down
8 changes: 6 additions & 2 deletions packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -31,7 +31,7 @@ import { useKeymapType } from "@/hooks/useKeymapType";
import { KeymapType } from "@/lib/types";
import { cn } from "@/lib/utils";
import {
ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronsUpDown, CodeIcon,
ArrowLeftToLineIcon, ArrowRightToLineIcon, ArrowUpCircle, ChevronsUpDown, CodeIcon,
Laptop, LogIn, LogOut, Moon, SettingsIcon, Sun, UserIcon
} from "lucide-react";
import { Session } from "next-auth";
Expand All@@ -44,15 +44,18 @@ import { KeyboardShortcutHint } from "@/app/components/keyboardShortcutHint";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { Separator } from "@/components/ui/separator";
import { WhatsNewSidebarButton } from "./whatsNewSidebarButton";
import { UpsellBadge } from "./upsellBadge";

interface SidebarBaseProps {
session: Session | null;
collapsible?: "icon" | "offcanvas" | "none";
headerContent: ReactNode;
children: ReactNode;
isValidLicenseActive: boolean;
isOwner: boolean;
}

export function SidebarBase({ session, collapsible = "icon", headerContent, children }: SidebarBaseProps) {
export function SidebarBase({ session, collapsible = "icon", headerContent, children, isValidLicenseActive, isOwner }: SidebarBaseProps) {
const [isScrolled, setIsScrolled] = useState(false);
const contentRef = useRef<HTMLDivElement>(null);

Expand DownExpand Up@@ -86,6 +89,7 @@ export function SidebarBase({ session, collapsible = "icon", headerContent, chil
{children}
</SidebarContent>
<SidebarFooter className="border-t border-sidebar-border">
{!isValidLicenseActive && isOwner && <UpsellBadge />}
{collapsible !== "none" && <CollapseSidebarButton />}
<WhatsNewSidebarButton />
{session ? (
Expand Down
40 changes: 40 additions & 0 deletions packages/web/src/app/(app)/@sidebar/components/upsellBadge.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
'use client';

import { ArrowUpCircle } from "lucide-react";
import { useState } from "react";
import { UpsellDialog } from "./upsellDialog";
import { useOffers } from "@/ee/features/lighthouse/useOffers";
import { Skeleton } from "@/components/ui/skeleton";

export const UpsellBadge = () => {
const [isDialogOpen, setIsDialogOpen] = useState(false);

const { data: offers, isPending, isError } = useOffers();

if (isPending) {
return (
<Skeleton className="h-6 w-28 mt-1" />
)
}

if (isError) {
return null;
}

const label = offers.trial.eligible ? "Try Enterprise" : "Free plan";
return (
<>
<div className="group-data-[state=collapsed]:hidden px-2 pt-1">
<button
type="button"
onClick={() => setIsDialogOpen(true)}
className="inline-flex items-center gap-1.5 rounded-full border border-border px-2.5 py-1 text-xs text-muted-foreground text-nowrap transition-colors hover:border-foreground hover:text-foreground"
>
<ArrowUpCircle className="h-3.5 w-3.5" />
{label}
</button>
</div>
<UpsellDialog open={isDialogOpen} onOpenChange={setIsDialogOpen} offers={offers}/>
</>
);
}
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all \u003cpre\u003e\u003ccode\u003e blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks"); } } catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); } })(); (function(){ try { var __m = "github.com"; var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Upsell dialog#1220

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
brendan-kellam merged 5 commits into from
May 22, 2026
Merged

Upsell dialog #1220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0d810f2
wip on upsell dialog
brendan-kellam May 22, 2026
be1cd42
rename to upsell dialog
brendan-kellam May 22, 2026
2e92b7f
use dynamic prices
brendan-kellam May 22, 2026
de5f107
further polish w.r.t., how we hydrate the client with offer information
brendan-kellam May 22, 2026
f972363
feedback
brendan-kellam May 22, 2026
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
3 changes: 0 additions & 3 deletions packages/db/prisma/migrations/20260509000000_add_license_table/migration.sql
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
-- AlterTable
ALTER TABLE "Org" ADD COLUMN "trialUsedAt" TIMESTAMP(3);

-- CreateTable
CREATE TABLE "License" (
"id" TEXT NOT NULL,
Expand Down
4 changes: 0 additions & 4 deletions packages/db/prisma/schema.prisma
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -293,10 +293,6 @@ model Org {
chats Chat[]

license License?

/// Set the first time this instance is seen to be on a trial subscription.
/// Never cleared. Used to gate the "Start trial" CTA in the UI.
trialUsedAt DateTime?
}

model License {
Expand Down
19 changes: 13 additions & 6 deletions packages/shared/src/entitlements.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -88,12 +88,12 @@ const getValidOfflineLicense = (): getValidOfflineLicense | null => {
return payload;
}

// If the license hasn't successfully synced with Lighthouse for this long,
// the locally-cached state is no longer trusted. This guards against an
// operator blocking egress to prevent the license row from hearing about
// a canceled or past-due subscription. 7 days absorbs week-long transient
// outages (weekends, firewall rollouts) without punishing legitimate
// customers.
// If the license hasn't successfully synced with Lighthouse for this long,
// the locally-cached state is no longer trusted. This guards against an
// operator blocking egress to prevent the license row from hearing about
// a canceled or past-due subscription. 7 days absorbs week-long transient
// outages (weekends, firewall rollouts) without punishing legitimate
// customers.
export const STALE_ONLINE_LICENSE_THRESHOLD_MS = 7 * 24 * 60 * 60 * 1000;

// Surface a UI warning (banner + "refreshed" timestamp color) when the
Expand All@@ -116,6 +116,13 @@ const getValidOnlineLicense = (_license: License | null): License | null => {
return null;
}

export const isValidLicenseActive = (_license: License | null): boolean => {
return (
getValidOfflineLicense() !== null ||
getValidOnlineLicense(_license) !== null
);
}

export const isAnonymousAccessAvailable = (_license: License | null): boolean => {
const offlineKey = getValidOfflineLicense();
if (offlineKey) {
Expand Down
1 change: 1 addition & 0 deletions packages/shared/src/index.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ export {
hasEntitlement as _hasEntitlement,
getEntitlements as _getEntitlements,
isAnonymousAccessAvailable as _isAnonymousAccessAvailable,
isValidLicenseActive as _isValidLicenseActive,
getSeatCap,
getOfflineLicenseMetadata,
STALE_ONLINE_LICENSE_THRESHOLD_MS,
Expand Down
1 change: 0 additions & 1 deletion packages/web/src/__mocks__/prisma.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,6 @@ export const MOCK_ORG: Org = {
memberApprovalRequired: false,
inviteLinkEnabled: false,
inviteLinkId: null,
trialUsedAt: null,
}

export const MOCK_API_KEY: ApiKey = {
Expand Down
21 changes: 10 additions & 11 deletions packages/web/src/app/(app)/@sidebar/components/defaultSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,14 +6,13 @@ import { getConnectionStats } from "@/actions";
import { getOrgAccountRequests } from "@/features/userManagement/actions";
import { isServiceError } from "@/lib/utils";
import { ServiceErrorException } from "@/lib/serviceError";
import { __unsafePrisma } from "@/prisma";
import { SINGLE_TENANT_ORG_ID } from "@/lib/constants";
import { OrgRole } from "@prisma/client";
import { SidebarBase } from "@/app/(app)/@sidebar/components/sidebarBase";
import { Nav } from "./nav";
import { ChatHistory } from "./chatHistory";
import { withAuth } from "@/middleware/withAuth";
import { getAuthContext, withAuth } from "@/middleware/withAuth";
import { sew } from "@/middleware/sew";
import { isValidLicenseActive } from "@/lib/entitlements";

const SIDEBAR_CHAT_LIMIT = 30;

Expand All@@ -27,15 +26,13 @@ export async function DefaultSidebar() {
throw new ServiceErrorException(chatHistory);
}

const licenseActive = await isValidLicenseActive();

const authContext = await getAuthContext();
const isOwner = !isServiceError(authContext) && authContext.role === OrgRole.OWNER;

const isSettingsNotificationVisible = await (async () => {
if (!session) {
return false;
}
const membership = await __unsafePrisma.userToOrg.findUnique({
where: { orgId_userId: { orgId: SINGLE_TENANT_ORG_ID, userId: session.user.id } },
select: { role: true },
});
if (membership?.role !== OrgRole.OWNER) {
if (!isOwner) {
return false;
}
const connectionStats = await getConnectionStats();
Expand All@@ -49,6 +46,8 @@ export async function DefaultSidebar() {
<SidebarBase
session={session}
collapsible="icon"
isValidLicenseActive={licenseActive}
isOwner={isOwner}
headerContent={
<Nav
isSettingsNotificationVisible={isSettingsNotificationVisible}
Expand Down
10 changes: 10 additions & 0 deletions packages/web/src/app/(app)/@sidebar/components/settingsSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,9 @@ import { getSidebarNavGroups } from "@/app/(app)/settings/layout";
import { SidebarBase } from "../sidebarBase";
import { Nav } from "./nav";
import { SettingsSidebarHeader } from "./header";
import { isValidLicenseActive } from "@/lib/entitlements";
import { getAuthContext } from "@/middleware/withAuth";
import { OrgRole } from "@prisma/client";

export async function SettingsSidebar() {
const session = await auth();
Expand All@@ -14,10 +17,17 @@ export async function SettingsSidebar() {
throw new ServiceErrorException(sidebarNavGroups);
}

const licenseActive = await isValidLicenseActive();

const authContext = await getAuthContext();
const isOwner = !isServiceError(authContext) && authContext.role === OrgRole.OWNER;

return (
<SidebarBase
session={session}
collapsible="none"
isValidLicenseActive={licenseActive}
isOwner={isOwner}
headerContent={<SettingsSidebarHeader />}
>
<Nav groups={sidebarNavGroups} />
Expand Down
8 changes: 6 additions & 2 deletions packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -31,7 +31,7 @@ import { useKeymapType } from "@/hooks/useKeymapType";
import { KeymapType } from "@/lib/types";
import { cn } from "@/lib/utils";
import {
ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronsUpDown, CodeIcon,
ArrowLeftToLineIcon, ArrowRightToLineIcon, ArrowUpCircle, ChevronsUpDown, CodeIcon,
Laptop, LogIn, LogOut, Moon, SettingsIcon, Sun, UserIcon
} from "lucide-react";
import { Session } from "next-auth";
Expand All@@ -44,15 +44,18 @@ import { KeyboardShortcutHint } from "@/app/components/keyboardShortcutHint";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { Separator } from "@/components/ui/separator";
import { WhatsNewSidebarButton } from "./whatsNewSidebarButton";
import { UpsellBadge } from "./upsellBadge";

interface SidebarBaseProps {
session: Session | null;
collapsible?: "icon" | "offcanvas" | "none";
headerContent: ReactNode;
children: ReactNode;
isValidLicenseActive: boolean;
isOwner: boolean;
}

export function SidebarBase({ session, collapsible = "icon", headerContent, children }: SidebarBaseProps) {
export function SidebarBase({ session, collapsible = "icon", headerContent, children, isValidLicenseActive, isOwner }: SidebarBaseProps) {
const [isScrolled, setIsScrolled] = useState(false);
const contentRef = useRef<HTMLDivElement>(null);

Expand DownExpand Up@@ -86,6 +89,7 @@ export function SidebarBase({ session, collapsible = "icon", headerContent, chil
{children}
</SidebarContent>
<SidebarFooter className="border-t border-sidebar-border">
{!isValidLicenseActive && isOwner && <UpsellBadge />}
{collapsible !== "none" && <CollapseSidebarButton />}
<WhatsNewSidebarButton />
{session ? (
Expand Down
40 changes: 40 additions & 0 deletions packages/web/src/app/(app)/@sidebar/components/upsellBadge.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
'use client';

import { ArrowUpCircle } from "lucide-react";
import { useState } from "react";
import { UpsellDialog } from "./upsellDialog";
import { useOffers } from "@/ee/features/lighthouse/useOffers";
import { Skeleton } from "@/components/ui/skeleton";

export const UpsellBadge = () => {
const [isDialogOpen, setIsDialogOpen] = useState(false);

const { data: offers, isPending, isError } = useOffers();

if (isPending) {
return (
<Skeleton className="h-6 w-28 mt-1" />
)
}

if (isError) {
return null;
}

const label = offers.trial.eligible ? "Try Enterprise" : "Free plan";
return (
<>
<div className="group-data-[state=collapsed]:hidden px-2 pt-1">
<button
type="button"
onClick={() => setIsDialogOpen(true)}
className="inline-flex items-center gap-1.5 rounded-full border border-border px-2.5 py-1 text-xs text-muted-foreground text-nowrap transition-colors hover:border-foreground hover:text-foreground"
>
<ArrowUpCircle className="h-3.5 w-3.5" />
{label}
</button>
</div>
<UpsellDialog open={isDialogOpen} onOpenChange={setIsDialogOpen} offers={offers}/>
</>
);
}
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Upsell dialog#1220

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
brendan-kellam merged 5 commits into from
May 22, 2026
Merged

Upsell dialog #1220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0d810f2
wip on upsell dialog
brendan-kellam May 22, 2026
be1cd42
rename to upsell dialog
brendan-kellam May 22, 2026
2e92b7f
use dynamic prices
brendan-kellam May 22, 2026
de5f107
further polish w.r.t., how we hydrate the client with offer information
brendan-kellam May 22, 2026
f972363
feedback
brendan-kellam May 22, 2026
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
3 changes: 0 additions & 3 deletions packages/db/prisma/migrations/20260509000000_add_license_table/migration.sql
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
-- AlterTable
ALTER TABLE "Org" ADD COLUMN "trialUsedAt" TIMESTAMP(3);

-- CreateTable
CREATE TABLE "License" (
"id" TEXT NOT NULL,
Expand Down
4 changes: 0 additions & 4 deletions packages/db/prisma/schema.prisma
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -293,10 +293,6 @@ model Org {
chats Chat[]

license License?

/// Set the first time this instance is seen to be on a trial subscription.
/// Never cleared. Used to gate the "Start trial" CTA in the UI.
trialUsedAt DateTime?
}

model License {
Expand Down
19 changes: 13 additions & 6 deletions packages/shared/src/entitlements.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -88,12 +88,12 @@ const getValidOfflineLicense = (): getValidOfflineLicense | null => {
return payload;
}

// If the license hasn't successfully synced with Lighthouse for this long,
// the locally-cached state is no longer trusted. This guards against an
// operator blocking egress to prevent the license row from hearing about
// a canceled or past-due subscription. 7 days absorbs week-long transient
// outages (weekends, firewall rollouts) without punishing legitimate
// customers.
// If the license hasn't successfully synced with Lighthouse for this long,
// the locally-cached state is no longer trusted. This guards against an
// operator blocking egress to prevent the license row from hearing about
// a canceled or past-due subscription. 7 days absorbs week-long transient
// outages (weekends, firewall rollouts) without punishing legitimate
// customers.
export const STALE_ONLINE_LICENSE_THRESHOLD_MS = 7 * 24 * 60 * 60 * 1000;

// Surface a UI warning (banner + "refreshed" timestamp color) when the
Expand All@@ -116,6 +116,13 @@ const getValidOnlineLicense = (_license: License | null): License | null => {
return null;
}

export const isValidLicenseActive = (_license: License | null): boolean => {
return (
getValidOfflineLicense() !== null ||
getValidOnlineLicense(_license) !== null
);
}

export const isAnonymousAccessAvailable = (_license: License | null): boolean => {
const offlineKey = getValidOfflineLicense();
if (offlineKey) {
Expand Down
1 change: 1 addition & 0 deletions packages/shared/src/index.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ export {
hasEntitlement as _hasEntitlement,
getEntitlements as _getEntitlements,
isAnonymousAccessAvailable as _isAnonymousAccessAvailable,
isValidLicenseActive as _isValidLicenseActive,
getSeatCap,
getOfflineLicenseMetadata,
STALE_ONLINE_LICENSE_THRESHOLD_MS,
Expand Down
1 change: 0 additions & 1 deletion packages/web/src/__mocks__/prisma.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,6 @@ export const MOCK_ORG: Org = {
memberApprovalRequired: false,
inviteLinkEnabled: false,
inviteLinkId: null,
trialUsedAt: null,
}

export const MOCK_API_KEY: ApiKey = {
Expand Down
21 changes: 10 additions & 11 deletions packages/web/src/app/(app)/@sidebar/components/defaultSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,14 +6,13 @@ import { getConnectionStats } from "@/actions";
import { getOrgAccountRequests } from "@/features/userManagement/actions";
import { isServiceError } from "@/lib/utils";
import { ServiceErrorException } from "@/lib/serviceError";
import { __unsafePrisma } from "@/prisma";
import { SINGLE_TENANT_ORG_ID } from "@/lib/constants";
import { OrgRole } from "@prisma/client";
import { SidebarBase } from "@/app/(app)/@sidebar/components/sidebarBase";
import { Nav } from "./nav";
import { ChatHistory } from "./chatHistory";
import { withAuth } from "@/middleware/withAuth";
import { getAuthContext, withAuth } from "@/middleware/withAuth";
import { sew } from "@/middleware/sew";
import { isValidLicenseActive } from "@/lib/entitlements";

const SIDEBAR_CHAT_LIMIT = 30;

Expand All@@ -27,15 +26,13 @@ export async function DefaultSidebar() {
throw new ServiceErrorException(chatHistory);
}

const licenseActive = await isValidLicenseActive();

const authContext = await getAuthContext();
const isOwner = !isServiceError(authContext) && authContext.role === OrgRole.OWNER;

const isSettingsNotificationVisible = await (async () => {
if (!session) {
return false;
}
const membership = await __unsafePrisma.userToOrg.findUnique({
where: { orgId_userId: { orgId: SINGLE_TENANT_ORG_ID, userId: session.user.id } },
select: { role: true },
});
if (membership?.role !== OrgRole.OWNER) {
if (!isOwner) {
return false;
}
const connectionStats = await getConnectionStats();
Expand All@@ -49,6 +46,8 @@ export async function DefaultSidebar() {
<SidebarBase
session={session}
collapsible="icon"
isValidLicenseActive={licenseActive}
isOwner={isOwner}
headerContent={
<Nav
isSettingsNotificationVisible={isSettingsNotificationVisible}
Expand Down
10 changes: 10 additions & 0 deletions packages/web/src/app/(app)/@sidebar/components/settingsSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,9 @@ import { getSidebarNavGroups } from "@/app/(app)/settings/layout";
import { SidebarBase } from "../sidebarBase";
import { Nav } from "./nav";
import { SettingsSidebarHeader } from "./header";
import { isValidLicenseActive } from "@/lib/entitlements";
import { getAuthContext } from "@/middleware/withAuth";
import { OrgRole } from "@prisma/client";

export async function SettingsSidebar() {
const session = await auth();
Expand All@@ -14,10 +17,17 @@ export async function SettingsSidebar() {
throw new ServiceErrorException(sidebarNavGroups);
}

const licenseActive = await isValidLicenseActive();

const authContext = await getAuthContext();
const isOwner = !isServiceError(authContext) && authContext.role === OrgRole.OWNER;

return (
<SidebarBase
session={session}
collapsible="none"
isValidLicenseActive={licenseActive}
isOwner={isOwner}
headerContent={<SettingsSidebarHeader />}
>
<Nav groups={sidebarNavGroups} />
Expand Down
8 changes: 6 additions & 2 deletions packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -31,7 +31,7 @@ import { useKeymapType } from "@/hooks/useKeymapType";
import { KeymapType } from "@/lib/types";
import { cn } from "@/lib/utils";
import {
ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronsUpDown, CodeIcon,
ArrowLeftToLineIcon, ArrowRightToLineIcon, ArrowUpCircle, ChevronsUpDown, CodeIcon,
Laptop, LogIn, LogOut, Moon, SettingsIcon, Sun, UserIcon
} from "lucide-react";
import { Session } from "next-auth";
Expand All@@ -44,15 +44,18 @@ import { KeyboardShortcutHint } from "@/app/components/keyboardShortcutHint";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { Separator } from "@/components/ui/separator";
import { WhatsNewSidebarButton } from "./whatsNewSidebarButton";
import { UpsellBadge } from "./upsellBadge";

interface SidebarBaseProps {
session: Session | null;
collapsible?: "icon" | "offcanvas" | "none";
headerContent: ReactNode;
children: ReactNode;
isValidLicenseActive: boolean;
isOwner: boolean;
}

export function SidebarBase({ session, collapsible = "icon", headerContent, children }: SidebarBaseProps) {
export function SidebarBase({ session, collapsible = "icon", headerContent, children, isValidLicenseActive, isOwner }: SidebarBaseProps) {
const [isScrolled, setIsScrolled] = useState(false);
const contentRef = useRef<HTMLDivElement>(null);

Expand DownExpand Up@@ -86,6 +89,7 @@ export function SidebarBase({ session, collapsible = "icon", headerContent, chil
{children}
</SidebarContent>
<SidebarFooter className="border-t border-sidebar-border">
{!isValidLicenseActive && isOwner && <UpsellBadge />}
{collapsible !== "none" && <CollapseSidebarButton />}
<WhatsNewSidebarButton />
{session ? (
Expand Down
40 changes: 40 additions & 0 deletions packages/web/src/app/(app)/@sidebar/components/upsellBadge.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
'use client';

import { ArrowUpCircle } from "lucide-react";
import { useState } from "react";
import { UpsellDialog } from "./upsellDialog";
import { useOffers } from "@/ee/features/lighthouse/useOffers";
import { Skeleton } from "@/components/ui/skeleton";

export const UpsellBadge = () => {
const [isDialogOpen, setIsDialogOpen] = useState(false);

const { data: offers, isPending, isError } = useOffers();

if (isPending) {
return (
<Skeleton className="h-6 w-28 mt-1" />
)
}

if (isError) {
return null;
}

const label = offers.trial.eligible ? "Try Enterprise" : "Free plan";
return (
<>
<div className="group-data-[state=collapsed]:hidden px-2 pt-1">
<button
type="button"
onClick={() => setIsDialogOpen(true)}
className="inline-flex items-center gap-1.5 rounded-full border border-border px-2.5 py-1 text-xs text-muted-foreground text-nowrap transition-colors hover:border-foreground hover:text-foreground"
>
<ArrowUpCircle className="h-3.5 w-3.5" />
{label}
</button>
</div>
<UpsellDialog open={isDialogOpen} onOpenChange={setIsDialogOpen} offers={offers}/>
</>
);
}
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length \u003e 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Upsell dialog#1220

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
brendan-kellam merged 5 commits into from
May 22, 2026
Merged

Upsell dialog #1220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0d810f2
wip on upsell dialog
brendan-kellam May 22, 2026
be1cd42
rename to upsell dialog
brendan-kellam May 22, 2026
2e92b7f
use dynamic prices
brendan-kellam May 22, 2026
de5f107
further polish w.r.t., how we hydrate the client with offer information
brendan-kellam May 22, 2026
f972363
feedback
brendan-kellam May 22, 2026
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
3 changes: 0 additions & 3 deletions packages/db/prisma/migrations/20260509000000_add_license_table/migration.sql
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
-- AlterTable
ALTER TABLE "Org" ADD COLUMN "trialUsedAt" TIMESTAMP(3);

-- CreateTable
CREATE TABLE "License" (
"id" TEXT NOT NULL,
Expand Down
4 changes: 0 additions & 4 deletions packages/db/prisma/schema.prisma
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -293,10 +293,6 @@ model Org {
chats Chat[]

license License?

/// Set the first time this instance is seen to be on a trial subscription.
/// Never cleared. Used to gate the "Start trial" CTA in the UI.
trialUsedAt DateTime?
}

model License {
Expand Down
19 changes: 13 additions & 6 deletions packages/shared/src/entitlements.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -88,12 +88,12 @@ const getValidOfflineLicense = (): getValidOfflineLicense | null => {
return payload;
}

// If the license hasn't successfully synced with Lighthouse for this long,
// the locally-cached state is no longer trusted. This guards against an
// operator blocking egress to prevent the license row from hearing about
// a canceled or past-due subscription. 7 days absorbs week-long transient
// outages (weekends, firewall rollouts) without punishing legitimate
// customers.
// If the license hasn't successfully synced with Lighthouse for this long,
// the locally-cached state is no longer trusted. This guards against an
// operator blocking egress to prevent the license row from hearing about
// a canceled or past-due subscription. 7 days absorbs week-long transient
// outages (weekends, firewall rollouts) without punishing legitimate
// customers.
export const STALE_ONLINE_LICENSE_THRESHOLD_MS = 7 * 24 * 60 * 60 * 1000;

// Surface a UI warning (banner + "refreshed" timestamp color) when the
Expand All@@ -116,6 +116,13 @@ const getValidOnlineLicense = (_license: License | null): License | null => {
return null;
}

export const isValidLicenseActive = (_license: License | null): boolean => {
return (
getValidOfflineLicense() !== null ||
getValidOnlineLicense(_license) !== null
);
}

export const isAnonymousAccessAvailable = (_license: License | null): boolean => {
const offlineKey = getValidOfflineLicense();
if (offlineKey) {
Expand Down
1 change: 1 addition & 0 deletions packages/shared/src/index.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ export {
hasEntitlement as _hasEntitlement,
getEntitlements as _getEntitlements,
isAnonymousAccessAvailable as _isAnonymousAccessAvailable,
isValidLicenseActive as _isValidLicenseActive,
getSeatCap,
getOfflineLicenseMetadata,
STALE_ONLINE_LICENSE_THRESHOLD_MS,
Expand Down
1 change: 0 additions & 1 deletion packages/web/src/__mocks__/prisma.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,6 @@ export const MOCK_ORG: Org = {
memberApprovalRequired: false,
inviteLinkEnabled: false,
inviteLinkId: null,
trialUsedAt: null,
}

export const MOCK_API_KEY: ApiKey = {
Expand Down
21 changes: 10 additions & 11 deletions packages/web/src/app/(app)/@sidebar/components/defaultSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,14 +6,13 @@ import { getConnectionStats } from "@/actions";
import { getOrgAccountRequests } from "@/features/userManagement/actions";
import { isServiceError } from "@/lib/utils";
import { ServiceErrorException } from "@/lib/serviceError";
import { __unsafePrisma } from "@/prisma";
import { SINGLE_TENANT_ORG_ID } from "@/lib/constants";
import { OrgRole } from "@prisma/client";
import { SidebarBase } from "@/app/(app)/@sidebar/components/sidebarBase";
import { Nav } from "./nav";
import { ChatHistory } from "./chatHistory";
import { withAuth } from "@/middleware/withAuth";
import { getAuthContext, withAuth } from "@/middleware/withAuth";
import { sew } from "@/middleware/sew";
import { isValidLicenseActive } from "@/lib/entitlements";

const SIDEBAR_CHAT_LIMIT = 30;

Expand All@@ -27,15 +26,13 @@ export async function DefaultSidebar() {
throw new ServiceErrorException(chatHistory);
}

const licenseActive = await isValidLicenseActive();

const authContext = await getAuthContext();
const isOwner = !isServiceError(authContext) && authContext.role === OrgRole.OWNER;

const isSettingsNotificationVisible = await (async () => {
if (!session) {
return false;
}
const membership = await __unsafePrisma.userToOrg.findUnique({
where: { orgId_userId: { orgId: SINGLE_TENANT_ORG_ID, userId: session.user.id } },
select: { role: true },
});
if (membership?.role !== OrgRole.OWNER) {
if (!isOwner) {
return false;
}
const connectionStats = await getConnectionStats();
Expand All@@ -49,6 +46,8 @@ export async function DefaultSidebar() {
<SidebarBase
session={session}
collapsible="icon"
isValidLicenseActive={licenseActive}
isOwner={isOwner}
headerContent={
<Nav
isSettingsNotificationVisible={isSettingsNotificationVisible}
Expand Down
10 changes: 10 additions & 0 deletions packages/web/src/app/(app)/@sidebar/components/settingsSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,9 @@ import { getSidebarNavGroups } from "@/app/(app)/settings/layout";
import { SidebarBase } from "../sidebarBase";
import { Nav } from "./nav";
import { SettingsSidebarHeader } from "./header";
import { isValidLicenseActive } from "@/lib/entitlements";
import { getAuthContext } from "@/middleware/withAuth";
import { OrgRole } from "@prisma/client";

export async function SettingsSidebar() {
const session = await auth();
Expand All@@ -14,10 +17,17 @@ export async function SettingsSidebar() {
throw new ServiceErrorException(sidebarNavGroups);
}

const licenseActive = await isValidLicenseActive();

const authContext = await getAuthContext();
const isOwner = !isServiceError(authContext) && authContext.role === OrgRole.OWNER;

return (
<SidebarBase
session={session}
collapsible="none"
isValidLicenseActive={licenseActive}
isOwner={isOwner}
headerContent={<SettingsSidebarHeader />}
>
<Nav groups={sidebarNavGroups} />
Expand Down
8 changes: 6 additions & 2 deletions packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -31,7 +31,7 @@ import { useKeymapType } from "@/hooks/useKeymapType";
import { KeymapType } from "@/lib/types";
import { cn } from "@/lib/utils";
import {
ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronsUpDown, CodeIcon,
ArrowLeftToLineIcon, ArrowRightToLineIcon, ArrowUpCircle, ChevronsUpDown, CodeIcon,
Laptop, LogIn, LogOut, Moon, SettingsIcon, Sun, UserIcon
} from "lucide-react";
import { Session } from "next-auth";
Expand All@@ -44,15 +44,18 @@ import { KeyboardShortcutHint } from "@/app/components/keyboardShortcutHint";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { Separator } from "@/components/ui/separator";
import { WhatsNewSidebarButton } from "./whatsNewSidebarButton";
import { UpsellBadge } from "./upsellBadge";

interface SidebarBaseProps {
session: Session | null;
collapsible?: "icon" | "offcanvas" | "none";
headerContent: ReactNode;
children: ReactNode;
isValidLicenseActive: boolean;
isOwner: boolean;
}

export function SidebarBase({ session, collapsible = "icon", headerContent, children }: SidebarBaseProps) {
export function SidebarBase({ session, collapsible = "icon", headerContent, children, isValidLicenseActive, isOwner }: SidebarBaseProps) {
const [isScrolled, setIsScrolled] = useState(false);
const contentRef = useRef<HTMLDivElement>(null);

Expand DownExpand Up@@ -86,6 +89,7 @@ export function SidebarBase({ session, collapsible = "icon", headerContent, chil
{children}
</SidebarContent>
<SidebarFooter className="border-t border-sidebar-border">
{!isValidLicenseActive && isOwner && <UpsellBadge />}
{collapsible !== "none" && <CollapseSidebarButton />}
<WhatsNewSidebarButton />
{session ? (
Expand Down
40 changes: 40 additions & 0 deletions packages/web/src/app/(app)/@sidebar/components/upsellBadge.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
'use client';

import { ArrowUpCircle } from "lucide-react";
import { useState } from "react";
import { UpsellDialog } from "./upsellDialog";
import { useOffers } from "@/ee/features/lighthouse/useOffers";
import { Skeleton } from "@/components/ui/skeleton";

export const UpsellBadge = () => {
const [isDialogOpen, setIsDialogOpen] = useState(false);

const { data: offers, isPending, isError } = useOffers();

if (isPending) {
return (
<Skeleton className="h-6 w-28 mt-1" />
)
}

if (isError) {
return null;
}

const label = offers.trial.eligible ? "Try Enterprise" : "Free plan";
return (
<>
<div className="group-data-[state=collapsed]:hidden px-2 pt-1">
<button
type="button"
onClick={() => setIsDialogOpen(true)}
className="inline-flex items-center gap-1.5 rounded-full border border-border px-2.5 py-1 text-xs text-muted-foreground text-nowrap transition-colors hover:border-foreground hover:text-foreground"
>
<ArrowUpCircle className="h-3.5 w-3.5" />
{label}
</button>
</div>
<UpsellDialog open={isDialogOpen} onOpenChange={setIsDialogOpen} offers={offers}/>
</>
);
}
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Upsell dialog#1220

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
brendan-kellam merged 5 commits into from
May 22, 2026
Merged

Upsell dialog #1220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0d810f2
wip on upsell dialog
brendan-kellam May 22, 2026
be1cd42
rename to upsell dialog
brendan-kellam May 22, 2026
2e92b7f
use dynamic prices
brendan-kellam May 22, 2026
de5f107
further polish w.r.t., how we hydrate the client with offer information
brendan-kellam May 22, 2026
f972363
feedback
brendan-kellam May 22, 2026
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
3 changes: 0 additions & 3 deletions packages/db/prisma/migrations/20260509000000_add_license_table/migration.sql
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
-- AlterTable
ALTER TABLE "Org" ADD COLUMN "trialUsedAt" TIMESTAMP(3);

-- CreateTable
CREATE TABLE "License" (
"id" TEXT NOT NULL,
Expand Down
4 changes: 0 additions & 4 deletions packages/db/prisma/schema.prisma
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -293,10 +293,6 @@ model Org {
chats Chat[]

license License?

/// Set the first time this instance is seen to be on a trial subscription.
/// Never cleared. Used to gate the "Start trial" CTA in the UI.
trialUsedAt DateTime?
}

model License {
Expand Down
19 changes: 13 additions & 6 deletions packages/shared/src/entitlements.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -88,12 +88,12 @@ const getValidOfflineLicense = (): getValidOfflineLicense | null => {
return payload;
}

// If the license hasn't successfully synced with Lighthouse for this long,
// the locally-cached state is no longer trusted. This guards against an
// operator blocking egress to prevent the license row from hearing about
// a canceled or past-due subscription. 7 days absorbs week-long transient
// outages (weekends, firewall rollouts) without punishing legitimate
// customers.
// If the license hasn't successfully synced with Lighthouse for this long,
// the locally-cached state is no longer trusted. This guards against an
// operator blocking egress to prevent the license row from hearing about
// a canceled or past-due subscription. 7 days absorbs week-long transient
// outages (weekends, firewall rollouts) without punishing legitimate
// customers.
export const STALE_ONLINE_LICENSE_THRESHOLD_MS = 7 * 24 * 60 * 60 * 1000;

// Surface a UI warning (banner + "refreshed" timestamp color) when the
Expand All@@ -116,6 +116,13 @@ const getValidOnlineLicense = (_license: License | null): License | null => {
return null;
}

export const isValidLicenseActive = (_license: License | null): boolean => {
return (
getValidOfflineLicense() !== null ||
getValidOnlineLicense(_license) !== null
);
}

export const isAnonymousAccessAvailable = (_license: License | null): boolean => {
const offlineKey = getValidOfflineLicense();
if (offlineKey) {
Expand Down
1 change: 1 addition & 0 deletions packages/shared/src/index.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ export {
hasEntitlement as _hasEntitlement,
getEntitlements as _getEntitlements,
isAnonymousAccessAvailable as _isAnonymousAccessAvailable,
isValidLicenseActive as _isValidLicenseActive,
getSeatCap,
getOfflineLicenseMetadata,
STALE_ONLINE_LICENSE_THRESHOLD_MS,
Expand Down
1 change: 0 additions & 1 deletion packages/web/src/__mocks__/prisma.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,6 @@ export const MOCK_ORG: Org = {
memberApprovalRequired: false,
inviteLinkEnabled: false,
inviteLinkId: null,
trialUsedAt: null,
}

export const MOCK_API_KEY: ApiKey = {
Expand Down
21 changes: 10 additions & 11 deletions packages/web/src/app/(app)/@sidebar/components/defaultSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,14 +6,13 @@ import { getConnectionStats } from "@/actions";
import { getOrgAccountRequests } from "@/features/userManagement/actions";
import { isServiceError } from "@/lib/utils";
import { ServiceErrorException } from "@/lib/serviceError";
import { __unsafePrisma } from "@/prisma";
import { SINGLE_TENANT_ORG_ID } from "@/lib/constants";
import { OrgRole } from "@prisma/client";
import { SidebarBase } from "@/app/(app)/@sidebar/components/sidebarBase";
import { Nav } from "./nav";
import { ChatHistory } from "./chatHistory";
import { withAuth } from "@/middleware/withAuth";
import { getAuthContext, withAuth } from "@/middleware/withAuth";
import { sew } from "@/middleware/sew";
import { isValidLicenseActive } from "@/lib/entitlements";

const SIDEBAR_CHAT_LIMIT = 30;

Expand All@@ -27,15 +26,13 @@ export async function DefaultSidebar() {
throw new ServiceErrorException(chatHistory);
}

const licenseActive = await isValidLicenseActive();

const authContext = await getAuthContext();
const isOwner = !isServiceError(authContext) && authContext.role === OrgRole.OWNER;

const isSettingsNotificationVisible = await (async () => {
if (!session) {
return false;
}
const membership = await __unsafePrisma.userToOrg.findUnique({
where: { orgId_userId: { orgId: SINGLE_TENANT_ORG_ID, userId: session.user.id } },
select: { role: true },
});
if (membership?.role !== OrgRole.OWNER) {
if (!isOwner) {
return false;
}
const connectionStats = await getConnectionStats();
Expand All@@ -49,6 +46,8 @@ export async function DefaultSidebar() {
<SidebarBase
session={session}
collapsible="icon"
isValidLicenseActive={licenseActive}
isOwner={isOwner}
headerContent={
<Nav
isSettingsNotificationVisible={isSettingsNotificationVisible}
Expand Down
10 changes: 10 additions & 0 deletions packages/web/src/app/(app)/@sidebar/components/settingsSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,9 @@ import { getSidebarNavGroups } from "@/app/(app)/settings/layout";
import { SidebarBase } from "../sidebarBase";
import { Nav } from "./nav";
import { SettingsSidebarHeader } from "./header";
import { isValidLicenseActive } from "@/lib/entitlements";
import { getAuthContext } from "@/middleware/withAuth";
import { OrgRole } from "@prisma/client";

export async function SettingsSidebar() {
const session = await auth();
Expand All@@ -14,10 +17,17 @@ export async function SettingsSidebar() {
throw new ServiceErrorException(sidebarNavGroups);
}

const licenseActive = await isValidLicenseActive();

const authContext = await getAuthContext();
const isOwner = !isServiceError(authContext) && authContext.role === OrgRole.OWNER;

return (
<SidebarBase
session={session}
collapsible="none"
isValidLicenseActive={licenseActive}
isOwner={isOwner}
headerContent={<SettingsSidebarHeader />}
>
<Nav groups={sidebarNavGroups} />
Expand Down
8 changes: 6 additions & 2 deletions packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -31,7 +31,7 @@ import { useKeymapType } from "@/hooks/useKeymapType";
import { KeymapType } from "@/lib/types";
import { cn } from "@/lib/utils";
import {
ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronsUpDown, CodeIcon,
ArrowLeftToLineIcon, ArrowRightToLineIcon, ArrowUpCircle, ChevronsUpDown, CodeIcon,
Laptop, LogIn, LogOut, Moon, SettingsIcon, Sun, UserIcon
} from "lucide-react";
import { Session } from "next-auth";
Expand All@@ -44,15 +44,18 @@ import { KeyboardShortcutHint } from "@/app/components/keyboardShortcutHint";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { Separator } from "@/components/ui/separator";
import { WhatsNewSidebarButton } from "./whatsNewSidebarButton";
import { UpsellBadge } from "./upsellBadge";

interface SidebarBaseProps {
session: Session | null;
collapsible?: "icon" | "offcanvas" | "none";
headerContent: ReactNode;
children: ReactNode;
isValidLicenseActive: boolean;
isOwner: boolean;
}

export function SidebarBase({ session, collapsible = "icon", headerContent, children }: SidebarBaseProps) {
export function SidebarBase({ session, collapsible = "icon", headerContent, children, isValidLicenseActive, isOwner }: SidebarBaseProps) {
const [isScrolled, setIsScrolled] = useState(false);
const contentRef = useRef<HTMLDivElement>(null);

Expand DownExpand Up@@ -86,6 +89,7 @@ export function SidebarBase({ session, collapsible = "icon", headerContent, chil
{children}
</SidebarContent>
<SidebarFooter className="border-t border-sidebar-border">
{!isValidLicenseActive && isOwner && <UpsellBadge />}
{collapsible !== "none" && <CollapseSidebarButton />}
<WhatsNewSidebarButton />
{session ? (
Expand Down
40 changes: 40 additions & 0 deletions packages/web/src/app/(app)/@sidebar/components/upsellBadge.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
'use client';

import { ArrowUpCircle } from "lucide-react";
import { useState } from "react";
import { UpsellDialog } from "./upsellDialog";
import { useOffers } from "@/ee/features/lighthouse/useOffers";
import { Skeleton } from "@/components/ui/skeleton";

export const UpsellBadge = () => {
const [isDialogOpen, setIsDialogOpen] = useState(false);

const { data: offers, isPending, isError } = useOffers();

if (isPending) {
return (
<Skeleton className="h-6 w-28 mt-1" />
)
}

if (isError) {
return null;
}

const label = offers.trial.eligible ? "Try Enterprise" : "Free plan";
return (
<>
<div className="group-data-[state=collapsed]:hidden px-2 pt-1">
<button
type="button"
onClick={() => setIsDialogOpen(true)}
className="inline-flex items-center gap-1.5 rounded-full border border-border px-2.5 py-1 text-xs text-muted-foreground text-nowrap transition-colors hover:border-foreground hover:text-foreground"
>
<ArrowUpCircle className="h-3.5 w-3.5" />
{label}
</button>
</div>
<UpsellDialog open={isDialogOpen} onOpenChange={setIsDialogOpen} offers={offers}/>
</>
);
}
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Upsell dialog#1220

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
brendan-kellam merged 5 commits into from
May 22, 2026
Merged

Upsell dialog #1220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0d810f2
wip on upsell dialog
brendan-kellam May 22, 2026
be1cd42
rename to upsell dialog
brendan-kellam May 22, 2026
2e92b7f
use dynamic prices
brendan-kellam May 22, 2026
de5f107
further polish w.r.t., how we hydrate the client with offer information
brendan-kellam May 22, 2026
f972363
feedback
brendan-kellam May 22, 2026
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
3 changes: 0 additions & 3 deletions packages/db/prisma/migrations/20260509000000_add_license_table/migration.sql
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
-- AlterTable
ALTER TABLE "Org" ADD COLUMN "trialUsedAt" TIMESTAMP(3);

-- CreateTable
CREATE TABLE "License" (
"id" TEXT NOT NULL,
Expand Down
4 changes: 0 additions & 4 deletions packages/db/prisma/schema.prisma
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -293,10 +293,6 @@ model Org {
chats Chat[]

license License?

/// Set the first time this instance is seen to be on a trial subscription.
/// Never cleared. Used to gate the "Start trial" CTA in the UI.
trialUsedAt DateTime?
}

model License {
Expand Down
19 changes: 13 additions & 6 deletions packages/shared/src/entitlements.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -88,12 +88,12 @@ const getValidOfflineLicense = (): getValidOfflineLicense | null => {
return payload;
}

// If the license hasn't successfully synced with Lighthouse for this long,
// the locally-cached state is no longer trusted. This guards against an
// operator blocking egress to prevent the license row from hearing about
// a canceled or past-due subscription. 7 days absorbs week-long transient
// outages (weekends, firewall rollouts) without punishing legitimate
// customers.
// If the license hasn't successfully synced with Lighthouse for this long,
// the locally-cached state is no longer trusted. This guards against an
// operator blocking egress to prevent the license row from hearing about
// a canceled or past-due subscription. 7 days absorbs week-long transient
// outages (weekends, firewall rollouts) without punishing legitimate
// customers.
export const STALE_ONLINE_LICENSE_THRESHOLD_MS = 7 * 24 * 60 * 60 * 1000;

// Surface a UI warning (banner + "refreshed" timestamp color) when the
Expand All@@ -116,6 +116,13 @@ const getValidOnlineLicense = (_license: License | null): License | null => {
return null;
}

export const isValidLicenseActive = (_license: License | null): boolean => {
return (
getValidOfflineLicense() !== null ||
getValidOnlineLicense(_license) !== null
);
}

export const isAnonymousAccessAvailable = (_license: License | null): boolean => {
const offlineKey = getValidOfflineLicense();
if (offlineKey) {
Expand Down
1 change: 1 addition & 0 deletions packages/shared/src/index.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ export {
hasEntitlement as _hasEntitlement,
getEntitlements as _getEntitlements,
isAnonymousAccessAvailable as _isAnonymousAccessAvailable,
isValidLicenseActive as _isValidLicenseActive,
getSeatCap,
getOfflineLicenseMetadata,
STALE_ONLINE_LICENSE_THRESHOLD_MS,
Expand Down
1 change: 0 additions & 1 deletion packages/web/src/__mocks__/prisma.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,6 @@ export const MOCK_ORG: Org = {
memberApprovalRequired: false,
inviteLinkEnabled: false,
inviteLinkId: null,
trialUsedAt: null,
}

export const MOCK_API_KEY: ApiKey = {
Expand Down
21 changes: 10 additions & 11 deletions packages/web/src/app/(app)/@sidebar/components/defaultSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,14 +6,13 @@ import { getConnectionStats } from "@/actions";
import { getOrgAccountRequests } from "@/features/userManagement/actions";
import { isServiceError } from "@/lib/utils";
import { ServiceErrorException } from "@/lib/serviceError";
import { __unsafePrisma } from "@/prisma";
import { SINGLE_TENANT_ORG_ID } from "@/lib/constants";
import { OrgRole } from "@prisma/client";
import { SidebarBase } from "@/app/(app)/@sidebar/components/sidebarBase";
import { Nav } from "./nav";
import { ChatHistory } from "./chatHistory";
import { withAuth } from "@/middleware/withAuth";
import { getAuthContext, withAuth } from "@/middleware/withAuth";
import { sew } from "@/middleware/sew";
import { isValidLicenseActive } from "@/lib/entitlements";

const SIDEBAR_CHAT_LIMIT = 30;

Expand All@@ -27,15 +26,13 @@ export async function DefaultSidebar() {
throw new ServiceErrorException(chatHistory);
}

const licenseActive = await isValidLicenseActive();

const authContext = await getAuthContext();
const isOwner = !isServiceError(authContext) && authContext.role === OrgRole.OWNER;

const isSettingsNotificationVisible = await (async () => {
if (!session) {
return false;
}
const membership = await __unsafePrisma.userToOrg.findUnique({
where: { orgId_userId: { orgId: SINGLE_TENANT_ORG_ID, userId: session.user.id } },
select: { role: true },
});
if (membership?.role !== OrgRole.OWNER) {
if (!isOwner) {
return false;
}
const connectionStats = await getConnectionStats();
Expand All@@ -49,6 +46,8 @@ export async function DefaultSidebar() {
<SidebarBase
session={session}
collapsible="icon"
isValidLicenseActive={licenseActive}
isOwner={isOwner}
headerContent={
<Nav
isSettingsNotificationVisible={isSettingsNotificationVisible}
Expand Down
10 changes: 10 additions & 0 deletions packages/web/src/app/(app)/@sidebar/components/settingsSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,9 @@ import { getSidebarNavGroups } from "@/app/(app)/settings/layout";
import { SidebarBase } from "../sidebarBase";
import { Nav } from "./nav";
import { SettingsSidebarHeader } from "./header";
import { isValidLicenseActive } from "@/lib/entitlements";
import { getAuthContext } from "@/middleware/withAuth";
import { OrgRole } from "@prisma/client";

export async function SettingsSidebar() {
const session = await auth();
Expand All@@ -14,10 +17,17 @@ export async function SettingsSidebar() {
throw new ServiceErrorException(sidebarNavGroups);
}

const licenseActive = await isValidLicenseActive();

const authContext = await getAuthContext();
const isOwner = !isServiceError(authContext) && authContext.role === OrgRole.OWNER;

return (
<SidebarBase
session={session}
collapsible="none"
isValidLicenseActive={licenseActive}
isOwner={isOwner}
headerContent={<SettingsSidebarHeader />}
>
<Nav groups={sidebarNavGroups} />
Expand Down
8 changes: 6 additions & 2 deletions packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -31,7 +31,7 @@ import { useKeymapType } from "@/hooks/useKeymapType";
import { KeymapType } from "@/lib/types";
import { cn } from "@/lib/utils";
import {
ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronsUpDown, CodeIcon,
ArrowLeftToLineIcon, ArrowRightToLineIcon, ArrowUpCircle, ChevronsUpDown, CodeIcon,
Laptop, LogIn, LogOut, Moon, SettingsIcon, Sun, UserIcon
} from "lucide-react";
import { Session } from "next-auth";
Expand All@@ -44,15 +44,18 @@ import { KeyboardShortcutHint } from "@/app/components/keyboardShortcutHint";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { Separator } from "@/components/ui/separator";
import { WhatsNewSidebarButton } from "./whatsNewSidebarButton";
import { UpsellBadge } from "./upsellBadge";

interface SidebarBaseProps {
session: Session | null;
collapsible?: "icon" | "offcanvas" | "none";
headerContent: ReactNode;
children: ReactNode;
isValidLicenseActive: boolean;
isOwner: boolean;
}

export function SidebarBase({ session, collapsible = "icon", headerContent, children }: SidebarBaseProps) {
export function SidebarBase({ session, collapsible = "icon", headerContent, children, isValidLicenseActive, isOwner }: SidebarBaseProps) {
const [isScrolled, setIsScrolled] = useState(false);
const contentRef = useRef<HTMLDivElement>(null);

Expand DownExpand Up@@ -86,6 +89,7 @@ export function SidebarBase({ session, collapsible = "icon", headerContent, chil
{children}
</SidebarContent>
<SidebarFooter className="border-t border-sidebar-border">
{!isValidLicenseActive && isOwner && <UpsellBadge />}
{collapsible !== "none" && <CollapseSidebarButton />}
<WhatsNewSidebarButton />
{session ? (
Expand Down
40 changes: 40 additions & 0 deletions packages/web/src/app/(app)/@sidebar/components/upsellBadge.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
'use client';

import { ArrowUpCircle } from "lucide-react";
import { useState } from "react";
import { UpsellDialog } from "./upsellDialog";
import { useOffers } from "@/ee/features/lighthouse/useOffers";
import { Skeleton } from "@/components/ui/skeleton";

export const UpsellBadge = () => {
const [isDialogOpen, setIsDialogOpen] = useState(false);

const { data: offers, isPending, isError } = useOffers();

if (isPending) {
return (
<Skeleton className="h-6 w-28 mt-1" />
)
}

if (isError) {
return null;
}

const label = offers.trial.eligible ? "Try Enterprise" : "Free plan";
return (
<>
<div className="group-data-[state=collapsed]:hidden px-2 pt-1">
<button
type="button"
onClick={() => setIsDialogOpen(true)}
className="inline-flex items-center gap-1.5 rounded-full border border-border px-2.5 py-1 text-xs text-muted-foreground text-nowrap transition-colors hover:border-foreground hover:text-foreground"
>
<ArrowUpCircle className="h-3.5 w-3.5" />
{label}
</button>
</div>
<UpsellDialog open={isDialogOpen} onOpenChange={setIsDialogOpen} offers={offers}/>
</>
);
}
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Upsell dialog#1220

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
brendan-kellam merged 5 commits into from
May 22, 2026
Merged

Upsell dialog #1220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0d810f2
wip on upsell dialog
brendan-kellam May 22, 2026
be1cd42
rename to upsell dialog
brendan-kellam May 22, 2026
2e92b7f
use dynamic prices
brendan-kellam May 22, 2026
de5f107
further polish w.r.t., how we hydrate the client with offer information
brendan-kellam May 22, 2026
f972363
feedback
brendan-kellam May 22, 2026
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
3 changes: 0 additions & 3 deletions packages/db/prisma/migrations/20260509000000_add_license_table/migration.sql
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
-- AlterTable
ALTER TABLE "Org" ADD COLUMN "trialUsedAt" TIMESTAMP(3);

-- CreateTable
CREATE TABLE "License" (
"id" TEXT NOT NULL,
Expand Down
4 changes: 0 additions & 4 deletions packages/db/prisma/schema.prisma
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -293,10 +293,6 @@ model Org {
chats Chat[]

license License?

/// Set the first time this instance is seen to be on a trial subscription.
/// Never cleared. Used to gate the "Start trial" CTA in the UI.
trialUsedAt DateTime?
}

model License {
Expand Down
19 changes: 13 additions & 6 deletions packages/shared/src/entitlements.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -88,12 +88,12 @@ const getValidOfflineLicense = (): getValidOfflineLicense | null => {
return payload;
}

// If the license hasn't successfully synced with Lighthouse for this long,
// the locally-cached state is no longer trusted. This guards against an
// operator blocking egress to prevent the license row from hearing about
// a canceled or past-due subscription. 7 days absorbs week-long transient
// outages (weekends, firewall rollouts) without punishing legitimate
// customers.
// If the license hasn't successfully synced with Lighthouse for this long,
// the locally-cached state is no longer trusted. This guards against an
// operator blocking egress to prevent the license row from hearing about
// a canceled or past-due subscription. 7 days absorbs week-long transient
// outages (weekends, firewall rollouts) without punishing legitimate
// customers.
export const STALE_ONLINE_LICENSE_THRESHOLD_MS = 7 * 24 * 60 * 60 * 1000;

// Surface a UI warning (banner + "refreshed" timestamp color) when the
Expand All@@ -116,6 +116,13 @@ const getValidOnlineLicense = (_license: License | null): License | null => {
return null;
}

export const isValidLicenseActive = (_license: License | null): boolean => {
return (
getValidOfflineLicense() !== null ||
getValidOnlineLicense(_license) !== null
);
}

export const isAnonymousAccessAvailable = (_license: License | null): boolean => {
const offlineKey = getValidOfflineLicense();
if (offlineKey) {
Expand Down
1 change: 1 addition & 0 deletions packages/shared/src/index.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ export {
hasEntitlement as _hasEntitlement,
getEntitlements as _getEntitlements,
isAnonymousAccessAvailable as _isAnonymousAccessAvailable,
isValidLicenseActive as _isValidLicenseActive,
getSeatCap,
getOfflineLicenseMetadata,
STALE_ONLINE_LICENSE_THRESHOLD_MS,
Expand Down
1 change: 0 additions & 1 deletion packages/web/src/__mocks__/prisma.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,6 @@ export const MOCK_ORG: Org = {
memberApprovalRequired: false,
inviteLinkEnabled: false,
inviteLinkId: null,
trialUsedAt: null,
}

export const MOCK_API_KEY: ApiKey = {
Expand Down
21 changes: 10 additions & 11 deletions packages/web/src/app/(app)/@sidebar/components/defaultSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,14 +6,13 @@ import { getConnectionStats } from "@/actions";
import { getOrgAccountRequests } from "@/features/userManagement/actions";
import { isServiceError } from "@/lib/utils";
import { ServiceErrorException } from "@/lib/serviceError";
import { __unsafePrisma } from "@/prisma";
import { SINGLE_TENANT_ORG_ID } from "@/lib/constants";
import { OrgRole } from "@prisma/client";
import { SidebarBase } from "@/app/(app)/@sidebar/components/sidebarBase";
import { Nav } from "./nav";
import { ChatHistory } from "./chatHistory";
import { withAuth } from "@/middleware/withAuth";
import { getAuthContext, withAuth } from "@/middleware/withAuth";
import { sew } from "@/middleware/sew";
import { isValidLicenseActive } from "@/lib/entitlements";

const SIDEBAR_CHAT_LIMIT = 30;

Expand All@@ -27,15 +26,13 @@ export async function DefaultSidebar() {
throw new ServiceErrorException(chatHistory);
}

const licenseActive = await isValidLicenseActive();

const authContext = await getAuthContext();
const isOwner = !isServiceError(authContext) && authContext.role === OrgRole.OWNER;

const isSettingsNotificationVisible = await (async () => {
if (!session) {
return false;
}
const membership = await __unsafePrisma.userToOrg.findUnique({
where: { orgId_userId: { orgId: SINGLE_TENANT_ORG_ID, userId: session.user.id } },
select: { role: true },
});
if (membership?.role !== OrgRole.OWNER) {
if (!isOwner) {
return false;
}
const connectionStats = await getConnectionStats();
Expand All@@ -49,6 +46,8 @@ export async function DefaultSidebar() {
<SidebarBase
session={session}
collapsible="icon"
isValidLicenseActive={licenseActive}
isOwner={isOwner}
headerContent={
<Nav
isSettingsNotificationVisible={isSettingsNotificationVisible}
Expand Down
10 changes: 10 additions & 0 deletions packages/web/src/app/(app)/@sidebar/components/settingsSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,9 @@ import { getSidebarNavGroups } from "@/app/(app)/settings/layout";
import { SidebarBase } from "../sidebarBase";
import { Nav } from "./nav";
import { SettingsSidebarHeader } from "./header";
import { isValidLicenseActive } from "@/lib/entitlements";
import { getAuthContext } from "@/middleware/withAuth";
import { OrgRole } from "@prisma/client";

export async function SettingsSidebar() {
const session = await auth();
Expand All@@ -14,10 +17,17 @@ export async function SettingsSidebar() {
throw new ServiceErrorException(sidebarNavGroups);
}

const licenseActive = await isValidLicenseActive();

const authContext = await getAuthContext();
const isOwner = !isServiceError(authContext) && authContext.role === OrgRole.OWNER;

return (
<SidebarBase
session={session}
collapsible="none"
isValidLicenseActive={licenseActive}
isOwner={isOwner}
headerContent={<SettingsSidebarHeader />}
>
<Nav groups={sidebarNavGroups} />
Expand Down
8 changes: 6 additions & 2 deletions packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -31,7 +31,7 @@ import { useKeymapType } from "@/hooks/useKeymapType";
import { KeymapType } from "@/lib/types";
import { cn } from "@/lib/utils";
import {
ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronsUpDown, CodeIcon,
ArrowLeftToLineIcon, ArrowRightToLineIcon, ArrowUpCircle, ChevronsUpDown, CodeIcon,
Laptop, LogIn, LogOut, Moon, SettingsIcon, Sun, UserIcon
} from "lucide-react";
import { Session } from "next-auth";
Expand All@@ -44,15 +44,18 @@ import { KeyboardShortcutHint } from "@/app/components/keyboardShortcutHint";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { Separator } from "@/components/ui/separator";
import { WhatsNewSidebarButton } from "./whatsNewSidebarButton";
import { UpsellBadge } from "./upsellBadge";

interface SidebarBaseProps {
session: Session | null;
collapsible?: "icon" | "offcanvas" | "none";
headerContent: ReactNode;
children: ReactNode;
isValidLicenseActive: boolean;
isOwner: boolean;
}

export function SidebarBase({ session, collapsible = "icon", headerContent, children }: SidebarBaseProps) {
export function SidebarBase({ session, collapsible = "icon", headerContent, children, isValidLicenseActive, isOwner }: SidebarBaseProps) {
const [isScrolled, setIsScrolled] = useState(false);
const contentRef = useRef<HTMLDivElement>(null);

Expand DownExpand Up@@ -86,6 +89,7 @@ export function SidebarBase({ session, collapsible = "icon", headerContent, chil
{children}
</SidebarContent>
<SidebarFooter className="border-t border-sidebar-border">
{!isValidLicenseActive && isOwner && <UpsellBadge />}
{collapsible !== "none" && <CollapseSidebarButton />}
<WhatsNewSidebarButton />
{session ? (
Expand Down
40 changes: 40 additions & 0 deletions packages/web/src/app/(app)/@sidebar/components/upsellBadge.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
'use client';

import { ArrowUpCircle } from "lucide-react";
import { useState } from "react";
import { UpsellDialog } from "./upsellDialog";
import { useOffers } from "@/ee/features/lighthouse/useOffers";
import { Skeleton } from "@/components/ui/skeleton";

export const UpsellBadge = () => {
const [isDialogOpen, setIsDialogOpen] = useState(false);

const { data: offers, isPending, isError } = useOffers();

if (isPending) {
return (
<Skeleton className="h-6 w-28 mt-1" />
)
}

if (isError) {
return null;
}

const label = offers.trial.eligible ? "Try Enterprise" : "Free plan";
return (
<>
<div className="group-data-[state=collapsed]:hidden px-2 pt-1">
<button
type="button"
onClick={() => setIsDialogOpen(true)}
className="inline-flex items-center gap-1.5 rounded-full border border-border px-2.5 py-1 text-xs text-muted-foreground text-nowrap transition-colors hover:border-foreground hover:text-foreground"
>
<ArrowUpCircle className="h-3.5 w-3.5" />
{label}
</button>
</div>
<UpsellDialog open={isDialogOpen} onOpenChange={setIsDialogOpen} offers={offers}/>
</>
);
}
Loading
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Upsell dialog#1220

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
brendan-kellam merged 5 commits into from
May 22, 2026
Merged

Upsell dialog #1220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0d810f2
wip on upsell dialog
brendan-kellam May 22, 2026
be1cd42
rename to upsell dialog
brendan-kellam May 22, 2026
2e92b7f
use dynamic prices
brendan-kellam May 22, 2026
de5f107
further polish w.r.t., how we hydrate the client with offer information
brendan-kellam May 22, 2026
f972363
feedback
brendan-kellam May 22, 2026
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
3 changes: 0 additions & 3 deletions packages/db/prisma/migrations/20260509000000_add_license_table/migration.sql
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
-- AlterTable
ALTER TABLE "Org" ADD COLUMN "trialUsedAt" TIMESTAMP(3);

-- CreateTable
CREATE TABLE "License" (
"id" TEXT NOT NULL,
Expand Down
4 changes: 0 additions & 4 deletions packages/db/prisma/schema.prisma
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -293,10 +293,6 @@ model Org {
chats Chat[]

license License?

/// Set the first time this instance is seen to be on a trial subscription.
/// Never cleared. Used to gate the "Start trial" CTA in the UI.
trialUsedAt DateTime?
}

model License {
Expand Down
19 changes: 13 additions & 6 deletions packages/shared/src/entitlements.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -88,12 +88,12 @@ const getValidOfflineLicense = (): getValidOfflineLicense | null => {
return payload;
}

// If the license hasn't successfully synced with Lighthouse for this long,
// the locally-cached state is no longer trusted. This guards against an
// operator blocking egress to prevent the license row from hearing about
// a canceled or past-due subscription. 7 days absorbs week-long transient
// outages (weekends, firewall rollouts) without punishing legitimate
// customers.
// If the license hasn't successfully synced with Lighthouse for this long,
// the locally-cached state is no longer trusted. This guards against an
// operator blocking egress to prevent the license row from hearing about
// a canceled or past-due subscription. 7 days absorbs week-long transient
// outages (weekends, firewall rollouts) without punishing legitimate
// customers.
export const STALE_ONLINE_LICENSE_THRESHOLD_MS = 7 * 24 * 60 * 60 * 1000;

// Surface a UI warning (banner + "refreshed" timestamp color) when the
Expand All@@ -116,6 +116,13 @@ const getValidOnlineLicense = (_license: License | null): License | null => {
return null;
}

export const isValidLicenseActive = (_license: License | null): boolean => {
return (
getValidOfflineLicense() !== null ||
getValidOnlineLicense(_license) !== null
);
}

export const isAnonymousAccessAvailable = (_license: License | null): boolean => {
const offlineKey = getValidOfflineLicense();
if (offlineKey) {
Expand Down
1 change: 1 addition & 0 deletions packages/shared/src/index.server.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,7 @@ export {
hasEntitlement as _hasEntitlement,
getEntitlements as _getEntitlements,
isAnonymousAccessAvailable as _isAnonymousAccessAvailable,
isValidLicenseActive as _isValidLicenseActive,
getSeatCap,
getOfflineLicenseMetadata,
STALE_ONLINE_LICENSE_THRESHOLD_MS,
Expand Down
1 change: 0 additions & 1 deletion packages/web/src/__mocks__/prisma.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,6 @@ export const MOCK_ORG: Org = {
memberApprovalRequired: false,
inviteLinkEnabled: false,
inviteLinkId: null,
trialUsedAt: null,
}

export const MOCK_API_KEY: ApiKey = {
Expand Down
21 changes: 10 additions & 11 deletions packages/web/src/app/(app)/@sidebar/components/defaultSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,14 +6,13 @@ import { getConnectionStats } from "@/actions";
import { getOrgAccountRequests } from "@/features/userManagement/actions";
import { isServiceError } from "@/lib/utils";
import { ServiceErrorException } from "@/lib/serviceError";
import { __unsafePrisma } from "@/prisma";
import { SINGLE_TENANT_ORG_ID } from "@/lib/constants";
import { OrgRole } from "@prisma/client";
import { SidebarBase } from "@/app/(app)/@sidebar/components/sidebarBase";
import { Nav } from "./nav";
import { ChatHistory } from "./chatHistory";
import { withAuth } from "@/middleware/withAuth";
import { getAuthContext, withAuth } from "@/middleware/withAuth";
import { sew } from "@/middleware/sew";
import { isValidLicenseActive } from "@/lib/entitlements";

const SIDEBAR_CHAT_LIMIT = 30;

Expand All@@ -27,15 +26,13 @@ export async function DefaultSidebar() {
throw new ServiceErrorException(chatHistory);
}

const licenseActive = await isValidLicenseActive();

const authContext = await getAuthContext();
const isOwner = !isServiceError(authContext) && authContext.role === OrgRole.OWNER;

const isSettingsNotificationVisible = await (async () => {
if (!session) {
return false;
}
const membership = await __unsafePrisma.userToOrg.findUnique({
where: { orgId_userId: { orgId: SINGLE_TENANT_ORG_ID, userId: session.user.id } },
select: { role: true },
});
if (membership?.role !== OrgRole.OWNER) {
if (!isOwner) {
return false;
}
const connectionStats = await getConnectionStats();
Expand All@@ -49,6 +46,8 @@ export async function DefaultSidebar() {
<SidebarBase
session={session}
collapsible="icon"
isValidLicenseActive={licenseActive}
isOwner={isOwner}
headerContent={
<Nav
isSettingsNotificationVisible={isSettingsNotificationVisible}
Expand Down
10 changes: 10 additions & 0 deletions packages/web/src/app/(app)/@sidebar/components/settingsSidebar/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,6 +5,9 @@ import { getSidebarNavGroups } from "@/app/(app)/settings/layout";
import { SidebarBase } from "../sidebarBase";
import { Nav } from "./nav";
import { SettingsSidebarHeader } from "./header";
import { isValidLicenseActive } from "@/lib/entitlements";
import { getAuthContext } from "@/middleware/withAuth";
import { OrgRole } from "@prisma/client";

export async function SettingsSidebar() {
const session = await auth();
Expand All@@ -14,10 +17,17 @@ export async function SettingsSidebar() {
throw new ServiceErrorException(sidebarNavGroups);
}

const licenseActive = await isValidLicenseActive();

const authContext = await getAuthContext();
const isOwner = !isServiceError(authContext) && authContext.role === OrgRole.OWNER;

return (
<SidebarBase
session={session}
collapsible="none"
isValidLicenseActive={licenseActive}
isOwner={isOwner}
headerContent={<SettingsSidebarHeader />}
>
<Nav groups={sidebarNavGroups} />
Expand Down
8 changes: 6 additions & 2 deletions packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -31,7 +31,7 @@ import { useKeymapType } from "@/hooks/useKeymapType";
import { KeymapType } from "@/lib/types";
import { cn } from "@/lib/utils";
import {
ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronsUpDown, CodeIcon,
ArrowLeftToLineIcon, ArrowRightToLineIcon, ArrowUpCircle, ChevronsUpDown, CodeIcon,
Laptop, LogIn, LogOut, Moon, SettingsIcon, Sun, UserIcon
} from "lucide-react";
import { Session } from "next-auth";
Expand All@@ -44,15 +44,18 @@ import { KeyboardShortcutHint } from "@/app/components/keyboardShortcutHint";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { Separator } from "@/components/ui/separator";
import { WhatsNewSidebarButton } from "./whatsNewSidebarButton";
import { UpsellBadge } from "./upsellBadge";

interface SidebarBaseProps {
session: Session | null;
collapsible?: "icon" | "offcanvas" | "none";
headerContent: ReactNode;
children: ReactNode;
isValidLicenseActive: boolean;
isOwner: boolean;
}

export function SidebarBase({ session, collapsible = "icon", headerContent, children }: SidebarBaseProps) {
export function SidebarBase({ session, collapsible = "icon", headerContent, children, isValidLicenseActive, isOwner }: SidebarBaseProps) {
const [isScrolled, setIsScrolled] = useState(false);
const contentRef = useRef<HTMLDivElement>(null);

Expand DownExpand Up@@ -86,6 +89,7 @@ export function SidebarBase({ session, collapsible = "icon", headerContent, chil
{children}
</SidebarContent>
<SidebarFooter className="border-t border-sidebar-border">
{!isValidLicenseActive && isOwner && <UpsellBadge />}
{collapsible !== "none" && <CollapseSidebarButton />}
<WhatsNewSidebarButton />
{session ? (
Expand Down
40 changes: 40 additions & 0 deletions packages/web/src/app/(app)/@sidebar/components/upsellBadge.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
'use client';

import { ArrowUpCircle } from "lucide-react";
import { useState } from "react";
import { UpsellDialog } from "./upsellDialog";
import { useOffers } from "@/ee/features/lighthouse/useOffers";
import { Skeleton } from "@/components/ui/skeleton";

export const UpsellBadge = () => {
const [isDialogOpen, setIsDialogOpen] = useState(false);

const { data: offers, isPending, isError } = useOffers();

if (isPending) {
return (
<Skeleton className="h-6 w-28 mt-1" />
)
}

if (isError) {
return null;
}

const label = offers.trial.eligible ? "Try Enterprise" : "Free plan";
return (
<>
<div className="group-data-[state=collapsed]:hidden px-2 pt-1">
<button
type="button"
onClick={() => setIsDialogOpen(true)}
className="inline-flex items-center gap-1.5 rounded-full border border-border px-2.5 py-1 text-xs text-muted-foreground text-nowrap transition-colors hover:border-foreground hover:text-foreground"
>
<ArrowUpCircle className="h-3.5 w-3.5" />
{label}
</button>
</div>
<UpsellDialog open={isDialogOpen} onOpenChange={setIsDialogOpen} offers={offers}/>
</>
);
}
Loading
Loading