Merge pull request #1144 from brave/master

Production Release 2024-03-19

lingui.config.ts

@@ -0,0 +1,19 @@
+import type { LinguiConfig } from "@lingui/conf";
+
+const config: LinguiConfig = {
+  locales: ["en", "es", "pt", "test"],
+  pseudoLocale: "test",
+  fallbackLocales: {
+    test: "en",
+    default: "en",
+  },
+  catalogs: [
+    {
+      path: "<rootDir>/src/locales/{locale}",
+      include: ["src"],
+    },
+  ],
+  format: "po",
+};
+
+export default config;

package.json

@@ -9,6 +9,7 @@
     "@fontsource/mulish": "5.0.17",
     "@fontsource/poppins": "5.0.12",
     "@jonkoops/matomo-tracker-react": "0.7.0",
+    "@lingui/detect-locale": "4.7.1",
     "@lingui/macro": "4.7.1",
     "@lingui/react": "4.7.1",
     "@mui/icons-material": "5.15.12",
@@ -46,8 +47,7 @@
     "prepare": "husky",
     "audit:resolve": "resolve-audit",
     "lint:fix": "eslint --fix src",
-    "extract": "lingui extract",
-    "compile": "lingui compile"
+    "extract": "lingui extract"
   },
   "devDependencies": {
     "@babel/core": "7.24.0",

src/App.tsx

@@ -37,8 +37,7 @@ export function App() {
   enableLinkTracking();
 
   useEffect(() => {
-    const browserLanguage = navigator.language;
-    dynamicActivate(browserLanguage).then(() => {
+    dynamicActivate().then(() => {
       setLanguage(true);
     });
   }, []);

src/auth/registration/AccountChoice.tsx

@@ -50,7 +50,7 @@ export function AccountChoice() {
       <Link
         underline="none"
         variant="caption"
-        href="https://ads-help.brave.com/category/brave-browser"
+        href="https://ads-help.brave.com/category/ad-placements"
       >
         <Trans>Learn more about various campaign types</Trans>
       </Link>

src/i18n.ts

@@ -1,19 +1,28 @@
 import { i18n } from "@lingui/core";
+import { detect, fromUrl } from "@lingui/detect-locale";
 
 const locales = [
   { code: "en", name: "English" },
   { code: "es", name: "Español" },
-  { code: "por", name: "Português" },
+  { code: "pt", name: "Português" },
+  { code: "test", name: "Pseudolocale" },
 ];
 
-/**
- * We do a dynamic import of just the catalog that we need
- * @param locale any locale string
- */
-export async function dynamicActivate(locale: string) {
-  const browserLocale = locales.find((l) => locale.includes(l.code));
-  const foundLocale = browserLocale ? browserLocale.code : "en";
-  const { messages } = await import(`./locales/${foundLocale}.po`);
-  i18n.load(foundLocale, messages);
-  i18n.activate(foundLocale);
+export async function dynamicActivate() {
+  let locale = "en";
+
+  const detectedLocale = detect(fromUrl("lang") /*fromNavigator(), */);
+
+  if (detectedLocale) {
+    const matchedLocale = locales.find((l) =>
+      detectedLocale.startsWith(l.code),
+    );
+    if (matchedLocale) {
+      locale = matchedLocale.code;
+    }
+  }
+
+  console.log(`detected locale "${detectedLocale}" using locale "${locale}"`);
+  const { messages } = await import(`./locales/${locale}.po`);
+  i18n.loadAndActivate({ locale: locale, messages });
 }