@calcom/atoms 2.6.0 → 2.7.0

package/src/vendor/form-builder/field-types.ts

@@ -0,0 +1,161 @@
+import type z from "zod";
+
+import type { FieldType } from "./field-type-enum";
+import { propsTypes } from "./props-types";
+import type { fieldTypeConfigSchema } from "./schema";
+
+const configMap: Record<FieldType, Omit<z.infer<typeof fieldTypeConfigSchema>, "propsType">> = {
+  name: {
+    label: "Name",
+    value: "name",
+    isTextType: true,
+    systemOnly: true,
+    variantsConfig: {
+      toggleLabel: 'Split "Full name" into "First name" and "Last name"',
+      defaultVariant: "fullName",
+      variants: {
+        firstAndLastName: {
+          label: "first_last_name",
+          fieldsMap: {
+            firstName: {
+              defaultLabel: "first_name",
+              canChangeRequirability: false,
+            },
+            lastName: {
+              defaultLabel: "last_name",
+              canChangeRequirability: true,
+            },
+          },
+        },
+        fullName: {
+          label: "your_name",
+          fieldsMap: {
+            fullName: {
+              defaultLabel: "your_name",
+              defaultPlaceholder: "example_name",
+              canChangeRequirability: false,
+            },
+          },
+        },
+      },
+      defaultValue: {
+        variants: {
+          firstAndLastName: {
+            fields: [
+              {
+                name: "firstName",
+                type: "text",
+                required: true,
+              },
+              {
+                name: "lastName",
+                type: "text",
+                required: false,
+              },
+            ],
+          },
+          fullName: {
+            fields: [
+              {
+                name: "fullName",
+                type: "text",
+                label: "",
+                required: true,
+              },
+            ],
+          },
+        },
+      },
+    },
+  },
+  email: {
+    label: "Email",
+    value: "email",
+    isTextType: true,
+  },
+  phone: {
+    label: "Phone",
+    value: "phone",
+    isTextType: true,
+  },
+  address: {
+    label: "Address",
+    value: "address",
+    isTextType: true,
+  },
+  text: {
+    label: "Short Text",
+    value: "text",
+    isTextType: true,
+  },
+  number: {
+    label: "Number",
+    value: "number",
+    isTextType: true,
+    supportsPricing: true,
+  },
+  textarea: {
+    label: "Long Text",
+    value: "textarea",
+    isTextType: true,
+    supportsLengthCheck: {
+      maxLength: 1000,
+    },
+  },
+  select: {
+    label: "Select",
+    value: "select",
+    needsOptions: true,
+    isTextType: true,
+    optionsSupportPricing: true,
+  },
+  multiselect: {
+    label: "MultiSelect",
+    value: "multiselect",
+    needsOptions: true,
+    isTextType: false,
+    optionsSupportPricing: true,
+  },
+  multiemail: {
+    label: "Multiple Emails",
+    value: "multiemail",
+    isTextType: true,
+  },
+  radioInput: {
+    label: "Radio Input",
+    value: "radioInput",
+    isTextType: false,
+    systemOnly: true,
+  },
+  checkbox: {
+    label: "Checkbox Group",
+    value: "checkbox",
+    needsOptions: true,
+    isTextType: false,
+    optionsSupportPricing: true,
+  },
+  radio: {
+    label: "Radio Group",
+    value: "radio",
+    needsOptions: true,
+    isTextType: false,
+    optionsSupportPricing: true,
+  },
+  boolean: {
+    label: "Checkbox",
+    value: "boolean",
+    isTextType: false,
+    supportsPricing: true,
+  },
+  url: {
+    label: "URL",
+    value: "url",
+    isTextType: true,
+  },
+};
+
+export const fieldTypesConfigMap = configMap as Record<FieldType, z.infer<typeof fieldTypeConfigSchema>>;
+
+Object.entries(fieldTypesConfigMap).forEach(([fieldType, config]) => {
+  config.propsType = propsTypes[fieldType as keyof typeof fieldTypesConfigMap];
+});

package/src/vendor/form-builder/fields-that-support-label-as-safe-html.ts

@@ -0,0 +1,3 @@
+import type { FieldType } from "./field-type-enum";
+
+export const fieldsThatSupportLabelAsSafeHtml: FieldType[] = ["boolean", "radio"];

package/src/vendor/form-builder/props-types.ts

@@ -0,0 +1,17 @@
+export const propsTypes = {
+  name: "variants",
+  email: "text",
+  phone: "text",
+  address: "text",
+  text: "text",
+  number: "text",
+  textarea: "text",
+  select: "select",
+  multiselect: "multiselect",
+  multiemail: "textList",
+  radioInput: "objectiveWithInput",
+  checkbox: "multiselect",
+  radio: "select",
+  boolean: "boolean",
+  url: "text",
+} as const;

