From d8fd6f5c25395caa9ca0ae44426e529de3bf576f Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Date: Tue, 26 Nov 2024 21:30:28 +0530
Subject: [PATCH] chore: exclude emails form field refactor (#17824)

* chore: exclude emails refactor

* Update
---
 .../features/form-builder/FormBuilder.tsx     | 25 +++++++----
 packages/features/form-builder/schema.ts      | 43 +++++++++----------
 2 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index 754aa38e7f..4c3cb995b9 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -1,9 +1,9 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import type { SubmitHandler, UseFormReturn } from "react-hook-form";
 import { Controller, useFieldArray, useForm, useFormContext } from "react-hook-form";
 import type { z } from "zod";
+import { ZodError } from "zod";
 
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -33,7 +33,7 @@ import {
 
 import { fieldTypesConfigMap } from "./fieldTypes";
 import { fieldsThatSupportLabelAsSafeHtml } from "./fieldsThatSupportLabelAsSafeHtml";
-import { fieldSchema, type fieldsSchema } from "./schema";
+import { type fieldsSchema, excludeEmailSchema } from "./schema";
 import { getFieldIdentifier } from "./utils/getFieldIdentifier";
 import { getConfig as getVariantsConfig } from "./utils/variantsConfig";
 
@@ -459,11 +459,8 @@ function FieldEditDialog({
 }) {
   const { t } = useLocale();
   const fieldForm = useForm<RhfFormField>({
-    defaultValues: {
-      type: "text",
-      ...dialog.data,
-    },
-    resolver: zodResolver(fieldSchema),
+    defaultValues: dialog.data || {},
+    //resolver: zodResolver(fieldSchema),
   });
   const formFieldType = fieldForm.getValues("type");
 
@@ -577,10 +574,22 @@ function FieldEditDialog({
                       <FieldWithLengthCheckSupport containerClassName="mt-6" fieldForm={fieldForm} />
                     ) : null}
 
-                    {fieldType.value === "email" && fieldForm.getValues("name") === "email" && (
+                    {formFieldType === "email" && (
                       <InputField
                         {...fieldForm.register("excludeEmails")}
                         containerClassName="mt-6"
+                        onChange={(e) => {
+                          try {
+                            excludeEmailSchema.parse(e.target.value);
+                            fieldForm.clearErrors("excludeEmails");
+                          } catch (err) {
+                            if (err instanceof ZodError) {
+                              fieldForm.setError("excludeEmails", {
+                                message: err.errors[0]?.message || "Invalid input",
+                              });
+                            }
+                          }
+                        }}
                         label={t("exclude_emails_that_contain")}
                         placeholder="gmail.com, hotmail.com, ..."
                       />
diff --git a/packages/features/form-builder/schema.ts b/packages/features/form-builder/schema.ts
index f42c0b85d2..07b2059e02 100644
--- a/packages/features/form-builder/schema.ts
+++ b/packages/features/form-builder/schema.ts
@@ -36,6 +36,26 @@ export const EditableSchema = z.enum([
   "user-readonly", // All fields are readOnly.
 ]);
 
+export const excludeEmailSchema = z.string().superRefine((val, ctx) => {
+  const allDomains = val.split(",").map((dom) => dom.trim());
+
+  const regex = /^(?:@?[a-z0-9-]+(?:\.[a-z]{2,})?)?(?:@[a-z0-9-]+\.[a-z]{2,})?$/;
+
+  /*
+  Valid patterns - [ example, example.anything, anyone@example.anything ]
+  Invalid patterns - Patterns involving capital letter [ Example, Example.anything, Anyone@example.anything ]
+*/
+
+  const isValid = !allDomains.some((domain) => !regex.test(domain));
+
+  if (!isValid) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "Enter valid domain or email",
+    });
+  }
+});
+
 const baseFieldSchema = z.object({
   name: z.string().transform(getValidRhfFieldName),
   type: fieldTypeEnum,
@@ -101,28 +121,7 @@ const baseFieldSchema = z.object({
   maxLength: z.number().optional(),
 
   // Emails that needs to be excluded
-  excludeEmails: z
-    .string()
-    .superRefine((val, ctx) => {
-      const allDomains = val.split(",").map((dom) => dom.trim());
-
-      const regex = /^(?:@?[a-z0-9-]+(?:\.[a-z]{2,})?)?(?:@[a-z0-9-]+\.[a-z]{2,})?$/;
-
-      /*
-      Valid patterns - [ example, example.anything, anyone@example.anything ]
-      Invalid patterns - Patterns involving capital letter [ Example, Example.anything, Anyone@example.anything ]
-    */
-
-      const isValid = !allDomains.some((domain) => !regex.test(domain));
-
-      if (!isValid) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: "Enter valid domain or email",
-        });
-      }
-    })
-    .optional(),
+  excludeEmails: excludeEmailSchema.optional(),
 });
 
 export const variantsConfigSchema = z.object({