[Backport vscode-v1.64.x] chore(ES): update CTAs and eligibility logic (

#6825)

Updated CTA links and eligibility logic, see Loom and
[CODY-4659](https://linear.app/sourcegraph/issue/CODY-4659/profile-menu-ctas)
for full details


https://www.loom.com/share/2222084d04a14e1ba080b06c92207a19?sid=67bc08e2-e284-4616-92e4-1f087145a480

Closes
https://linear.app/sourcegraph/issue/CORE-535/cody-clients-migrate-ctas-to-live-links.


## Test plan
1. Tested CTA eligibility on dotcom, and enterprise instances
2. Checked dismiss notifications did not break webview
3. Checked links and confirmed that they matched with designs
4. Switched across multiple accounts and everything still worked

 <br> Backport 7da7444 from #6803

Co-authored-by: Kalan <51868853+kalanchan@users.noreply.github.com>

vscode/src/chat/protocol.ts

@@ -285,7 +285,7 @@ export const CODY_OLLAMA_DOCS_URL = new URL(
     'https://sourcegraph.com/docs/cody/clients/install-vscode#supported-local-ollama-models-with-cody'
 )
 // Account
-export const ENTERPRISE_PRICING_URL = new URL('https://sourcegraph.com/pricing')
+export const ENTERPRISE_STARTER_PRICING_URL = new URL('https://sourcegraph.com/pricing')
 export const CODY_PRO_SUBSCRIPTION_URL = new URL('https://accounts.sourcegraph.com/cody/subscription')
 export const ACCOUNT_UPGRADE_URL = new URL('https://sourcegraph.com/cody/subscription')
 export const ACCOUNT_USAGE_URL = new URL('https://sourcegraph.com/cody/manage')
@@ -296,7 +296,7 @@ export const ACCOUNT_LIMITS_INFO_URL = new URL(
 export const CODY_BLOG_URL_o1_WAITLIST = new URL('https://sourcegraph.com/blog/openai-o1-for-cody')
 
 // TODO: Update to live link https://linear.app/sourcegraph/issue/CORE-535/cody-clients-migrate-ctas-to-live-links
-export const DOTCOM_WORKSPACE_LEARN_MORE_URL = new URL('https://sourcegraph.com/docs')
+export const ENTERPRISE_STARTER_LEARN_MORE_URL = new URL('https://sourcegraph.com/enterprise-starter')
 
 /** The local environment of the editor. */
 export interface LocalEnv {

vscode/webviews/Chat.tsx

@@ -37,7 +37,7 @@ interface ChatboxProps {
     setView: (view: View) => void
     smartApplyEnabled?: boolean
     isPromptsV2Enabled?: boolean
-    isTeamsUpgradeCtaEnabled?: boolean
+    isWorkspacesUpgradeCtaEnabled?: boolean
 }
 
 export const Chat: React.FunctionComponent<React.PropsWithChildren<ChatboxProps>> = ({
@@ -53,7 +53,7 @@ export const Chat: React.FunctionComponent<React.PropsWithChildren<ChatboxProps>
     setView,
     smartApplyEnabled,
     isPromptsV2Enabled,
-    isTeamsUpgradeCtaEnabled,
+    isWorkspacesUpgradeCtaEnabled,
 }) => {
     const telemetryRecorder = useTelemetryRecorder()
 
@@ -261,7 +261,7 @@ export const Chat: React.FunctionComponent<React.PropsWithChildren<ChatboxProps>
                         isPromptsV2Enabled={isPromptsV2Enabled}
                     />
                     <WelcomeFooter IDE={userInfo.IDE} />
-                    {isTeamsUpgradeCtaEnabled && (
+                    {isWorkspacesUpgradeCtaEnabled && (
                         <div className="tw-absolute tw-bottom-0 tw-left-1/2 tw-transform tw--translate-x-1/2 tw-w-[95%] tw-z-1 tw-mb-4 tw-max-h-1/2">
                             <WelcomeNotice />
                         </div>

vscode/webviews/CodyPanel.tsx

@@ -57,7 +57,7 @@ interface CodyPanelProps {
 export const CodyPanel: FunctionComponent<CodyPanelProps> = ({
     view,
     setView,
-    configuration: { config, clientCapabilities },
+    configuration: { config, clientCapabilities, isDotComUser },
     errorMessages,
     setErrorMessages,
     attributionEnabled,
@@ -80,7 +80,11 @@ export const CodyPanel: FunctionComponent<CodyPanelProps> = ({
     const api = useExtensionAPI()
     const { value: chatModels } = useObservable(useMemo(() => api.chatModels(), [api.chatModels]))
     const isPromptsV2Enabled = useFeatureFlag(FeatureFlag.CodyPromptsV2)
-    const isTeamsUpgradeCtaEnabled = useFeatureFlag(FeatureFlag.SourcegraphTeamsUpgradeCTA)
+    // workspace upgrade eligibility should be that the flag is set, is on dotcom and only has one account. This prevents enterprise customers that are logged into multiple endpoints from seeing the CTA
+    const isWorkspacesUpgradeCtaEnabled =
+        useFeatureFlag(FeatureFlag.SourcegraphTeamsUpgradeCTA) &&
+        isDotComUser &&
+        config.endpointHistory?.length === 1
 
     useEffect(() => {
         onExternalApiReady?.(externalAPI)
@@ -122,7 +126,7 @@ export const CodyPanel: FunctionComponent<CodyPanelProps> = ({
                         currentView={view}
                         setView={setView}
                         endpointHistory={config.endpointHistory ?? []}
-                        isTeamsUpgradeCtaEnabled={isTeamsUpgradeCtaEnabled}
+                        isWorkspacesUpgradeCtaEnabled={isWorkspacesUpgradeCtaEnabled}
                     />
                 )}
                 {errorMessages && <ErrorBanner errors={errorMessages} setErrors={setErrorMessages} />}
@@ -141,7 +145,7 @@ export const CodyPanel: FunctionComponent<CodyPanelProps> = ({
                             smartApplyEnabled={smartApplyEnabled}
                             isPromptsV2Enabled={isPromptsV2Enabled}
                             setView={setView}
-                            isTeamsUpgradeCtaEnabled={isTeamsUpgradeCtaEnabled}
+                            isWorkspacesUpgradeCtaEnabled={isWorkspacesUpgradeCtaEnabled}
                         />
                     )}
                     {view === View.History && (

vscode/webviews/chat/components/WelcomeMessage.tsx

@@ -17,7 +17,7 @@ interface WelcomeMessageProps {
     setView: (view: View) => void
     IDE: CodyIDE
     isPromptsV2Enabled?: boolean
-    isTeamsUpgradeCtaEnabled?: boolean
+    isWorkspacesUpgradeCtaEnabled?: boolean
 }
 
 export const WelcomeMessage: FunctionComponent<WelcomeMessageProps> = ({

vscode/webviews/chat/components/WelcomeNotice.tsx

@@ -1,56 +1,47 @@
-import { SG_WORKSPACES_URL } from '@sourcegraph/cody-shared/src/sourcegraph-api/environments'
 import { XIcon } from 'lucide-react'
-import { type FunctionComponent, useCallback } from 'react'
-import { DOTCOM_WORKSPACE_LEARN_MORE_URL } from '../../../src/chat/protocol'
+import type { FunctionComponent } from 'react'
+import { ENTERPRISE_STARTER_LEARN_MORE_URL } from '../../../src/chat/protocol'
 import { useLocalStorage } from '../../components/hooks'
 import { Badge } from '../../components/shadcn/ui/badge'
 import { Button } from '../../components/shadcn/ui/button'
 import graphDarkCTA from '../../graph_dark.svg'
 import graphLightCTA from '../../graph_light.svg'
 import { SourcegraphLogo } from '../../icons/SourcegraphLogo'
 import { useTelemetryRecorder } from '../../utils/telemetry'
-
 export const WelcomeNotice: FunctionComponent = () => {
-    const [dismissed, setDismissed] = useLocalStorage('sg_welcome_notice_00', 0)
-    if (dismissed) {
+    // to test locally, bump the suffix
+    const [dismissed, setDismissed] = useLocalStorage('sg_welcome_notice_001')
+    if (dismissed === 1) {
         return null
     }
     const telemetryRecorder = useTelemetryRecorder()
-    const dismissNotice = useCallback(() => {
+    const dismissNotice = () => {
         setDismissed(1)
         telemetryRecorder.recordEvent('cody.notice.cta', 'clicked')
-    }, [telemetryRecorder, setDismissed])
+    }
 
     return (
         <div className="tw-w-full tw-relative tw-shadow-xl tw-bg-muted tw-border tw-border-input-border tw-p-8 tw-h-full tw-overflow-hidden tw-rounded-lg tw-flex tw-flex-col tw-justify-end tw-items-start tw-gap-4 tw-pb-0">
             <div className="tw-flex tw-mb-2">
                 <SourcegraphLogo width={22} height={22} />
                 <Badge className="tw-ml-3 tw-text-sm tw-py-[3px]">Enterprise Starter</Badge>
             </div>
-            <h1 className="tw-font-semibold tw-text-[14px] tw-my-6">Unlock the Sourcegraph platform</h1>
+            <h1 className="tw-font-semibold tw-text-[14px] tw-my-6">
+                Enable collaboration with your team
+            </h1>
             <p className="tw-text-muted-foreground tw-mb-2 tw-text-[12px]">
-                Get search, AI chat, autocompletes and inline edits for your entire team to find,
-                understand and fix code across all of your codebases.
+                Get your own workspace with AI-powered chat, prompt sharing and codebase serach. Automate
+                tasks and accelerate development.
             </p>
             <div id="welcome-notice-buttons" className="tw-flex tw-gap-4 tw-mb-4 tw-text-[12px]">
-                <Button variant="outline" className="tw-px-2">
-                    <a
-                        href={SG_WORKSPACES_URL.href}
-                        className="tw-text-foreground hover:tw-text-foreground"
-                        rel="noreferrer"
-                        target="_blank"
-                    >
-                        Create a workspace
-                    </a>
-                </Button>
                 <Button type="button" variant="ghost" className="tw-px-2">
                     <a
-                        href={DOTCOM_WORKSPACE_LEARN_MORE_URL.href}
+                        href={ENTERPRISE_STARTER_LEARN_MORE_URL.href}
                         className=""
                         rel="noreferrer"
                         target="_blank"
                     >
-                        Learn more
+                        Explore Workspaces
                     </a>
                 </Button>
             </div>
@@ -59,7 +50,7 @@ export const WelcomeNotice: FunctionComponent = () => {
             <button
                 type="button"
                 className="tw-absolute tw-h-5 tw-w-5 tw-text-muted-foreground tw-top-6 tw-right-6"
-                onClick={dismissNotice}
+                onClick={() => dismissNotice()}
             >
                 <XIcon size={16} />
             </button>

vscode/webviews/components/UserMenu.tsx

@@ -18,7 +18,8 @@ import { URI } from 'vscode-uri'
 import {
     ACCOUNT_USAGE_URL,
     CODY_PRO_SUBSCRIPTION_URL,
-    ENTERPRISE_PRICING_URL,
+    ENTERPRISE_STARTER_LEARN_MORE_URL,
+    ENTERPRISE_STARTER_PRICING_URL,
     isSourcegraphToken,
 } from '../../src/chat/protocol'
 import { SourcegraphLogo } from '../icons/SourcegraphLogo'
@@ -42,7 +43,7 @@ interface UserMenuProps {
     allowEndpointChange: boolean
     __storybook__open?: boolean
     // Whether to show the Sourcegraph Teams upgrade CTA or not.
-    isTeamsUpgradeCtaEnabled?: boolean
+    isWorkspacesUpgradeCtaEnabled?: boolean
 }
 
 type MenuView = 'main' | 'switch' | 'add' | 'remove'
@@ -55,7 +56,7 @@ export const UserMenu: React.FunctionComponent<UserMenuProps> = ({
     onCloseByEscape,
     allowEndpointChange,
     __storybook__open,
-    isTeamsUpgradeCtaEnabled,
+    isWorkspacesUpgradeCtaEnabled,
 }) => {
     const telemetryRecorder = useTelemetryRecorder()
     const { displayName, username, primaryEmail, endpoint } = authStatus
@@ -317,10 +318,10 @@ export const UserMenu: React.FunctionComponent<UserMenuProps> = ({
                                 </CommandItem>
                             </CommandGroup>
 
-                            {isTeamsUpgradeCtaEnabled && (
+                            {isWorkspacesUpgradeCtaEnabled && (
                                 <CommandGroup>
                                     <CommandLink
-                                        href="https://workspaces.sourcegraph.com"
+                                        href={ENTERPRISE_STARTER_LEARN_MORE_URL.toString()}
                                         target="_blank"
                                         rel="noreferrer"
                                         className="tw-flex tw-w-full tw-justify-start tw-gap-8 tw-align-center tw-flex-col tw-font-left !tw-bg-transparent hover:!tw-bg-transparent [&[aria-selected]]:!tw-bg-transparent tw-pt-[15px]"
@@ -341,20 +342,20 @@ export const UserMenu: React.FunctionComponent<UserMenuProps> = ({
                                         </div>
                                         <div>
                                             <div className="tw-w-full tw-text-[14px] tw-font-semibold tw-text-left tw-mb-5">
-                                                Unlock the Sourcegraph platform
+                                                Enable collaboration with your team
                                             </div>
                                             <div className="tw-text-[12px] tw-text-muted-foreground">
-                                                Create a workspace and connect GitHub repositories to
-                                                unlock Code Search, AI chat, autocompletes, inline edits
-                                                and more for your team.
+                                                Get your own workspace with AI-powered chat, prompt
+                                                sharing and codebase serach. Automate tasks and
+                                                accelerate development.
                                             </div>
                                         </div>
                                         <Button
                                             key="workspace-create-button"
                                             variant="secondary"
                                             className="tw-flex-grow tw-rounded-md tw-text-center tw-w-full tw-text-foreground tw-my-2 tw-text-[12px]"
                                         >
-                                            Create a workspace
+                                            Explore Workspaces
                                         </Button>
                                     </CommandLink>
                                 </CommandGroup>
@@ -475,9 +476,9 @@ export const UserMenu: React.FunctionComponent<UserMenuProps> = ({
                                     <Settings2Icon size={16} strokeWidth={1.25} className="tw-mr-2" />
                                     <span className="tw-flex-grow">Extension Settings</span>
                                 </CommandItem>
-                                {isDotComUser && (
+                                {isWorkspacesUpgradeCtaEnabled && (
                                     <CommandLink
-                                        href={ENTERPRISE_PRICING_URL.toString()}
+                                        href={ENTERPRISE_STARTER_PRICING_URL.toString()}
                                         target="_blank"
                                         rel="noreferrer"
                                         onSelect={() => {

vscode/webviews/tabs/TabsBar.tsx

@@ -35,7 +35,7 @@ interface TabsBarProps {
     setView: (view: View) => void
     endpointHistory: string[]
     // Whether to show the Sourcegraph Teams upgrade CTA or not.
-    isTeamsUpgradeCtaEnabled?: boolean
+    isWorkspacesUpgradeCtaEnabled?: boolean
 }
 
 type IconComponent = React.ForwardRefExoticComponent<
@@ -159,7 +159,7 @@ export const TabsBar = memo<TabsBarProps>(props => {
                                 endpointHistory={endpointHistory}
                                 allowEndpointChange={allowEndpointChange}
                                 className="!tw-opacity-100 tw-h-full"
-                                isTeamsUpgradeCtaEnabled={props.isTeamsUpgradeCtaEnabled}
+                                isWorkspacesUpgradeCtaEnabled={props.isWorkspacesUpgradeCtaEnabled}
                             />
                         )}
                     </div>