chore: AB experiment to move difficult parts in settings

apps/web/modules/survey/editor/components/elements-view.tsx

@@ -72,6 +72,7 @@ interface ElementsViewProps {
   isStorageConfigured: boolean;
   quotas: TSurveyQuota[];
   isExternalUrlsAllowed: boolean;
+  customisationsInSettings?: boolean;
 }
 
 export const ElementsView = ({
@@ -91,6 +92,7 @@ export const ElementsView = ({
   isStorageConfigured = true,
   quotas,
   isExternalUrlsAllowed,
+  customisationsInSettings = false,
 }: ElementsViewProps) => {
   const { t } = useTranslation();
   const [logicDeletionWarning, setLogicDeletionWarning] = React.useState<{
@@ -921,23 +923,25 @@ export const ElementsView = ({
         {!isCxMode && (
           <>
             <AddEndingCardButton localSurvey={localSurvey} addEndingCard={addEndingCard} />
-            <hr />
-
-            <HiddenFieldsCard
-              localSurvey={localSurvey}
-              setLocalSurvey={setLocalSurvey}
-              setActiveElementId={setActiveElementId}
-              activeElementId={activeElementId}
-              quotas={quotas}
-            />
-
-            <SurveyVariablesCard
-              localSurvey={localSurvey}
-              setLocalSurvey={setLocalSurvey}
-              activeElementId={activeElementId}
-              setActiveElementId={setActiveElementId}
-              quotas={quotas}
-            />
+            {!customisationsInSettings && (
+              <>
+                <hr />
+                <HiddenFieldsCard
+                  localSurvey={localSurvey}
+                  setLocalSurvey={setLocalSurvey}
+                  setActiveElementId={setActiveElementId}
+                  activeElementId={activeElementId}
+                  quotas={quotas}
+                />
+                <SurveyVariablesCard
+                  localSurvey={localSurvey}
+                  setLocalSurvey={setLocalSurvey}
+                  activeElementId={activeElementId}
+                  setActiveElementId={setActiveElementId}
+                  quotas={quotas}
+                />
+              </>
+            )}
           </>
         )}
       </div>

apps/web/modules/survey/editor/components/hidden-fields-card.tsx

@@ -2,7 +2,7 @@
 
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { EyeOff } from "lucide-react";
+import { CheckIcon, EyeOff } from "lucide-react";
 import { useMemo, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
@@ -25,6 +25,7 @@ interface HiddenFieldsCardProps {
   activeElementId: string | null;
   setActiveElementId: (elementId: string | null) => void;
   quotas: TSurveyQuota[];
+  inSettings?: boolean;
 }
 
 export const HiddenFieldsCard = ({
@@ -33,6 +34,7 @@ export const HiddenFieldsCard = ({
   setActiveElementId,
   setLocalSurvey,
   quotas,
+  inSettings = false,
 }: HiddenFieldsCardProps) => {
   const open = activeElementId == "hidden";
   const [hiddenField, setHiddenField] = useState<string>("");
@@ -154,6 +156,105 @@ export const HiddenFieldsCard = ({
   // Auto Animate
   const [parent] = useAutoAnimate();
 
+  const content = (
+    <Collapsible.CollapsibleContent
+      className={inSettings ? "flex flex-col" : `flex flex-col px-4 ${open && "pb-6"}`}
+      ref={parent}>
+      {inSettings && <hr className="py-1 text-slate-600" />}
+      <div className={cn("flex flex-wrap gap-2", inSettings ? "p-3" : "")} ref={parent}>
+        {localSurvey.hiddenFields?.fieldIds && localSurvey.hiddenFields?.fieldIds?.length > 0 ? (
+          localSurvey.hiddenFields?.fieldIds?.map((fieldId) => {
+            return (
+              <Tag
+                key={fieldId}
+                onDelete={(fieldId) => handleDeleteHiddenField(fieldId)}
+                tagId={fieldId}
+                tagName={fieldId}
+              />
+            );
+          })
+        ) : (
+          <p className="mt-2 text-sm italic text-slate-500">
+            {t("environments.surveys.edit.no_hidden_fields_yet_add_first_one_below")}
+          </p>
+        )}
+      </div>
+      <form
+        className={inSettings ? "mt-5 p-3 pt-0" : "mt-5"}
+        onSubmit={(e) => {
+          e.preventDefault();
+          const existingElementIds = elements.map((element) => element.id);
+          const existingEndingCardIds = localSurvey.endings.map((ending) => ending.id);
+          const existingHiddenFieldIds = localSurvey.hiddenFields.fieldIds ?? [];
+          const existingVariableNames = localSurvey.variables.map((v) => v.name);
+          const validateIdError = validateId(
+            hiddenField,
+            existingElementIds,
+            existingEndingCardIds,
+            existingHiddenFieldIds,
+            existingVariableNames
+          );
+
+          if (validateIdError) {
+            toast.error(getValidateIdErrorMessage(validateIdError, "hiddenField", t));
+            return;
+          }
+
+          updateSurvey({
+            fieldIds: [...(localSurvey.hiddenFields?.fieldIds || []), hiddenField],
+            enabled: true,
+          });
+          toast.success(t("environments.surveys.edit.hidden_field_added_successfully"));
+          setHiddenField("");
+        }}>
+        <Label htmlFor="hiddenField">{t("common.hidden_field")}</Label>
+        <div className="mt-2 flex items-center gap-2">
+          <Input
+            autoFocus
+            id="hiddenField"
+            name="hiddenField"
+            value={hiddenField}
+            onChange={(e) => setHiddenField(e.target.value.trim())}
+            placeholder={t("environments.surveys.edit.type_field_id") + "..."}
+          />
+          <Button variant="secondary" type="submit" className="h-10 whitespace-nowrap">
+            {t("environments.surveys.edit.add_hidden_field_id")}
+          </Button>
+        </div>
+      </form>
+    </Collapsible.CollapsibleContent>
+  );
+
+  if (inSettings) {
+    return (
+      <Collapsible.Root
+        open={open}
+        onOpenChange={setOpen}
+        className={cn(
+          open ? "" : "hover:bg-slate-50",
+          "w-full space-y-2 rounded-lg border border-slate-300 bg-white"
+        )}>
+        <Collapsible.CollapsibleTrigger asChild className="h-full w-full cursor-pointer">
+          <div className="inline-flex px-4 py-4">
+            <div className="flex items-center pl-2 pr-5">
+              <CheckIcon
+                strokeWidth={3}
+                className="h-7 w-7 rounded-full border border-green-300 bg-green-100 p-1.5 text-green-600"
+              />
+            </div>
+            <div>
+              <p className="font-semibold text-slate-800">{t("common.hidden_fields")}</p>
+              <p className="mt-1 text-sm text-slate-500">
+                Pass hidden data into your survey without showing it to respondents.
+              </p>
+            </div>
+          </div>
+        </Collapsible.CollapsibleTrigger>
+        {content}
+      </Collapsible.Root>
+    );
+  }
+
   return (
     <div className={cn(open ? "shadow-lg" : "shadow-md", "group z-10 flex flex-row rounded-lg bg-white")}>
       <div
@@ -178,69 +279,7 @@ export const HiddenFieldsCard = ({
             </div>
           </div>
         </Collapsible.CollapsibleTrigger>
-        <Collapsible.CollapsibleContent className={`flex flex-col px-4 ${open && "pb-6"}`} ref={parent}>
-          <div className="flex flex-wrap gap-2" ref={parent}>
-            {localSurvey.hiddenFields?.fieldIds && localSurvey.hiddenFields?.fieldIds?.length > 0 ? (
-              localSurvey.hiddenFields?.fieldIds?.map((fieldId) => {
-                return (
-                  <Tag
-                    key={fieldId}
-                    onDelete={(fieldId) => handleDeleteHiddenField(fieldId)}
-                    tagId={fieldId}
-                    tagName={fieldId}
-                  />
-                );
-              })
-            ) : (
-              <p className="mt-2 text-sm italic text-slate-500">
-                {t("environments.surveys.edit.no_hidden_fields_yet_add_first_one_below")}
-              </p>
-            )}
-          </div>
-          <form
-            className="mt-5"
-            onSubmit={(e) => {
-              e.preventDefault();
-              const existingElementIds = elements.map((element) => element.id);
-              const existingEndingCardIds = localSurvey.endings.map((ending) => ending.id);
-              const existingHiddenFieldIds = localSurvey.hiddenFields.fieldIds ?? [];
-              const existingVariableNames = localSurvey.variables.map((v) => v.name);
-              const validateIdError = validateId(
-                hiddenField,
-                existingElementIds,
-                existingEndingCardIds,
-                existingHiddenFieldIds,
-                existingVariableNames
-              );
-
-              if (validateIdError) {
-                toast.error(getValidateIdErrorMessage(validateIdError, "hiddenField", t));
-                return;
-              }
-
-              updateSurvey({
-                fieldIds: [...(localSurvey.hiddenFields?.fieldIds || []), hiddenField],
-                enabled: true,
-              });
-              toast.success(t("environments.surveys.edit.hidden_field_added_successfully"));
-              setHiddenField("");
-            }}>
-            <Label htmlFor="hiddenField">{t("common.hidden_field")}</Label>
-            <div className="mt-2 flex items-center gap-2">
-              <Input
-                autoFocus
-                id="hiddenField"
-                name="hiddenField"
-                value={hiddenField}
-                onChange={(e) => setHiddenField(e.target.value.trim())}
-                placeholder={t("environments.surveys.edit.type_field_id") + "..."}
-              />
-              <Button variant="secondary" type="submit" className="h-10 whitespace-nowrap">
-                {t("environments.surveys.edit.add_hidden_field_id")}
-              </Button>
-            </div>
-          </form>
-        </Collapsible.CollapsibleContent>
+        {content}
       </Collapsible.Root>
     </div>
   );

apps/web/modules/survey/editor/components/settings-view.tsx

@@ -7,10 +7,12 @@ import { TSurvey } from "@formbricks/types/surveys/types";
 import { TargetingCard } from "@/modules/ee/contacts/segments/components/targeting-card";
 import { QuotasCard } from "@/modules/ee/quotas/components/quotas-card";
 import { TTeamPermission } from "@/modules/ee/teams/project-teams/types/team";
+import { HiddenFieldsCard } from "@/modules/survey/editor/components/hidden-fields-card";
 import { HowToSendCard } from "@/modules/survey/editor/components/how-to-send-card";
 import { RecontactOptionsCard } from "@/modules/survey/editor/components/recontact-options-card";
 import { ResponseOptionsCard } from "@/modules/survey/editor/components/response-options-card";
 import { SurveyPlacementCard } from "@/modules/survey/editor/components/survey-placement-card";
+import { SurveyVariablesCard } from "@/modules/survey/editor/components/survey-variables-card";
 import { TargetingLockedCard } from "@/modules/survey/editor/components/targeting-locked-card";
 import { WhenToSendCard } from "@/modules/survey/editor/components/when-to-send-card";
 
@@ -29,6 +31,10 @@ interface SettingsViewProps {
   isFormbricksCloud: boolean;
   isQuotasAllowed: boolean;
   quotas: TSurveyQuota[];
+  // TODO: experiment cleanup — customisations_in_settings
+  customisationsInSettings?: boolean;
+  activeElementId?: string | null;
+  setActiveElementId?: (elementId: string | null) => void;
 }
 
 export const SettingsView = ({
@@ -46,6 +52,9 @@ export const SettingsView = ({
   projectPermission,
   isFormbricksCloud,
   quotas,
+  customisationsInSettings = false,
+  activeElementId,
+  setActiveElementId,
 }: SettingsViewProps) => {
   const isAppSurvey = localSurvey.type === "app";
 
@@ -107,6 +116,27 @@ export const SettingsView = ({
           environmentId={environment.id}
         />
       )}
+
+      {customisationsInSettings && setActiveElementId && (
+        <>
+          <HiddenFieldsCard
+            localSurvey={localSurvey}
+            setLocalSurvey={setLocalSurvey}
+            setActiveElementId={setActiveElementId}
+            activeElementId={activeElementId ?? null}
+            quotas={quotas}
+            inSettings
+          />
+          <SurveyVariablesCard
+            localSurvey={localSurvey}
+            setLocalSurvey={setLocalSurvey}
+            activeElementId={activeElementId ?? null}
+            setActiveElementId={setActiveElementId}
+            quotas={quotas}
+            inSettings
+          />
+        </>
+      )}
     </div>
   );
 };

apps/web/modules/survey/editor/components/survey-editor.tsx

@@ -51,6 +51,7 @@ interface SurveyEditorProps {
   quotas: TSurveyQuota[];
   isExternalUrlsAllowed: boolean;
   publicDomain: string;
+  customisationsInSettings?: boolean;
 }
 
 export const SurveyEditor = ({
@@ -80,6 +81,7 @@ export const SurveyEditor = ({
   quotas,
   isExternalUrlsAllowed,
   publicDomain,
+  customisationsInSettings = false,
 }: SurveyEditorProps) => {
   const [activeView, setActiveView] = useState<TSurveyEditorTabs>("elements");
   const [activeElementId, setActiveElementId] = useState<string | null>(null);
@@ -220,6 +222,7 @@ export const SurveyEditor = ({
               isStorageConfigured={isStorageConfigured}
               quotas={quotas}
               isExternalUrlsAllowed={isExternalUrlsAllowed}
+              customisationsInSettings={customisationsInSettings}
             />
           )}
 
@@ -266,6 +269,9 @@ export const SurveyEditor = ({
               isFormbricksCloud={isFormbricksCloud}
               isQuotasAllowed={isQuotasAllowed}
               quotas={quotas}
+              customisationsInSettings={customisationsInSettings}
+              activeElementId={activeElementId}
+              setActiveElementId={setActiveElementId}
             />
           )}
 

apps/web/modules/survey/editor/components/survey-variables-card.tsx

@@ -2,7 +2,7 @@
 
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { FileDigitIcon } from "lucide-react";
+import { CheckIcon, FileDigitIcon } from "lucide-react";
 import { type Dispatch, type SetStateAction } from "react";
 import { useTranslation } from "react-i18next";
 import { TSurveyQuota } from "@formbricks/types/quota";
@@ -17,6 +17,7 @@ interface SurveyVariablesCardProps {
   activeElementId: string | null;
   setActiveElementId: (id: string | null) => void;
   quotas: TSurveyQuota[];
+  inSettings?: boolean;
 }
 
 const variablesCardId = `fb-variables-${Date.now()}`;
@@ -27,6 +28,7 @@ export const SurveyVariablesCard = ({
   activeElementId,
   setActiveElementId,
   quotas,
+  inSettings = false,
 }: SurveyVariablesCardProps) => {
   const open = activeElementId === variablesCardId;
   const { t } = useTranslation();
@@ -41,6 +43,75 @@ export const SurveyVariablesCard = ({
     }
   };
 
+  const content = (
+    <Collapsible.CollapsibleContent
+      className={inSettings ? "flex flex-col" : `flex flex-col px-4 ${open && "pb-6"}`}
+      ref={parent}>
+      {inSettings && <hr className="py-1 text-slate-600" />}
+      <div className={cn("flex flex-col gap-2", inSettings ? "p-3" : "")} ref={parent}>
+        {localSurvey.variables.length > 0 ? (
+          localSurvey.variables.map((variable) => (
+            <SurveyVariablesCardItem
+              key={variable.id}
+              mode="edit"
+              variable={variable}
+              localSurvey={localSurvey}
+              setLocalSurvey={setLocalSurvey}
+              quotas={quotas}
+            />
+          ))
+        ) : (
+          <p className="mt-2 text-sm italic text-slate-500">
+            {t("environments.surveys.edit.no_variables_yet_add_first_one_below")}
+          </p>
+        )}
+      </div>
+
+      <div className={inSettings ? "p-3 pt-0" : ""}>
+        <SurveyVariablesCardItem
+          mode="create"
+          localSurvey={localSurvey}
+          setLocalSurvey={setLocalSurvey}
+          quotas={quotas}
+        />
+      </div>
+
+      {localSurvey.variables.length > 0 && (
+        <div className={cn("mt-6", inSettings ? "p-3 pt-0" : "")}>
+          <OptionIds type="variables" variables={localSurvey.variables} />
+        </div>
+      )}
+    </Collapsible.CollapsibleContent>
+  );
+
+  if (inSettings) {
+    return (
+      <Collapsible.Root
+        open={open}
+        onOpenChange={setOpenState}
+        className={cn(
+          open ? "" : "hover:bg-slate-50",
+          "w-full space-y-2 rounded-lg border border-slate-300 bg-white"
+        )}>
+        <Collapsible.CollapsibleTrigger asChild className="h-full w-full cursor-pointer">
+          <div className="inline-flex px-4 py-4">
+            <div className="flex items-center pl-2 pr-5">
+              <CheckIcon
+                strokeWidth={3}
+                className="h-7 w-7 rounded-full border border-green-300 bg-green-100 p-1.5 text-green-600"
+              />
+            </div>
+            <div>
+              <p className="font-semibold text-slate-800">{t("common.variables")}</p>
+              <p className="mt-1 text-sm text-slate-500">Define and compute values throughout your survey.</p>
+            </div>
+          </div>
+        </Collapsible.CollapsibleTrigger>
+        {content}
+      </Collapsible.Root>
+    );
+  }
+
   return (
     <div className={cn(open ? "shadow-lg" : "shadow-md", "group z-10 flex flex-row rounded-lg bg-white")}>
       <div
@@ -67,39 +138,7 @@ export const SurveyVariablesCard = ({
             </div>
           </div>
         </Collapsible.CollapsibleTrigger>
-        <Collapsible.CollapsibleContent className={`flex flex-col px-4 ${open && "pb-6"}`} ref={parent}>
-          <div className="flex flex-col gap-2" ref={parent}>
-            {localSurvey.variables.length > 0 ? (
-              localSurvey.variables.map((variable) => (
-                <SurveyVariablesCardItem
-                  key={variable.id}
-                  mode="edit"
-                  variable={variable}
-                  localSurvey={localSurvey}
-                  setLocalSurvey={setLocalSurvey}
-                  quotas={quotas}
-                />
-              ))
-            ) : (
-              <p className="mt-2 text-sm italic text-slate-500">
-                {t("environments.surveys.edit.no_variables_yet_add_first_one_below")}
-              </p>
-            )}
-          </div>
-
-          <SurveyVariablesCardItem
-            mode="create"
-            localSurvey={localSurvey}
-            setLocalSurvey={setLocalSurvey}
-            quotas={quotas}
-          />
-
-          {localSurvey.variables.length > 0 && (
-            <div className="mt-6">
-              <OptionIds type="variables" variables={localSurvey.variables} />
-            </div>
-          )}
-        </Collapsible.CollapsibleContent>
+        {content}
       </Collapsible.Root>
     </div>
   );

apps/web/modules/survey/editor/page.tsx

@@ -8,6 +8,7 @@ import {
   UNSPLASH_ACCESS_KEY,
 } from "@/lib/constants";
 import { getPublicDomain } from "@/lib/getPublicUrl";
+import { getPostHogFeatureFlag } from "@/lib/posthog";
 import { getTranslate } from "@/lingodotdev/server";
 import { getContactAttributeKeys } from "@/modules/ee/contacts/lib/contact-attribute-keys";
 import { getSegments } from "@/modules/ee/contacts/segments/lib/segments";
@@ -90,10 +91,12 @@ export const SurveyEditorPage = async (props: {
   ]);
 
   const quotas = isQuotasAllowed && survey ? await getQuotas(survey.id) : [];
-  const [projectLanguages, teamMemberDetails] = await Promise.all([
+  const [projectLanguages, teamMemberDetails, customisationsInSettingsFlag] = await Promise.all([
     getProjectLanguages(projectWithTeamIds.id),
     getTeamMemberDetails(projectWithTeamIds.teamIds),
+    getPostHogFeatureFlag(session.user.id, "customisations_in_settings"),
   ]);
+  const customisationsInSettings = customisationsInSettingsFlag === "in-settings";
 
   if (
     !survey ||
@@ -138,6 +141,7 @@ export const SurveyEditorPage = async (props: {
       quotas={quotas}
       isExternalUrlsAllowed={isExternalUrlsAllowed}
       publicDomain={publicDomain}
+      customisationsInSettings={customisationsInSettings}
     />
   );
 };