fix: Improved UX for survey background selection (#1931)

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/AnimatedSurveyBg.tsx

@@ -1,14 +1,12 @@
 import { useState } from "react";
 
-import { TSurvey } from "@formbricks/types/surveys";
-
 interface AnimatedSurveyBgProps {
-  localSurvey?: TSurvey;
   handleBgChange: (bg: string, bgType: string) => void;
+  background: string;
 }
 
-export default function AnimatedSurveyBg({ localSurvey, handleBgChange }: AnimatedSurveyBgProps) {
-  const [color, setColor] = useState(localSurvey?.styling?.background?.bg || "#ffff");
+export default function AnimatedSurveyBg({ handleBgChange, background }: AnimatedSurveyBgProps) {
+  const [color, setColor] = useState(background || "#ffff");
   const [hoveredVideo, setHoveredVideo] = useState<number | null>(null);
 
   const animationFiles = {

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ColorSurveyBg.tsx

@@ -1,16 +1,15 @@
 import { useState } from "react";
 
-import { TSurvey } from "@formbricks/types/surveys";
 import { ColorPicker } from "@formbricks/ui/ColorPicker";
 
 interface ColorSurveyBgBgProps {
-  localSurvey?: TSurvey;
   handleBgChange: (bg: string, bgType: string) => void;
   colours: string[];
+  background: string;
 }
 
-export default function ColorSurveyBg({ localSurvey, handleBgChange, colours }: ColorSurveyBgBgProps) {
-  const [color, setColor] = useState(localSurvey?.styling?.background?.bg || "#ffff");
+export default function ColorSurveyBg({ handleBgChange, colours, background }: ColorSurveyBgBgProps) {
+  const [color, setColor] = useState(background || "#ffff");
 
   const handleBg = (x: string) => {
     setColor(x);

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ImageSurveyBg.tsx

@@ -1,12 +1,12 @@
-import { TSurvey } from "@formbricks/types/surveys";
 import FileInput from "@formbricks/ui/FileInput";
 
 interface ImageSurveyBgBgProps {
-  localSurvey?: TSurvey;
+  environmentId: string;
   handleBgChange: (url: string, bgType: string) => void;
+  background: string;
 }
 
-export default function ImageSurveyBg({ localSurvey, handleBgChange }: ImageSurveyBgBgProps) {
+export default function ImageSurveyBg({ environmentId, handleBgChange, background }: ImageSurveyBgBgProps) {
   const isUrl = (str: string) => {
     try {
       new URL(str);
@@ -16,9 +16,7 @@ export default function ImageSurveyBg({ localSurvey, handleBgChange }: ImageSurv
     }
   };
 
-  const fileUrl = isUrl(localSurvey?.styling?.background?.bg ?? "")
-    ? localSurvey?.styling?.background?.bg ?? ""
-    : "";
+  const fileUrl = isUrl(background ?? "") ? background ?? "" : "";
 
   return (
     <div className="mt-2 w-full">
@@ -26,12 +24,12 @@ export default function ImageSurveyBg({ localSurvey, handleBgChange }: ImageSurv
         <FileInput
           id="survey-bg-file-input"
           allowedFileExtensions={["png", "jpeg", "jpg"]}
-          environmentId={localSurvey?.environmentId}
+          environmentId={environmentId}
           onFileUpload={(url: string[]) => {
             if (url.length > 0) {
               handleBgChange(url[0], "image");
             } else {
-              handleBgChange("#ffff", "color");
+              handleBgChange("", "image");
             }
           }}
           fileUrl={fileUrl}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { TSurvey } from "@formbricks/types/surveys";
 
@@ -29,16 +29,51 @@ export default function SurveyBgSelectorTab({
   colours,
   bgType,
 }: SurveyBgSelectorTabProps) {
+  const background = localSurvey.styling?.background;
+  const [backgrounds, setBackgrounds] = useState({
+    image: background?.bgType === "image" ? background.bg : "",
+    animation: background?.bgType === "animation" ? background.bg : "",
+    color: background?.bgType === "color" ? background.bg : "",
+  });
+
+  useEffect(() => {
+    const bgType = background?.bgType;
+
+    setBackgrounds((prevBgUrl) => ({
+      ...prevBgUrl,
+      image: bgType === "image" ? background?.bg : prevBgUrl.image,
+      animation: bgType === "animation" ? background?.bg : prevBgUrl.animation,
+      color: bgType === "color" ? background?.bg : prevBgUrl.color,
+    }));
+  }, [background?.bg, background?.bgType]);
+
   const [tab, setTab] = useState(bgType || "color");
 
+  useEffect(() => {
+    handleBgChange(backgrounds[tab], tab);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tab]);
+
   const renderContent = () => {
     switch (tab) {
       case "image":
-        return <ImageSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} />;
+        return (
+          <ImageSurveyBg
+            environmentId={localSurvey.environmentId}
+            handleBgChange={handleBgChange}
+            background={backgrounds.image ?? ""}
+          />
+        );
       case "animation":
-        return <AnimatedSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} />;
+        return <AnimatedSurveyBg handleBgChange={handleBgChange} background={backgrounds.animation ?? ""} />;
       case "color":
-        return <ColorSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} colours={colours} />;
+        return (
+          <ColorSurveyBg
+            handleBgChange={handleBgChange}
+            colours={colours}
+            background={backgrounds.color ?? ""}
+          />
+        );
       default:
         return null;
     }