feat(surveys): add configurable delay to popup surveys

frontend/src/scenes/surveys/SurveyCustomization.tsx

@@ -2,6 +2,7 @@ import { LemonButton, LemonCheckbox, LemonInput, LemonSelect } from '@posthog/le
 import { useValues } from 'kea'
 import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini'
 import { upgradeModalLogic } from 'lib/components/UpgradeModal/upgradeModalLogic'
+import { LemonField } from 'lib/lemon-ui/LemonField'
 import { surveyLogic } from 'scenes/surveys/surveyLogic'
 
 import {
@@ -134,6 +135,43 @@ export function Customization({ appearance, surveyQuestionItem, onAppearanceChan
                         checked={appearance?.shuffleQuestions}
                     />
                 </div>
+                <div className="mt-1">
+                    <LemonField name="survey_popup_delay" className="font-medium">
+                        {({ onChange }) => {
+                            return (
+                                <div className="flex flex-row gap-2 items-center">
+                                    <LemonCheckbox
+                                        checked={!!appearance?.surveyPopupDelay}
+                                        onChange={(checked) => {
+                                            const surveyPopupDelay = checked ? 5 : undefined
+                                            onChange(surveyPopupDelay)
+                                            onAppearanceChange({ ...appearance, surveyPopupDelay })
+                                        }}
+                                    />
+                                    Delay survey popup after page load by{' '}
+                                    <LemonInput
+                                        type="number"
+                                        data-attr="survey-popup-delay-input"
+                                        size="small"
+                                        min={1}
+                                        value={appearance?.surveyPopupDelay || NaN}
+                                        onChange={(newValue) => {
+                                            if (newValue && newValue > 0) {
+                                                onChange(newValue)
+                                                onAppearanceChange({ ...appearance, surveyPopupDelay: newValue })
+                                            } else {
+                                                onChange(null)
+                                                onAppearanceChange({ ...appearance, surveyPopupDelay: undefined })
+                                            }
+                                        }}
+                                        className="w-12"
+                                    />{' '}
+                                    seconds.
+                                </div>
+                            )
+                        }}
+                    </LemonField>
+                </div>
             </div>
         </>
     )

frontend/src/types.ts

@@ -2642,12 +2642,13 @@ export interface SurveyAppearance {
     thankYouMessageDescriptionContentType?: SurveyQuestionDescriptionContentType
     autoDisappear?: boolean
     position?: string
+    shuffleQuestions?: boolean
+    surveyPopupDelay?: number
     // widget only
     widgetType?: 'button' | 'tab' | 'selector'
     widgetSelector?: string
     widgetLabel?: string
     widgetColor?: string
-    shuffleQuestions?: boolean
 }
 
 export interface SurveyQuestionBase {

livestream/docker-compose.yml

@@ -1,62 +1,62 @@
-version: "3.8"
+version: '3.8'
 
 services:
-  postgres:
-    image: postgres:16-alpine
-    restart: always
-    ports:
-      - "5432:5432"
-    environment:
-      POSTGRES_USER: postgres
-      POSTGRES_PASSWORD: postgres
-      POSTGRES_DB: liveevents
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U postgres"]
-      interval: 5s
-      timeout: 5s
+    postgres:
+        image: postgres:16-alpine
+        restart: always
+        ports:
+            - '5432:5432'
+        environment:
+            POSTGRES_USER: postgres
+            POSTGRES_PASSWORD: postgres
+            POSTGRES_DB: liveevents
+        healthcheck:
+            test: ['CMD-SHELL', 'pg_isready -U postgres']
+            interval: 5s
+            timeout: 5s
 
-  redis:
-    image: redis:alpine
-    restart: always
-    ports:
-      - "6379:6379"
+    redis:
+        image: redis:alpine
+        restart: always
+        ports:
+            - '6379:6379'
 
-  redpanda:
-    image: vectorized/redpanda:v23.2.17
-    command:
-      - redpanda start
-      - --smp 1
-      - --overprovisioned
-      - --node-id 0
-      - --kafka-addr PLAINTEXT://0.0.0.0:29092,OUTSIDE://0.0.0.0:9092
-      - --advertise-kafka-addr PLAINTEXT://redpanda:29092,OUTSIDE://localhost:9092
-      - --pandaproxy-addr 0.0.0.0:8082
-      - --advertise-pandaproxy-addr localhost:8082
-    ports:
-      - 8081:8081
-      - 8082:8082
-      - 9092:9092
-      - 29092:29092
+    redpanda:
+        image: vectorized/redpanda:v23.2.17
+        command:
+            - redpanda start
+            - --smp 1
+            - --overprovisioned
+            - --node-id 0
+            - --kafka-addr PLAINTEXT://0.0.0.0:29092,OUTSIDE://0.0.0.0:9092
+            - --advertise-kafka-addr PLAINTEXT://redpanda:29092,OUTSIDE://localhost:9092
+            - --pandaproxy-addr 0.0.0.0:8082
+            - --advertise-pandaproxy-addr localhost:8082
+        ports:
+            - 8081:8081
+            - 8082:8082
+            - 9092:9092
+            - 29092:29092
 
-  console:
-    image: docker.redpanda.com/redpandadata/console:v2.3.8
-    restart: on-failure
-    entrypoint: /bin/sh
-    command: -c "echo \"$$CONSOLE_CONFIG_FILE\" > /tmp/config.yml; /app/console"
-    environment:
-      CONFIG_FILEPATH: /tmp/config.yml
-      CONSOLE_CONFIG_FILE: |
-        kafka:
-          brokers: ["redpanda:29092"]
-          schemaRegistry:
-            enabled: true
-            urls: ["http://redpanda:8081"]
-        connect:
-          enabled: true
-          clusters:
-            - name: datagen
-              url: http://connect:8083
-    ports:
-      - "8088:8088"
-    depends_on:
-      - redpanda
+    console:
+        image: docker.redpanda.com/redpandadata/console:v2.3.8
+        restart: on-failure
+        entrypoint: /bin/sh
+        command: -c "echo \"$$CONSOLE_CONFIG_FILE\" > /tmp/config.yml; /app/console"
+        environment:
+            CONFIG_FILEPATH: /tmp/config.yml
+            CONSOLE_CONFIG_FILE: |
+                kafka:
+                  brokers: ["redpanda:29092"]
+                  schemaRegistry:
+                    enabled: true
+                    urls: ["http://redpanda:8081"]
+                connect:
+                  enabled: true
+                  clusters:
+                    - name: datagen
+                      url: http://connect:8083
+        ports:
+            - '8088:8088'
+        depends_on:
+            - redpanda

posthog/api/survey.py

@@ -134,6 +134,10 @@ def validate_appearance(self, value):
                 "You need to upgrade to PostHog Enterprise to use HTML in survey thank you message"
             )
 
+        survey_popup_delay_milliseconds = value.get("surveyPopupDelay")
+        if survey_popup_delay_milliseconds and survey_popup_delay_milliseconds < 0:
+            raise serializers.ValidationError("Survey popup delay must be a positive integer")
+
         return value
 
     def validate_questions(self, value):

posthog/api/test/test_survey.py

@@ -1249,6 +1249,7 @@ def test_create_basic_survey_question_validation(self):
                     "thankYouMessageHeader": "Thanks for your feedback!",
                     "thankYouMessageDescription": "<b>We'll use it to make notebooks better.<script>alert(0)</script>",
                     "shuffleQuestions": True,
+                    "surveyPopupDelay": 60,
                 },
             },
             format="json",
