feat: Add Dutch language support. (#6737)

apps/web/i18n.json

@@ -7,7 +7,7 @@
   },
   "locale": {
     "source": "en-US",
-    "targets": ["de-DE", "fr-FR", "ja-JP", "pt-BR", "pt-PT", "ro-RO", "zh-Hans-CN", "zh-Hant-TW"]
+    "targets": ["de-DE", "fr-FR", "ja-JP", "pt-BR", "pt-PT", "ro-RO", "zh-Hans-CN", "zh-Hant-TW", "nl-NL"]
   },
   "version": 1.8
 }

apps/web/i18n.lock

@@ -915,15 +915,12 @@ checksums:
     environments/settings/billing/manage_subscription: 31cafd367fc70d656d8dd979d537dc96
     environments/settings/billing/monthly: 818f1192e32bb855597f930d3e78806e
     environments/settings/billing/monthly_identified_users: 0795735f6b241d31edac576a77dd7e55
-    environments/settings/billing/per_month: 64e96490ee2d7811496cf04adae30aa4
-    environments/settings/billing/per_year: bf02408d157486e53c15a521a5645617
     environments/settings/billing/plan_upgraded_successfully: 52e2a258cc9ca8a512c288bf6f18cf37
     environments/settings/billing/premium_support_with_slas: 2e33d4442c16bfececa6cae7b2081e5d
     environments/settings/billing/remove_branding: 88b6b818750e478bfa153b33dd658280
     environments/settings/billing/startup: 4c4ac5a0b9dc62100bca6c6465f31c4c
     environments/settings/billing/startup_description: 964fcb2c77f49b80266c94606e3f4506
     environments/settings/billing/switch_plan: fb3e1941051a4273ca29224803570f4b
-    environments/settings/billing/switch_plan_confirmation_text: 910a6df56964619975c6ed5651a55db7
     environments/settings/billing/team_access_roles: 1cc4af14e589f6c09ab92a4f21958049
     environments/settings/billing/unable_to_upgrade_plan: 50fc725609411d139e534c85eeb2879e
     environments/settings/billing/unlimited_miu: 29c3f5bd01c2a09fdf1d3601665ce90f

apps/web/lib/constants.ts

@@ -170,6 +170,7 @@ export const AVAILABLE_LOCALES: TUserLocale[] = [
   "de-DE",
   "pt-BR",
   "fr-FR",
+  "nl-NL",
   "zh-Hant-TW",
   "pt-PT",
   "ro-RO",

apps/web/lib/i18n/utils.ts

@@ -137,6 +137,7 @@ export const appLanguages = [
       "ro-RO": "Engleză (SUA)",
       "ja-JP": "英語（米国）",
       "zh-Hans-CN": "英语（美国）",
+      "nl-NL": "Engels (VS)",
     },
   },
   {
@@ -151,6 +152,7 @@ export const appLanguages = [
       "ro-RO": "Germană",
       "ja-JP": "ドイツ語",
       "zh-Hans-CN": "德语",
+      "nl-NL": "Duits",
     },
   },
   {
@@ -165,6 +167,7 @@ export const appLanguages = [
       "ro-RO": "Portugheză (Brazilia)",
       "ja-JP": "ポルトガル語（ブラジル）",
       "zh-Hans-CN": "葡萄牙语（巴西）",
+      "nl-NL": "Portugees (Brazilië)",
     },
   },
   {
@@ -179,6 +182,7 @@ export const appLanguages = [
       "ro-RO": "Franceză",
       "ja-JP": "フランス語",
       "zh-Hans-CN": "法语",
+      "nl-NL": "Frans",
     },
   },
   {
@@ -193,6 +197,7 @@ export const appLanguages = [
       "ro-RO": "Chineză (Tradicională)",
       "ja-JP": "中国語（繁体字）",
       "zh-Hans-CN": "繁体中文",
+      "nl-NL": "Chinees (Traditioneel)",
     },
   },
   {
@@ -207,6 +212,7 @@ export const appLanguages = [
       "ro-RO": "Portugheză (Portugalia)",
       "ja-JP": "ポルトガル語（ポルトガル）",
       "zh-Hans-CN": "葡萄牙语（葡萄牙）",
+      "nl-NL": "Portugees (Portugal)",
     },
   },
   {
@@ -221,6 +227,7 @@ export const appLanguages = [
       "ro-RO": "Română",
       "ja-JP": "ルーマニア語",
       "zh-Hans-CN": "罗马尼亚语",
+      "nl-NL": "Roemeens",
     },
   },
   {
@@ -235,6 +242,7 @@ export const appLanguages = [
       "ro-RO": "Japoneză",
       "ja-JP": "日本語",
       "zh-Hans-CN": "日语",
+      "nl-NL": "Japans",
     },
   },
   {
@@ -249,6 +257,22 @@ export const appLanguages = [
       "ro-RO": "Chineză (Simplificată)",
       "ja-JP": "中国語（簡体字）",
       "zh-Hans-CN": "简体中文",
+      "nl-NL": "Chinees (Vereenvoudigd)",
+    },
+  },
+  {
+    code: "nl-NL",
+    label: {
+      "en-US": "Dutch",
+      "de-DE": "Niederländisch",
+      "pt-BR": "Holandês",
+      "fr-FR": "Néerlandais",
+      "zh-Hant-TW": "荷蘭語",
+      "pt-PT": "Holandês",
+      "ro-RO": "Olandeză",
+      "ja-JP": "オランダ語",
+      "zh-Hans-CN": "荷兰语",
+      "nl-NL": "Nederlands",
     },
   },
 ];

