do translation outside Components as that is needed by all components. Allows the code to stay DRY

Author: hariombalhara

packages/features/form-builder/Components.tsx

@@ -23,7 +23,6 @@ import {
 } from "@calcom/ui";
 
 import { ComponentForField } from "./FormBuilderField";
-import { getAndUpdateNormalizedValues } from "./FormBuilderField";
 import { propsTypes } from "./propsTypes";
 import type { fieldSchema, FieldType, variantsConfigSchema } from "./schema";
 import { preprocessNameFieldDataWithVariant } from "./utils";
@@ -111,9 +110,8 @@ export const Components: Record<FieldType, Component> = {
   name: {
     propsType: propsTypes.name,
     // Keep special "name" type field and later build split(FirstName and LastName) variant of it.
-    factory: function NameInput(props) {
+    factory: (props) => {
       const { variant: variantName = "fullName" } = props;
-      const { t } = useLocale();
       const onChange = (name: string, value: string) => {
         let currentValue = props.value;
         if (typeof currentValue !== "object") {
@@ -141,13 +139,12 @@ export const Components: Record<FieldType, Component> = {
         }
         const variant = props.variants[variantName];
         const variantField = variant.fields[0];
-        const { placeholder, label } = getAndUpdateNormalizedValues(variantField, t);
         return (
           <InputField
             name="name"
             showAsteriskIndicator={true}
-            placeholder={placeholder}
-            label={label}
+            placeholder={variantField.placeholder}
+            label={variantField.label}
             containerClassName="w-full"
             readOnly={props.readOnly}
             value={value}

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<typeof fieldsSchema>;

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<typeof fieldsSchema>;
@@ -179,7 +179,7 @@ export function getAndUpdateNormalizedValues(field: RhfFormFields[number], t: TF
     throw new Error(`${field.name}:${field.type} type must have labelAsSafeHtml set`);
   }
 
-  const label = noLabel ? "" : field.labelAsSafeHtml || t(field.label || "") || t(field.defaultLabel || "");
+  const label = noLabel ? "" : field.labelAsSafeHtml || field.label || t(field.defaultLabel || "");
   const placeholder = field.placeholder || t(field.defaultPlaceholder || "");
 
   if (field.variantsConfig?.variants) {
@@ -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, string> | string) => void}
-        variants={variantsConfig.variants}
+        variants={translatedVariantsConfig.variants}
       />
     );
   }

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);
 

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<z.infer<typeof fieldSchema>, "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;
-};

packages/features/form-builder/utils/variantsConfig.ts

@@ -0,0 +1,63 @@
+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<ReturnType<typeof getConfig>>["variants"];
+
+function getTranslatedConfigVariants(
+  configVariants: ConfigVariants,
+  translate: ReturnType<typeof useLocale>["t"]
+) {
+  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<z.infer<typeof fieldSchema>, "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;
+};
+
+export const getTranslatedConfig = (
+  field: Parameters<typeof getConfig>[0],
+  translate: ReturnType<typeof useLocale>["t"]
+) => {
+  const variantsConfig = getConfig(field);
+  if (!variantsConfig) return variantsConfig;
+  const newVariantsConfigVariants = getTranslatedConfigVariants(variantsConfig.variants, translate);
+
+  return {
+    ...variantsConfig,
+    variants: newVariantsConfigVariants,
+  };
+};