fix: mls labels not set properly on question create (#2979)

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsView.tsx

@@ -14,7 +14,7 @@ import { createId } from "@paralleldrive/cuid2";
 import React, { SetStateAction, useEffect, useMemo, useState } from "react";
 import toast from "react-hot-toast";
 import { MultiLanguageCard } from "@formbricks/ee/multi-language/components/multi-language-card";
-import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
+import { addMultiLanguageLabels, extractLanguageCodes, getLocalizedValue } from "@formbricks/lib/i18n/utils";
 import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { getDefaultEndingCard } from "@formbricks/lib/templates";
 import { checkForEmptyFallBackValue, extractRecallInfo } from "@formbricks/lib/utils/recall";
@@ -264,10 +264,13 @@ export const QuestionsView = ({
       question.backButtonLabel = backButtonLabel;
     }
 
+    const languageSymbols = extractLanguageCodes(localSurvey.languages);
+    const updatedQuestion = addMultiLanguageLabels(question, languageSymbols);
+
     if (index) {
-      updatedSurvey.questions.splice(index, 0, { ...question, isDraft: true });
+      updatedSurvey.questions.splice(index, 0, { ...updatedQuestion, isDraft: true });
     } else {
-      updatedSurvey.questions.push({ ...question, isDraft: true });
+      updatedSurvey.questions.push({ ...updatedQuestion, isDraft: true });
     }
 
     setLocalSurvey(updatedSurvey);

packages/ee/multi-language/components/multi-language-card.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import type { FC } from "react";
 import { useState } from "react";
 import { cn } from "@formbricks/lib/cn";
+import { addMultiLanguageLabels, extractLanguageCodes } from "@formbricks/lib/i18n/utils";
 import type { TLanguage, TProduct } from "@formbricks/types/product";
 import type { TSurvey, TSurveyLanguage } from "@formbricks/types/surveys/types";
 import { AdvancedOptionToggle } from "@formbricks/ui/AdvancedOptionToggle";
@@ -73,7 +74,9 @@ export const MultiLanguageCard: FC<MultiLanguageCardProps> = ({
   };
 
   const updateSurveyTranslations = (survey: TSurvey, updatedLanguages: TSurveyLanguage[]) => {
-    const updatedSurvey = { ...survey, languages: updatedLanguages };
+    const translatedSurveyResult = addMultiLanguageLabels(survey, extractLanguageCodes(updatedLanguages));
+
+    const updatedSurvey = { ...translatedSurveyResult, languages: updatedLanguages };
     setLocalSurvey(updatedSurvey as TSurvey);
   };
 

packages/lib/i18n/utils.ts

@@ -840,3 +840,38 @@ export const getLanguageLabel = (languageCode: string) => {
   const language = iso639Languages.find((lang) => lang.alpha2 === languageCode);
   return `${language?.english}`;
 };
+
+// Helper function to add language keys to a multi-language object (e.g. survey or question)
+// Iterates over the object recursively and adds empty strings for new language keys
+export const addMultiLanguageLabels = (object: any, languageSymbols: string[]): any => {
+  // Helper function to add language keys to a multi-language object
+  function addLanguageKeys(obj: { default: string; [key: string]: string }) {
+    languageSymbols.forEach((lang) => {
+      if (!obj.hasOwnProperty(lang)) {
+        obj[lang] = ""; // Add empty string for new language keys
+      }
+    });
+  }
+
+  // Recursive function to process an object or array
+  function processObject(obj: any) {
+    if (Array.isArray(obj)) {
+      obj.forEach((item) => processObject(item));
+    } else if (obj && typeof obj === "object") {
+      for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          if (key === "default" && typeof obj[key] === "string") {
+            addLanguageKeys(obj);
+          } else {
+            processObject(obj[key]);
+          }
+        }
+      }
+    }
+  }
+
+  // Start processing the question object
+  processObject(object);
+
+  return object;
+};