@@ -1271,6 +1272,7 @@ def test_create_basic_survey_question_validation(self):
             "thankYouMessageHeader": "Thanks for your feedback!",
             "thankYouMessageDescription": "<b>We'll use it to make notebooks better.</b>",
             "shuffleQuestions": True,
+            "surveyPopupDelay": 60,
         }
         assert response_data["created_by"]["id"] == self.user.id
 
@@ -1676,6 +1678,38 @@ def test_validate_thank_you_description_content_type(self):
         assert response.status_code == status.HTTP_400_BAD_REQUEST, response_data
         assert response_data["detail"] == "thankYouMessageDescriptionContentType must be one of ['text', 'html']"
 
+    def test_create_survey_with_survey_popup_delay(self):
+        response = self.client.post(
+            f"/api/projects/{self.team.id}/surveys/",
+            data={
+                "name": "Notebooks beta release survey",
+                "type": "popover",
+                "appearance": {
+                    "surveyPopupDelay": 6000,
+                },
+            },
+            format="json",
+        )
+        response_data = response.json()
+        assert response.status_code == status.HTTP_201_CREATED, response_data
+        assert response_data["appearance"]["surveyPopupDelay"] == 6000
+
+    def test_validate_survey_popup_delay(self):
+        response = self.client.post(
+            f"/api/projects/{self.team.id}/surveys/",
+            data={
+                "name": "Notebooks beta release survey",
+                "type": "popover",
+                "appearance": {
+                    "surveyPopupDelay": -100,
+                },
+            },
+            format="json",
+        )
+        response_data = response.json()
+        assert response.status_code == status.HTTP_400_BAD_REQUEST, response_data
+        assert response_data["detail"] == "Survey popup delay must be a positive integer"
+
     def test_create_survey_with_valid_question_description_content_type_html(self):
         response = self.client.post(
             f"/api/projects/{self.team.id}/surveys/",