Repository: PostHog/posthog
Pull request #31023: fix: add banner to enable surveys in survey page
Author: login: lucasheriques
Labels: name: feature/surveys
Created: 2025-04-09T19:11:55Z | Merged: 2025-04-10T16:35:10Z

## Problem

people are enabling surveys, but they are not showing up because they're disabled.

## Changes

adds a warning banner in the specific survey page, and also disables the launch button until it's enabled

![CleanShot 2025-04-10 at 11 41 46@2x](https://github.com/user-attachments/assets/a0733a79-f970-462a-a750-10f44c8d410a)


## Does this work well for both Cloud and self-hosted?

yes

## How did you test this code?

verified locally


Diff:
diff --git a/frontend/__snapshots__/scenes-app-surveys--surveys-list--dark.png b/frontend/__snapshots__/scenes-app-surveys--surveys-list--dark.png
index 6b77ba170649..b147d497be8a 100644
Binary files a/frontend/__snapshots__/scenes-app-surveys--surveys-list--dark.png and b/frontend/__snapshots__/scenes-app-surveys--surveys-list--dark.png differ
diff --git a/frontend/__snapshots__/scenes-app-surveys--surveys-list--light.png b/frontend/__snapshots__/scenes-app-surveys--surveys-list--light.png
index 9aae0bcf6109..327e6e4151a2 100644
Binary files a/frontend/__snapshots__/scenes-app-surveys--surveys-list--light.png and b/frontend/__snapshots__/scenes-app-surveys--surveys-list--light.png differ
diff --git a/frontend/src/scenes/surveys/SurveySettings.tsx b/frontend/src/scenes/surveys/SurveySettings.tsx
index e7c355f95d57..fd9fb67fd489 100644
--- a/frontend/src/scenes/surveys/SurveySettings.tsx
+++ b/frontend/src/scenes/surveys/SurveySettings.tsx
@@ -1,8 +1,11 @@
-import { LemonButton, LemonDivider, LemonSwitch, Link } from '@posthog/lemon-ui'
+import { IconGear } from '@posthog/icons'
+import { LemonBanner, LemonButton, LemonDivider, LemonSwitch, Link } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { DeepPartialMap, ValidationErrorType } from 'kea-forms'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { LemonDialog } from 'lib/lemon-ui/LemonDialog'
 import { LemonField } from 'lib/lemon-ui/LemonField'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { useState } from 'react'
 import { surveysLogic } from 'scenes/surveys/surveysLogic'
 import { sanitizeSurveyAppearance, validateColor } from 'scenes/surveys/utils'
@@ -164,7 +167,7 @@ export function SurveySettings({ isModal = false }: Props): JSX.Element {
     )
 }
 
