diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx index 200d93dcc6..edba85db87 100644 --- a/packages/features/form-builder/FormBuilder.tsx +++ b/packages/features/form-builder/FormBuilder.tsx @@ -30,8 +30,8 @@ import { import { fieldTypesConfigMap } from "./fieldTypes"; import { fieldsThatSupportLabelAsSafeHtml } from "./fieldsThatSupportLabelAsSafeHtml"; import type { fieldsSchema } from "./schema"; -import { getVariantsConfig } from "./utils"; import { getFieldIdentifier } from "./utils/getFieldIdentifier"; +import { getConfig as getVariantsConfig } from "./utils/variantsConfig"; type RhfForm = { fields: z.infer; diff --git a/packages/features/form-builder/FormBuilderField.tsx b/packages/features/form-builder/FormBuilderField.tsx index c9b6a1e9f3..26b9960ef2 100644 --- a/packages/features/form-builder/FormBuilderField.tsx +++ b/packages/features/form-builder/FormBuilderField.tsx @@ -11,7 +11,7 @@ import { Components, isValidValueProp } from "./Components"; import { fieldTypesConfigMap } from "./fieldTypes"; import { fieldsThatSupportLabelAsSafeHtml } from "./fieldsThatSupportLabelAsSafeHtml"; import type { fieldsSchema } from "./schema"; -import { getVariantsConfig } from "./utils"; +import { getTranslatedConfig as getTranslatedVariantsConfig } from "./utils/variantsConfig"; type RhfForm = { fields: z.infer; @@ -211,6 +211,7 @@ export const ComponentForField = ({ } & ValueProps) => { const fieldType = field.type || "text"; const componentConfig = Components[fieldType]; + const { t } = useLocale(); const isValueOfPropsType = (val: unknown, propsType: typeof componentConfig.propsType) => { const isValid = isValidValueProp[propsType](val); @@ -333,8 +334,8 @@ export const ComponentForField = ({ } if (componentConfig.propsType === "variants") { - const variantsConfig = getVariantsConfig(field); - if (!variantsConfig) { + const translatedVariantsConfig = getTranslatedVariantsConfig(field, t); + if (!translatedVariantsConfig) { return null; } @@ -346,7 +347,7 @@ export const ComponentForField = ({ variant={field.variant} value={value as { value: string; optionValue: string }} setValue={setValue as (arg: Record | string) => void} - variants={variantsConfig.variants} + variants={translatedVariantsConfig.variants} /> ); } diff --git a/packages/features/form-builder/fieldTypes.ts b/packages/features/form-builder/fieldTypes.ts index 1fb4809be1..20ce385fd2 100644 --- a/packages/features/form-builder/fieldTypes.ts +++ b/packages/features/form-builder/fieldTypes.ts @@ -66,7 +66,7 @@ const configMap: Record, " { name: "fullName", type: "text", - label: "Your Name", + label: "your_name", required: true, }, ], diff --git a/packages/features/form-builder/schema.ts b/packages/features/form-builder/schema.ts index d2b8c8405d..859095c296 100644 --- a/packages/features/form-builder/schema.ts +++ b/packages/features/form-builder/schema.ts @@ -3,7 +3,8 @@ import { z } from "zod"; import { getValidRhfFieldName } from "@calcom/lib/getValidRhfFieldName"; import { fieldTypesConfigMap } from "./fieldTypes"; -import { getVariantsConfig, preprocessNameFieldDataWithVariant } from "./utils"; +import { preprocessNameFieldDataWithVariant } from "./utils"; +import { getConfig as getVariantsConfig } from "./utils/variantsConfig"; const nonEmptyString = () => z.string().refine((value: string) => value.trim().length > 0); diff --git a/packages/features/form-builder/utils.ts b/packages/features/form-builder/utils.ts index bb4e513d7f..1028a5f521 100644 --- a/packages/features/form-builder/utils.ts +++ b/packages/features/form-builder/utils.ts @@ -1,8 +1,3 @@ -import type z from "zod"; - -import { fieldTypesConfigMap } from "./fieldTypes"; -import type { fieldSchema } from "./schema"; - export const preprocessNameFieldDataWithVariant = ( variantName: "fullName" | "firstAndLastName", value: string | Record<"firstName" | "lastName", string> | undefined @@ -53,21 +48,3 @@ function getFirstAndLastName(value: string | Record<"firstName" | "lastName", st } return newValue; } - -/** - * Get's the field's variantsConfig and if not available, then it will get the default variantsConfig from the fieldTypesConfigMap - */ -export const getVariantsConfig = (field: Pick, "variantsConfig" | "type">) => { - const fieldVariantsConfig = field.variantsConfig; - const fieldTypeConfig = fieldTypesConfigMap[field.type as keyof typeof fieldTypesConfigMap]; - - if (!fieldTypeConfig) throw new Error(`Invalid field.type ${field.type}}`); - - const defaultVariantsConfig = fieldTypeConfig?.variantsConfig?.defaultValue; - const variantsConfig = fieldVariantsConfig || defaultVariantsConfig; - - if (fieldTypeConfig.propsType === "variants" && !variantsConfig) { - throw new Error(`propsType variants must have variantsConfig`); - } - return variantsConfig; -}; diff --git a/packages/features/form-builder/utils/variantsConfig.ts b/packages/features/form-builder/utils/variantsConfig.ts new file mode 100644 index 0000000000..772716d853 --- /dev/null +++ b/packages/features/form-builder/utils/variantsConfig.ts @@ -0,0 +1,59 @@ +import type z from "zod"; + +import type { useLocale } from "@calcom/lib/hooks/useLocale"; + +import { fieldTypesConfigMap } from "../fieldTypes"; +import type { fieldSchema } from "../schema"; + +type ConfigVariants = NonNullable>["variants"]; +type Field = z.infer; +type Translate = ReturnType["t"]; + +function getTranslatedConfigVariants(configVariants: ConfigVariants, translate: Translate) { + return Object.entries(configVariants).reduce((variantsConfigVariants, [variantName, variant]) => { + const translatedFields = variant.fields.map((field) => { + const label = field.label ?? ""; + const placeholder = field.placeholder ?? ""; + return { + ...field, + label: translate(label), + placeholder: translate(placeholder), + }; + }); + variantsConfigVariants[variantName] = { + ...variant, + fields: translatedFields, + }; + + return variantsConfigVariants; + }, {} as typeof configVariants); +} + +/** + * Get's the field's variantsConfig and if not available, then it will get the default variantsConfig from the fieldTypesConfigMap + */ +export const getConfig = (field: Pick) => { + const fieldVariantsConfig = field.variantsConfig; + const fieldTypeConfig = fieldTypesConfigMap[field.type as keyof typeof fieldTypesConfigMap]; + + if (!fieldTypeConfig) throw new Error(`Invalid field.type ${field.type}}`); + + const defaultVariantsConfig = fieldTypeConfig?.variantsConfig?.defaultValue; + const variantsConfig = fieldVariantsConfig || defaultVariantsConfig; + + if (fieldTypeConfig.propsType === "variants" && !variantsConfig) { + throw new Error(`propsType variants must have variantsConfig`); + } + return variantsConfig; +}; + +export const getTranslatedConfig = (field: Pick, translate: Translate) => { + const variantsConfig = getConfig(field); + if (!variantsConfig) return variantsConfig; + const newVariantsConfigVariants = getTranslatedConfigVariants(variantsConfig.variants, translate); + + return { + ...variantsConfig, + variants: newVariantsConfigVariants, + }; +};