From c393da527242c8a2142fc44eca8a55881ed5b216 Mon Sep 17 00:00:00 2001
From: Phani Raj <phani@posthog.com>
Date: Wed, 6 Nov 2024 19:36:32 -0600
Subject: [PATCH] feat(Experiments): Create New web experiment from dotcom UI
 (#26009)

Create Web Experiment from the New Experiment page.

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Juraj Majerik <juro.majerik@gmail.com>
Co-authored-by: Ross <rossagray@gmail.com>
---
 .../src/scenes/experiments/ExperimentForm.tsx | 47 ++++++++++++++++++-
 .../scenes/experiments/experimentLogic.tsx    |  5 ++
 .../scenes/experiments/experimentsLogic.ts    |  7 ++-
 3 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/frontend/src/scenes/experiments/ExperimentForm.tsx b/frontend/src/scenes/experiments/ExperimentForm.tsx
index bcae52d655911..d34838d40224f 100644
--- a/frontend/src/scenes/experiments/ExperimentForm.tsx
+++ b/frontend/src/scenes/experiments/ExperimentForm.tsx
@@ -13,6 +13,7 @@ import { LemonRadio } from 'lib/lemon-ui/LemonRadio'
 import { LemonSelect } from 'lib/lemon-ui/LemonSelect'
 import { capitalizeFirstLetter } from 'lib/utils'
 import { useEffect } from 'react'
+import { experimentsLogic } from 'scenes/experiments/experimentsLogic'
 import { insightDataLogic } from 'scenes/insights/insightDataLogic'
 import { insightLogic } from 'scenes/insights/insightLogic'
 
@@ -25,8 +26,9 @@ import { ExperimentInsightCreator } from './MetricSelector'
 
 const StepInfo = (): JSX.Element => {
     const { experiment, featureFlags } = useValues(experimentLogic)
-    const { addExperimentGroup, removeExperimentGroup, moveToNextFormStep } = useActions(experimentLogic)
-
+    const { addExperimentGroup, removeExperimentGroup, moveToNextFormStep, setExperimentType } =
+        useActions(experimentLogic)
+    const { webExperimentsAvailable } = useValues(experimentsLogic)
     return (
         <div>
             <div className="space-y-8">
@@ -48,6 +50,47 @@ const StepInfo = (): JSX.Element => {
                         />
                     </LemonField>
                 </div>
+                {webExperimentsAvailable && (
+                    <div className="mt-10">
+                        <h3 className="mb-1">Experiment type</h3>
+                        <div className="text-xs text-muted font-medium tracking-normal">
+                            Select your experiment setup, this cannot be changed once saved.
+                        </div>
+                        <LemonDivider />
+                        <LemonRadio
+                            value={experiment.type}
+                            className="space-y-2 -mt-2"
+                            onChange={(type) => {
+                                setExperimentType(type)
+                            }}
+                            options={[
+                                {
+                                    value: 'product',
+                                    label: (
+                                        <div className="translate-y-2">
+                                            <div>Product experiment</div>
+                                            <div className="text-xs text-muted">
+                                                Use custom code to manage how variants modify your product.
+                                            </div>
+                                        </div>
+                                    ),
+                                },
+                                {
+                                    value: 'web',
+                                    label: (
+                                        <div className="translate-y-2">
+                                            <div>No-code web experiment</div>
+                                            <div className="text-xs text-muted">
+                                                Define variants on your website using the PostHog toolbar, no coding
+                                                required.
+                                            </div>
+                                        </div>
+                                    ),
+                                },
+                            ]}
+                        />
+                    </div>
+                )}
                 <div className="mt-10">
                     <h3 className="mb-1">Variants</h3>
                     <div className="text-xs text-muted">Add up to 9 variants to test against your control.</div>
diff --git a/frontend/src/scenes/experiments/experimentLogic.tsx b/frontend/src/scenes/experiments/experimentLogic.tsx
index 615e6c5b28c9f..a928b09db82cd 100644
--- a/frontend/src/scenes/experiments/experimentLogic.tsx
+++ b/frontend/src/scenes/experiments/experimentLogic.tsx
@@ -69,6 +69,7 @@ import { getMinimumDetectableEffect, transformFiltersForWinningVariant } from '.
 const NEW_EXPERIMENT: Experiment = {
     id: 'new',
     name: '',
+    type: 'product',
     feature_flag_key: '',
     filters: {},
     metrics: [],
@@ -159,6 +160,7 @@ export const experimentLogic = kea<experimentLogicType>([
         setExperiment: (experiment: Partial<Experiment>) => ({ experiment }),
         createExperiment: (draft?: boolean) => ({ draft }),
         setNewExperimentInsight: (filters?: Partial<FilterType>) => ({ filters }),
+        setExperimentType: (type?: string) => ({ type }),
         setExperimentExposureInsight: (filters?: Partial<FilterType>) => ({ filters }),
         removeExperimentGroup: (idx: number) => ({ idx }),
         setEditExperiment: (editing: boolean) => ({ editing }),
@@ -422,6 +424,9 @@ export const experimentLogic = kea<experimentLogicType>([
                 })
             }
         },
+        setExperimentType: async ({ type }) => {
+            actions.setExperiment({ type: type })
+        },
         setNewExperimentInsight: async ({ filters }) => {
             let newInsightFilters
             const aggregationGroupTypeIndex = values.experiment.parameters?.aggregation_group_type_index
diff --git a/frontend/src/scenes/experiments/experimentsLogic.ts b/frontend/src/scenes/experiments/experimentsLogic.ts
index 4548efe5f9941..9f4c5bb1ca706 100644
--- a/frontend/src/scenes/experiments/experimentsLogic.ts
+++ b/frontend/src/scenes/experiments/experimentsLogic.ts
@@ -3,8 +3,9 @@ import Fuse from 'fuse.js'
 import { actions, connect, events, kea, path, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
 import api from 'lib/api'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { lemonToast } from 'lib/lemon-ui/LemonToast/LemonToast'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { featureFlagLogic, FeatureFlagsSet } from 'lib/logic/featureFlagLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { userLogic } from 'scenes/userLogic'
 
@@ -142,6 +143,10 @@ export const experimentsLogic = kea<experimentsLogicType>([
                 return experiments.length === 0 && !experimentsLoading && !values.searchTerm && !values.searchStatus
             },
         ],
+        webExperimentsAvailable: [
+            () => [featureFlagLogic.selectors.featureFlags],
+            (featureFlags: FeatureFlagsSet) => featureFlags[FEATURE_FLAGS.WEB_EXPERIMENTS],
+        ],
     })),
     events(({ actions }) => ({
         afterMount: () => {