package/src/vendor/form-builder/schema.ts

@@ -0,0 +1,269 @@
+import { z } from "zod";
+
+import { fieldSchema, variantsConfigSchema } from "./base-schema";
+import { fieldTypeEnum } from "./field-type-enum";
+import { fieldTypesConfigMap } from "./field-types";
+import { preprocessNameFieldDataWithVariant } from "./utils";
+import { getConfig as getVariantsConfig } from "./utils/variants-config";
+
+const nonEmptyString = () => z.string().refine((value: string) => value.trim().length > 0);
+
+type FieldTypeSchemaConfig<TInput = unknown, TPreprocessedOutput = unknown> = {
+  preprocess: (data: {
+    field: z.infer<typeof fieldSchema>;
+    response: TInput;
+    isPartialSchema: boolean;
+  }) => TPreprocessedOutput;
+  superRefine: (data: {
+    field: z.infer<typeof fieldSchema>;
+    response: TPreprocessedOutput;
+    isPartialSchema: boolean;
+    ctx: FieldZodCtx;
+    m: (key: string, options?: Record<string, unknown>) => string;
+  }) => void;
+};
+
+function defineFieldSchema<TInput, TOutput>(
+  config: FieldTypeSchemaConfig<TInput, TOutput>
+): FieldTypeSchemaConfig<TInput, TOutput> {
+  return config;
+}
+
+export type ALL_VIEWS = "ALL_VIEWS";
+
+export const fieldTypeConfigSchema = z
+  .object({
+    label: z.string(),
+    value: fieldTypeEnum,
+    isTextType: z.boolean().default(false).optional(),
+    systemOnly: z.boolean().default(false).optional(),
+    needsOptions: z.boolean().default(false).optional(),
+    supportsLengthCheck: z
+      .object({
+        maxLength: z.number(),
+      })
+      .optional(),
+    supportsPricing: z.boolean().default(false).optional(),
+    optionsSupportPricing: z.boolean().default(false).optional(),
+    propsType: z.enum([
+      "text",
+      "textList",
+      "select",
+      "multiselect",
+      "boolean",
+      "objectiveWithInput",
+      "variants",
+    ]),
+    variantsConfig: z
+      .object({
+        defaultVariant: z.string(),
+        toggleLabel: z.string().optional(),
+        variants: z.record(
+          z.object({
+            label: z.string(),
+            fieldsMap: z.record(
+              z.object({
+                defaultLabel: z.string().optional(),
+                defaultPlaceholder: z.string().optional(),
+                canChangeRequirability: z.boolean().default(true).optional(),
+              })
+            ),
+          })
+        ),
+        defaultValue: variantsConfigSchema.optional(),
+      })
+      .optional(),
+  })
+  .refine((data) => {
+    if (!data.variantsConfig) {
+      return;
+    }
+    const variantsConfig = data.variantsConfig;
+    if (!variantsConfig.variants[variantsConfig.defaultVariant]) {
+      throw new Error(`defaultVariant: ${variantsConfig.defaultVariant} is not in variants`);
+    }
+    return true;
+  });
+
+export const fieldsSchema = z.array(fieldSchema);
+
+function stringifyResponse(response: unknown): string {
+  if (typeof response !== "string") {
+    return String(response);
+  } else {
+    return response;
+  }
+}
+
+export const fieldTypesSchemaMap = {
+  name: defineFieldSchema<unknown, unknown>({
+    preprocess: ({ response, field }) => {
+      const fieldTypeConfig = fieldTypesConfigMap[field.type];
+
+      const variantInResponse = field.variant || fieldTypeConfig?.variantsConfig?.defaultVariant;
+      let correctedVariant: "firstAndLastName" | "fullName";
+
+      if (!variantInResponse) {
+        throw new Error("`variant` must be there for the field with `variantsConfig`");
+      }
+
+      if (variantInResponse !== "firstAndLastName" && variantInResponse !== "fullName") {
+        correctedVariant = "fullName";
+      } else {
+        correctedVariant = variantInResponse;
+      }
+
+      const defaultValue = "";
+      if (response === null || response === undefined) {
+        return defaultValue;
+      }
+
+      if (typeof response === "string") {
+        const nameJsonSchema = z.object({
+          firstName: z.string(),
+          lastName: z.string().optional().default(""),
+        });
+
+        try {
+          const parsed = nameJsonSchema.safeParse(JSON.parse(response));
+          if (parsed.success) {
+            return preprocessNameFieldDataWithVariant(correctedVariant, parsed.data);
+          }
+        } catch {
+          // if invalid JSON, then treat as regular string
+        }
+        return preprocessNameFieldDataWithVariant(correctedVariant, response);
+      }
+
+      if (typeof response === "object" && "firstName" in response && typeof response.firstName === "string") {
+        const firstAndLastNameResponse = {
+          firstName: response.firstName,
+          lastName: "",
+        };
+        if ("lastName" in response && typeof response.lastName === "string") {
+          firstAndLastNameResponse.lastName = response.lastName;
+        }
+        return preprocessNameFieldDataWithVariant(correctedVariant, firstAndLastNameResponse);
+      }
+
+      return defaultValue;
+    },
+    superRefine: ({ field, response, isPartialSchema, ctx, m }) => {
+      const stringSchema = z.string();
+      const fieldTypeConfig = fieldTypesConfigMap[field.type];
+      const variantInResponse = field.variant || fieldTypeConfig?.variantsConfig?.defaultVariant;
+      if (!variantInResponse) {
+        throw new Error("`variant` must be there for the field with `variantsConfig`");
+      }
+
+      const variantsConfig = getVariantsConfig(field);
+
+      if (!variantsConfig) {
+        throw new Error("variantsConfig must be there for `name` field");
+      }
+
+      const fields =
+        variantsConfig.variants[variantInResponse as keyof typeof variantsConfig.variants].fields;
+
+      const variantSupportedFields = ["text"];
+
+      if (fields.length === 1) {
+        const subField = fields[0];
+        if (variantSupportedFields.includes(subField.type)) {
+          const schema = subField.required && !isPartialSchema ? nonEmptyString() : stringSchema;
+          if (!schema.safeParse(response).success) {
+            ctx.addIssue({ code: z.ZodIssueCode.custom, message: m("Invalid string") });
+          }
+          return;
+        } else {
+          throw new Error(`Unsupported field.type with variants: ${subField.type}`);
+        }
+      }
+      fields.forEach((subField) => {
+        const schema = subField.required && !isPartialSchema ? nonEmptyString() : stringSchema;
+        if (!variantSupportedFields.includes(subField.type)) {
+          throw new Error(`Unsupported field.type with variants: ${subField.type}`);
+        }
+        const valueIdentified = response as Record<string, string>;
+        if (subField.required) {
+          if (!isPartialSchema && !valueIdentified[subField.name])
+            ctx.addIssue({ code: z.ZodIssueCode.custom, message: m(`error_required_field`) });
+          if (!schema.safeParse(valueIdentified[subField.name]).success) {
+            ctx.addIssue({ code: z.ZodIssueCode.custom, message: m("Invalid string") });
+            return;
+          }
+        }
+      });
+    },
+  }),
+  textarea: defineFieldSchema<unknown, string>({
+    preprocess: ({ response }) => {
+      return stringifyResponse(response).trim();
+    },
+    superRefine: ({ field, response, ctx, m }) => {
+      const fieldTypeConfig = fieldTypesConfigMap[field.type];
+      const value = response ?? "";
+      const maxLength = field.maxLength ?? fieldTypeConfig.supportsLengthCheck?.maxLength;
+      const minLength = field.minLength ?? 0;
+      if (!maxLength) {
+        throw new Error("maxLength must be there for textarea field");
+      }
+      const hasExceededMaxLength = value.length > maxLength;
+      const hasNotReachedMinLength = value.length < minLength;
+      if (hasExceededMaxLength) {
+        const message = m(`max_characters_allowed`, { count: maxLength });
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message,
+        });
+        return;
+      }
+      if (hasNotReachedMinLength) {
+        const message = m(`min_characters_required`, { count: minLength });
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message,
+        });
+        return;
+      }
+    },
+  }),
+  url: defineFieldSchema<unknown, string>({
+    preprocess: ({ response }) => {
+      return stringifyResponse(response).trim();
+    },
+    superRefine: ({ response, ctx, m }) => {
+      const value = response ?? "";
+      const urlSchema = z.string().url();
+
+      if (value.match(/^https?:\/[^/]/)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: m("url_validation_error"),
+        });
+        return;
+      }
+
+      if (urlSchema.safeParse(value).success) {
+        return;
+      }
+
+      const domainLike = /^[a-z0-9.-]+\.[a-z]{2,}(\/.*)?$/i;
+      if (domainLike.test(value)) {
+        const valueWithHttps = `https://${value}`;
+        if (urlSchema.safeParse(valueWithHttps).success) {
+          return;
+        }
+      }
+
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: m("url_validation_error"),
+      });
+    },
+  }),
+};
+
+export type FieldZodCtx = {
+  addIssue: (issue: z.IssueData) => void;
+};

