improvement(billing): open a Chat plan popup on send instead of a static card above the composer (#9608)

* improvement(billing): open a Chat plan popup on send instead of a static card above the composer

* improvement(billing): name the plan upgrade link input

Author: waleedlatif1

apps/sim/app/extension/[workspaceId]/workspace.tsx

@@ -5,6 +5,7 @@ import { isApiClientError } from '@/lib/api/client/errors'
 import { ExtensionChat } from '@/app/extension/[workspaceId]/chat'
 import ExtensionLoading from '@/app/extension/loading'
 import { ExtensionSignIn } from '@/app/extension/sign-in'
+import { ChatPlanModal } from '@/app/workspace/[workspaceId]/home/components/chat-plan-modal'
 import { BlockVisibilityLoader } from '@/app/workspace/[workspaceId]/providers/block-visibility-loader'
 import { CustomBlocksLoader } from '@/app/workspace/[workspaceId]/providers/custom-blocks-loader'
 import { ProviderModelsLoader } from '@/app/workspace/[workspaceId]/providers/provider-models-loader'
@@ -65,6 +66,7 @@ export function ExtensionWorkspace({ workspaceId }: ExtensionWorkspaceProps) {
           >
             <ExtensionChat workspaceId={workspaceId} workspaceName={data.workspace.name} />
           </PermissionAccessBoundary>
+          <ChatPlanModal />
         </WorkspacePermissionsProvider>
       </BrandingProvider>
     </WorkspaceHostProvider>

apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx

@@ -16,6 +16,7 @@ import { usePathname } from 'next/navigation'
 import { getDesktopBridge } from '@/lib/desktop'
 import { SidebarChromeProvider } from '@/app/workspace/[workspaceId]/components/workspace-chrome/sidebar-chrome-context'
 import { useSidebarPeek } from '@/app/workspace/[workspaceId]/components/workspace-chrome/use-sidebar-peek'
+import { ChatPlanModal } from '@/app/workspace/[workspaceId]/home/components/chat-plan-modal'
 import { SidebarTooltip } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-tooltip'
 import { SIDEBAR_NO_MOTION_CLASS } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 import { isMobileViewport, useIsMobile } from '@/hooks/use-is-mobile'
@@ -446,6 +447,7 @@ export function WorkspaceChrome({
         </div>
       )}
       {!isFullscreen && <TitleBarHistoryNav />}
+      <ChatPlanModal />
     </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/home/components/chat-plan-modal/chat-plan-modal.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import {
+  ChipModal,
+  ChipModalBody,
+  ChipModalDescription,
+  ChipModalFooter,
+  ChipModalHeader,
+} from '@sim/emcn'
+import { useRouter } from 'next/navigation'
+import { CHAT_PLAN_REQUIRED_UPGRADE } from '@/lib/billing/chat-plan'
+import { rememberSettingsReturnUrl } from '@/lib/navigation/settings-return'
+import { usePlanUpgradeLink } from '@/app/workspace/[workspaceId]/home/hooks/use-plan-upgrade-link'
+import { useChatPlanModalStore } from '@/stores/modals/chat-plan/store'
+
+/**
+ * Answers a send the workspace's plan refuses: Chat is on paid plans, with the way to upgrade
+ * for a viewer who may, and who to ask for one who may not. Render it once per workspace shell.
+ */
+export function ChatPlanModal() {
+  const isOpen = useChatPlanModalStore((state) => state.isOpen)
+  const close = useChatPlanModalStore((state) => state.close)
+
+  return (
+    <ChipModal
+      open={isOpen}
+      onOpenChange={(open) => !open && close()}
+      srTitle='Paid Plan Required'
+      size='sm'
+    >
+      <ChatPlanModalContent onClose={close} />
+    </ChipModal>
+  )
+}
+
+interface ChatPlanModalContentProps {
+  onClose: () => void
+}
+
+/** Mounted only while the modal shows, so a closed modal reads no session or billing context. */
+function ChatPlanModalContent({ onClose }: ChatPlanModalContentProps) {
+  const router = useRouter()
+  const { href, opensInNewTab, buttonLabel, canManageBilling, unavailableMessage } =
+    usePlanUpgradeLink(CHAT_PLAN_REQUIRED_UPGRADE)
+
+  const upgrade = () => {
+    onClose()
+    if (opensInNewTab) {
+      window.open(href, '_blank', 'noopener,noreferrer')
+      return
+    }
+    rememberSettingsReturnUrl(href)
+    router.push(href)
+  }
+
+  return (
+    <>
+      <ChipModalHeader onClose={onClose}>Paid Plan Required</ChipModalHeader>
+      <ChipModalBody>
+        <ChipModalDescription>
+          {CHAT_PLAN_REQUIRED_UPGRADE.message}
+          {!canManageBilling && ` ${unavailableMessage}`}
+        </ChipModalDescription>
+      </ChipModalBody>
+      {canManageBilling ? (
+        <ChipModalFooter
+          onCancel={onClose}
+          primaryAction={{ label: buttonLabel, onClick: upgrade }}
+        />
+      ) : (
+        <ChipModalFooter onCancel={onClose} cancelLabel='Close' defaultAction='dismiss' />
+      )}
+    </>
+  )
+}

apps/sim/app/workspace/[workspaceId]/home/components/chat-plan-modal/index.ts

@@ -0,0 +1 @@
+export { ChatPlanModal } from './chat-plan-modal'

apps/sim/app/workspace/[workspaceId]/home/components/chat-plan-notice/chat-plan-notice.tsx

@@ -1,5 +1,4 @@
 export { ChatMessageAttachments } from './chat-message-attachments'
-export { ChatPlanNotice } from './chat-plan-notice'
 export { ChatSurfaceProvider, useChatSurface } from './chat-surface-context'
 export { ContextMentionIcon } from './context-mention-icon'
 export { CreditsChip } from './credits-chip'

apps/sim/app/workspace/[workspaceId]/home/components/chat-plan-notice/index.ts

@@ -27,7 +27,6 @@ export {
   credentialTagHasVisibleCard,
   formatCredentialSubmissionMessage,
   isHttpUrl,
-  PlanUsageLimitDisplay,
   parseCredentialSubmissionMessage,
   parseCredentialSubmissionProgress,
   parseCredentialTagBody,

apps/sim/app/workspace/[workspaceId]/home/components/index.ts

@@ -30,18 +30,9 @@ import {
 } from '@sim/emcn/icons'
 import { isRecordLike, omit } from '@sim/utils/object'
 import { useParams } from 'next/navigation'
-import { getOrganizationSettingsHref } from '@/components/settings/navigation'
-import { useSettingsNavigationTarget } from '@/components/settings/settings-navigation-provider'
 import { useSession } from '@/lib/auth/client'
 import { CHAT_PLAN_REQUIRED_REASON } from '@/lib/billing/chat-plan'
-import {
-  buildHostedUpgradeUrl,
-  buildUpgradeHref,
-  HOSTED_BILLING_SETTINGS_URL,
-} from '@/lib/billing/upgrade-reasons'
-import { canManageWorkspaceBilling } from '@/lib/billing/workspace-permissions'
 import { isBrowserAgentAvailable, sendBrowserPanelAction } from '@/lib/browser-agent/transport'
-import { useDeploymentShape } from '@/lib/core/config/deployment-shape'
 import { isSafeHttpUrl } from '@/lib/core/utils/urls'
 import { readLatestOAuthChatAttempt } from '@/lib/credentials/oauth-chat-attempt'
 import { getDesktopBridge } from '@/lib/desktop'
@@ -64,7 +55,6 @@ import { OAUTH_PROVIDERS } from '@/lib/oauth/oauth'
 import { getServiceConfigByProviderId } from '@/lib/oauth/utils'
 import { organizationSecretNameSchema } from '@/lib/organization-secrets/validation'
 import { finishTerminalHandoff, isTerminalAvailable } from '@/lib/terminal/transport'
-import { useOptionalOrganizationContext } from '@/app/o/[organizationId]/providers/organization-provider'
 import { useChatSurface } from '@/app/workspace/[workspaceId]/home/components/chat-surface-context'
 import { ContextMentionIcon } from '@/app/workspace/[workspaceId]/home/components/context-mention-icon'
 import {
@@ -93,6 +83,7 @@ import {
 } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/use-oauth-chip-connection'
 import { usePersonalCredentialConnection } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/use-personal-credential-connection'
 import { ResourceWorkspaceHost } from '@/app/workspace/[workspaceId]/home/components/resource-workspace-host'
+import { usePlanUpgradeLink } from '@/app/workspace/[workspaceId]/home/hooks/use-plan-upgrade-link'
 import type {
   ChatMessageContext,
   MothershipResource,
@@ -121,7 +112,6 @@ import { useTablesList } from '@/hooks/queries/tables'
 import { useWorkflows } from '@/hooks/queries/workflows'
 import { useWorkspaceFileAtPath, useWorkspaceFileLookup } from '@/hooks/queries/workspace-files'
 import { useWorkspaceUsageGate } from '@/hooks/queries/workspace-usage'
-import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
 
 export interface OptionsItemData {
   title: string
@@ -3500,45 +3490,14 @@ interface PlanUsageLimitDisplayProps {
  * The payer's plan limit, or a free plan that does not include Chat: the card links to where
  * the plan or the limit can change, and a workspace's plan to its upgrade page.
  */
-export function PlanUsageLimitDisplay({ data }: PlanUsageLimitDisplayProps) {
-  const { data: session } = useSession()
+function PlanUsageLimitDisplay({ data }: PlanUsageLimitDisplayProps) {
   const hostContext = useOptionalWorkspaceHostContext()
-  const organizationContext = useOptionalOrganizationContext()
-  const { getSettingsHref } = useSettingsNavigation()
-  const { hosted } = useDeploymentShape()
-  const navigationTarget = useSettingsNavigationTarget()
-  const opensInNewTab = !hosted || navigationTarget === '_blank'
+  const { href, opensInNewTab, buttonLabel, canManageBilling, unavailableMessage } =
+    usePlanUpgradeLink(data)
   const planRequired = data.reason === CHAT_PLAN_REQUIRED_REASON
-  const buttonLabel = data.action === 'upgrade_plan' ? 'Upgrade Plan' : 'Increase Limit'
-
-  // Self-hosted plan and limit both live on the hosted account, so local
-  // workspace billing roles say nothing about who may change them.
-  const href = hosted
-    ? organizationContext
-      ? getOrganizationSettingsHref(organizationContext.organization.id, 'billing')
-      : planRequired && hostContext
-        ? buildUpgradeHref(hostContext.workspace.id)
-        : getSettingsHref({ section: 'billing' })
-    : data.action === 'upgrade_plan'
-      ? buildHostedUpgradeUrl()
-      : HOSTED_BILLING_SETTINGS_URL
-  const canManageBilling =
-    !hosted ||
-    (organizationContext
-      ? organizationContext.viewer.isAdmin
-      : Boolean(hostContext && canManageWorkspaceBilling(hostContext, session?.user?.id)))
   const usageGate = useWorkspaceUsageGate(
     data.action === 'increase_limit' && !canManageBilling ? hostContext?.workspace.id : undefined
   )
-  const action = planRequired
-    ? 'upgrade this workspace’s plan'
-    : 'manage this workspace’s usage limits'
-  const unavailableMessage =
-    organizationContext && !planRequired
-      ? 'Contact an organization admin to manage usage limits.'
-      : organizationContext || hostContext?.hostOrganizationId
-        ? `Contact an organization admin to ${action}.`
-        : `Only the workspace owner can ${action}.`
 
   return (
     <InteractionCard

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/index.ts

@@ -33,7 +33,6 @@ import { inter } from '@/app/_styles/fonts/inter/inter'
 import { FindBar } from '@/app/workspace/[workspaceId]/components/find-bar'
 import { MessageActions } from '@/app/workspace/[workspaceId]/components/message-actions'
 import { ChatMessageAttachments } from '@/app/workspace/[workspaceId]/home/components/chat-message-attachments'
-import { ChatPlanNotice } from '@/app/workspace/[workspaceId]/home/components/chat-plan-notice'
 import { ChatSurfaceProvider } from '@/app/workspace/[workspaceId]/home/components/chat-surface-context'
 import { ComposerScrollArea } from '@/app/workspace/[workspaceId]/home/components/composer-scroll-area'
 import {
@@ -1037,7 +1036,6 @@ export function MothershipChat({
         >
           <div className={styles.footerInner}>
             <ComputerUseActivity />
-            {!isLoading && <ChatPlanNotice />}
             <QueuedMessages
               messageQueue={messageQueue}
               editingQueuedId={editingQueuedId}