change CTA text for upsell dialog to be dependent on role

Author: brendan-kellam

packages/web/src/app/(app)/@sidebar/components/sidebarBase.tsx

@@ -89,7 +89,7 @@ export function SidebarBase({ session, collapsible = "icon", headerContent, chil
                 {children}
             </SidebarContent>
             <SidebarFooter className="border-t border-sidebar-border">
-                {!isValidLicenseActive && isOwner && <UpgradeButton />}
+                {!isValidLicenseActive && <UpgradeButton />}
                 {collapsible !== "none" && <CollapseSidebarButton />}
                 <WhatsNewSidebarButton />
                 {session ? (

packages/web/src/app/(app)/layout.tsx

@@ -33,6 +33,7 @@ import { ServiceErrorException } from "@/lib/serviceError";
 import { ConnectAccountsCard } from "@/ee/features/sso/components/connectAccountsCard";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { CheckoutReturnHandler } from "@/ee/features/lighthouse/checkoutReturnHandler";
+import { RoleProvider } from "@/features/auth/roleProvider";
 
 interface LayoutProps {
     children: React.ReactNode;
@@ -169,31 +170,32 @@ export default async function Layout(props: LayoutProps) {
         : await __unsafePrisma.license.findUnique({ where: { orgId: org.id } });
 
     return (
-        <SyntaxGuideProvider>
-
-            <div className="fixed inset-0 flex bg-shell">
-                <SidebarProvider defaultOpen={cookieStore.get("sidebar_state")?.value !== "false"}>
-                    {sidebar}
-                    <div className="flex-1 min-h-0 flex flex-col pt-2 pb-2 pr-2">
-                        <div className="flex-1 min-h-0 bg-background flex flex-col border border-[#e6e6e6] dark:border-[#1d1d1f] rounded-xl overflow-hidden">
-                            <BannerSlot
-                                role={role}
-                                license={license}
-                                offlineLicense={offlineLicense}
-                                hasPermissionSyncEntitlement={hasPermissionSyncEntitlement}
-                                hasPendingFirstSync={hasPendingFirstSync}
-                            />
-                            <div className="flex-1 min-h-0 overflow-y-auto">
-                                {children}
+        <RoleProvider role={role}>
+            <SyntaxGuideProvider>
+                <div className="fixed inset-0 flex bg-shell">
+                    <SidebarProvider defaultOpen={cookieStore.get("sidebar_state")?.value !== "false"}>
+                        {sidebar}
+                        <div className="flex-1 min-h-0 flex flex-col pt-2 pb-2 pr-2">
+                            <div className="flex-1 min-h-0 bg-background flex flex-col border border-[#e6e6e6] dark:border-[#1d1d1f] rounded-xl overflow-hidden">
+                                <BannerSlot
+                                    role={role}
+                                    license={license}
+                                    offlineLicense={offlineLicense}
+                                    hasPermissionSyncEntitlement={hasPermissionSyncEntitlement}
+                                    hasPendingFirstSync={hasPendingFirstSync}
+                                />
+                                <div className="flex-1 min-h-0 overflow-y-auto">
+                                    {children}
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </SidebarProvider>
-            </div>
-            <SyntaxReferenceGuide />
-            <GitHubStarToast />
-            {env.EXPERIMENT_ASK_GH_ENABLED !== 'true' && <UpgradeToast />}
-            <CheckoutReturnHandler userEmail={session?.user.email} />
-        </SyntaxGuideProvider>
+                    </SidebarProvider>
+                </div>
+                <SyntaxReferenceGuide />
+                <GitHubStarToast />
+                {env.EXPERIMENT_ASK_GH_ENABLED !== 'true' && <UpgradeToast />}
+                <CheckoutReturnHandler userEmail={session?.user.email} />
+            </SyntaxGuideProvider>
+        </RoleProvider>
     )
 }

packages/web/src/ee/features/lighthouse/upsellDialog.tsx

@@ -10,6 +10,7 @@ import { createCheckoutSession } from "@/ee/features/lighthouse/actions";
 import { useToast } from "@/components/hooks/use-toast";
 import {
     Dialog,
+    DialogClose,
     DialogContent,
     DialogDescription,
     DialogFooter,
@@ -26,6 +27,8 @@ import {
 } from "@/components/ui/table";
 import { OffersResponse } from "@/ee/features/lighthouse/types";
 import { useOffers } from "@/ee/features/lighthouse/useOffers";
+import { useRole } from "@/features/auth/useRole";
+import { OrgRole } from "@sourcebot/db";
 
 interface FeatureLinkProps {
     text: string;
@@ -128,6 +131,8 @@ function UpsellDialogContent({ offers, returnPath }: UpsellDialogContentProps) {
     const [billingInterval, setBillingInterval] = useState<BillingInterval>("year");
     const [isCheckoutSessionCreating, setIsCheckoutSessionCreating] = useState(false);
     const { toast } = useToast();
+    const role = useRole();
+    const isOwner = role === OrgRole.OWNER;
 
     const enterprisePrice = formatPrice(
         billingInterval === "year" ? offers.pricing.annual.unitAmount : offers.pricing.monthly.unitAmount,
@@ -163,6 +168,15 @@ function UpsellDialogContent({ offers, returnPath }: UpsellDialogContentProps) {
     }, [billingInterval, offers.trial.eligible, returnPath, toast]);
 
     const { title, description, buttonText } = useMemo(() => {
+        // Members can't upgrade the workspace themselves — show them the feature
+        // table so they understand what's gated, but route them to the owner.
+        if (!isOwner) {
+            return {
+                title: "Enterprise feature",
+                description: "Ask your workspace owner to upgrade to Enterprise.",
+                buttonText: "Got it",
+            }
+        }
         // trial, no cc
         if (offers.trial.eligible && !offers.trial.creditCardRequired) {
             return {
@@ -187,7 +201,7 @@ function UpsellDialogContent({ offers, returnPath }: UpsellDialogContentProps) {
                 buttonText: "Upgrade"
             }
         }
-    }, [offers.trial.creditCardRequired, offers.trial.durationDays, offers.trial.eligible]);
+    }, [isOwner, offers.trial.creditCardRequired, offers.trial.durationDays, offers.trial.eligible]);
 
     return (
         <>
@@ -278,9 +292,15 @@ function UpsellDialogContent({ offers, returnPath }: UpsellDialogContentProps) {
                         <ExternalLink className="h-3.5 w-3.5 ml-2" />
                     </a>
                 </Button>
-                <LoadingButton onClick={handlePrimaryAction} loading={isCheckoutSessionCreating}>
-                    {buttonText}
-                </LoadingButton>
+                {isOwner ? (
+                    <LoadingButton onClick={handlePrimaryAction} loading={isCheckoutSessionCreating}>
+                        {buttonText}
+                    </LoadingButton>
+                ) : (
+                    <DialogClose asChild>
+                        <Button>{buttonText}</Button>
+                    </DialogClose>
+                )}
             </DialogFooter>
         </>
     );

packages/web/src/features/auth/roleProvider.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { createContext } from "react";
+import { OrgRole } from "@sourcebot/db";
+
+export const RoleContext = createContext<{ role: OrgRole | null }>({ role: null });
+
+interface RoleProviderProps {
+    children: React.ReactNode;
+    role: OrgRole | null;
+}
+
+export const RoleProvider = ({ children, role }: RoleProviderProps) => {
+    return (
+        <RoleContext.Provider
+            value={{ role }}
+        >
+            {children}
+        </RoleContext.Provider>
+    )
+};

packages/web/src/features/auth/useRole.ts

@@ -0,0 +1,9 @@
+'use client';
+
+import { useContext } from "react";
+import { RoleContext } from "./roleProvider";
+
+export const useRole = () => {
+    const { role } = useContext(RoleContext);
+    return role;
+}