feat: use i18n in frontend

frontend/src/dictionaries/i18n

@@ -0,0 +1 @@
+../../../backend/src/main/resources/i18n/

frontend/src/dictionaries/index.ts

@@ -0,0 +1,26 @@
+import { Resource } from "i18next";
+
+import de from "./i18n/de.json";
+import en from "./i18n/en.json";
+import es from "./i18n/es.json";
+import fr from "./i18n/fr.json";
+import it from "./i18n/it.json";
+import pt from "./i18n/pt.json";
+
+const dictionaries = {
+  de,
+  en,
+  es,
+  fr,
+  it,
+  pt,
+};
+
+const resources: Resource = {};
+Object.keys(dictionaries).forEach((k: string) => {
+  resources[k] = {
+    magneto: dictionaries[k],
+  };
+});
+
+export { resources };

frontend/src/i18n.ts

@@ -3,25 +3,34 @@ import LanguageDetector from "i18next-browser-languagedetector";
 import Backend from "i18next-http-backend";
 import { initReactI18next } from "react-i18next";
 
+import { isEntNgContext } from "./utils/context.utils";
+import { resources } from "~/dictionaries";
+
 i18n
   .use(Backend)
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
-    backend: {
-      loadPath: (_lngs: string[], namespaces: string[]) => {
-        const urls = namespaces.map((namespace: string) => {
-          if (namespace === "common") {
-            return `/i18n`;
+    ...(() => {
+      return isEntNgContext
+        ? {
+            backend: {
+              loadPath: (_lngs: string[], namespaces: string[]) => {
+                const urls = namespaces.map((namespace: string) => {
+                  if (namespace === "common") {
+                    return `/i18n`;
+                  }
+                  return `/${namespace}/i18n`;
+                });
+                return urls;
+              },
+              parse: function (data: string) {
+                return JSON.parse(data);
+              },
+            },
           }
-          return `/${namespace}/i18n`;
-        });
-        return urls;
-      },
-      parse: function (data: string) {
-        return JSON.parse(data);
-      },
-    },
+        : { resources };
+    })(),
     defaultNS: "common",
     // you can add name of the app directly in the ns array
     ns: ["common", "magneto"],

frontend/src/utils/context.utils.ts

@@ -25,4 +25,4 @@ const OdeClientProvider = isEntNgContext
 
 const ThemeProvider = isEntNgContext ? EdificeThemeProvider : OpenThemeProvider;
 
-export { Layout, useOdeClient, OdeClientProvider, ThemeProvider };
+export { isEntNgContext, Layout, useOdeClient, OdeClientProvider, ThemeProvider };