Merge branch 'main' of github.com:formbricks/formbricks into shubham/for-1120-add-restart-button-to-survey-preview-ui-tweak

2026-03-13 11:09:29 -05:00 · 2023-08-11 08:52:52 +02:00
parent f98d4f5c11 179f92077b
commit 5c60694117
13 changed files with 55 additions and 39 deletions
--- a/apps/web/app/(app)/environments/[environmentId]/settings/profile/EditAvatar.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/settings/profile/EditAvatar.tsx
@@ -5,7 +5,7 @@ import { Button, ProfileAvatar } from "@formbricks/ui";
 import Image from "next/image";
 import { Session } from "next-auth";

-export function EditAvatar({ session }:{session: Session | null}) {
+export function EditAvatar({ session }: { session: Session | null }) {
  return (
    <div>
      {session?.user?.image ? (
--- a/apps/web/app/(app)/environments/[environmentId]/settings/profile/EditName.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/settings/profile/EditName.tsx
@@ -7,18 +7,17 @@ import { profileEditAction } from "./actions";
 import { TProfile } from "@formbricks/types/v1/profile";

 export function EditName({ profile }: { profile: TProfile }) {
-
  const {
    register,
    handleSubmit,
    formState: { isSubmitting },
-  } = useForm<{name:string}>()
+  } = useForm<{ name: string }>();

  return (
    <>
      <form
        className="w-full max-w-sm items-center"
-        onSubmit={handleSubmit(async(data) => {
+        onSubmit={handleSubmit(async (data) => {
          try {
            await profileEditAction(profile.id, data);
            toast.success("Your name was updated successfully.");
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/QuestionFilterComboBox.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/QuestionFilterComboBox.tsx
@@ -14,7 +14,6 @@ import {
 import useClickOutside from "@formbricks/lib/useClickOutside";
 import { ChevronDown, ChevronUp, X } from "lucide-react";
 import { QuestionType } from "@formbricks/types/questions";
-import { isArray } from "lodash";
 import clsx from "clsx";

 type QuestionFilterComboBoxProps = {
@@ -150,7 +149,7 @@ const QuestionFilterComboBox = ({
                      !isMultiple
                        ? onChangeFilterComboBoxValue(o)
                        : onChangeFilterComboBoxValue(
-                            isArray(filterComboBoxValue) ? [...filterComboBoxValue, o] : [o]
+                            Array.isArray(filterComboBoxValue) ? [...filterComboBoxValue, o] : [o]
                          );
                      !isMultiple && setOpen(false);
                    }}
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/SurveyEditor.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/SurveyEditor.tsx
@@ -29,11 +29,9 @@ export default function SurveyEditor({ environmentId, surveyId }: SurveyEditorPr

  useEffect(() => {
    if (survey) {
-      if (!localSurvey) {
-        setLocalSurvey(survey);
-      }
+      setLocalSurvey(survey);

-      if (!activeQuestionId && survey.questions.length > 0) {
+      if (survey.questions.length > 0) {
        setActiveQuestionId(survey.questions[0].id);
      }
    }
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/SurveyMenuBar.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/SurveyMenuBar.tsx
@@ -65,7 +65,8 @@ export default function SurveyMenuBar({

  // write a function which updates the local survey status
  const updateLocalSurveyStatus = (status: Survey["status"]) => {
-    const updatedSurvey = { ...localSurvey, status };
+    const updatedSurvey = JSON.parse(JSON.stringify(localSurvey));
+    updatedSurvey.status = status;
    setLocalSurvey(updatedSurvey);
  };

--- a/apps/web/components/preview/MultipleChoiceMultiQuestion.tsx
+++ b/apps/web/components/preview/MultipleChoiceMultiQuestion.tsx
@@ -1,14 +1,14 @@
-import { Input } from "@formbricks/ui";
+import { BackButton } from "@/components/preview/BackButton";
 import SubmitButton from "@/components/preview/SubmitButton";
 import { shuffleArray } from "@/lib/utils";
 import { cn } from "@formbricks/lib/cn";
+import { symmetricDifference } from "@formbricks/lib/utils/array";
+import { Response } from "@formbricks/types/js";
 import type { Choice, MultipleChoiceMultiQuestion } from "@formbricks/types/questions";
+import { Input } from "@formbricks/ui";
 import { useEffect, useState } from "react";
 import Headline from "./Headline";
 import Subheader from "./Subheader";
-import _ from "lodash";
-import { Response } from "@formbricks/types/js";
-import { BackButton } from "@/components/preview/BackButton";

 interface MultipleChoiceMultiProps {
  question: MultipleChoiceMultiQuestion;
@@ -80,7 +80,7 @@ export default function MultipleChoiceMultiQuestion({
      [question.id]: selectedChoices,
    };

-    if (_.xor(selectedChoices, storedResponseValue).length === 0) {
+    if (storedResponseValue && symmetricDifference(selectedChoices, storedResponseValue).length === 0) {
      goToNextQuestion(data);
      return;
    }
--- a/apps/web/components/shared/EmptySpaceFiller.tsx
+++ b/apps/web/components/shared/EmptySpaceFiller.tsx
@@ -30,7 +30,7 @@ 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 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 ">
+          <div className="flex h-16 w-full flex-col 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 w-full items-center justify-center"
--- a/apps/web/components/shared/GoBackButton.tsx
+++ b/apps/web/components/shared/GoBackButton.tsx
@@ -1,4 +1,4 @@
-'use client';
+"use client";

 import { BackIcon } from "@formbricks/ui";
 import { useRouter } from "next/navigation";
--- a/apps/web/lib/surveys/surveys.ts
+++ b/apps/web/lib/surveys/surveys.ts
@@ -1,20 +1,19 @@
-import useSWR from "swr";
-import { fetcher } from "@formbricks/lib/fetcher";
-import { TSurvey } from "@formbricks/types/v1/surveys";
-import { TResponse } from "@formbricks/types/v1/responses";
+import {
+  DateRange,
+  SelectedFilterValue,
+} from "@/app/(app)/environments/[environmentId]/ResponseFilterContext";
 import {
  OptionsType,
  QuestionOptions,
 } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/QuestionsComboBox";
 import { QuestionFilterOptions } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/ResponseFilter";
+import { fetcher } from "@formbricks/lib/fetcher";
 import { QuestionType } from "@formbricks/types/questions";
+import { TResponse } from "@formbricks/types/v1/responses";
+import { TSurvey } from "@formbricks/types/v1/surveys";
 import { TTag } from "@formbricks/types/v1/tags";
-import {
-  DateRange,
-  SelectedFilterValue,
-} from "@/app/(app)/environments/[environmentId]/ResponseFilterContext";
-import { isArray } from "lodash";
 import { isWithinInterval } from "date-fns";
+import useSWR from "swr";

 export const useSurveys = (environmentId: string) => {
  const { data, error, mutate, isLoading } = useSWR(`/api/v1/environments/${environmentId}/surveys`, fetcher);
@@ -404,7 +403,7 @@ export const getFilterResponses = (
              if (question) {
                const responseValue = response.data[question.id];
                const filterValue = filter?.filterType?.filterComboBoxValue;
-                if (isArray(responseValue) && isArray(filterValue) && filterValue.length > 0) {
+                if (Array.isArray(responseValue) && Array.isArray(filterValue) && filterValue.length > 0) {
                  //@ts-ignore
                  const updatedResponseValue = question?.choices
                    ? //@ts-ignore
@@ -435,7 +434,7 @@ export const getFilterResponses = (
                const filterValue = filter?.filterType?.filterComboBoxValue;
                if (
                  filter?.filterType?.filterValue === "Includes either" &&
-                  isArray(filterValue) &&
+                  Array.isArray(filterValue) &&
                  filterValue.length > 0 &&
                  typeof responseValue === "string"
                ) {
--- a/packages/js/src/components/MultipleChoiceMultiQuestion.tsx
+++ b/packages/js/src/components/MultipleChoiceMultiQuestion.tsx
@@ -6,8 +6,8 @@ import { cn, shuffleArray } from "../lib/utils";
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 import SubmitButton from "./SubmitButton";
-import _ from "lodash";
 import { BackButton } from "./BackButton";
+import { symmetricDifference } from "../../../lib/utils/array";

 interface MultipleChoiceMultiProps {
  question: TSurveyMultipleChoiceMultiQuestion;
@@ -91,7 +91,7 @@ export default function MultipleChoiceMultiQuestion({
      [question.id]: selectedChoices,
    };

-    if (_.xor(selectedChoices, storedResponseValue).length === 0) {
+    if (symmetricDifference(selectedChoices, storedResponseValue).length === 0) {
      goToNextQuestion(data);
      return;
    }
--- a/packages/js/src/components/MultipleChoiceSingleQuestion.tsx
+++ b/packages/js/src/components/MultipleChoiceSingleQuestion.tsx
@@ -109,7 +109,7 @@ export default function MultipleChoiceSingleQuestion({
                  selectedChoice === choice.label
                    ? "fb-z-10 fb-bg-slate-50 fb-border-slate-400"
                    : "fb-border-gray-200",
-                  "fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-rounded-md fb-border fb-p-4 focus:fb-outline-none hover:bg-slate-50 fb-text-slate-800"
+                  "fb-relative fb-flex fb-cursor-pointer fb-flex-col fb-rounded-md fb-border fb-p-4 focus:fb-outline-none fb-text-slate-800 hover:bg-slate-50"
                )}>
                <span className="fb-flex fb-items-center fb-text-sm">
                  <input
--- a/packages/lib/utils/array.ts
+++ b/packages/lib/utils/array.ts
@@ -0,0 +1,3 @@
+export function symmetricDifference<T>(arr1: T[], arr2: T[]): T[] {
+  return arr1.filter((x) => !arr2.includes(x)).concat(arr2.filter((x) => !arr1.includes(x)));
+}
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -16,7 +16,7 @@ export {
  CommandItem,
  CommandList,
  CommandSeparator,
-  CommandShortcut
+  CommandShortcut,
 } from "./components/Command";
 export { Confetti } from "./components/Confetti";
 export { DatePicker } from "./components/DatePicker";
@@ -27,13 +27,24 @@ export {
  DialogFooter,
  DialogHeader,
  DialogTitle,
-  DialogTrigger
+  DialogTrigger,
 } from "./components/Dialog";
 export {
-  DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator,
-  DropdownMenuShortcut, DropdownMenuSub,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
  DropdownMenuSubContent,
-  DropdownMenuSubTrigger, DropdownMenuTrigger
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
 } from "./components/DropdownMenu";
 export { ErrorComponent } from "./components/ErrorComponent";
 export { Input } from "./components/Input";
@@ -45,7 +56,14 @@ export { RadioGroup, RadioGroupItem } from "./components/RadioGroup";
 export { ResponsiveVideo } from "./components/ResponsiveVideo";
 export { SearchBox } from "./components/SearchBox";
 export {
-  Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
 } from "./components/Select";
 export { Switch } from "./components/Switch";
 export { TabBar } from "./components/TabBar";
@@ -107,4 +125,3 @@ export { UserGroupIcon } from "./components/icons/UserGroupIcon";
 export { UserSearchGlasIcon } from "./components/icons/UserSearchGlasIcon";
 export { VeryDisappointedIcon } from "./components/icons/VeryDisappointedIcon";
 export { VideoTabletAdjustIcon } from "./components/icons/VideoTabletAdjustIcon";
-