feat(surveys): experiment with quickcreate modal on funnels

Author: adboio

frontend/src/lib/constants.tsx

@@ -349,6 +349,7 @@ export const FEATURE_FLAGS = {
     EXPERIMENTS_RETENTION_METRICS: 'experiments-retention-metrics', // owner: @rodrigoi #team-experiments
     HOME_FEED_TAB: 'home-feed-tab', // owner: @ksvat #team-replay
     SURVEYS_FF_CROSS_SELL: 'surveys-ff-cross-sell', // owner: @adboio #team-surveys
+    SURVEYS_INSIGHT_BUTTON_EXPERIMENT: 'ask-users-why-ai-vs-quickcreate', // owner: @adboio #team-surveys multivariate
 } 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

@@ -62,7 +62,11 @@ export function DashboardItems(): JSX.Element {
 
     const bestSurveyOpportunityFunnel = surveyLinkedInsightsLoading
         ? null
-        : getBestSurveyOpportunityFunnel(tiles || [], surveyLinkedInsights)
+        : getBestSurveyOpportunityFunnel(
+              tiles || [],
+              surveyLinkedInsights,
+              featureFlags[FEATURE_FLAGS.SURVEYS_INSIGHT_BUTTON_EXPERIMENT] === 'test'
+          )
 
     const [resizingItem, setResizingItem] = useState<any>(null)
 

frontend/src/scenes/feature-flags/FeatureFlag.tsx

@@ -55,7 +55,8 @@ import { dashboardLogic } from 'scenes/dashboard/dashboardLogic'
 import { UTM_TAGS } from 'scenes/feature-flags/FeatureFlagSnippets'
 import { JSONEditorInput } from 'scenes/feature-flags/JSONEditorInput'
 import { SceneExport } from 'scenes/sceneTypes'
-import { QuickSurveyModal } from 'scenes/surveys/QuickSurveyModal'
+import { QuickSurveyModal } from 'scenes/surveys/quick-create/QuickSurveyModal'
+import { QuickSurveyType } from 'scenes/surveys/quick-create/types'
 import { getSurveyForFeatureFlagVariant } from 'scenes/surveys/utils'
 import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
@@ -876,13 +877,16 @@ export function FeatureFlag({ id }: FeatureFlagLogicProps): JSX.Element {
                 )}
             </div>
             <QuickSurveyModal
-                flag={featureFlag}
+                context={{
+                    type: QuickSurveyType.FEATURE_FLAG,
+                    flag: featureFlag,
+                    initialVariantKey: quickSurveyVariantKey,
+                }}
                 isOpen={isQuickSurveyModalOpen}
-                onClose={() => {
+                onCancel={() => {
                     setIsQuickSurveyModalOpen(false)
                     setQuickSurveyVariantKey(null)
                 }}
-                initialVariantKey={quickSurveyVariantKey}
             />
         </>
     )

frontend/src/scenes/feature-flags/FeatureFlagFeedbackTab.tsx

@@ -6,9 +6,10 @@ import { LemonBanner, LemonTable, LemonTableColumn, Link, Spinner } from '@posth
 import { LemonTableLink } from 'lib/lemon-ui/LemonTable/LemonTableLink'
 import { createdAtColumn } from 'lib/lemon-ui/LemonTable/columnUtils'
 import stringWithWBR from 'lib/utils/stringWithWBR'
-import { QuickSurveyForm } from 'scenes/surveys/QuickSurveyModal'
 import { SurveyResult } from 'scenes/surveys/SurveyView'
 import { SurveyStatusTag } from 'scenes/surveys/components/SurveyStatusTag'
+import { QuickSurveyForm } from 'scenes/surveys/quick-create/QuickSurveyModal'
+import { QuickSurveyType } from 'scenes/surveys/quick-create/types'
 import { surveyLogic } from 'scenes/surveys/surveyLogic'
 import { SurveysTabs, surveysLogic } from 'scenes/surveys/surveysLogic'
 import { urls } from 'scenes/urls'
@@ -27,7 +28,12 @@ export function FeedbackTab({ featureFlag }: { featureFlag: FeatureFlagType }):
                         Gather valuable insights by automatically displaying a survey to users in this feature flag
                     </LemonBanner>
                     <div className="border rounded p-6 bg-bg-light">
-                        <QuickSurveyForm flag={featureFlag} />
+                        <QuickSurveyForm
+                            context={{
+                                type: QuickSurveyType.FEATURE_FLAG,
+                                flag: featureFlag,
+                            }}
+                        />
                     </div>
                 </div>
             </div>

frontend/src/scenes/feature-flags/FeatureFlags.tsx

@@ -29,7 +29,7 @@ import stringWithWBR from 'lib/utils/stringWithWBR'
 import MaxTool from 'scenes/max/MaxTool'
 import { projectLogic } from 'scenes/projectLogic'
 import { SceneExport } from 'scenes/sceneTypes'
-import { QuickSurveyModal } from 'scenes/surveys/QuickSurveyModal'
+import { QuickSurveyModal } from 'scenes/surveys/quick-create/QuickSurveyModal'
 import { urls } from 'scenes/urls'
 import { userLogic } from 'scenes/userLogic'
 
@@ -241,9 +241,9 @@ function FeatureFlagRowActions({ featureFlag }: { featureFlag: FeatureFlagType }
                 }
             />
             <QuickSurveyModal
-                flag={featureFlag}
+                context={{ type: 'feature_flag', flag: featureFlag }}
                 isOpen={isQuickSurveyModalOpen}
-                onClose={() => setIsQuickSurveyModalOpen(false)}
+                onCancel={() => setIsQuickSurveyModalOpen(false)}
             />
         </>
     )