package/src/vendor/form-builder/system-field.ts

@@ -0,0 +1,33 @@
+import { z } from "zod";
+
+export const SystemField = z.enum([
+  "name",
+  "email",
+  "location",
+  "title",
+  "notes",
+  "guests",
+  "rescheduleReason",
+  "smsReminderNumber",
+  "attendeePhoneNumber",
+  "aiAgentCallPhoneNumber",
+]);
+
+export const SMS_REMINDER_NUMBER_FIELD = "smsReminderNumber";
+export const CAL_AI_AGENT_PHONE_NUMBER_FIELD = "aiAgentCallPhoneNumber";
+export const TITLE_FIELD = "title";
+export const ATTENDEE_PHONE_NUMBER_FIELD = "attendeePhoneNumber";
+
+export const SYSTEM_PHONE_FIELDS = new Set([
+  ATTENDEE_PHONE_NUMBER_FIELD,
+  SMS_REMINDER_NUMBER_FIELD,
+  CAL_AI_AGENT_PHONE_NUMBER_FIELD,
+]);
+
+export function shouldShowFieldInCustomResponses(fieldName: string): boolean {
+  const isSystemField = SystemField.safeParse(fieldName);
+  if (isSystemField.success && fieldName !== SMS_REMINDER_NUMBER_FIELD && fieldName !== TITLE_FIELD) {
+    return false;
+  }
+  return true;
+}

