feat: allow widget surveys to be repeated indefinitely

frontend/src/scenes/surveys/SurveyEdit.tsx

@@ -45,6 +45,7 @@ import {
     SurveyMatchType,
     SurveyQuestion,
     SurveyQuestionType,
+    SurveySchedule,
     SurveyType,
 } from '~/types'
 
@@ -242,7 +243,6 @@ export default function SurveyEdit(): JSX.Element {
         setSelectedPageIndex,
         setSelectedSection,
         setFlagPropertyErrors,
-        setSchedule,
         deleteBranchingLogic,
     } = useActions(surveyLogic)
     const { surveysMultipleQuestionsAvailable, surveysEventsAvailable, surveysActionsAvailable } =
@@ -251,10 +251,6 @@ export default function SurveyEdit(): JSX.Element {
     const sortedItemIds = survey.questions.map((_, idx) => idx.toString())
     const { thankYouMessageDescriptionContentType = null } = survey.appearance ?? {}
 
-    if (survey.iteration_count && survey.iteration_count > 0) {
-        setSchedule('recurring')
-    }
-
     function onSortEnd({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }): void {
         function move(arr: SurveyQuestion[], from: number, to: number): SurveyQuestion[] {
             const clone = [...arr]
@@ -301,7 +297,12 @@ export default function SurveyEdit(): JSX.Element {
                                             <div className="flex gap-4">
                                                 <PresentationTypeCard
                                                     active={value === SurveyType.Popover}
-                                                    onClick={() => onChange(SurveyType.Popover)}
+                                                    onClick={() => {
+                                                        onChange(SurveyType.Popover)
+                                                        if (survey.schedule === SurveySchedule.Always) {
+                                                            setSurveyValue('schedule', SurveySchedule.Once)
+                                                        }
+                                                    }}
                                                     title="Popover"
                                                     description="Automatically appears when PostHog JS is installed"
                                                     value={SurveyType.Popover}
@@ -312,7 +313,12 @@ export default function SurveyEdit(): JSX.Element {
                                                 </PresentationTypeCard>
                                                 <PresentationTypeCard
                                                     active={value === SurveyType.API}
-                                                    onClick={() => onChange(SurveyType.API)}
+                                                    onClick={() => {
+                                                        onChange(SurveyType.API)
+                                                        if (survey.schedule === SurveySchedule.Always) {
+                                                            setSurveyValue('schedule', SurveySchedule.Once)
+                                                        }
+                                                    }}
                                                     title="API"
                                                     description="Use the PostHog API to show/hide your survey programmatically"
                                                     value={SurveyType.API}

frontend/src/scenes/surveys/SurveyRepeatSchedule.tsx

@@ -6,12 +6,14 @@ import { useActions, useValues } from 'kea'
 import { LemonField } from 'lib/lemon-ui/LemonField'
 import { LemonRadio } from 'lib/lemon-ui/LemonRadio'
 
-import { ScheduleType, SurveyEditSection, surveyLogic } from './surveyLogic'
+import { SurveySchedule } from '~/types'
+
+import { SurveyEditSection, surveyLogic } from './surveyLogic'
 import { surveysLogic } from './surveysLogic'
 
 function SurveyIterationOptions(): JSX.Element {
-    const { showSurveyRepeatSchedule, schedule } = useValues(surveyLogic)
-    const { setSurveyValue, setSchedule } = useActions(surveyLogic)
+    const { showSurveyRepeatSchedule, survey } = useValues(surveyLogic)
+    const { setSurveyValue } = useActions(surveyLogic)
     const { surveysRecurringScheduleAvailable } = useValues(surveysLogic)
 
     const surveysRecurringScheduleDisabledReason = surveysRecurringScheduleAvailable
@@ -22,29 +24,35 @@ function SurveyIterationOptions(): JSX.Element {
         <>
             <LemonField.Pure>
                 <LemonRadio
-                    value={schedule}
+                    value={survey.schedule}
                     onChange={(newValue) => {
-                        setSchedule(newValue as ScheduleType)
-                        if (newValue === 'once') {
+                        setSurveyValue('schedule', newValue)
+                        if (newValue === SurveySchedule.Once || newValue === SurveySchedule.Always) {
                             setSurveyValue('iteration_count', 0)
                             setSurveyValue('iteration_frequency_days', 0)
-                        } else if (newValue === 'recurring') {
+                        } else if (newValue === SurveySchedule.Recurring) {
                             setSurveyValue('iteration_count', 1)
                             setSurveyValue('iteration_frequency_days', 90)
                         }
                     }}
                     options={[
                         {
-                            value: 'once',
+                            value: SurveySchedule.Once,
                             label: 'Once',
                             'data-attr': 'survey-iteration-frequency-days',
                         },
                         {
-                            value: 'recurring',
+                            value: SurveySchedule.Recurring,
                             label: 'Repeat on a schedule',
                             'data-attr': 'survey-iteration-frequency-days',
                             disabledReason: surveysRecurringScheduleDisabledReason,
                         },
+                        {
+                            value: SurveySchedule.Always,
+                            label: 'All the time',
+                            'data-attr': 'survey-iteration-frequency-days',
+                            disabledReason: survey.type !== 'widget' ? 'Only available for widget surveys' : undefined,
+                        },
                     ]}
                 />
             </LemonField.Pure>

frontend/src/scenes/surveys/SurveyView.tsx

@@ -24,7 +24,15 @@ import { getSurveyResponseKey } from 'scenes/surveys/utils'
 
 import { Query } from '~/queries/Query/Query'
 import { NodeKind } from '~/queries/schema/schema-general'
-import { ActivityScope, PropertyFilterType, PropertyOperator, Survey, SurveyQuestionType, SurveyType } from '~/types'
+import {
+    ActivityScope,
+    PropertyFilterType,
+    PropertyOperator,
+    Survey,
+    SurveyQuestionType,
+    SurveySchedule as SurveyScheduleEnum,
+    SurveyType,
+} from '~/types'
 
 import { SURVEY_EVENT_NAME, SurveyQuestionLabel } from './constants'
 import { SurveyDisplaySummary } from './Survey'
@@ -61,6 +69,37 @@ function SurveyResultsFilters(): JSX.Element {
     )
 }
 
+function SurveySchedule(): JSX.Element {
+    const { survey } = useValues(surveyLogic)
+    if (survey.schedule === SurveyScheduleEnum.Recurring && survey.iteration_count && survey.iteration_frequency_days) {
+        return (
+            <>
+                <span className="card-secondary">Schedule</span>
+                <span>
+                    Repeats every {survey.iteration_frequency_days}{' '}
+                    {pluralize(survey.iteration_frequency_days, 'day', 'days', false)}, {survey.iteration_count}{' '}
+                    {pluralize(survey.iteration_count, 'time', 'times', false)}
+                </span>
+            </>
+        )
+    }
+
+    if (survey.schedule === SurveyScheduleEnum.Once) {
+        return (
+            <>
+                <span className="card-secondary">Schedule</span>
+                <span>Once</span>
+            </>
+        )
+    }
+
+    return (
+        <>
+            <span className="card-secondary">Schedule</span>
+            <span>Always</span>
+        </>
+    )
+}
 export function SurveyView({ id }: { id: string }): JSX.Element {
     const { survey, surveyLoading, selectedPageIndex, targetingFlagFilters } = useValues(surveyLogic)
     const {
@@ -349,25 +388,9 @@ export function SurveyView({ id }: { id: string }): JSX.Element {
                                                 )}
                                             </div>
                                             <div className="flex flex-row gap-8">
-                                                {survey.iteration_count &&
-                                                survey.iteration_frequency_days &&
-                                                survey.iteration_count > 0 &&
-                                                survey.iteration_frequency_days > 0 ? (
-                                                    <div className="flex flex-col">
-                                                        <span className="mt-4 card-secondary">Schedule</span>
-                                                        <span>
-                                                            Repeats every {survey.iteration_frequency_days}{' '}
-                                                            {pluralize(
-                                                                survey.iteration_frequency_days,
-                                                                'day',
-                                                                'days',
-                                                                false
-                                                            )}
-                                                            , {survey.iteration_count}{' '}
-                                                            {pluralize(survey.iteration_count, 'time', 'times', false)}
-                                                        </span>
-                                                    </div>
-                                                ) : null}
+                                                <div className="flex flex-col mt-4">
+                                                    <SurveySchedule />
+                                                </div>
                                             </div>
                                             {surveyUsesLimit && (
                                                 <>

frontend/src/scenes/surveys/Surveys.stories.tsx

@@ -15,6 +15,7 @@ import {
     PropertyOperator,
     Survey,
     SurveyQuestionType,
+    SurveySchedule,
     SurveyType,
 } from '~/types'
 
@@ -46,6 +47,7 @@ const MOCK_BASIC_SURVEY: Survey = {
     responses_limit: null,
     iteration_count: null,
     iteration_frequency_days: null,
+    schedule: SurveySchedule.Once,
 }
 
 const MOCK_SURVEY_WITH_MULTIPLE_OPTIONS: Survey = {
@@ -86,6 +88,7 @@ const MOCK_SURVEY_WITH_MULTIPLE_OPTIONS: Survey = {
     responses_limit: null,
     iteration_count: null,
     iteration_frequency_days: null,
+    schedule: SurveySchedule.Once,
 }
 
 const MOCK_SURVEY_WITH_RELEASE_CONS: Survey = {
@@ -164,6 +167,7 @@ const MOCK_SURVEY_WITH_RELEASE_CONS: Survey = {
     responses_limit: null,
     iteration_count: null,
     iteration_frequency_days: null,
+    schedule: SurveySchedule.Once,
 }
 
 const MOCK_SURVEY_SHOWN = {

frontend/src/scenes/surveys/constants.tsx

@@ -6,6 +6,7 @@ import {
     SurveyMatchType,
     SurveyQuestionDescriptionContentType,
     SurveyQuestionType,
+    SurveySchedule,
     SurveyType,
 } from '~/types'
 
@@ -151,6 +152,7 @@ export interface NewSurvey
         | 'response_sampling_interval_type'
         | 'response_sampling_interval'
         | 'response_sampling_limit'
+        | 'schedule'
     > {
     id: 'new'
     linked_flag_id: number | null
@@ -160,6 +162,7 @@ export const NEW_SURVEY: NewSurvey = {
     id: 'new',
     name: '',
     description: '',
+    schedule: SurveySchedule.Once,
     questions: [
         {
             type: SurveyQuestionType.Open,

frontend/src/scenes/surveys/surveyLogic.test.ts

@@ -12,6 +12,7 @@ import {
     Survey,
     SurveyQuestionBranchingType,
     SurveyQuestionType,
+    SurveySchedule,
     SurveyType,
 } from '~/types'
 
@@ -61,6 +62,7 @@ const MULTIPLE_CHOICE_SURVEY: Survey = {
     responses_limit: null,
     iteration_count: null,
     iteration_frequency_days: null,
+    schedule: SurveySchedule.Once,
 }
 
 const SINGLE_CHOICE_SURVEY: Survey = {
@@ -109,6 +111,7 @@ const SINGLE_CHOICE_SURVEY: Survey = {
     responses_limit: null,
     iteration_count: null,
     iteration_frequency_days: null,
+    schedule: SurveySchedule.Once,
 }
 
 const MULTIPLE_CHOICE_SURVEY_WITH_OPEN_CHOICE: Survey = {
@@ -158,6 +161,7 @@ const MULTIPLE_CHOICE_SURVEY_WITH_OPEN_CHOICE: Survey = {
     responses_limit: null,
     iteration_count: null,
     iteration_frequency_days: null,
+    schedule: SurveySchedule.Once,
 }
 
 const SINGLE_CHOICE_SURVEY_WITH_OPEN_CHOICE: Survey = {
@@ -207,6 +211,7 @@ const SINGLE_CHOICE_SURVEY_WITH_OPEN_CHOICE: Survey = {
     responses_limit: null,
     iteration_count: null,
     iteration_frequency_days: null,
+    schedule: SurveySchedule.Once,
 }
 
 describe('multiple choice survey logic', () => {
@@ -455,6 +460,7 @@ describe('set response-based survey branching', () => {
         archived: false,
         targeting_flag_filters: undefined,
         responses_limit: null,
+        schedule: SurveySchedule.Once,
     }
 
     describe('main', () => {

frontend/src/scenes/surveys/surveyLogic.tsx

@@ -31,6 +31,7 @@ import {
     SurveyQuestionBase,
     SurveyQuestionBranchingType,
     SurveyQuestionType,
+    SurveySchedule,
 } from '~/types'
 
 import { defaultSurveyAppearance, defaultSurveyFieldValues, NEW_SURVEY, NewSurvey } from './constants'
@@ -133,7 +134,6 @@ export interface QuestionResultsReady {
 }
 
 export type DataCollectionType = 'until_stopped' | 'until_limit' | 'until_adaptive_limit'
-export type ScheduleType = 'once' | 'recurring'
 
 export interface SurveyDateRange {
     date_from: string | null
@@ -219,7 +219,6 @@ export const surveyLogic = kea<surveyLogicType>([
         setSurveyTemplateValues: (template: any) => ({ template }),
         setSelectedPageIndex: (idx: number | null) => ({ idx }),
         setSelectedSection: (section: SurveyEditSection | null) => ({ section }),
-        setSchedule: (schedule: ScheduleType) => ({ schedule }),
         resetTargeting: true,
         resetSurveyAdaptiveSampling: true,
         resetSurveyResponseLimits: true,
@@ -1012,12 +1011,6 @@ export const surveyLogic = kea<surveyLogicType>([
                 setWritingHTMLDescription: (_, { writingHTML }) => writingHTML,
             },
         ],
-        schedule: [
-            'once',
-            {
-                setSchedule: (_, { schedule }) => schedule,
-            },
-        ],
         flagPropertyErrors: [
             null as any,
             {
@@ -1107,7 +1100,7 @@ export const surveyLogic = kea<surveyLogicType>([
                 return survey.questions.length > 1
             },
         ],
-        showSurveyRepeatSchedule: [(s) => [s.schedule], (schedule: ScheduleType) => schedule == 'recurring'],
+        showSurveyRepeatSchedule: [(s) => [s.survey], (survey: Survey) => survey.schedule === SurveySchedule.Recurring],
         descriptionContentType: [
             (s) => [s.survey],
             (survey: Survey) => (questionIndex: number) => {

frontend/src/types.ts

@@ -2773,12 +2773,19 @@ export interface SetInsightOptions {
     fromPersistentApi?: boolean
 }
 
+export enum SurveySchedule {
+    Once = 'once',
+    Recurring = 'recurring',
+    Always = 'always',
+}
+
 export interface Survey {
     /** UUID */
     id: string
     name: string
     type: SurveyType
     description: string
+    schedule: SurveySchedule
     linked_flag_id: number | null
     linked_flag: FeatureFlagBasicType | null
     targeting_flag: FeatureFlagBasicType | null