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: 'Survey Templates',
+    },
     [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

@@ -29,7 +29,7 @@ interface SurveyAppearanceProps {
     type: SurveyQuestionType
     question: string
     appearance: SurveyAppearanceType
-    surveyQuestionItem: RatingSurveyQuestion | SurveyQuestion | MultipleSurveyQuestion
+    surveyQuestionItem: SurveyQuestion
     description?: string | null
     link?: string | null
     readOnly?: boolean
@@ -100,7 +100,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.6, 0.6); /* IE 9 */
+        -webkit-transform: scale(0.6, 0.6); /* Safari */
+        transform: scale(0.6, 0.6);
+    }
+}

frontend/src/scenes/surveys/SurveyTemplates.tsx

@@ -0,0 +1,51 @@
+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 { surveyTemplatesLogic } from './surveyTemplatesLogic'
+
+export const scene: SceneExport = {
+    component: SurveyTemplates,
+}
+
+export function SurveyTemplates(): JSX.Element {
+    const { openSurveyTemplate } = useActions(surveyTemplatesLogic)
+
+    return (
+        <>
+            <div className="flex flex-row flex-wrap gap-6 ml-8 mt-6">
+                {defaultSurveyTemplates.map((template, idx) => {
+                    return (
+                        <div
+                            className="flex flex-col items-center max-w-100"
+                            key={idx}
+                            onClick={(template) => openSurveyTemplate(template)}
+                        >
+                            <span className="mb-2">
+                                <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={{}}
+                                        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

@@ -85,6 +85,9 @@ export function Surveys(): JSX.Element {
                         <LemonButton type="primary" to={urls.survey('new')} data-attr="new-survey">
                             New survey
                         </LemonButton>
+                        <LemonButton type="primary" to={urls.surveyTemplates()} data-attr="survey-templates">
+                            Create from template
+                        </LemonButton>
                         <LemonButton
                             type="secondary"
                             icon={<IconSettings />}