improve browser language detection and set nl-be fallback

.changeset/nasty-bottles-pump.md

@@ -0,0 +1,5 @@
+---
+"frontend-gelinkt-notuleren": minor
+---
+
+Improve browser language detection and set a fallback of `nl-BE`

app/routes/application.js

@@ -1,6 +1,7 @@
 import Route from '@ember/routing/route';
 import { service } from '@ember/service';
 import ENV from 'frontend-gelinkt-notuleren/config/environment';
+import { decentLocaleMatch } from '../utils/intl';
 
 const featureFlagRegex = /^feature\[(.+)\]$/;
 
@@ -9,8 +10,15 @@ export default class ApplicationRoute extends Route {
   @service features;
   @service session;
   @service plausible;
+  @service intl;
 
   async beforeModel(transition) {
+    const userLocales = decentLocaleMatch(
+      navigator.languages,
+      this.intl.locales,
+      'nl-BE',
+    );
+    this.intl.setLocale(userLocales);
     this.updateFeatureFlags(transition.to.queryParams);
     await this.startAnalytics();
     await this.session.setup();

app/utils/intl.js

@@ -0,0 +1,34 @@
+/**
+ * Helper function to help pick supported locales for ember-intl.
+ * Returns exact matches first, then language matches, then the default.
+ **/
+export function decentLocaleMatch(
+  userLocales,
+  supportedLocales,
+  defaultLocale,
+) {
+  // Ember-intl lowercases locales so we can make comparisons easier by doing the same
+  const userLocs = userLocales.map((locale) => locale.toLowerCase());
+  const supportedLocs = supportedLocales.map((locale) => locale.toLowerCase());
+
+  // First find exact matches. Use a set to avoid duplicates while preserving insert order.
+  const matches = new Set(
+    userLocs.filter((locale) => supportedLocs.includes(locale)),
+  );
+
+  // Then look for locales that just match based on language,
+  // e.g. match en or en-US if looking for en-GB
+  const languageMap = {};
+  supportedLocs.forEach((locale) => {
+    const lang = locale.split('-')[0];
+    languageMap[lang] = [...(languageMap[lang] || []), locale];
+  });
+  userLocs.forEach((locale) => {
+    const looseMatches = languageMap[locale.split('-')[0]] ?? [];
+    looseMatches.forEach((match) => matches.add(match));
+  });
+
+  // Add the default so we always have something
+  matches.add(defaultLocale.toLowerCase());
+  return [...matches];
+}