package/src/vendor/form-builder/use-should-be-disabled-due-to-prefill.tsx

@@ -0,0 +1,107 @@
+import { useFormContext } from "react-hook-form";
+import type { z } from "zod";
+
+import { useRouterQuery } from "../hooks/use-router-query";
+
+import type { fieldsSchema } from "./schema";
+
+type RhfForm = {
+  fields: z.infer<typeof fieldsSchema>;
+};
+
+type RhfFormFields = RhfForm["fields"];
+
+type RhfFormField = RhfFormFields[number];
+
+type FieldProps = Pick<
+  RhfFormField,
+  "name" | "type" | "disableOnPrefill" | "variantsConfig" | "optionsInputs"
+>;
+
+export const getFieldNameFromErrorMessage = (errorMessage: string): string => {
+  const name = errorMessage?.replace(/\{([^}]+)\}.*/, "$1");
+  return name;
+};
+
+function toArray(value: string[] | string): string[] {
+  return Array.isArray(value) ? value : [value];
+}
+
+function intersected(arr1: string[], arr2: string[]): boolean {
+  return !!arr1.find((value) => arr2.find((innerValue) => innerValue?.toString() == value?.toString()));
+}
+
+function isEqual(searchParamValue: string | string[], formValue: string[] | string): boolean {
+  if (typeof formValue === "string") {
+    return searchParamValue?.toString() == formValue?.toString();
+  }
+
+  const formValueToArray = toArray(formValue as string | string[]);
+  const urlValueToArray = toArray(searchParamValue);
+
+  return intersected(formValueToArray, urlValueToArray);
+}
+
+export const useShouldBeDisabledDueToPrefill = (field: FieldProps): boolean => {
+  const { getValues, formState } = useFormContext();
+  const toPrefillValues = useRouterQuery();
+  if (!field.disableOnPrefill) {
+    return false;
+  }
+  if (formState.dirtyFields?.responses?.[field.name]) {
+    return false;
+  }
+
+  const prefilledValues = getValues()?.responses || {};
+  const shouldMatchPrefilledValue = field.type !== "radioInput" && !field.variantsConfig;
+  const errorMessage = (formState?.errors?.responses?.message || "") as string;
+  const fieldNameThatHasError = getFieldNameFromErrorMessage(errorMessage);
+  if (fieldNameThatHasError === field.name) {
+    return false;
+  }
+
+  const searchParamValue = toPrefillValues[field.name];
+  const prefilledValue = prefilledValues[field.name];
+
+  if (!shouldMatchPrefilledValue) {
+    if (isValueSet(searchParamValue) && isValueSet(prefilledValue)) {
+      if (field.type === "radioInput") {
+        return hasValidRadioInputValue({ value: prefilledValue, optionsInputs: field.optionsInputs });
+      }
+      return true;
+    }
+  }
+
+  if (!isValueSet(prefilledValue)) {
+    return false;
+  }
+
+  if (!toPrefillValues) {
+    return false;
+  }
+
+  if (searchParamValue == prefilledValue?.toString()) {
+    return true;
+  }
+
+  return isEqual(searchParamValue, prefilledValue);
+
+  function isValueSet(value: string | string[] | null | undefined): boolean {
+    return value !== null && value !== undefined && value !== "";
+  }
+
+  function hasValidRadioInputValue({
+    value,
+    optionsInputs,
+  }: {
+    value: { optionValue: string; value: string };
+    optionsInputs: Record<string, unknown> | undefined;
+  }): boolean {
+    const requiresOptionInputField = optionsInputs?.[value.value];
+    if (!requiresOptionInputField) {
+      return !!value.value;
+    }
+
+    return !!value.value && !!value.optionValue;
+  }
+};