apps/web/lib/time.ts

@@ -1,5 +1,5 @@
 import { formatDistance, intlFormat } from "date-fns";
-import { de, enUS, fr, ja, pt, ptBR, ro, zhCN, zhTW } from "date-fns/locale";
+import { de, enUS, fr, ja, nl, pt, ptBR, ro, zhCN, zhTW } from "date-fns/locale";
 import { TUserLocale } from "@formbricks/types/user";
 
 export const convertDateString = (dateString: string | null) => {
@@ -91,6 +91,8 @@ const getLocaleForTimeSince = (locale: TUserLocale) => {
       return ptBR;
     case "fr-FR":
       return fr;
+    case "nl-NL":
+      return nl;
     case "zh-Hant-TW":
       return zhTW;
     case "pt-PT":

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

@@ -62,7 +62,10 @@ const validateLanguages = (languages: Language[], t: TFunction) => {
     return false;
   }
 
-  // Check if the chosen alias matches an ISO identifier of a language that hasn't been added
+  // Prevent choosing an alias that clashes with the ISO code of some other
+  // language. Without this guard users could create ambiguous language entries
+  // (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))) {
       toast.error(t("environments.project.languages.conflict_between_selected_alias_and_another_language"), {

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

@@ -43,8 +43,13 @@ export function LanguageSelect({ language, onLanguageChange, disabled, locale }:
     setIsOpen(false);
   };
 
+  // Most ISO entries don't ship with every locale translation, so fall back to
+  // English to keep the dropdown readable for locales such as Dutch that were
+  // added recently.
+  const getLabelForLocale = (item: TIso639Language) => item.label[locale] ?? item.label["en-US"];
+
   const filteredItems = items.filter((item) =>
-    item.label[locale].toLowerCase().includes(searchTerm.toLowerCase())
+    getLabelForLocale(item).toLowerCase().includes(searchTerm.toLowerCase())
   );
 
   // Focus the input when the dropdown is opened
@@ -61,7 +66,9 @@ export function LanguageSelect({ language, onLanguageChange, disabled, locale }:
         disabled={disabled}
         onClick={toggleDropdown}
         variant="ghost">
-        <span className="mr-2">{selectedOption?.label[locale] ?? t("common.select")}</span>
+        <span className="mr-2">
+          {selectedOption ? getLabelForLocale(selectedOption) : t("common.select")}
+        </span>
         <ChevronDown className="h-4 w-4" />
       </Button>
       <div
@@ -84,7 +91,7 @@ export function LanguageSelect({ language, onLanguageChange, disabled, locale }:
               onClick={() => {
                 handleOptionSelect(item);
               }}>
-              {item.label[locale]}
+              {getLabelForLocale(item)}
             </button>
           ))}
         </div>

apps/web/vitestSetup.ts

@@ -211,7 +211,18 @@ vi.mock("@/lib/constants", () => ({
   SESSION_MAX_AGE: 1000,
   MAX_ATTRIBUTE_CLASSES_PER_ENVIRONMENT: 100,
   MAX_OTHER_OPTION_LENGTH: 250,
-  AVAILABLE_LOCALES: ["en-US", "de-DE", "pt-BR", "fr-FR", "zh-Hant-TW", "pt-PT"],
+  AVAILABLE_LOCALES: [
+    "en-US",
+    "de-DE",
+    "pt-BR",
+    "fr-FR",
+    "nl-NL",
+    "zh-Hant-TW",
+    "pt-PT",
+    "ro-RO",
+    "ja-JP",
+    "zh-Hans-CN",
+  ],
   DEFAULT_LOCALE: "en-US",
   BREVO_API_KEY: "mock-brevo-api-key",
   ITEMS_PER_PAGE: 30,