fix: survey form default values (#17544)

* fix: misaligned 'match by' dropdown

* set defaults for type == rating

* add defaults for the remaining question types

* set default button text

* render button appearance fields for relevant question types

* explicitely set rating button color

* Update UI snapshots for `chromium` (2)

* clean up conditional

* Update UI snapshots for `chromium` (1)

* prevent overwriting question and description by default values

* Update UI snapshots for `chromium` (2)

* delete redundant actions & reducers

* Update UI snapshots for `chromium` (1)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/scenes/surveys/Survey.tsx

@@ -1,5 +1,5 @@
 import { SceneExport } from 'scenes/sceneTypes'
-import { NewSurvey, defaultSurveyAppearance, surveyLogic } from './surveyLogic'
+import { NewSurvey, defaultSurveyAppearance, defaultSurveyFieldValues, surveyLogic } from './surveyLogic'
 import { BindLogic, useActions, useValues } from 'kea'
 import { Form, Group } from 'kea-forms'
 import { PageHeader } from 'lib/components/PageHeader'
@@ -60,7 +60,7 @@ export function SurveyComponent({ id }: { id?: string } = {}): JSX.Element {
 
 export function SurveyForm({ id }: { id: string }): JSX.Element {
     const { survey, surveyLoading, isEditingSurvey, hasTargetingFlag } = useValues(surveyLogic)
-    const { loadSurvey, editingSurvey, setSurveyValue } = useActions(surveyLogic)
+    const { loadSurvey, editingSurvey, setSurveyValue, setDefaultForQuestionType } = useActions(surveyLogic)
     const { featureFlags } = useValues(enabledFeaturesLogic)
 
     return (
@@ -119,6 +119,16 @@ export function SurveyForm({ id }: { id: string }): JSX.Element {
                             <Group name={`questions.${index}`} key={index}>
                                 <Field name="type" label="Question type" className="max-w-60">
                                     <LemonSelect
+                                        onSelect={(newType) => {
+                                            const stateObj = survey.questions[0]
+                                            const isEditingQuestion =
+                                                defaultSurveyFieldValues[stateObj.type].questions[0].question !==
+                                                stateObj.question
+                                            const isEditingDescription =
+                                                defaultSurveyFieldValues[stateObj.type].questions[0].description !==
+                                                stateObj.description
+                                            setDefaultForQuestionType(newType, isEditingQuestion, isEditingDescription)
+                                        }}
                                         options={[
                                             { label: 'Open text', value: SurveyQuestionType.Open },
                                             { label: 'Link', value: SurveyQuestionType.Link },

frontend/src/scenes/surveys/SurveyAppearance.tsx

@@ -132,7 +132,12 @@ export function SurveyAppearance({
                             )}
                         </>
                     )}
-                    {(type === SurveyQuestionType.Open || type === SurveyQuestionType.Link) && (
+                    {[
+                        SurveyQuestionType.Open,
+                        SurveyQuestionType.Link,
+                        SurveyQuestionType.SingleChoice,
+                        SurveyQuestionType.MultipleChoice,
+                    ].includes(type) && (
                         <>
                             <div className="mt-2">Button color</div>
                             <LemonInput

frontend/src/scenes/surveys/surveyLogic.tsx

@@ -13,6 +13,7 @@ import {
     PropertyFilterType,
     PropertyOperator,
     Survey,
+    SurveyQuestionBase,
     SurveyQuestionType,
     SurveyType,
 } from '~/types'
@@ -46,20 +47,90 @@ export interface NewSurvey
 
 export const defaultSurveyAppearance = {
     backgroundColor: 'white',
-    submitButtonColor: '#2C2C2C',
     textColor: 'black',
     submitButtonText: 'Submit',
+    submitButtonColor: '#2c2c2c',
+    ratingButtonColor: '#e0e2e8',
     descriptionTextColor: '#4b4b52',
     whiteLabel: false,
     displayThankYouMessage: true,
     thankYouMessageHeader: 'Thank you for your feedback!',
 }
 
+export const defaultSurveyFieldValues = {
+    [SurveyQuestionType.Open]: {
+        questions: [
+            {
+                question: 'Give us feedback on our product!',
+                description: '',
+            },
+        ],
+        appearance: {
+            submitButtonText: 'Submit',
+        },
+    },
+    [SurveyQuestionType.Link]: {
+        questions: [
+            {
+                question: 'Do you want to join our upcoming webinar?',
+                description: '',
+            },
+        ],
+        appearance: {
+            submitButtonText: 'Register',
+            thankYouMessageHeader: 'Redirecting ...',
+        },
+    },
+    [SurveyQuestionType.Rating]: {
+        questions: [
+            {
+                question: 'How likely are you to recommend us to a friend?',
+                description: '',
+                display: 'number',
+                scale: 10,
+                lowerBoundLabel: 'Unlikely',
+                upperBoundLabel: 'Very likely',
+            },
+        ],
+        appearance: {},
+    },
+    [SurveyQuestionType.SingleChoice]: {
+        questions: [
+            {
+                question: 'Have you found this tutorial useful?',
+                description: '',
+                choices: ['Yes', 'No'],
+            },
+        ],
+        appearance: {
+            submitButtonText: 'Submit',
+        },
+    },
+    [SurveyQuestionType.MultipleChoice]: {
+        questions: [
+            {
+                question: 'Which types of content would you like to see more of?',
+                description: '',
+                choices: ['Tutorials', 'Customer case studies', 'Product announcements'],
+            },
+        ],
+        appearance: {
+            submitButtonText: 'Submit',
+        },
+    },
+}
+
 export const NEW_SURVEY: NewSurvey = {
     id: 'new',
     name: '',
     description: '',
-    questions: [{ type: SurveyQuestionType.Open, question: '' }],
+    questions: [
+        {
+            type: SurveyQuestionType.Open,
+            question: defaultSurveyFieldValues[SurveyQuestionType.Open].questions[0].question,
+            description: defaultSurveyFieldValues[SurveyQuestionType.Open].questions[0].description,
+        },
+    ],
     type: SurveyType.Popover,
     linked_flag_id: undefined,
     targeting_flag_filters: undefined,
@@ -108,6 +179,15 @@ export const surveyLogic = kea<surveyLogicType>([
     })),
     actions({
         editingSurvey: (editing: boolean) => ({ editing }),
+        setDefaultForQuestionType: (
+            type: SurveyQuestionType,
+            isEditingQuestion: boolean,
+            isEditingDescription: boolean
+        ) => ({
+            type,
+            isEditingQuestion,
+            isEditingDescription,
+        }),
         launchSurvey: true,
         stopSurvey: true,
         archiveSurvey: true,
@@ -178,6 +258,35 @@ export const surveyLogic = kea<surveyLogicType>([
                 editingSurvey: (_, { editing }) => editing,
             },
         ],
+        survey: [
+            { ...NEW_SURVEY } as NewSurvey | Survey,
+            {
+                setDefaultForQuestionType: (state, { type, isEditingQuestion, isEditingDescription }) => {
+                    const question = isEditingQuestion
+                        ? state.questions[0].question
+                        : defaultSurveyFieldValues[type].questions[0].question
+                    const description = isEditingDescription
+                        ? state.questions[0].description
+                        : defaultSurveyFieldValues[type].questions[0].description
+
+                    return {
+                        ...state,
+                        questions: [
+                            {
+                                ...state.questions[0],
+                                ...(defaultSurveyFieldValues[type].questions[0] as SurveyQuestionBase),
+                                question,
+                                description,
+                            },
+                        ],
+                        appearance: {
+                            ...state.appearance,
+                            ...defaultSurveyFieldValues[type].appearance,
+                        },
+                    }
+                },
+            },
+        ],
     }),
     selectors({
         isSurveyRunning: [

frontend/src/types.ts

@@ -2107,7 +2107,7 @@ export interface SurveyAppearance {
     thankYouMessageDescription?: string
 }
 
-interface SurveyQuestionBase {
+export interface SurveyQuestionBase {
     question: string
     description?: string | null
     required?: boolean