Merge branch 'main' of github.com:formbricks/formbricks into shubham/for-1035-add-webhooks-ui-on-integrations-page

apps/web/components/auth/SignupForm.tsx

@@ -27,7 +27,9 @@ export const SignupForm = () => {
     if (!isValid) {
       return;
     }
+
     setSigningUp(true);
+
     try {
       await createUser(
         e.target.elements.name.value,

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,14 +39,20 @@ export default function MultipleChoiceMultiQuestion({
     .map((choice) => choice.label);
 
   useEffect(() => {
-    const nonOtherSavedChoices = storedResponseValue?.filter((answer) => nonOtherChoiceLabels.includes(answer));
-    const savedOtherSpecified = storedResponseValue?.find((answer) => !nonOtherChoiceLabels.includes(answer));
+    if (Array.isArray(storedResponseValue)) {
+      const nonOtherSavedChoices = storedResponseValue?.filter((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/preview/MultipleChoiceSingleQuestion.tsx

@@ -29,7 +29,9 @@ export default function MultipleChoiceSingleQuestion({
   goToNextQuestion,
   goToPreviousQuestion,
 }: MultipleChoiceSingleProps) {
-  const storedResponseValueValue = question.choices.find((choice) => choice.label === storedResponseValue)?.id;
+  const storedResponseValueValue = question.choices.find(
+    (choice) => choice.label === storedResponseValue
+  )?.id;
   const [selectedChoice, setSelectedChoice] = useState<string | null>(null);
   const [savedOtherAnswer, setSavedOtherAnswer] = useState<string | null>(null);
   const [questionChoices, setQuestionChoices] = useState<TSurveyChoice[]>(

apps/web/components/preview/NPSQuestion.tsx

@@ -105,7 +105,9 @@ export default function NPSQuestion({
           />
         )}
         <div></div>
-        {(!question.required || storedResponseValue) && <SubmitButton {...{ question, lastQuestion, brandColor }} />}
+        {(!question.required || storedResponseValue) && (
+          <SubmitButton {...{ question, lastQuestion, brandColor }} />
+        )}
       </div>
     </form>
   );

apps/web/components/preview/RatingQuestion.tsx

@@ -154,7 +154,9 @@ export default function RatingQuestion({
           />
         )}
         <div></div>
-        {(!question.required || storedResponseValue) && <SubmitButton {...{ question, lastQuestion, brandColor }} />}
+        {(!question.required || storedResponseValue) && (
+          <SubmitButton {...{ question, lastQuestion, brandColor }} />
+        )}
       </div>
     </form>
   );

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/CustomDialog.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import Modal from "@/components/shared/Modal";
+import { Button } from "@formbricks/ui";
+
+interface CustomDialogProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  title?: string;
+  text?: string;
+  isLoading?: boolean;
+  children?: React.ReactNode;
+  onOk: () => void;
+  okBtnText?: string;
+  onCancel?: () => void;
+  cancelBtnText?: string;
+  disabled?: boolean;
+}
+
+export default function CustomDialog({
+  open,
+  setOpen,
+  title,
+  text,
+  isLoading,
+  children,
+  onOk,
+  okBtnText,
+  onCancel,
+  cancelBtnText,
+  disabled,
+}: CustomDialogProps) {
+  return (
+    <Modal open={open} setOpen={setOpen} title={title}>
+      <p>{text}</p>
+      <div>{children}</div>
+      <div className="my-4 space-x-2 text-right">
+        <Button
+          variant="secondary"
+          onClick={() => {
+            if (onCancel) {
+              onCancel();
+            }
+            setOpen(false);
+          }}>
+          {cancelBtnText || "Cancel"}
+        </Button>
+        <Button variant="warn" onClick={onOk} loading={isLoading} disabled={disabled}>
+          {okBtnText || "Yes"}
+        </Button>
+      </div>
+    </Modal>
+  );
+}

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={() => {

apps/web/components/shared/EmptySpaceFiller.tsx

@@ -30,10 +30,10 @@ const EmptySpaceFiller: React.FC<EmptySpaceFillerProps> = ({
         <div className="w-full space-y-4 rounded-b-lg bg-white p-4">
           <div className="h-16 w-full rounded-lg bg-slate-100"></div>
 
-          <div className=" flex h-16 w-full items-center justify-center rounded-lg bg-slate-50 text-slate-700 transition-all duration-300 ease-in-out hover:bg-slate-100 ">
+          <div className="flex flex-col h-16 w-full items-center justify-center rounded-lg bg-slate-50 text-slate-700 transition-all duration-300 ease-in-out hover:bg-slate-100 ">
             {!environment.widgetSetupCompleted && !noWidgetRequired && (
               <Link
-                className="flex h-full w-full items-center justify-center"
+                className="flex w-full items-center justify-center"
                 href={`/environments/${environmentId}/settings/setup`}>
                 <span className="decoration-brand-dark underline  transition-all duration-300  ease-in-out">
                   Install Formbricks Widget. <strong>Go to Setup Checklist 👉</strong>

apps/web/components/team/CreateTeamModal.tsx

@@ -25,6 +25,7 @@ export default function CreateTeamModal({ open, setOpen }: CreateTeamModalProps)
   const submitTeam = async (data) => {
     setLoading(true);
     const newTeam = await createTeam(data.name, (profile as any).id);
+
     const newMemberships = await mutateMemberships();
     changeEnvironmentByTeam(newTeam.id, newMemberships, router);
     toast.success("Team created successfully!");