fix: adds react hook form to product general settings

apps/web/app/(app)/environments/[environmentId]/product/general/components/EditProductNameForm.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { SubmitHandler, useForm } from "react-hook-form";
+import toast from "react-hot-toast";
+import { z } from "zod";
+
+import { TProduct, ZProduct } from "@formbricks/types/product";
+import { Button } from "@formbricks/ui/Button";
+import { FormControl, FormField, FormItem, FormLabel, FormMessage, FormProvider } from "@formbricks/ui/Form";
+import { Input } from "@formbricks/ui/Input";
+
+import { updateProductAction } from "../actions";
+
+type EditProductNameProps = {
+  product: TProduct;
+  environmentId: string;
+  isProductNameEditDisabled: boolean;
+};
+
+const ZProductNameInput = ZProduct.pick({ name: true });
+
+type TEditProductName = z.infer<typeof ZProductNameInput>;
+
+export const EditProductNameForm: React.FC<EditProductNameProps> = ({
+  product,
+  environmentId,
+  isProductNameEditDisabled,
+}) => {
+  const form = useForm<TEditProductName>({
+    defaultValues: {
+      name: product.name,
+    },
+    resolver: zodResolver(ZProductNameInput),
+    mode: "onChange",
+  });
+
+  const { errors, isDirty } = form.formState;
+
+  const nameError = errors.name?.message;
+  const isSubmitting = form.formState.isSubmitting;
+
+  const updateProduct: SubmitHandler<TEditProductName> = async (data) => {
+    const name = data.name.trim();
+    try {
+      if (nameError) {
+        toast.error(nameError);
+        return;
+      }
+
+      const updatedProduct = await updateProductAction(environmentId, product.id, { name });
+
+      if (isProductNameEditDisabled) {
+        toast.error("Only Owners, Admins and Editors can perform this action.");
+        return;
+      }
+
+      if (!!updatedProduct?.id) {
+        toast.success("Product name updated successfully.");
+        form.resetField("name", { defaultValue: updatedProduct.name });
+      }
+    } catch (err) {
+      console.error(err);
+      toast.error(`Error: Unable to save product information`);
+    }
+  };
+
+  return !isProductNameEditDisabled ? (
+    <FormProvider {...form}>
+      <form className="w-full max-w-sm items-center space-y-2" onSubmit={form.handleSubmit(updateProduct)}>
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel htmlFor="name">What&apos;s your product called?</FormLabel>
+              <FormControl>
+                <Input
+                  type="text"
+                  id="name"
+                  {...field}
+                  placeholder="Product Name"
+                  autoComplete="off"
+                  required
+                  isInvalid={!!nameError}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button
+          type="submit"
+          variant="darkCTA"
+          size="sm"
+          loading={isSubmitting}
+          disabled={isSubmitting || !isDirty}>
+          Update
+        </Button>
+      </form>
+    </FormProvider>
+  ) : (
+    <p className="text-sm text-red-700">Only Owners, Admins and Editors can perform this action.</p>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/product/general/components/EditWaitingTimeForm.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { SubmitHandler, useForm } from "react-hook-form";
+import toast from "react-hot-toast";
+import { z } from "zod";
+
+import { TProduct, ZProduct } from "@formbricks/types/product";
+import { Button } from "@formbricks/ui/Button";
+import { FormControl, FormField, FormItem, FormLabel, FormMessage, FormProvider } from "@formbricks/ui/Form";
+import { Input } from "@formbricks/ui/Input";
+
+import { updateProductAction } from "../actions";
+
+type EditWaitingTimeProps = {
+  environmentId: string;
+  product: TProduct;
+};
+
+const ZProductRecontactDaysInput = ZProduct.pick({ recontactDays: true });
+
+type EditWaitingTimeFormValues = z.infer<typeof ZProductRecontactDaysInput>;
+
+export const EditWaitingTimeForm: React.FC<EditWaitingTimeProps> = ({ product, environmentId }) => {
+  const form = useForm<EditWaitingTimeFormValues>({
+    defaultValues: {
+      recontactDays: product.recontactDays,
+    },
+    resolver: zodResolver(ZProductRecontactDaysInput),
+    mode: "onChange",
+  });
+
+  const { isDirty, isSubmitting } = form.formState;
+
+  const updateWaitingTime: SubmitHandler<EditWaitingTimeFormValues> = async (data) => {
+    try {
+      const updatedProduct = await updateProductAction(environmentId, product.id, data);
+      if (!!updatedProduct?.id) {
+        toast.success("Waiting period updated successfully.");
+        form.resetField("recontactDays", { defaultValue: updatedProduct.recontactDays });
+      }
+    } catch (err) {
+      toast.error(`Error: ${err.message}`);
+    }
+  };
+
+  return (
+    <FormProvider {...form}>
+      <form
+        className="flex w-full max-w-sm flex-col space-y-4"
+        onSubmit={form.handleSubmit(updateWaitingTime)}>
+        <FormField
+          control={form.control}
+          name="recontactDays"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel htmlFor="recontactDays">Wait X days before showing next survey:</FormLabel>
+              <FormControl>
+                <Input
+                  type="number"
+                  id="recontactDays"
+                  {...field}
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    if (value === "") {
+                      field.onChange("");
+                    }
+
+                    field.onChange(parseInt(value, 10));
+                  }}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button
+          type="submit"
+          variant="darkCTA"
+          size="sm"
+          className="w-fit"
+          loading={isSubmitting}
+          disabled={isSubmitting || !isDirty}>
+          Update
+        </Button>
+      </form>
+    </FormProvider>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/product/general/page.tsx

@@ -15,8 +15,8 @@ import { SettingsId } from "@formbricks/ui/SettingsId";
 
 import { SettingsCard } from "../../settings/components/SettingsCard";
 import { DeleteProduct } from "./components/DeleteProduct";
-import { EditProductName } from "./components/EditProductName";
-import { EditWaitingTime } from "./components/EditWaitingTime";
+import { EditProductNameForm } from "./components/EditProductNameForm";
+import { EditWaitingTimeForm } from "./components/EditWaitingTimeForm";
 
 const Page = async ({ params }: { params: { environmentId: string } }) => {
   const [, product, session, team] = await Promise.all([
@@ -57,7 +57,7 @@ const Page = async ({ params }: { params: { environmentId: string } }) => {
       </PageHeader>
 
       <SettingsCard title="Product Name" description="Change your products name.">
-        <EditProductName
+        <EditProductNameForm
           environmentId={params.environmentId}
           product={product}
           isProductNameEditDisabled={isProductNameEditDisabled}
@@ -66,7 +66,7 @@ const Page = async ({ params }: { params: { environmentId: string } }) => {
       <SettingsCard
         title="Recontact Waiting Time"
         description="Control how frequently users can be surveyed across all surveys.">
-        <EditWaitingTime environmentId={params.environmentId} product={product} />
+        <EditWaitingTimeForm environmentId={params.environmentId} product={product} />
       </SettingsCard>
       <SettingsCard
         title="Delete Product"