Merge branch 'main' of https://github.com/formbricks/formbricks into feature/delete-team

apps/web/components/preview/Modal.tsx

@@ -1,19 +1,30 @@
 import { getPlacementStyle } from "@/lib/preview";
 import { cn } from "@formbricks/lib/cn";
 import { PlacementType } from "@formbricks/types/js";
-import { ReactNode, useEffect, useState } from "react";
+import { ReactNode, useEffect, useMemo, useState } from "react";
 
 export default function Modal({
   children,
   isOpen,
   placement,
+  highlightBorderColor,
 }: {
   children: ReactNode;
   isOpen: boolean;
   placement: PlacementType;
+  highlightBorderColor: string | null | undefined;
 }) {
   const [show, setShow] = useState(false);
 
+  const highlightBorderColorStyle = useMemo(() => {
+    if (!highlightBorderColor) return {};
+
+    return {
+      border: `2px solid ${highlightBorderColor}`,
+      overflow: "hidden",
+    };
+  }, [highlightBorderColor]);
+
   useEffect(() => {
     setShow(isOpen);
   }, [isOpen]);
@@ -23,9 +34,10 @@ export default function Modal({
       <div
         className={cn(
           show ? "translate-x-0 opacity-100" : "translate-x-32 opacity-0",
-          "pointer-events-auto absolute max-h-[90%] w-full max-w-sm overflow-hidden overflow-y-auto rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-500 ease-in-out",
+          "pointer-events-auto absolute h-fit max-h-[90%] w-full max-w-sm overflow-hidden overflow-y-auto rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-500 ease-in-out",
           getPlacementStyle(placement)
-        )}>
+        )}
+        style={highlightBorderColorStyle}>
         {children}
       </div>
     </div>

apps/web/components/preview/MultipleChoiceMultiQuestion.tsx

@@ -39,19 +39,21 @@ export default function MultipleChoiceMultiQuestion({
     .map((choice) => choice.label);
 
   useEffect(() => {
-    if(Array.isArray(storedResponseValue)){
+    if (Array.isArray(storedResponseValue)) {
       const nonOtherSavedChoices = storedResponseValue?.filter((answer) =>
-      nonOtherChoiceLabels.includes(answer)
-    );
-    const savedOtherSpecified = storedResponseValue?.find((answer) => !nonOtherChoiceLabels.includes(answer));
+        nonOtherChoiceLabels.includes(answer)
+      );
+      const savedOtherSpecified = storedResponseValue?.find(
+        (answer) => !nonOtherChoiceLabels.includes(answer)
+      );
 
-    setSelectedChoices(nonOtherSavedChoices ?? []);
+      setSelectedChoices(nonOtherSavedChoices ?? []);
 
-    if (savedOtherSpecified) {
-      setOtherSpecified(savedOtherSpecified);
-      setShowOther(true);
+      if (savedOtherSpecified) {
+        setOtherSpecified(savedOtherSpecified);
+        setShowOther(true);
+      }
     }
-  }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [storedResponseValue, question.id]);
 

apps/web/components/shared/AlertDialog.tsx

@@ -25,7 +25,7 @@ export default function AlertDialog({
   return (
     <Modal open={open} setOpen={setOpen} title={`Confirm ${confirmWhat}`}>
       <p>{text || "Are you sure? This action cannot be undone."}</p>
-      <div className="my-4 space-x-2 text-right">
+      <div className="space-x-2 text-right">
         <Button variant="warn" onClick={onDiscard}>
           Discard
         </Button>

apps/web/components/shared/DeleteDialog.tsx

@@ -32,7 +32,7 @@ export default function DeleteDialog({
     <Modal open={open} setOpen={setOpen} title={`Delete ${deleteWhat}`}>
       <p>{text || "Are you sure? This action cannot be undone."}</p>
       <div>{children}</div>
-      <div className="my-4 space-x-2 text-right">
+      <div className="space-x-2 text-right">
         <Button
           variant="secondary"
           onClick={() => {