package/src/vendor/form-builder/utils/__tests__/get-field-identifier.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+import { getFieldIdentifier } from "../get-field-identifier";
+
+describe("getFieldIdentifier", () => {
+  it("preserves valid names", () => {
+    expect(getFieldIdentifier("firstName")).toBe("firstName");
+    expect(getFieldIdentifier("first_name-01")).toBe("first_name-01");
+  });
+
+  it("replaces spaces and special chars with dashes", () => {
+    expect(getFieldIdentifier("first name")).toBe("first-name");
+    expect(getFieldIdentifier("my@name!")).toBe("my-name-");
+  });
+});

package/src/vendor/form-builder/utils/__tests__/variants-config.test.ts

@@ -0,0 +1,98 @@
+import { describe, expect, it } from "vitest";
+import { getConfig, getTranslatedConfig } from "../variants-config";
+
+describe("getConfig", () => {
+  it("throws when field.type is not a known config map key", () => {
+    expect(() => getConfig({ type: "bogus-type-xyz", variantsConfig: undefined })).toThrow(
+      /Invalid field\.type/
+    );
+  });
+
+  it("returns the field's own variantsConfig when provided", () => {
+    const fieldVariantsConfig = {
+      variants: {
+        fullName: { fields: [{ name: "fullName", type: "text", label: "", required: true }] },
+      },
+    };
+    const config = getConfig({ type: "name", variantsConfig: fieldVariantsConfig });
+    expect(config).toBe(fieldVariantsConfig);
+  });
+
+  it("falls back to defaultValue when field has no variantsConfig", () => {
+    const config = getConfig({ type: "name", variantsConfig: undefined });
+    expect(config).toBeDefined();
+    // @ts-expect-error — runtime-only check
+    expect(config.variants).toBeDefined();
+  });
+});
+
+describe("getTranslatedConfig", () => {
+  const fakeTranslate = (k: string) => `t(${k})`;
+
+  it("returns the variants config with labels and placeholders passed through translate()", () => {
+    const out = getTranslatedConfig(
+      {
+        type: "name",
+        variantsConfig: {
+          defaultVariant: "fullName",
+          variants: {
+            fullName: {
+              fields: [
+                { name: "fullName", type: "text", label: "raw_label", placeholder: "raw_ph", required: true },
+              ],
+            },
+            firstAndLastName: {
+              fields: [
+                { name: "firstName", type: "text", label: "first_label", required: true },
+                { name: "lastName", type: "text", label: "", required: false },
+              ],
+            },
+          },
+        },
+      },
+      fakeTranslate
+    );
+    // @ts-expect-error — runtime-only check
+    const fields = out.variants.fullName.fields;
+    expect(fields[0].label).toBe("t(raw_label)");
+    expect(fields[0].placeholder).toBe("t(raw_ph)");
+  });
+
+  it("uses defaultLabel from fieldTypesConfigMap when field.label is empty", () => {
+    const out = getTranslatedConfig(
+      {
+        type: "name",
+        variantsConfig: {
+          defaultVariant: "fullName",
+          variants: {
+            fullName: {
+              fields: [{ name: "fullName", type: "text", label: "", required: true }],
+            },
+          },
+        },
+      },
+      fakeTranslate
+    );
+    // @ts-expect-error — runtime-only check
+    const fields = out.variants.fullName.fields;
+    expect(typeof fields[0].label).toBe("string");
+    expect(fields[0].label.startsWith("t(")).toBe(true);
+  });
+
+  it("returns variantsConfig as-is when getConfig returns a falsy value (shouldn't happen but guarded)", () => {
+    // Simulate by giving a type where variantsConfig is truthy
+    const out = getTranslatedConfig(
+      {
+        type: "name",
+        variantsConfig: {
+          defaultVariant: "fullName",
+          variants: {
+            fullName: { fields: [] },
+          },
+        },
+      },
+      fakeTranslate
+    );
+    expect(out).toBeDefined();
+  });
+});