feat: introduce language variations (#7082)

Co-authored-by: Dhruwang <dhruwangjariwala18@gmail.com>

apps/web/i18n.lock

@@ -1111,6 +1111,9 @@ checksums:
     environments/surveys/edit/assign: e80715ab64bf7cf463abb3a9fd1ad516
     environments/surveys/edit/audience: a4d9fab4214a641e2d358fbb28f010e0
     environments/surveys/edit/auto_close_on_inactivity: 093db516799315ccd4242a3675693012
+    environments/surveys/edit/auto_save_disabled: f7411fb0dcfb8f7b19b85f0be54f2231
+    environments/surveys/edit/auto_save_disabled_tooltip: 77322e1e866b7d29f7641a88bbd3b681
+    environments/surveys/edit/auto_save_on: 1524d466830b00c5d727c701db404963
     environments/surveys/edit/automatically_close_survey_after: 3e1c400a4b226c875dc8337e3b204d85
     environments/surveys/edit/automatically_close_the_survey_after_a_certain_number_of_responses: 2beee129dca506f041e5d1e6a1688310
     environments/surveys/edit/automatically_close_the_survey_if_the_user_does_not_respond_after_certain_number_of_seconds: 1be3819ffa1db67385357ae933d69a7b
@@ -1392,6 +1395,7 @@ checksums:
     environments/surveys/edit/please_specify: e1faa6cd085144f7339c7e74dc6fb366
     environments/surveys/edit/prevent_double_submission: afc502baa2da81d9c9618da1c3b5a57a
     environments/surveys/edit/prevent_double_submission_description: ef7d2aa22d43bdc6ccebb076c6aa9ce5
+    environments/surveys/edit/progress_saved: d7bfc189571f08bbb4d0240cb9363ffa
     environments/surveys/edit/protect_survey_with_pin: 16d1925b6a5770f7423772d6d9a8291a
     environments/surveys/edit/protect_survey_with_pin_description: 0e55d19b6f3578b1024e03606172a5d2
     environments/surveys/edit/publish: 4aa95ba4793bb293e771bd73b4f87c0f

apps/web/lib/i18n/utils.ts

@@ -88,7 +88,7 @@ export const getLanguageCode = (surveyLanguages: TSurveyLanguage[], languageCode
   return language?.default ? "default" : language?.language.code || "default";
 };
 
-export const iso639Identifiers = iso639Languages.map((language) => language.alpha2);
+export const iso639Identifiers = iso639Languages.map((language) => language.code);
 
 // 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

apps/web/modules/analysis/components/ShareSurveyLink/components/LanguageDropdown.tsx

@@ -1,11 +1,15 @@
 import { Languages } from "lucide-react";
-import { useRef, useState } from "react";
 import { getLanguageLabel } from "@formbricks/i18n-utils/src/utils";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
 import { getEnabledLanguages } from "@/lib/i18n/utils";
-import { useClickOutside } from "@/lib/utils/hooks/useClickOutside";
 import { Button } from "@/modules/ui/components/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/modules/ui/components/dropdown-menu";
 
 interface LanguageDropdownProps {
   survey: TSurvey;
@@ -14,38 +18,31 @@ interface LanguageDropdownProps {
 }
 
 export const LanguageDropdown = ({ survey, setLanguage, locale }: LanguageDropdownProps) => {
-  const [showLanguageSelect, setShowLanguageSelect] = useState(false);
-  const containerRef = useRef(null);
   const enabledLanguages = getEnabledLanguages(survey.languages ?? []);
 
-  useClickOutside(containerRef, () => setShowLanguageSelect(false));
+  if (enabledLanguages.length <= 1) {
+    return null;
+  }
 
   return (
-    enabledLanguages.length > 1 && (
-      <div className="relative" ref={containerRef}>
-        {showLanguageSelect && (
-          <div className="absolute top-12 z-30 max-h-64 max-w-48 overflow-auto rounded-lg border bg-slate-900 p-1 text-sm text-white">
-            {enabledLanguages.map((surveyLanguage) => (
-              <button
-                key={surveyLanguage.language.code}
-                className="w-full truncate rounded-md p-2 text-start hover:cursor-pointer hover:bg-slate-700"
-                onClick={() => {
-                  setLanguage(surveyLanguage.language.code);
-                  setShowLanguageSelect(false);
-                }}>
-                {getLanguageLabel(surveyLanguage.language.code, locale)}
-              </button>
-            ))}
-          </div>
-        )}
-        <Button
-          variant="secondary"
-          title="Select Language"
-          aria-label="Select Language"
-          onClick={() => setShowLanguageSelect(!showLanguageSelect)}>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="secondary" title="Select Language" aria-label="Select Language">
           <Languages className="h-5 w-5" />
         </Button>
-      </div>
-    )
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="max-h-64 max-w-48 overflow-auto bg-slate-900 p-1 text-sm text-white"
+        align="start">
+        {enabledLanguages.map((surveyLanguage) => (
+          <DropdownMenuItem
+            key={surveyLanguage.language.code}
+            className="w-full truncate rounded-md p-2 text-start text-white hover:cursor-pointer hover:bg-slate-700 focus:bg-slate-700"
+            onSelect={() => setLanguage(surveyLanguage.language.code)}>
+            {getLanguageLabel(surveyLanguage.language.code, locale)}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };

apps/web/modules/ee/multi-language-surveys/components/edit-language.tsx

@@ -67,7 +67,7 @@ const validateLanguages = (languages: Language[], t: TFunction) => {
   // (e.g. alias "nl" pointing to a non-Dutch language) which later breaks the
   // dropdowns that rely on ISO identifiers.
   for (const alias of languageAliases) {
-    if (iso639Languages.some((language) => language.alpha2 === alias && !languageCodes.includes(alias))) {
+    if (iso639Languages.some((language) => language.code === alias && !languageCodes.includes(alias))) {
       toast.error(
         t("environments.workspace.languages.conflict_between_selected_alias_and_another_language"),
         {

apps/web/modules/ee/multi-language-surveys/components/language-select.tsx

@@ -22,7 +22,7 @@ export function LanguageSelect({ language, onLanguageChange, disabled, locale }:
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedOption, setSelectedOption] = useState(
-    iso639Languages.find((isoLang) => isoLang.alpha2 === language.code)
+    iso639Languages.find((isoLang) => isoLang.code === language.code)
   );
   const items = iso639Languages;
 
@@ -39,7 +39,7 @@ export function LanguageSelect({ language, onLanguageChange, disabled, locale }:
 
   const handleOptionSelect = (option: TIso639Language) => {
     setSelectedOption(option);
-    onLanguageChange({ ...language, code: option.alpha2 || "" });
+    onLanguageChange({ ...language, code: option.code || "" });
     setIsOpen(false);
   };
 
@@ -87,7 +87,7 @@ export function LanguageSelect({ language, onLanguageChange, disabled, locale }:
           {filteredItems.map((item) => (
             <button
               className="block w-full cursor-pointer rounded-md px-4 py-2 text-left text-slate-700 hover:bg-slate-100 active:bg-blue-100"
-              key={item.alpha2}
+              key={item.code}
               onClick={() => {
                 handleOptionSelect(item);
               }}>

apps/web/playwright/survey.spec.ts

@@ -255,14 +255,14 @@ test.describe("Multi Language Survey Create", async () => {
     await page.getByRole("button", { name: "Select" }).click();
     await page.getByPlaceholder("Search items").click();
     await page.getByPlaceholder("Search items").fill("Eng");
-    await page.getByText("English").click();
+    await page.getByText("English", { exact: true }).click();
     await page.getByRole("button", { name: "Save changes" }).click();
     await page.getByRole("button", { name: "Edit languages" }).click();
     await page.getByRole("button", { name: "Add language" }).click();
     await page.getByRole("button", { name: "Select" }).click();
     await page.getByRole("textbox", { name: "Search items" }).click();
     await page.getByRole("textbox", { name: "Search items" }).fill("German");
-    await page.getByText("German").nth(1).click();
+    await page.getByText("German", { exact: true }).nth(1).click();
     await page.getByRole("button", { name: "Save changes" }).click();
     await page.waitForTimeout(2000);
     await page.getByRole("link", { name: "Surveys" }).click();