fix: restored Add logo button (#2537)

apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/EditLogo.tsx

@@ -9,6 +9,7 @@ import { TProduct, TProductUpdateInput } from "@formbricks/types/product";
 import { AdvancedOptionToggle } from "@formbricks/ui/AdvancedOptionToggle";
 import { Button } from "@formbricks/ui/Button";
 import { ColorPicker } from "@formbricks/ui/ColorPicker";
+import { DeleteDialog } from "@formbricks/ui/DeleteDialog";
 import { FileInput } from "@formbricks/ui/FileInput";
 import { Input } from "@formbricks/ui/Input";
 
@@ -24,6 +25,7 @@ export const EditLogo = ({ product, environmentId, isViewer }: EditLogoProps) =>
   const [logoUrl, setLogoUrl] = useState<string | undefined>(product.logo?.url || undefined);
   const [logoBgColor, setLogoBgColor] = useState<string | undefined>(product.logo?.bgColor || undefined);
   const [isBgColorEnabled, setIsBgColorEnabled] = useState<boolean>(!!product.logo?.bgColor);
+  const [confirmRemoveLogoModalOpen, setConfirmRemoveLogoModalOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -58,7 +60,7 @@ export const EditLogo = ({ product, environmentId, isViewer }: EditLogoProps) =>
 
     setIsLoading(true);
     try {
-      const updatedProduct: Partial<TProductUpdateInput> = {
+      const updatedProduct: TProductUpdateInput = {
         logo: { url: logoUrl, bgColor: isBgColorEnabled ? logoBgColor : undefined },
       };
       await updateProductAction(product.id, updatedProduct);
@@ -72,26 +74,25 @@ export const EditLogo = ({ product, environmentId, isViewer }: EditLogoProps) =>
   };
 
   const removeLogo = async () => {
-    if (window.confirm("Are you sure you want to remove the logo?")) {
-      setLogoUrl(undefined);
-      if (!isEditing) {
-        setIsEditing(true);
-        return;
-      }
+    setLogoUrl(undefined);
+    if (!isEditing) {
+      setIsEditing(true);
+      return;
+    }
 
-      setIsLoading(true);
-      try {
-        const updatedProduct: Partial<TProductUpdateInput> = {
-          logo: { url: undefined, bgColor: undefined },
-        };
-        await updateProductAction(product.id, updatedProduct);
-        toast.success("Logo removed successfully", { icon: "🗑️" });
-      } catch (error) {
-        toast.error("Failed to remove the logo");
-      } finally {
-        setIsEditing(false);
-        setIsLoading(false);
-      }
+    setIsLoading(true);
+    try {
+      const updatedProduct: TProductUpdateInput = {
+        logo: { url: undefined, bgColor: undefined },
+      };
+      await updateProductAction(product.id, updatedProduct);
+      toast.success("Logo removed successfully", { icon: "🗑️" });
+    } catch (error) {
+      toast.error("Failed to remove the logo");
+    } finally {
+      setIsEditing(false);
+      setIsLoading(false);
+      setConfirmRemoveLogoModalOpen(false);
     }
   };
 
@@ -105,7 +106,7 @@ export const EditLogo = ({ product, environmentId, isViewer }: EditLogoProps) =>
   };
 
   return (
-    <div className="w-full space-y-8">
+    <div className="w-full space-y-8" id="edit-logo">
       {logoUrl ? (
         <Image
           src={logoUrl}
@@ -134,7 +135,11 @@ export const EditLogo = ({ product, environmentId, isViewer }: EditLogoProps) =>
             <Button onClick={() => fileInputRef.current?.click()} variant="secondary" size="sm">
               Replace Logo
             </Button>
-            <Button variant="warn" size="sm" onClick={removeLogo} disabled={!isEditing}>
+            <Button
+              variant="warn"
+              size="sm"
+              onClick={() => setConfirmRemoveLogoModalOpen(true)}
+              disabled={!isEditing}>
               Remove Logo
             </Button>
           </div>
@@ -164,6 +169,13 @@ export const EditLogo = ({ product, environmentId, isViewer }: EditLogoProps) =>
           {isEditing ? "Save" : "Edit"}
         </Button>
       )}
+      <DeleteDialog
+        open={confirmRemoveLogoModalOpen}
+        setOpen={setConfirmRemoveLogoModalOpen}
+        deleteWhat="Logo"
+        text="Are you sure you want to remove the logo?"
+        onDelete={removeLogo}
+      />
     </div>
   );
 };

apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/ThemeStylingPreviewSurvey.tsx

@@ -113,6 +113,13 @@ export const ThemeStylingPreviewSurvey = ({
 
   const isAppSurvey = previewType === "app" || previewType === "website";
 
+  const scrollToEditLogoSection = () => {
+    const editLogoSection = document.getElementById("edit-logo");
+    if (editLogoSection) {
+      editLogoSection.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
   return (
     <div className="flex h-full w-full flex-col items-center justify-items-center">
       <motion.div
@@ -172,8 +179,8 @@ export const ThemeStylingPreviewSurvey = ({
             </Modal>
           ) : (
             <MediaBackground survey={survey} product={product} ContentRef={ContentRef} isEditorView>
-              {!product.styling?.isLogoHidden && product.logo?.url && (
-                <div className="absolute left-5 top-5">
+              {!product.styling?.isLogoHidden && (
+                <div className="absolute left-5 top-5" onClick={scrollToEditLogoSection}>
                   <ClientLogo product={product} previewSurvey />
                 </div>
               )}

apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey.tsx

@@ -262,7 +262,7 @@ export const PreviewSurvey = ({
               ) : (
                 <div className="flex h-full w-full flex-col justify-end">
                   <div className="absolute left-5 top-5">
-                    {!styling.isLogoHidden && product.logo?.url && (
+                    {!styling.isLogoHidden && (
                       <ClientLogo environmentId={environment.id} product={product} previewSurvey />
                     )}
                   </div>
@@ -348,7 +348,7 @@ export const PreviewSurvey = ({
             ) : (
               <MediaBackground survey={survey} product={product} ContentRef={ContentRef} isEditorView>
                 <div className="absolute left-5 top-5">
-                  {!styling.isLogoHidden && product.logo?.url && (
+                  {!styling.isLogoHidden && (
                     <ClientLogo environmentId={environment.id} product={product} previewSurvey />
                   )}
                 </div>

packages/ui/ClientLogo/index.tsx

@@ -16,7 +16,7 @@ interface ClientLogoProps {
 export const ClientLogo = ({ environmentId, product, previewSurvey = false }: ClientLogoProps) => {
   return (
     <div
-      className={cn(previewSurvey ? "" : "left-3 top-3 md:left-7 md:top-7", "group fixed z-0 rounded-lg")}
+      className={cn(previewSurvey ? "" : "left-3 top-3 md:left-7 md:top-7", "group absolute z-0 rounded-lg")}
       style={{ backgroundColor: product.logo?.bgColor }}>
       {previewSurvey && environmentId && (
         <Link
@@ -43,6 +43,11 @@ export const ClientLogo = ({ environmentId, product, previewSurvey = false }: Cl
       ) : (
         <Link
           href={`/environments/${environmentId}/settings/lookandfeel`}
+          onClick={(e) => {
+            if (!environmentId) {
+              e.preventDefault();
+            }
+          }}
           className="whitespace-nowrap rounded-md border border-dashed border-slate-400 bg-slate-200 px-6 py-3 text-xs text-slate-900 opacity-50 backdrop-blur-sm hover:cursor-pointer hover:border-slate-600"
           target="_blank">
           Add logo