fix: your name translation (#14863)

* your name translation fixed

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

---------

Co-authored-by: Hariom <hariombalhara@gmail.com>

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>;
@@ -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/fieldTypes.ts

@@ -66,7 +66,7 @@ const configMap: Record<FieldType, Omit<z.infer<typeof fieldTypeConfigSchema>, "
               {
                 name: "fullName",
                 type: "text",
-                label: "Your Name",
+                label: "your_name",
                 required: true,
               },
             ],

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,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<ReturnType<typeof getConfig>>["variants"];
+type Field = z.infer<typeof fieldSchema>;
+type Translate = ReturnType<typeof useLocale>["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<Field, "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: Pick<Field, "variantsConfig" | "type">, translate: Translate) => {
+  const variantsConfig = getConfig(field);
+  if (!variantsConfig) return variantsConfig;
+  const newVariantsConfigVariants = getTranslatedConfigVariants(variantsConfig.variants, translate);
+
+  return {
+    ...variantsConfig,
+    variants: newVariantsConfigVariants,
+  };
+};