diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/members/EditTeamName.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/members/EditTeamName.tsx index 38d1fe518f..3222b545fc 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/members/EditTeamName.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/members/EditTeamName.tsx @@ -5,18 +5,27 @@ import { useTeamMutation } from "@/lib/teams/mutateTeams"; import { useTeam } from "@/lib/teams/teams"; import { Button, ErrorComponent, Input, Label } from "@formbricks/ui"; import { useEffect, useState } from "react"; -import { useForm } from "react-hook-form"; +import { useForm, useWatch } from "react-hook-form"; import toast from "react-hot-toast"; export default function EditTeamName({ environmentId }) { const { team, isLoadingTeam, isErrorTeam, mutateTeam } = useTeam(environmentId); - const { register, handleSubmit } = useForm(); + const { register, control, handleSubmit, setValue } = useForm(); const [teamId, setTeamId] = useState(""); + const teamName = useWatch({ + control, + name: "name", + }); + const isTeamNameInputEmpty = !teamName?.trim(); + const currentTeamName = teamName?.trim().toLowerCase() ?? ""; + const previousTeamName = team?.name?.trim().toLowerCase() ?? ""; + useEffect(() => { if (team && team.id !== "") { setTeamId(team.id); } + setValue("name", team?.name ?? ""); }, [team]); const { isMutatingTeam, triggerTeamMutate } = useTeamMutation(teamId); @@ -42,9 +51,20 @@ export default function EditTeamName({ environmentId }) { }); })}> - + - diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/product/editProduct.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/product/editProduct.tsx index 6ff697255f..f234ac37a9 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/product/editProduct.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/product/editProduct.tsx @@ -1,7 +1,7 @@ "use client"; -import { useState } from "react"; -import { useForm } from "react-hook-form"; +import { useEffect, useState } from "react"; +import { useForm, useWatch } from "react-hook-form"; import toast from "react-hot-toast"; import { useRouter } from "next/navigation"; @@ -22,7 +22,19 @@ export function EditProductName({ environmentId }) { const { isMutatingProduct, triggerProductMutate } = useProductMutation(environmentId); const { mutateEnvironment } = useEnvironment(environmentId); - const { register, handleSubmit } = useForm(); + const { register, handleSubmit, control, setValue } = useForm(); + + const productName = useWatch({ + control, + name: "name", + }); + const isProductNameInputEmpty = !productName?.trim(); + const currentProductName = productName?.trim().toLowerCase() ?? ""; + const previousProductName = product?.name?.trim().toLowerCase() ?? ""; + + useEffect(() => { + setValue("name", product?.name ?? ""); + }, [product?.name]); if (isLoadingProduct) { return ; @@ -45,9 +57,20 @@ export function EditProductName({ environmentId }) { }); })}> - + - diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/profile/editProfile.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/profile/editProfile.tsx index 193d49abc6..7d20959cd0 100644 --- a/apps/web/app/(app)/environments/[environmentId]/settings/profile/editProfile.tsx +++ b/apps/web/app/(app)/environments/[environmentId]/settings/profile/editProfile.tsx @@ -11,16 +11,28 @@ import { Button, ErrorComponent, Input, Label, ProfileAvatar } from "@formbricks import { Session } from "next-auth"; import { signOut } from "next-auth/react"; import Image from "next/image"; -import { Dispatch, SetStateAction, useState } from "react"; -import { useForm } from "react-hook-form"; +import { Dispatch, SetStateAction, useEffect, useState } from "react"; +import { useForm, useWatch } from "react-hook-form"; import toast from "react-hot-toast"; export function EditName() { - const { register, handleSubmit } = useForm(); + const { register, handleSubmit, control, setValue } = useForm(); const { profile, isLoadingProfile, isErrorProfile } = useProfile(); const { triggerProfileMutate, isMutatingProfile } = useProfileMutation(); + const profileName = useWatch({ + control, + name: "name", + }); + const isProfileNameInputEmpty = !profileName?.trim(); + const currentProfileName = profileName?.trim().toLowerCase() ?? ""; + const previousProfileName = profile?.name?.trim().toLowerCase() ?? ""; + + useEffect(() => { + setValue("name", profile?.name ?? ""); + }, [profile?.name]); + if (isLoadingProfile) { return ; } @@ -41,13 +53,24 @@ export function EditName() { }); })}> - +
- diff --git a/apps/web/components/shared/AlertDialog.tsx b/apps/web/components/shared/AlertDialog.tsx index ace770622a..8c463b202f 100644 --- a/apps/web/components/shared/AlertDialog.tsx +++ b/apps/web/components/shared/AlertDialog.tsx @@ -25,7 +25,7 @@ export default function AlertDialog({ return (

{text || "Are you sure? This action cannot be undone."}

-
+
diff --git a/apps/web/components/shared/DeleteDialog.tsx b/apps/web/components/shared/DeleteDialog.tsx index 8fb8f4ff77..186e56f116 100644 --- a/apps/web/components/shared/DeleteDialog.tsx +++ b/apps/web/components/shared/DeleteDialog.tsx @@ -32,7 +32,7 @@ export default function DeleteDialog({

{text || "Are you sure? This action cannot be undone."}

{children}
-
+