feat(surveys): add cross-sell to funnel insights

Author: adboio

frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx

@@ -94,6 +94,8 @@ export interface InsightCardProps extends Resizeable {
     style?: React.CSSProperties
     children?: React.ReactNode
     tile?: DashboardTile<QueryBasedInsightModel>
+    /** survey opportunity for this insight */
+    surveyOpportunity?: boolean
 }
 
 function InsightCardInternal(
@@ -131,6 +133,7 @@ function InsightCardInternal(
         children,
         breakdownColorOverride: _breakdownColorOverride,
         dataColorThemeId: _dataColorThemeId,
+        surveyOpportunity,
         ...divProps
     }: InsightCardProps,
     ref: React.Ref<HTMLDivElement>
@@ -251,6 +254,7 @@ function InsightCardInternal(
                             filtersOverride={filtersOverride}
                             variablesOverride={variablesOverride}
                             placement={placement}
+                            surveyOpportunity={surveyOpportunity}
                         />
                         <div className="InsightCard__viz">
                             {BlockingEmptyState ? (

frontend/src/lib/components/Cards/InsightCard/InsightMeta.tsx

@@ -28,6 +28,7 @@ import { insightLogic } from 'scenes/insights/insightLogic'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 import { useSummarizeInsight } from 'scenes/insights/summarizeInsight'
 import { getOverrideWarningPropsForButton } from 'scenes/insights/utils'
+import { SurveyOpportunityButton } from 'scenes/surveys/components/SurveyOpportunityButton'
 import { urls } from 'scenes/urls'
 
 import { dashboardsModel } from '~/models/dashboardsModel'
@@ -67,6 +68,7 @@ interface InsightMetaProps
         | 'filtersOverride'
         | 'variablesOverride'
         | 'placement'
+        | 'surveyOpportunity'
     > {
     tile?: DashboardTile<QueryBasedInsightModel>
     insight: QueryBasedInsightModel
@@ -98,6 +100,7 @@ export function InsightMeta({
     showDetailsControls = true,
     moreButtons,
     placement,
+    surveyOpportunity,
 }: InsightMetaProps): JSX.Element {
     const { short_id, name, dashboards, next_allowed_client_refresh: nextAllowedClientRefresh } = insight
     const { insightProps, insightFeedback } = useValues(insightLogic)
@@ -156,6 +159,13 @@ export function InsightMeta({
             </div>
         ) : null
 
+    const surveyOpportunityButton =
+        surveyOpportunity && featureFlags[FEATURE_FLAGS.SURVEYS_FUNNELS_CROSS_SELL] ? (
+            <div className="flex">
+                <SurveyOpportunityButton insight={insight} />
+            </div>
+        ) : null
+
     // If user can't view the insight, show minimal interface
     if (!canViewInsight) {
         return (
@@ -415,7 +425,7 @@ export function InsightMeta({
             moreTooltip={
                 canEditInsight ? 'Rename, duplicate, export, refresh and more…' : 'Duplicate, export, refresh and more…'
             }
-            extraControls={feedbackButtons}
+            extraControls={surveyOpportunityButton ?? feedbackButtons}
         />
     )
 }

frontend/src/lib/constants.tsx

@@ -342,6 +342,7 @@ export const FEATURE_FLAGS = {
     EXPERIMENTS_USE_NEW_CREATE_FORM: 'experiments-use-new-create-form', // owner: @rodrigoi #team-experiments
     EXPERIMENTS_NEW_CALCULATOR: 'experiments-new-calculator', // owner: @jurajmajerik #team-experiments
     AGENT_MODES: 'phai-agent-modes', // owner: @skoob13 #team-posthog-ai
+    SURVEYS_FUNNELS_CROSS_SELL: 'survey-funnels-cross-sell', // owner: @adboio #team-surveys
 } as const
 export type FeatureFlagLookupKey = keyof typeof FEATURE_FLAGS
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]

frontend/src/scenes/dashboard/DashboardItems.tsx

@@ -15,6 +15,8 @@ import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { dashboardLogic } from 'scenes/dashboard/dashboardLogic'
 import { BREAKPOINTS, BREAKPOINT_COLUMN_COUNTS } from 'scenes/dashboard/dashboardUtils'
+import { useSurveyLinkedInsights } from 'scenes/surveys/hooks/useSurveyLinkedInsights'
+import { getBestSurveyOpportunityFunnel } from 'scenes/surveys/utils/opportunityDetection'
 import { urls } from 'scenes/urls'
 
 import { getCurrentExporterData } from '~/exporter/exporterViewLogic'
@@ -54,6 +56,11 @@ export function DashboardItems(): JSX.Element {
     const { nameSortedDashboards } = useValues(dashboardsModel)
     const otherDashboards = nameSortedDashboards.filter((nsdb) => nsdb.id !== dashboard?.id)
     const { featureFlags } = useValues(featureFlagLogic)
+    const { data: surveyLinkedInsights, loading: surveyLinkedInsightsLoading } = useSurveyLinkedInsights()
+
+    const bestSurveyOpportunityFunnel = surveyLinkedInsightsLoading
+        ? null
+        : getBestSurveyOpportunityFunnel(tiles || [], surveyLinkedInsights)
 
     const [resizingItem, setResizingItem] = useState<any>(null)
 
@@ -187,6 +194,7 @@ export function DashboardItems(): JSX.Element {
                                     // :HACKY: The two props below aren't actually used in the component, but are needed to trigger a re-render
                                     breakdownColorOverride={temporaryBreakdownColors}
                                     dataColorThemeId={dataColorThemeId}
+                                    surveyOpportunity={tile.id === bestSurveyOpportunityFunnel?.id}
                                     {...commonTileProps}
                                     // NOTE: ReactGridLayout additionally injects its resize handles as `children`!
                                 />

frontend/src/scenes/surveys/components/SurveyOpportunityButton.tsx

@@ -10,7 +10,8 @@ import { ProductIntentContext, addProductIntent } from 'lib/utils/product-intent
 import { useMaxTool } from 'scenes/max/useMaxTool'
 import { urls } from 'scenes/urls'
 
-import { ProductKey, QueryBasedInsightModel } from '~/types'
+import { ProductKey } from '~/queries/schema/schema-general'
+import { QueryBasedInsightModel } from '~/types'
 
 import { SURVEY_CREATED_SOURCE } from '../constants'
 import { captureMaxAISurveyCreationException } from '../utils'

frontend/src/scenes/surveys/hooks/useSurveyLinkedInsights.tsx

@@ -0,0 +1,41 @@
+import posthog from 'posthog-js'
+import { useEffect, useMemo, useState } from 'react'
+
+import api from 'lib/api'
+
+import { Survey } from '~/types'
+
+/**
+ * Fetch all insight IDs which are already linked to surveys. This is separate
+ * from surveysLogic to avoid side effects (e.g. product intent) in unrelated
+ * components, like dashboards
+ *
+ * @returns set of insight IDs already linked to existing surveys
+ */
+export function useSurveyLinkedInsights(): {
+    loading: boolean
+    data: Set<number>
+} {
+    const [surveys, setSurveys] = useState<Survey[]>([])
+    const [loading, setLoading] = useState<boolean>(true)
+
+    useEffect(() => {
+        api.surveys
+            .list()
+            .then((response) => setSurveys(response.results))
+            .catch((error) => {
+                posthog.captureException(error, {
+                    action: 'fetch-survey-linked-insights',
+                })
+            })
+            .finally(() => setLoading(false))
+    }, [])
+
+    return {
+        loading,
+        data: useMemo(
+            () => new Set(surveys.map((survey) => survey.linked_insight_id).filter((id): id is number => id != null)),
+            [surveys]
+        ),
+    }
+}

posthog/migrations/0915_alter_survey_linked_insight.py

@@ -6,6 +6,8 @@
 
 # manually updated to pass CI checks, using SeparateDatabaseAndState
 class Migration(migrations.Migration):
+    atomic = False  # Required for CREATE INDEX CONCURRENTLY
+
     dependencies = [
         ("posthog", "0914_alter_userproductlist_reason"),
     ]
@@ -29,7 +31,7 @@ class Migration(migrations.Migration):
             database_operations=[
                 migrations.RunSQL(
                     """
-                    CREATE INDEX IF NOT EXISTS "posthog_survey_linked_insight_id_586524f3" ON "posthog_survey" ("linked_insight_id"); -- existing-table-constraint-ignore
+                    CREATE INDEX CONCURRENTLY IF NOT EXISTS "posthog_survey_linked_insight_id_586524f3" ON "posthog_survey" ("linked_insight_id"); -- existing-table-constraint-ignore
                     """,
                     reverse_sql="""
                         DROP INDEX IF EXISTS "posthog_survey_linked_insight_id_586524f3";