-export function openSurveysSettingsDialog(): void {
+function openSurveysSettingsDialog(): void {
     LemonDialog.open({
         title: 'Surveys settings',
         content: <SurveySettings isModal />,
@@ -174,3 +177,41 @@ export function openSurveysSettingsDialog(): void {
         },
     })
 }
+
+export function SurveysDisabledBanner(): JSX.Element | null {
+    const { showSurveysDisabledBanner } = useValues(surveysLogic)
+
+    const { featureFlags } = useValues(featureFlagLogic)
+    const settingLevel = featureFlags[FEATURE_FLAGS.ENVIRONMENTS] ? 'environment' : 'project'
+
+    if (!showSurveysDisabledBanner) {
+        return null
+    }
+
+    return (
+        <LemonBanner
+            type="warning"
+            action={{
+                type: 'secondary',
+                icon: <IconGear />,
+                onClick: () => openSurveysSettingsDialog(),
+                children: 'Configure',
+            }}
+            className="mb-2"
+        >
+            Surveys are currently disabled for this {settingLevel}. Re-enable them in the settings, otherwise surveys
+            will not be rendered in your app (either automatically or{' '}
+            <Link to="https://posthog.com/docs/surveys/implementing-custom-surveys#rendering-surveys-programmatically">
+                using the <code>renderSurvey</code> function
+            </Link>
+            ). Surveys API is enabled if you are{' '}
+            <Link
+                to="https://posthog.com/docs/surveys/implementing-custom-surveys#fetching-surveys-manually"
+                target="_blank"
+            >
+                fetching and rendering them manually
+            </Link>
+            .
+        </LemonBanner>
+    )
+}
diff --git a/frontend/src/scenes/surveys/SurveyView.tsx b/frontend/src/scenes/surveys/SurveyView.tsx
index ebb9ebccdd60..9fbc196d66eb 100644
--- a/frontend/src/scenes/surveys/SurveyView.tsx
+++ b/frontend/src/scenes/surveys/SurveyView.tsx
@@ -23,7 +23,7 @@ import { SurveyStatsSummary } from 'scenes/surveys/SurveyStatsSummary'
 
 import { Query } from '~/queries/Query/Query'
 import { NodeKind } from '~/queries/schema/schema-general'
-import { ActivityScope, PropertyFilterType, PropertyOperator, Survey, SurveyQuestionType } from '~/types'
+import { ActivityScope, PropertyFilterType, PropertyOperator, Survey, SurveyQuestionType, SurveyType } from '~/types'
 
 import {
     NPS_DETRACTOR_LABEL,
@@ -34,6 +34,7 @@ import {
     NPS_PROMOTER_VALUES,
     SURVEY_EVENT_NAME,
 } from './constants'
+import { SurveysDisabledBanner } from './SurveySettings'
 import {
     MultipleChoiceQuestionBarChart,
     NPSStackedBar,
@@ -42,12 +43,12 @@ import {
     RatingQuestionBarChart,
     SingleChoiceQuestionPieChart,
 } from './surveyViewViz'
-
 export function SurveyView({ id }: { id: string }): JSX.Element {
     const { survey, surveyLoading } = useValues(surveyLogic)
     const { editingSurvey, updateSurvey, launchSurvey, stopSurvey, archiveSurvey, resumeSurvey, duplicateSurvey } =
         useActions(surveyLogic)
     const { deleteSurvey } = useActions(surveysLogic)
+    const { showSurveysDisabledBanner } = useValues(surveysLogic)
 
     const [tabKey, setTabKey] = useState(survey.start_date ? 'results' : 'overview')
 
@@ -155,6 +156,11 @@ export function SurveyView({ id }: { id: string }): JSX.Element {
                                     <LemonButton
                                         type="primary"
                                         data-attr="launch-survey"
+                                        disabledReason={
+                                            showSurveysDisabledBanner && survey.type !== SurveyType.API
+                                                ? 'Please enable surveys in the banner below before launching'
+                                                : undefined
+                                        }
                                         onClick={() => {
                                             LemonDialog.open({
                                                 title: 'Launch this survey?',
@@ -258,6 +264,7 @@ export function SurveyView({ id }: { id: string }): JSX.Element {
                             </>
                         }
                     />
+                    <SurveysDisabledBanner />
                     <LemonTabs
                         activeKey={tabKey}
                         onChange={(key) => setTabKey(key)}
diff --git a/frontend/src/scenes/surveys/Surveys.tsx b/frontend/src/scenes/surveys/Surveys.tsx
index ca8ec0e11805..200654115386 100644
--- a/frontend/src/scenes/surveys/Surveys.tsx
+++ b/frontend/src/scenes/surveys/Surveys.tsx
@@ -1,4 +1,3 @@
-import { IconGear } from '@posthog/icons'
 import {
     LemonButton,
     LemonDialog,
@@ -18,15 +17,12 @@ import { MemberSelect } from 'lib/components/MemberSelect'
 import { PageHeader } from 'lib/components/PageHeader'
 import { ProductIntroduction } from 'lib/components/ProductIntroduction/ProductIntroduction'
 import { VersionCheckerBanner } from 'lib/components/VersionChecker/VersionCheckerBanner'
-import { FEATURE_FLAGS } from 'lib/constants'
 import { dayjs } from 'lib/dayjs'
-import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import { LemonTableColumn } from 'lib/lemon-ui/LemonTable'
 import { createdAtColumn, createdByColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
 import { LemonTableLink } from 'lib/lemon-ui/LemonTable/LemonTableLink'
 import { LemonTabs } from 'lib/lemon-ui/LemonTabs'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import stringWithWBR from 'lib/utils/stringWithWBR'
 import { LinkedHogFunctions } from 'scenes/pipeline/hogfunctions/list/LinkedHogFunctions'
 import { SceneExport } from 'scenes/sceneTypes'
@@ -36,7 +32,7 @@ import { userLogic } from 'scenes/userLogic'
 import { ActivityScope, ProductKey, ProgressStatus, Survey } from '~/types'
 
 import { SurveyQuestionLabel } from './constants'
-import { openSurveysSettingsDialog, SurveySettings } from './SurveySettings'
+import { SurveysDisabledBanner, SurveySettings } from './SurveySettings'
 import { getSurveyStatus, surveysLogic, SurveysTabs } from './surveysLogic'
 
 export const scene: SceneExport = {
@@ -53,9 +49,7 @@ export function Surveys(): JSX.Element {
         surveysResponsesCountLoading,
         searchTerm,
         filters,
-        showSurveysDisabledBanner,
         tab,
-        globalSurveyAppearanceConfigAvailable,
         hasNextPage,
         hasNextSearchPage,
     } = useValues(surveysLogic)
@@ -64,9 +58,7 @@ export function Surveys(): JSX.Element {
         useActions(surveysLogic)
 
     const { user } = useValues(userLogic)
-    const { featureFlags } = useValues(featureFlagLogic)
     const shouldShowEmptyState = !dataLoading && surveys.length === 0
-    const settingLevel = featureFlags[FEATURE_FLAGS.ENVIRONMENTS] ? 'environment' : 'project'
 
     return (
         <div>
@@ -110,6 +102,7 @@ export function Surveys(): JSX.Element {
                 }
                 tabbedPage
             />
+            <SurveysDisabledBanner />
             <LemonTabs
                 activeKey={tab}
                 onChange={(newTab) => setTab(newTab as SurveysTabs)}
@@ -118,7 +111,7 @@ export function Surveys(): JSX.Element {
                     { key: SurveysTabs.Archived, label: 'Archived' },
                     { key: SurveysTabs.Notifications, label: 'Notifications' },
                     { key: SurveysTabs.History, label: 'History' },
-                    globalSurveyAppearanceConfigAvailable ? { key: SurveysTabs.Settings, label: 'Settings' } : null,
+                    { key: SurveysTabs.Settings, label: 'Settings' },
                 ]}
             />
             {tab === SurveysTabs.Settings && <SurveySettings />}
@@ -148,22 +141,6 @@ export function Surveys(): JSX.Element {
                 <>
                     <div className="deprecated-space-y-2">
                         <VersionCheckerBanner />
-
-                        {showSurveysDisabledBanner ? (
-                            <LemonBanner
-                                type="warning"
-                                action={{
-                                    type: 'secondary',
-                                    icon: <IconGear />,
-                                    onClick: () => openSurveysSettingsDialog(),
-                                    children: 'Configure',
-                                }}
-                                className="mb-2"
-                            >
-                                Survey popovers are currently disabled for this {settingLevel}. Re-enable them in the
-                                settings, otherwise surveys will not be visible.
-                            </LemonBanner>
-                        ) : null}
                     </div>
 
                     {(shouldShowEmptyState || !user?.has_seen_product_intro_for?.[ProductKey.SURVEYS]) && (


Reviews:
user: login: greptile-apps[bot]
body: 
## PR Summary

This PR integrates a new `SurveysDisabledBanner` across survey views to warn users when surveys are disabled and to prevent launching disabled surveys.

- **`/frontend/src/scenes/surveys/SurveyView.tsx`**: Adds the banner and conditionally disables the Launch button based on the `showSurveysDisabledBanner` flag.
- **`/frontend/src/scenes/surveys/SurveySettings.tsx`**: Refactors the settings dialog trigger within the banner for immediate user action.
- **`/frontend/src/scenes/surveys/Surveys.tsx`**: Removes deprecated banner logic in favor of the new component; review if launch interaction is properly gated when surveys are disabled.

<sub>3 file(s) reviewed, no comment(s)</sub>
<sub>[Edit PR Review Bot Settings](https://app.greptile.com/review/github) | [Greptile](https://greptile.com?utm_source=greptile_expert&utm_medium=github&utm_campaign=code_reviews&utm_content=posthog_31023)</sub>
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-09T19:12:51Z
user: login: ioannisj
body: LG, just a minor suggestion
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T07:14:59Z
user: login: marandaneto
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-10T07:29:51Z
user: login: marandaneto
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-10T07:31:20Z
user: login: marandaneto
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-10T07:32:35Z
user: login: marandaneto
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-10T07:33:16Z
user: login: lucasheriques
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T13:33:12Z
user: login: lucasheriques
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T14:22:11Z
user: login: lucasheriques
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T14:22:51Z
user: login: marandaneto
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-10T14:27:14Z
user: login: marandaneto
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-10T14:28:53Z
user: login: marandaneto
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-10T14:29:25Z
user: login: marandaneto
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-10T14:29:54Z
user: login: lucasheriques
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T14:39:30Z
user: login: lucasheriques
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T14:40:14Z
user: login: lucasheriques
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-10T14:42:06Z

Review comments:
diff_hunk: @@ -174,3 +177,30 @@ export function openSurveysSettingsDialog(): void {
         },
     })
 }
+
+export function SurveysDisabledBanner(): JSX.Element | null {
+    const { showSurveysDisabledBanner } = useValues(surveysLogic)
+
+    const { featureFlags } = useValues(featureFlagLogic)
+    const settingLevel = featureFlags[FEATURE_FLAGS.ENVIRONMENTS] ? 'environment' : 'project'
+
+    if (!showSurveysDisabledBanner) {
+        return null
+    }
+
+    return (
+        <LemonBanner
+            type="warning"
+            action={{
+                type: 'secondary',
+                icon: <IconGear />,
+                onClick: () => openSurveysSettingsDialog(),
+                children: 'Configure',
+            }}
+            className="mb-2"
+        >
+            Survey popovers are currently disabled for this {settingLevel}. Re-enable them in the settings, otherwise
+            surveys will not be visible.
path: frontend/src/scenes/surveys/SurveySettings.tsx
user: login: ioannisj
body: The setting is "Enable surveys". Even though I understand that technically just popover (and feedback button?) may be affected, maybe we can reword this a bit? How about something like this?

```suggestion
            Surveys are currently disabled for this {settingLevel}. To show in-product surveys (like popovers), please enable them in your settings. 
```
created_at: 2025-04-10T06:46:32Z
author_association: CONTRIBUTOR
diff_hunk: @@ -174,3 +177,30 @@ export function openSurveysSettingsDialog(): void {
         },
     })
 }
+
+export function SurveysDisabledBanner(): JSX.Element | null {
+    const { showSurveysDisabledBanner } = useValues(surveysLogic)
+
+    const { featureFlags } = useValues(featureFlagLogic)
+    const settingLevel = featureFlags[FEATURE_FLAGS.ENVIRONMENTS] ? 'environment' : 'project'
path: frontend/src/scenes/surveys/SurveySettings.tsx
user: login: marandaneto
body: do we need this?
created_at: 2025-04-10T07:29:51Z
author_association: MEMBER
diff_hunk: @@ -174,3 +177,30 @@ export function openSurveysSettingsDialog(): void {
         },
     })
 }
+
+export function SurveysDisabledBanner(): JSX.Element | null {
+    const { showSurveysDisabledBanner } = useValues(surveysLogic)
+
+    const { featureFlags } = useValues(featureFlagLogic)
+    const settingLevel = featureFlags[FEATURE_FLAGS.ENVIRONMENTS] ? 'environment' : 'project'
+
+    if (!showSurveysDisabledBanner) {
+        return null
+    }
+
+    return (
+        <LemonBanner
+            type="warning"
+            action={{
+                type: 'secondary',
+                icon: <IconGear />,
+                onClick: () => openSurveysSettingsDialog(),
+                children: 'Configure',
+            }}
+            className="mb-2"
+        >
+            Survey popovers are currently disabled for this {settingLevel}. Re-enable them in the settings, otherwise
+            surveys will not be visible.
path: frontend/src/scenes/surveys/SurveySettings.tsx
user: login: marandaneto
body: I think the API returns nothing if survey is disabled, right?
created_at: 2025-04-10T07:31:20Z
author_association: MEMBER
diff_hunk: @@ -174,3 +177,30 @@ export function openSurveysSettingsDialog(): void {
         },
     })
 }
+
+export function SurveysDisabledBanner(): JSX.Element | null {
+    const { showSurveysDisabledBanner } = useValues(surveysLogic)
+
+    const { featureFlags } = useValues(featureFlagLogic)
+    const settingLevel = featureFlags[FEATURE_FLAGS.ENVIRONMENTS] ? 'environment' : 'project'
+
+    if (!showSurveysDisabledBanner) {
+        return null
+    }
+
+    return (
+        <LemonBanner
+            type="warning"
+            action={{
+                type: 'secondary',
+                icon: <IconGear />,
+                onClick: () => openSurveysSettingsDialog(),
+                children: 'Configure',
+            }}
+            className="mb-2"
+        >
+            Survey popovers are currently disabled for this {settingLevel}. Re-enable them in the settings, otherwise
+            surveys will not be visible.
path: frontend/src/scenes/surveys/SurveySettings.tsx
user: login: marandaneto
body: at least thats the case for the remote config API, but not if they call the surveys API directly.
the SDK only calls the survey API directly if the survey opt in is enabled
created_at: 2025-04-10T07:32:35Z
author_association: MEMBER
diff_hunk: @@ -155,6 +156,11 @@ export function SurveyView({ id }: { id: string }): JSX.Element {
                                     <LemonButton
                                         type="primary"
                                         data-attr="launch-survey"
+                                        disabledReason={
+                                            showSurveysDisabledBanner
+                                                ? 'Please enable surveys in the banner below before launching'
+                                                : undefined
path: frontend/src/scenes/surveys/SurveyView.tsx
user: login: marandaneto
body: similar feedback to here https://github.com/PostHog/posthog/pull/31023/files#r2036697237
In this case you cannot launch a eg surveys API
created_at: 2025-04-10T07:33:16Z
author_association: MEMBER
diff_hunk: @@ -174,3 +177,30 @@ export function openSurveysSettingsDialog(): void {
         },
     })
 }
+
+export function SurveysDisabledBanner(): JSX.Element | null {
+    const { showSurveysDisabledBanner } = useValues(surveysLogic)
+
+    const { featureFlags } = useValues(featureFlagLogic)
+    const settingLevel = featureFlags[FEATURE_FLAGS.ENVIRONMENTS] ? 'environment' : 'project'
path: frontend/src/scenes/surveys/SurveySettings.tsx
user: login: lucasheriques
body: this was add by the environments team so I'd rather not change it atm
created_at: 2025-04-10T13:33:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -174,3 +177,30 @@ export function openSurveysSettingsDialog(): void {
         },
     })
 }
+
+export function SurveysDisabledBanner(): JSX.Element | null {
+    const { showSurveysDisabledBanner } = useValues(surveysLogic)
+
+    const { featureFlags } = useValues(featureFlagLogic)
+    const settingLevel = featureFlags[FEATURE_FLAGS.ENVIRONMENTS] ? 'environment' : 'project'
+
+    if (!showSurveysDisabledBanner) {
+        return null
+    }
+
+    return (
+        <LemonBanner
+            type="warning"
+            action={{
+                type: 'secondary',
+                icon: <IconGear />,
+                onClick: () => openSurveysSettingsDialog(),
+                children: 'Configure',
+            }}
+            className="mb-2"
+        >
+            Survey popovers are currently disabled for this {settingLevel}. Re-enable them in the settings, otherwise
+            surveys will not be visible.
path: frontend/src/scenes/surveys/SurveySettings.tsx
user: login: lucasheriques
body: if `surveys_opt_in` is disabled, surveys is never loaded on the SDK, both for the normal and remote config settings. just tested. so API surveys also do not work with the setting disabled.

I changed the copy to `Surveys are currently disabled for this {settingLevel}. Re-enable them in the settings, otherwise surveys will not be visible` to reflect that
created_at: 2025-04-10T14:22:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -155,6 +156,11 @@ export function SurveyView({ id }: { id: string }): JSX.Element {
                                     <LemonButton
                                         type="primary"
                                         data-attr="launch-survey"
+                                        disabledReason={
+                                            showSurveysDisabledBanner
+                                                ? 'Please enable surveys in the banner below before launching'
+                                                : undefined
path: frontend/src/scenes/surveys/SurveyView.tsx
user: login: lucasheriques
body: that's intended, as I tested: if surveys_opt_in is disabled (so /decide returns false) the surveys part is never downloaded in the SDK, so not usable anyway (for both popovers and api surveys)
created_at: 2025-04-10T14:22:51Z
author_association: CONTRIBUTOR
diff_hunk: @@ -174,3 +177,30 @@ export function openSurveysSettingsDialog(): void {
         },
     })
 }
+
+export function SurveysDisabledBanner(): JSX.Element | null {
+    const { showSurveysDisabledBanner } = useValues(surveysLogic)
+
+    const { featureFlags } = useValues(featureFlagLogic)
+    const settingLevel = featureFlags[FEATURE_FLAGS.ENVIRONMENTS] ? 'environment' : 'project'
+
+    if (!showSurveysDisabledBanner) {
+        return null
+    }
+
+    return (
+        <LemonBanner
+            type="warning"
+            action={{
+                type: 'secondary',
+                icon: <IconGear />,
+                onClick: () => openSurveysSettingsDialog(),
+                children: 'Configure',
+            }}
+            className="mb-2"
+        >
+            Survey popovers are currently disabled for this {settingLevel}. Re-enable them in the settings, otherwise
+            surveys will not be visible.
path: frontend/src/scenes/surveys/SurveySettings.tsx
user: login: marandaneto
body: if you hit /api/surveys its gonna work, you don't need surveys_opt_in in this case
assuming people is using the API directly instead of using our SDK
created_at: 2025-04-10T14:27:14Z
author_association: MEMBER
diff_hunk: @@ -174,3 +177,30 @@ export function openSurveysSettingsDialog(): void {
         },
     })
 }
+
+export function SurveysDisabledBanner(): JSX.Element | null {
+    const { showSurveysDisabledBanner } = useValues(surveysLogic)
+
+    const { featureFlags } = useValues(featureFlagLogic)
+    const settingLevel = featureFlags[FEATURE_FLAGS.ENVIRONMENTS] ? 'environment' : 'project'
+
+    if (!showSurveysDisabledBanner) {
+        return null
+    }
+
+    return (
+        <LemonBanner
+            type="warning"
+            action={{
+                type: 'secondary',
+                icon: <IconGear />,
+                onClick: () => openSurveysSettingsDialog(),
+                children: 'Configure',
+            }}
+            className="mb-2"
+        >
+            Survey popovers are currently disabled for this {settingLevel}. Re-enable them in the settings, otherwise
+            surveys will not be visible.
path: frontend/src/scenes/surveys/SurveySettings.tsx
user: login: marandaneto
body: https://github.com/PostHog/posthog-js/blob/27a1113057dd80fa1e23c40dfc23e2d561ffe688/src/posthog-surveys.ts#L162 also does not check the decide/remote config response and surveys_opt_in
so its a valid use case that people use our APIs directly, or just call getSurveys directly using the SDK
created_at: 2025-04-10T14:28:53Z
author_association: MEMBER
diff_hunk: @@ -155,6 +156,11 @@ export function SurveyView({ id }: { id: string }): JSX.Element {
                                     <LemonButton
                                         type="primary"
                                         data-attr="launch-survey"
+                                        disabledReason={
+                                            showSurveysDisabledBanner
+                                                ? 'Please enable surveys in the banner below before launching'
+                                                : undefined
path: frontend/src/scenes/surveys/SurveyView.tsx
user: login: marandaneto
body: similar feedback here https://github.com/PostHog/posthog/pull/31023#discussion_r2037562919
created_at: 2025-04-10T14:29:25Z
author_association: MEMBER
diff_hunk: @@ -174,3 +177,30 @@ export function openSurveysSettingsDialog(): void {
         },
     })
 }
+
+export function SurveysDisabledBanner(): JSX.Element | null {
+    const { showSurveysDisabledBanner } = useValues(surveysLogic)
+
+    const { featureFlags } = useValues(featureFlagLogic)
+    const settingLevel = featureFlags[FEATURE_FLAGS.ENVIRONMENTS] ? 'environment' : 'project'
+
+    if (!showSurveysDisabledBanner) {
+        return null
+    }
+
+    return (
+        <LemonBanner
+            type="warning"
+            action={{
+                type: 'secondary',
+                icon: <IconGear />,
+                onClick: () => openSurveysSettingsDialog(),
+                children: 'Configure',
+            }}
+            className="mb-2"
+        >
+            Survey popovers are currently disabled for this {settingLevel}. Re-enable them in the settings, otherwise
+            surveys will not be visible.
path: frontend/src/scenes/surveys/SurveySettings.tsx
user: login: marandaneto
body: this is a supported use case since we even document it [here](https://posthog.com/docs/surveys/implementing-custom-surveys#fetching-surveys-manually)
created_at: 2025-04-10T14:29:54Z
author_association: MEMBER
diff_hunk: @@ -174,3 +177,30 @@ export function openSurveysSettingsDialog(): void {
         },
     })
 }
+
+export function SurveysDisabledBanner(): JSX.Element | null {
+    const { showSurveysDisabledBanner } = useValues(surveysLogic)
+
+    const { featureFlags } = useValues(featureFlagLogic)
+    const settingLevel = featureFlags[FEATURE_FLAGS.ENVIRONMENTS] ? 'environment' : 'project'
+
+    if (!showSurveysDisabledBanner) {
+        return null
+    }
+
+    return (
+        <LemonBanner
+            type="warning"
+            action={{
+                type: 'secondary',
+                icon: <IconGear />,
+                onClick: () => openSurveysSettingsDialog(),
+                children: 'Configure',
+            }}
+            className="mb-2"
+        >
+            Survey popovers are currently disabled for this {settingLevel}. Re-enable them in the settings, otherwise
+            surveys will not be visible.
path: frontend/src/scenes/surveys/SurveySettings.tsx
user: login: lucasheriques
body: makes sense, i [improved the banner copy to be specific and also linked to those cases too](https://github.com/PostHog/posthog/pull/31023/commits/e0571b984ec1c9d3a2e1ae87bde4eaf3ed92add6). also only disabling the launch button for non api surveys
created_at: 2025-04-10T14:39:30Z
author_association: CONTRIBUTOR
diff_hunk: @@ -155,6 +156,11 @@ export function SurveyView({ id }: { id: string }): JSX.Element {
                                     <LemonButton
                                         type="primary"
                                         data-attr="launch-survey"
+                                        disabledReason={
+                                            showSurveysDisabledBanner
+                                                ? 'Please enable surveys in the banner below before launching'
+                                                : undefined
path: frontend/src/scenes/surveys/SurveyView.tsx
user: login: lucasheriques
body: responded in the other comment thread, resolving this one so we unify the discussion
created_at: 2025-04-10T14:40:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -174,3 +177,30 @@ export function openSurveysSettingsDialog(): void {
         },
     })
 }
+
+export function SurveysDisabledBanner(): JSX.Element | null {
+    const { showSurveysDisabledBanner } = useValues(surveysLogic)
+
+    const { featureFlags } = useValues(featureFlagLogic)
+    const settingLevel = featureFlags[FEATURE_FLAGS.ENVIRONMENTS] ? 'environment' : 'project'
+
+    if (!showSurveysDisabledBanner) {
+        return null
+    }
+
+    return (
+        <LemonBanner
+            type="warning"
+            action={{
+                type: 'secondary',
+                icon: <IconGear />,
+                onClick: () => openSurveysSettingsDialog(),
+                children: 'Configure',
+            }}
+            className="mb-2"
+        >
+            Survey popovers are currently disabled for this {settingLevel}. Re-enable them in the settings, otherwise
+            surveys will not be visible.
path: frontend/src/scenes/surveys/SurveySettings.tsx
user: login: lucasheriques
body: edited the banner screenshot in the PR
created_at: 2025-04-10T14:42:06Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-04-09T19:23:29Z
body: **Size Change:** +84 B (0%) 

**Total Size:** 13.2 MB



<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size | Change |
| :--- | :---: | :---: |
| `frontend/dist/toolbar.js` | 13.2 MB | +84 B (0%) |

</details>



<a href="https://github.com/preactjs/compressed-size-action"><sub>compressed-size-action</sub></a>
author_association: CONTRIBUTOR
user: login: posthog-bot
created_at: 2025-04-10T14:31:19Z
body: ## 📸 UI snapshots have been updated

**1** snapshot changes in total. **0** added, **1** modified, **0** deleted:

- **`chromium`**: **0** added, **1** modified, **0** deleted ([diff for shard 2](https://github.com/PostHog/posthog/pull/31023/commits/0eaafcac306b896bcf10681a92b6bf3d9360e9a0))
- `webkit`: **0** added, **0** modified, **0** deleted

Triggered by [this commit](https://github.com/PostHog/posthog/pull/31023/commits/9356087fe888d60a8da16df6b4452f18eb775ac5).

👉 **[Review this PR's diff of snapshots.](https://github.com/PostHog/posthog/pull/31023/files#:~:text=frontend/__snapshots__/)**
author_association: CONTRIBUTOR
user: login: posthog-bot
created_at: 2025-04-10T14:40:32Z
body: ## 📸 UI snapshots have been updated

**1** snapshot changes in total. **0** added, **1** modified, **0** deleted:

- **`chromium`**: **0** added, **1** modified, **0** deleted (wasn't pushed!)
- `webkit`: **0** added, **0** modified, **0** deleted

Triggered by [this commit](https://github.com/PostHog/posthog/pull/31023/commits/58528776246fe294958b5f27b1a5578aea544514).

👉 **[Review this PR's diff of snapshots.](https://github.com/PostHog/posthog/pull/31023/files#:~:text=frontend/__snapshots__/)**
author_association: CONTRIBUTOR
user: login: posthog-bot
created_at: 2025-04-10T14:49:18Z
body: ## 📸 UI snapshots have been updated

**2** snapshot changes in total. **0** added, **2** modified, **0** deleted:

- **`chromium`**: **0** added, **2** modified, **0** deleted ([diff for shard 2](https://github.com/PostHog/posthog/pull/31023/commits/0e57cad1843f7f18e346e676a668d90d734611b8))
- `webkit`: **0** added, **0** modified, **0** deleted

Triggered by [this commit](https://github.com/PostHog/posthog/pull/31023/commits/497dce0b6ce920970dea70b67938889be54099bc).

👉 **[Review this PR's diff of snapshots.](https://github.com/PostHog/posthog/pull/31023/files#:~:text=frontend/__snapshots__/)**
author_association: CONTRIBUTOR
user: login: posthog-bot
created_at: 2025-04-10T14:58:14Z
body: ## 📸 UI snapshots have been updated

**1** snapshot changes in total. **0** added, **1** modified, **0** deleted:

- **`chromium`**: **0** added, **1** modified, **0** deleted ([diff for shard 2](https://github.com/PostHog/posthog/pull/31023/commits/cf394d5e7e84959cb2cd9765f067403e9b696667))
- `webkit`: **0** added, **0** modified, **0** deleted

Triggered by [this commit](https://github.com/PostHog/posthog/pull/31023/commits/708e2b20d91ed1cd1fc00f66c2fc21f5a35581a8).

👉 **[Review this PR's diff of snapshots.](https://github.com/PostHog/posthog/pull/31023/files#:~:text=frontend/__snapshots__/)**
author_association: CONTRIBUTOR
user: login: posthog-bot
created_at: 2025-04-10T15:17:09Z
body: ## 📸 UI snapshots have been updated

**2** snapshot changes in total. **0** added, **2** modified, **0** deleted:

- **`chromium`**: **0** added, **2** modified, **0** deleted ([diff for shard 7](https://github.com/PostHog/posthog/pull/31023/commits/05df28707db345cb452e2aedfa84516ddcc9d62e))
- `webkit`: **0** added, **0** modified, **0** deleted

Triggered by [this commit](https://github.com/PostHog/posthog/pull/31023/commits/e704eaaadf600eafa6f3169ecb645ad83200c889).

👉 **[Review this PR's diff of snapshots.](https://github.com/PostHog/posthog/pull/31023/files#:~:text=frontend/__snapshots__/)**
author_association: CONTRIBUTOR