feat: add a survey to opt out SR

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

@@ -0,0 +1,80 @@
+/**
+ * @fileoverview A component that displays an interactive survey within a session recording. It handles survey display, user responses, and submission
+ */
+import { LemonButton, LemonCheckbox, LemonTextArea } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+
+import { SurveyQuestion, SurveyQuestionType } from '~/types'
+
+import { internalMultipleChoiceSurveyLogic } from './internalMultipleChoiceSurveyLogic'
+
+interface InternalSurveyProps {
+    surveyId: string
+}
+
+export function InternalMultipleChoiceSurvey({ surveyId }: InternalSurveyProps): JSX.Element {
+    const logic = internalMultipleChoiceSurveyLogic({ surveyId })
+    const { survey, surveyResponse, showThankYouMessage, thankYouMessage, openChoice } = useValues(logic)
+    const { handleChoiceChange, handleSurveyResponse, setOpenChoice } = 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 && (
+                            <>
+                                <strong>{question.question}</strong>
+                                {question.type === SurveyQuestionType.MultipleChoice && (
+                                    <ul className="list-inside list-none mt-2">
+                                        {question.choices.map((choice, index) => {
+                                            // Add an open choice text area if the last choice is an open choice
+                                            if (index === question.choices.length - 1 && question.hasOpenChoice) {
+                                                return (
+                                                    <div className="mt-2" key={choice}>
+                                                        {choice}
+                                                        <LemonTextArea
+                                                            placeholder="Please share any additional comments or feedback"
+                                                            onChange={setOpenChoice}
+                                                            value={openChoice ?? ''}
+                                                            className="my-2"
+                                                        />
+                                                    </div>
+                                                )
+                                            }
+                                            return (
+                                                <li key={choice}>
+                                                    <LemonCheckbox
+                                                        onChange={(checked) => handleChoiceChange(choice, checked)}
+                                                        label={choice}
+                                                        className="font-normal"
+                                                    />
+                                                </li>
+                                            )
+                                        })}
+                                    </ul>
+                                )}
+                                <LemonButton
+                                    type="primary"
+                                    disabledReason={
+                                        surveyResponse.length === 0 && openChoice === null
+                                            ? '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,95 @@
+import { actions, afterMount, kea, key, listeners, path, props, reducers } from 'kea'
+import posthog from 'posthog-js'
+
+import { Survey } from '~/types'
+
+import type { internalMultipleChoiceSurveyLogicType } from './internalMultipleChoiceSurveyLogicType'
+
+export interface InternalSurveyLogicProps {
+    surveyId: string
+}
+
+export const internalMultipleChoiceSurveyLogic = kea<internalMultipleChoiceSurveyLogicType>([
+    path(['lib', 'components', 'InternalSurvey', 'internalMultipleChoiceSurveyLogicType']),
+    props({} as InternalSurveyLogicProps),
+    key((props) => props.surveyId),
+    actions({
+        getSurveys: () => ({}),
+        setSurvey: (survey: Survey) => ({ survey }),
+        handleSurveys: (surveys: Survey[]) => ({ surveys }),
+        handleSurveyResponse: () => ({}),
+        handleChoiceChange: (choice: string, isAdded: boolean) => ({ choice, isAdded }),
+        setShowThankYouMessage: (showThankYouMessage: boolean) => ({ showThankYouMessage }),
+        setThankYouMessage: (thankYouMessage: string) => ({ thankYouMessage }),
+        setOpenChoice: (openChoice: string) => ({ openChoice }),
+    }),
+    reducers({
+        survey: [
+            null as Survey | null,
+            {
+                setSurvey: (_, { survey }) => survey,
+            },
+        ],
+        thankYouMessage: [
+            'Thank you for your feedback!',
+            {
+                setThankYouMessage: (_, { thankYouMessage }) => thankYouMessage,
+            },
+        ],
+        showThankYouMessage: [
+            false as boolean,
+            {
+                setShowThankYouMessage: (_, { showThankYouMessage }) => showThankYouMessage,
+            },
+        ],
+        openChoice: [
+            null as string | null,
+            {
+                setOpenChoice: (_, { openChoice }) => openChoice,
+            },
+        ],
+        surveyResponse: [
+            [] as string[],
+            {
+                handleChoiceChange: (state, { choice, isAdded }) =>
+                    isAdded ? [...state, choice] : state.filter((c: string) => c !== choice),
+            },
+        ],
+    }),
+    listeners(({ actions, values, props }) => ({
+        /** When surveyId is set, get the list of surveys for the user */
+        setSurveyId: () => {},
+        /** Callback for the surveys response. Filter it to the surveyId and set the survey */
+        handleSurveys: ({ surveys }) => {
+            const survey = surveys.find((s: Survey) => s.id === props.surveyId)
+            if (survey) {
+                posthog.capture('survey shown', {
+                    $survey_id: props.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: () => {
+            const payload = {
+                $survey_id: props.surveyId,
+                $survey_response: values.surveyResponse,
+            }
+            if (values.openChoice) {
+                payload.$survey_response.push(values.openChoice)
+            }
+            posthog.capture('survey sent', payload)
+
+            actions.setShowThankYouMessage(true)
+            setTimeout(() => actions.setSurvey(null as unknown as Survey), 5000)
+        },
+    })),
+    afterMount(({ actions }) => {
+        /** When the logic is mounted, set the surveyId from the props */
+        posthog.getSurveys((surveys) => actions.handleSurveys(surveys as unknown as Survey[]))
+    }),
+])

frontend/src/lib/constants.tsx

@@ -317,6 +317,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 />