fix(web): disable the sidebar Craft tab below the Business tier (#16224)

web/src/sections/sidebar/AppSidebar.tsx

@@ -53,7 +53,10 @@ import { SidebarLayouts, useSidebarState } from "@opal/layouts";
 import { renderSidebarLogo } from "@/lib/sidebar/utils";
 import { useShowLogoWhenFolded } from "@/lib/sidebar/hooks";
 import { Button as OpalButton } from "@opal/components";
-import { cn } from "@opal/utils";
+import { cn, markdown } from "@opal/utils";
+import { Disabled } from "@opal/core";
+import { useTierAtLeast } from "@/lib/tiers/hooks";
+import { Tier } from "@/lib/tiers/types";
 import { DRAG_TYPES, LOCAL_STORAGE_KEYS } from "@/lib/sidebar/constants";
 import { PHFeatureFlag, usePHFeatureFlag } from "@/lib/analytics/hooks";
 import {
@@ -214,6 +217,7 @@ function RecentsSection({
 
 export default function AppSidebar() {
   const t = useTranslations("sidebar");
+  const tCraftUpgrade = useTranslations("craft.upgrade");
   const moveChatErrorMessage = t("appSidebar.moveChatError.message");
   const { folded } = useSidebarState();
   const router = useRouter();
@@ -269,6 +273,8 @@ export default function AppSidebar() {
   const isOnyxCraftUpsell =
     !isOnyxCraftEnabled &&
     combinedSettingsData?.onyx_craft_requires_upgrade === true;
+  // Gated like a Business admin page: below that tier the tab is disabled.
+  const hasCraftTier = useTierAtLeast(Tier.BUSINESS);
 
   // Fetch notifications for build mode intro
   const { notifications, refresh: mutateNotifications } = useNotifications({
@@ -497,7 +503,7 @@ export default function AppSidebar() {
     ]
   );
 
-  const { hasAdminAccess, adminCapabilities, user } = useUser();
+  const { hasAdminAccess, adminCapabilities, user, isAdmin } = useUser();
   const activeSidebarTab = useAppPosition();
   const createProjectModal = useCreateModal();
   const showLogoWhenFolded = useShowLogoWhenFolded();
@@ -631,21 +637,37 @@ export default function AppSidebar() {
           />
           {(isOnyxCraftEnabled || isOnyxCraftUpsell) && (
             <div data-testid="AppSidebar/build">
-              <SidebarTab
-                icon={SvgDevKit}
-                href={CRAFT_PATH}
-                onClick={() => track(AnalyticsEvent.CLICKED_CRAFT_IN_SIDEBAR)}
-                rightChildren={
-                  isOnyxCraftUpsell ? (
-                    <Tag
-                      title={t("appSidebar.craft.businessTag")}
-                      color="blue"
-                    />
-                  ) : undefined
+              <Disabled
+                disabled={!hasCraftTier}
+                // Only admins can open billing, so others are told to ask one.
+                tooltip={
+                  isAdmin
+                    ? markdown(
+                        t("adminSidebar.businessOrEnterpriseOnly.tooltip")
+                      )
+                    : tCraftUpgrade("userDescription")
                 }
               >
-                {t("appSidebar.craft.label")}
-              </SidebarTab>
+                <SidebarTab
+                  icon={SvgDevKit}
+                  href={hasCraftTier ? CRAFT_PATH : undefined}
+                  onClick={
+                    hasCraftTier
+                      ? () => track(AnalyticsEvent.CLICKED_CRAFT_IN_SIDEBAR)
+                      : undefined
+                  }
+                  rightChildren={
+                    isOnyxCraftUpsell ? (
+                      <Tag
+                        title={t("appSidebar.craft.businessTag")}
+                        color="blue"
+                      />
+                    ) : undefined
+                  }
+                >
+                  {t("appSidebar.craft.label")}
+                </SidebarTab>
+              </Disabled>
             </div>
           )}
           {folded && moreAgentsButton}