feat(surveys): templates

frontend/src/scenes/appScenes.ts

@@ -39,6 +39,7 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.EarlyAccessFeature]: () => import('./early-access-features/EarlyAccessFeature'),
     [Scene.Surveys]: () => import('./surveys/Surveys'),
     [Scene.Survey]: () => import('./surveys/Survey'),
+    [Scene.SurveyTemplates]: () => import('./surveys/SurveyTemplates'),
     [Scene.DataWarehouse]: () => import('./data-warehouse/external/DataWarehouseExternalScene'),
     [Scene.DataWarehousePosthog]: () => import('./data-warehouse/posthog/DataWarehousePosthogScene'),
     [Scene.DataWarehouseExternal]: () => import('./data-warehouse/external/DataWarehouseExternalScene'),

frontend/src/scenes/sceneLogic.ts

@@ -34,6 +34,7 @@ const sceneNavAlias: Partial<Record<Scene, Scene>> = {
     [Scene.FeatureFlag]: Scene.FeatureFlags,
     [Scene.EarlyAccessFeature]: Scene.EarlyAccessFeatures,
     [Scene.Survey]: Scene.Surveys,
+    [Scene.SurveyTemplates]: Scene.Surveys,
     [Scene.DataWarehouseTable]: Scene.DataWarehouse,
     [Scene.DataWarehousePosthog]: Scene.DataWarehouse,
     [Scene.DataWarehouseExternal]: Scene.DataWarehouse,

frontend/src/scenes/sceneTypes.ts

@@ -42,6 +42,7 @@ export enum Scene {
     EarlyAccessFeature = 'EarlyAccessFeature',
     Surveys = 'Surveys',
     Survey = 'Survey',
+    SurveyTemplates = 'SurveyTemplates',
     DataWarehouse = 'DataWarehouse',
     DataWarehousePosthog = 'DataWarehousePosthog',
     DataWarehouseExternal = 'DataWarehouseExternal',

frontend/src/scenes/scenes.ts

@@ -162,6 +162,10 @@ export const sceneConfigurations: Partial<Record<Scene, SceneConfig>> = {
         projectBased: true,
         name: 'Survey',
     },
+    [Scene.SurveyTemplates]: {
+        projectBased: true,
+        name: 'New survey',
+    },
     [Scene.DataWarehouse]: {
         projectBased: true,
         name: 'Data Warehouse',
@@ -429,6 +433,7 @@ export const routes: Record<string, Scene> = {
     [urls.earlyAccessFeature(':id')]: Scene.EarlyAccessFeature,
     [urls.surveys()]: Scene.Surveys,
     [urls.survey(':id')]: Scene.Survey,
+    [urls.surveyTemplates()]: Scene.SurveyTemplates,
     [urls.dataWarehouse()]: Scene.DataWarehouse,
     [urls.dataWarehouseTable(':id')]: Scene.DataWarehouseTable,
     [urls.dataWarehousePosthog()]: Scene.DataWarehousePosthog,

frontend/src/scenes/surveys/SurveyAppearance.tsx

@@ -30,7 +30,7 @@ interface SurveyAppearanceProps {
     type: SurveyQuestionType
     question: string
     appearance: SurveyAppearanceType
-    surveyQuestionItem: RatingSurveyQuestion | SurveyQuestion | MultipleSurveyQuestion
+    surveyQuestionItem: SurveyQuestion
     description?: string | null
     link?: string | null
     readOnly?: boolean
@@ -101,7 +101,7 @@ export function SurveyAppearance({
 
     return (
         <>
-            <h3 className="mb-4 text-center">Preview</h3>
+            {!readOnly && <h3 className="mb-4 text-center">Preview</h3>}
             {!hideSubmittedSurvey && (
                 <>
                     {type === SurveyQuestionType.Rating && (

frontend/src/scenes/surveys/SurveyTemplates.scss

@@ -0,0 +1,21 @@
+@import '../../styles/mixins';
+
+.SurveyTemplateContainer {
+    display: flex;
+    align-items: center;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    min-height: 300px;
+    margin-top: 2px;
+
+    &:hover {
+        cursor: pointer;
+        border-color: var(--primary-light);
+    }
+
+    .SurveyTemplate {
+        -ms-transform: scale(0.8, 0.8); /* IE 9 */
+        -webkit-transform: scale(0.8, 0.8); /* Safari */
+        transform: scale(0.8, 0.8);
+    }
+}

frontend/src/scenes/surveys/SurveyTemplates.tsx

@@ -0,0 +1,64 @@
+import { SceneExport } from 'scenes/sceneTypes'
+import { SurveyAppearance } from './SurveyAppearance'
+import { defaultSurveyTemplates } from './constants'
+import { SurveyQuestion } from '~/types'
+import './SurveyTemplates.scss'
+import { useActions } from 'kea'
+import { PageHeader } from 'lib/components/PageHeader'
+import { LemonButton } from '@posthog/lemon-ui'
+import { urls } from 'scenes/urls'
+import { surveyLogic } from './surveyLogic'
+
+export const scene: SceneExport = {
+    component: SurveyTemplates,
+}
+
+export function SurveyTemplates(): JSX.Element {
+    const { setSurveyTemplateValues } = useActions(surveyLogic({ id: 'new' }))
+
+    return (
+        <>
+            <PageHeader
+                title={'New survey'}
+                buttons={
+                    <LemonButton type="primary" to={urls.survey('new')} data-attr="new-survey">
+                        Create blank survey
+                    </LemonButton>
+                }
+            />
+            <div className="flex flex-row flex-wrap gap-10 ml-8 mt-8">
+                {defaultSurveyTemplates.map((template, idx) => {
+                    return (
+                        <div
+                            className="flex flex-col items-center"
+                            key={idx}
+                            onClick={() =>
+                                setSurveyTemplateValues({ name: template.type, questions: template.questions })
+                            }
+                        >
+                            <span className="mb-2 text-md">
+                                <b>{template.type}</b>
+                            </span>
+                            <div className="SurveyTemplateContainer">
+                                <div className="SurveyTemplate">
+                                    <SurveyAppearance
+                                        key={idx}
+                                        type={template.questions[0].type}
+                                        question={template.questions[0].question}
+                                        appearance={{ whiteLabel: true }}
+                                        surveyQuestionItem={template.questions[0] as SurveyQuestion}
+                                        onAppearanceChange={() => {}}
+                                        readOnly
+                                    />
+                                </div>
+                            </div>
+                            <span className="flex flex-wrap text-xs text-muted max-w-80 font-medium mt-3">
+                                {template.description}
+                            </span>
+                        </div>
+                    )
+                })}
+            </div>
+        </>
+    )
+}

frontend/src/scenes/surveys/Surveys.tsx

@@ -78,8 +78,8 @@ export function Surveys(): JSX.Element {
                 }
                 buttons={
                     <>
-                        <LemonButton type="primary" to={urls.survey('new')} data-attr="new-survey">
-                            New survey
+                        <LemonButton type="primary" to={urls.surveyTemplates()} data-attr="new-survey">
+                            New
                         </LemonButton>
                         <LemonButton
                             type="secondary"

frontend/src/scenes/surveys/constants.ts → frontend/src/scenes/surveys/constants.tsx

@@ -146,3 +146,103 @@ export const NEW_SURVEY: NewSurvey = {
     archived: false,
     appearance: defaultSurveyAppearance,
 }
+
+export enum SurveyTemplateTypes {
+    Interview = 'User interview',
+    NPS = 'Net promoter score (NPS)',
+    CSAT = 'Customer satisfaction score (CSAT)',
+    CES = 'Customer effort score (CES)',
+    CCR = 'Customer churn rate (CCR)',
+    Superhuman = 'Product-market fit (Superhuman)',
+}
+
+export const defaultSurveyTemplates = [
+    {
+        type: SurveyTemplateTypes.Interview,
+        questions: [
+            {
+                type: SurveyQuestionType.Link,
+                question: 'Would you be interested in participating in a customer interview?',
+                description: 'We are looking for feedback on our product and would love to hear from you!',
+                link: 'https://calendly.com/',
+            },
+        ],
+        description: <>Send users straight to your calendar.</>,
+    },
+    {
+        type: SurveyTemplateTypes.NPS,
+        questions: [
+            {
+                type: SurveyQuestionType.Rating,
+                question: 'How likely are you to recommend us to a friend?',
+                description: '',
+                display: 'number',
+                scale: 10,
+                lowerBoundLabel: 'Unlikely',
+                upperBoundLabel: 'Very likely',
+            },
+        ],
+        description: 'Get an industry-recognized benchmark.',
+    },
+    {
+        type: SurveyTemplateTypes.Superhuman,
+        questions: [
+            {
+                type: SurveyQuestionType.SingleChoice,
+                question: 'How would you feel if you could no longer use PostHog?',
+                choices: ['Not disappointed', 'Somewhat disappointed', 'Very disappointed'],
+            },
+        ],
+        description: "If 40% say 'very disappointed', you're at product-market fit.",
+    },
+    {
+        type: SurveyTemplateTypes.CSAT,
+        questions: [
+            {
+                type: SurveyQuestionType.Rating,
+                question: 'How satisfied are you with PostHog surveys?',
+                description: '',
+                display: 'emoji',
+                scale: 5,
+                lowerBoundLabel: 'Very dissatisfied',
+                upperBoundLabel: 'Very satisfied',
+            },
+        ],
+        description: 'Works best after a checkout or support flow.',
+    },
+    {
+        type: SurveyTemplateTypes.CES,
+        questions: [
+            {
+                type: SurveyQuestionType.Rating,
+                question: 'How easy was it to use our product?',
+                description: '',
+                display: 'emoji',
+                scale: 5,
+                lowerBoundLabel: 'Very difficult',
+                upperBoundLabel: 'Very easy',
+            },
+        ],
+        description: 'Works well with churn surveys.',
+    },
+    {
+        type: SurveyTemplateTypes.CCR,
+        questions: [
+            {
+                type: SurveyQuestionType.MultipleChoice,
+                question: "We're sorry to see you go. What's your reason for unsubscribing?",
+                choices: [
+                    'I no longer need the product',
+                    'I found a better product',
+                    'I found the product too difficult to use',
+                    'Other',
+                ],
+            },
+            {
+                type: SurveyQuestionType.Open,
+                question: "Anything else you'd like to share?",
+            },
+        ],
+        description: 'Find out if it was something you said.',
+    },
+]

frontend/src/scenes/surveys/surveyLogic.tsx

@@ -2,7 +2,7 @@ import { lemonToast } from '@posthog/lemon-ui'
 import { kea, path, props, key, listeners, afterMount, reducers, actions, selectors, connect } from 'kea'
 import { forms } from 'kea-forms'
 import { loaders } from 'kea-loaders'
-import { router, urlToAction } from 'kea-router'
+import { actionToUrl, router, urlToAction } from 'kea-router'
 import api from 'lib/api'
 import { urls } from 'scenes/urls'
 import {
@@ -96,6 +96,7 @@ export const surveyLogic = kea<surveyLogicType>([
         archiveSurvey: true,
         setCurrentQuestionIndexAndType: (idx: number, type: SurveyQuestionType) => ({ idx, type }),
         setWritingHTMLDescription: (writingHTML: boolean) => ({ writingHTML }),
+        setSurveyTemplateValues: (template: any) => ({ template }),
     }),
     loaders(({ props, actions, values }) => ({
         survey: {
@@ -110,7 +111,11 @@ export const surveyLogic = kea<surveyLogicType>([
                         throw error
                     }
                 }
-                return { ...NEW_SURVEY }
+                if (props.id === 'new' && router.values.hashParams.fromTemplate) {
+                    return values.survey
+                } else {
+                    return { ...NEW_SURVEY }
+                }
             },
             createSurvey: async (surveyPayload: Partial<Survey>) => {
                 return await api.surveys.create(sanitizeQuestions(surveyPayload))
@@ -293,6 +298,12 @@ export const surveyLogic = kea<surveyLogicType>([
                         },
                     }
                 },
+                setSurveyTemplateValues: (state, { template }) => {
+                    return {
+                        ...state,
+                        ...template,
+                    }
+                },
             },
         ],
         currentQuestionIndexAndType: [
@@ -541,6 +552,14 @@ export const surveyLogic = kea<surveyLogicType>([
             }
         },
     })),
+    actionToUrl(({ values }) => ({
+        setSurveyTemplateValues: () => {
+            const hashParams = router.values.hashParams
+            hashParams['fromTemplate'] = true
+
+            return [urls.survey(values.survey.id), router.values.searchParams, hashParams]
+        },
+    })),
     afterMount(async ({ props, actions }) => {
         if (props.id !== 'new') {
             await actions.loadSurvey()

frontend/src/scenes/urls.ts

@@ -106,12 +106,13 @@ export const urls = {
     earlyAccessFeatures: (): string => '/early_access_features',
     earlyAccessFeature: (id: ':id' | 'new' | string): string => `/early_access_features/${id}`,
     surveys: (): string => '/surveys',
+    survey: (id: ':id' | 'new' | string): string => `/surveys/${id}`,
+    surveyTemplates: (): string => '/survey_templates',
     dataWarehouse: (): string => '/warehouse',
     dataWarehouseTable: (id: ':id' | 'new' | string): string => `/warehouse/${id}`,
     dataWarehousePosthog: (): string => '/data-warehouse/posthog',
     dataWarehouseExternal: (): string => '/data-warehouse/external',
     dataWarehouseSavedQueries: (): string => '/data-warehouse/views',
-    survey: (id: ':id' | 'new' | string): string => `/surveys/${id}`,
     annotations: (): string => '/annotations',
     annotation: (id: AnnotationType['id'] | ':id'): string => `/annotations/${id}`,
     projectApps: (tab?: PluginTab): string => `/project/apps${tab ? `?tab=${tab}` : ''}`,