fix: client locale inference (#10893)

* fix: client locale inference

* Update I18nLanguageHandler.tsx

* More fixes

* Update I18nLanguageHandler.tsx

* Update I18nLanguageHandler.tsx

* Addressing feedback

* Fix: first render issues

* Update Credits.tsx

* Fixed tests

* fix: try without loose locale pick

* Revert "fix: try without loose locale pick"

This reverts commit 5ed649c131.

* fix: sorts locales so specifics are chosen first

* fix: switches client locale matcher

apps/web/components/I18nLanguageHandler.tsx

@@ -1,4 +1,4 @@
-import parser from "accept-language-parser";
+import { lookup } from "bcp-47-match";
 import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import { useEffect } from "react";
@@ -28,7 +28,7 @@ function useClientLocale(locales: string[]) {
   if (typeof window !== "undefined") {
     // This is the only way I found to ensure the prefetched locale is used on first render
     // FIXME: Find a better way to pick the best matching locale from the browser
-    return parser.pick(locales, window.navigator.language, { loose: true }) || window.navigator.language;
+    return lookup(locales, window.navigator.language) || window.navigator.language;
   }
   // If the browser is not available, use English
   return "en";

apps/web/package.json

@@ -68,6 +68,7 @@
     "@vercel/og": "^0.5.0",
     "accept-language-parser": "^1.5.0",
     "async": "^3.2.4",
+    "bcp-47-match": "^2.0.3",
     "bcryptjs": "^2.4.3",
     "classnames": "^2.3.1",
     "dotenv-cli": "^6.0.0",

packages/trpc/server/routers/publicViewer/i18n.schema.ts

@@ -1,4 +1,4 @@
-import parser from "accept-language-parser";
+import { lookup } from "bcp-47-match";
 import { z } from "zod";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -8,7 +8,7 @@ export const i18nInputSchema = z.object({
   locale: z
     .string()
     .min(2)
-    .transform((locale) => parser.pick<string>(i18n.locales, locale, { loose: true }) || locale),
+    .transform((locale) => lookup(i18n.locales, locale) || locale),
   CalComVersion: z.string(),
 });
 

yarn.lock

@@ -4871,6 +4871,7 @@ __metadata:
     accept-language-parser: ^1.5.0
     async: ^3.2.4
     autoprefixer: ^10.4.12
+    bcp-47-match: ^2.0.3
     bcryptjs: ^2.4.3
     classnames: ^2.3.1
     copy-webpack-plugin: ^11.0.0
@@ -14912,6 +14913,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"bcp-47-match@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "bcp-47-match@npm:2.0.3"
+  checksum: b36d34a035f1329aeef1db4ebbb0d8d7d6db1e7db920711cdb8ec4948a276b5e75ff84bc007cb0ba71d40c8470d463e5f36486ba48427e72c15c5189ce9c6577
+  languageName: node
+  linkType: hard
+
 "bcrypt-pbkdf@npm:^1.0.0":
   version: 1.0.2
   resolution: "bcrypt-pbkdf@npm:1.0.2"