feat: add a survey to opt out SR

frontend/src/lib/components/InternalSurvey/InternalMultipleChoiceSurvey.tsx

@@ -0,0 +1,60 @@
+/**
+ * @fileoverview A component that displays an interactive survey within a session recording. It handles survey display, user responses, and submission
+ */
+import { LemonButton, LemonCheckbox } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { InternalMultipleChoiceSurveyLogic } from 'lib/components/InternalSurvey/InternalMultipleChoiceSurveyLogic'
+
+import { SurveyQuestion, SurveyQuestionType } from '~/types'
+
+interface InternalSurveyProps {
+    surveyId: string
+}
+
+export function InternalMultipleChoiceSurvey({ surveyId }: InternalSurveyProps): JSX.Element {
+    const logic = InternalMultipleChoiceSurveyLogic({ surveyId })
+    const { survey, surveyResponse, showThankYouMessage, thankYouMessage } = useValues(logic)
+    const { handleChoiceChange, handleSurveyResponse } = useActions(logic)
+
+    if (!survey) {
+        return <></>
+    }
+
+    return (
+        <div className="Popover Popover--padded Popover--appear-done Popover--enter-done my-4">
+            <div className="Popover__box p-4">
+                {survey.questions.map((question: SurveyQuestion) => (
+                    <div key={question.question} className="text-sm">
+                        {showThankYouMessage && thankYouMessage}
+                        {!showThankYouMessage && (
+                            <>
+                                {question.question}
+                                {question.type === SurveyQuestionType.MultipleChoice && (
+                                    <ul className="list-inside list-none my-2">
+                                        {question.choices.map((choice) => (
+                                            <li key={choice}>
+                                                <LemonCheckbox
+                                                    onChange={(checked) => handleChoiceChange(choice, checked)}
+                                                    label={choice}
+                                                />
+                                            </li>
+                                        ))}
+                                    </ul>
+                                )}
+                                <LemonButton
+                                    type="primary"
+                                    disabledReason={
+                                        surveyResponse.length === 0 ? 'Please select at least one option' : false
+                                    }
+                                    onClick={handleSurveyResponse}
+                                >
+                                    {question.buttonText ?? 'Submit'}
+                                </LemonButton>
+                            </>
+                        )}
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}

frontend/src/lib/components/InternalSurvey/InternalMultipleChoiceSurveyLogic.ts

@@ -0,0 +1,92 @@
+/**
+ * @fileoverview A logic that handles the internal multiple choice survey
+ */
+import { actions, afterMount, kea, key, listeners, path, props, reducers } from 'kea'
+import posthog, { Survey as PostHogSurvey } from 'posthog-js'
+
+import type { InternalMultipleChoiceSurveyLogicType } from './InternalMultipleChoiceSurveyLogicType'
+
+export interface InternalSurveyLogicProps {
+    surveyId: string
+}
+
+export const InternalMultipleChoiceSurveyLogic = kea<InternalMultipleChoiceSurveyLogicType>([
+    path(['lib', 'components', 'InternalSurvey', 'InternalMultipleChoiceSurveyLogic']),
+    props({} as InternalSurveyLogicProps),
+    key((props) => props.surveyId),
+    actions({
+        setSurveyId: (surveyId: string) => ({ surveyId }),
+        getSurveys: () => ({}),
+        setSurvey: (survey: PostHogSurvey) => ({ survey }),
+        handleSurveys: (surveys: PostHogSurvey[]) => ({ surveys }),
+        handleSurveyResponse: () => ({}),
+        handleChoiceChange: (choice: string, isAdded: boolean) => ({ choice, isAdded }),
+        setShowThankYouMessage: (showThankYouMessage: boolean) => ({ showThankYouMessage }),
+        setThankYouMessage: (thankYouMessage: string) => ({ thankYouMessage }),
+    }),
+    reducers({
+        surveyId: [
+            null as string | null,
+            {
+                setSurveyId: (_, { surveyId }) => surveyId,
+            },
+        ],
+        survey: [
+            null as PostHogSurvey | null,
+            {
+                setSurvey: (_, { survey }) => survey,
+            },
+        ],
+        thankYouMessage: [
+            'Thank you for your feedback!',
+            {
+                setThankYouMessage: (_, { thankYouMessage }) => thankYouMessage,
+            },
+        ],
+        showThankYouMessage: [
+            false as boolean,
+            {
+                setShowThankYouMessage: (_, { showThankYouMessage }) => showThankYouMessage,
+            },
+        ],
+        surveyResponse: [
+            [] as string[],
+            {
+                handleChoiceChange: (state, { choice, isAdded }) =>
+                    isAdded ? [...state, choice] : state.filter((c) => c !== choice),
+            },
+        ],
+    }),
+    listeners(({ actions, values }) => ({
+        /** When surveyId is set, get the list of surveys for the user */
+        setSurveyId: () => {
+            posthog.getSurveys(actions.handleSurveys)
+        },
+        /** Callback for the surveys response. Filter it to the surveyId and set the survey */
+        handleSurveys: ({ surveys }) => {
+            const survey = surveys.find((s: PostHogSurvey) => s.id === values.surveyId)
+            if (survey) {
+                posthog.capture('survey shown', {
+                    $survey_id: values.surveyId,
+                })
+                actions.setSurvey(survey)
+                if (survey.appearance?.thankYouMessageHeader) {
+                    actions.setThankYouMessage(survey.appearance?.thankYouMessageHeader)
+                }
+            }
+        },
+        /** When the survey response is sent, capture the response and show the thank you message */
+        handleSurveyResponse: () => {
+            posthog.capture('survey sent', {
+                $survey_id: values.surveyId,
+                $survey_response: values.surveyResponse,
+            })
+            actions.setShowThankYouMessage(true)
+            setTimeout(() => actions.setSurvey(null), 5000)
+        },
+    })),
+    afterMount(({ actions, props }) => {
+        /** When the logic is mounted, set the surveyId from the props */
+        actions.setSurveyId(props.surveyId)
+    }),
+])

frontend/src/lib/constants.tsx

@@ -316,6 +316,7 @@ export const SESSION_REPLAY_MINIMUM_DURATION_OPTIONS: LemonSelectOptions<number
 ]
 
 export const UNSUBSCRIBE_SURVEY_ID = '018b6e13-590c-0000-decb-c727a2b3f462'
+export const SESSION_RECORDING_OPT_OUT_SURVEY_ID = '0194a763-9a13-0000-8088-32b52acf7156'
 
 export const TAILWIND_BREAKPOINTS = {
     sm: 526,

frontend/src/scenes/settings/environment/SessionRecordingSettings.tsx

@@ -14,12 +14,14 @@ import { useActions, useValues } from 'kea'
 import { AuthorizedUrlList } from 'lib/components/AuthorizedUrlList/AuthorizedUrlList'
 import { AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic'
 import { EventSelect } from 'lib/components/EventSelect/EventSelect'
+import { InternalMultipleChoiceSurvey } from 'lib/components/InternalSurvey/InternalMultipleChoiceSurvey'
 import { PropertySelect } from 'lib/components/PropertySelect/PropertySelect'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
+import { SESSION_RECORDING_OPT_OUT_SURVEY_ID } from 'lib/constants'
 import { IconSelectEvents } from 'lib/lemon-ui/icons'
 import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel'
 import { isObject, objectsEqual } from 'lib/utils'
-import { ReactNode } from 'react'
+import { ReactNode, useState } from 'react'
 import { teamLogic } from 'scenes/teamLogic'
 
 import { SessionRecordingAIConfig } from '~/types'
@@ -504,6 +506,20 @@ export function ReplayAISettings(): JSX.Element | null {
 export function ReplayGeneral(): JSX.Element {
     const { updateCurrentTeam } = useActions(teamLogic)
     const { currentTeam } = useValues(teamLogic)
+    const [showSurvey, setShowSurvey] = useState<boolean>(false)
+
+    /**
+     * Handle the opt in change
+     * @param checked
+     */
+    const handleOptInChange = (checked: boolean): void => {
+        updateCurrentTeam({
+            session_recording_opt_in: checked,
+        })
+
+        //If the user opts out, we show the survey
+        setShowSurvey(!checked)
+    }
 
     return (
         <div className="flex flex-col gap-4">
@@ -521,16 +537,13 @@ export function ReplayGeneral(): JSX.Element {
                 <LemonSwitch
                     data-attr="opt-in-session-recording-switch"
                     onChange={(checked) => {
-                        updateCurrentTeam({
-                            // when switching replay on or off,
-                            // we set defaults for some of the other settings
-                            session_recording_opt_in: checked,
-                        })
+                        handleOptInChange(checked)
                     }}
                     label="Record user sessions"
                     bordered
                     checked={!!currentTeam?.session_recording_opt_in}
                 />
+                {showSurvey && <InternalMultipleChoiceSurvey surveyId={SESSION_RECORDING_OPT_OUT_SURVEY_ID} />}
             </div>
             <LogCaptureSettings />
             <CanvasCaptureSettings />