added i18n support for plugins

care.config.ts

@@ -121,6 +121,7 @@ const careConfig = {
   careApps: env.REACT_ENABLED_APPS
     ? env.REACT_ENABLED_APPS.split(",").map((app) => ({
         branch: app.split("@")[1],
+        name: app.split("@")[0].split("/")[1],
         package: app.split("@")[0],
       }))
     : [],

package.json

@@ -100,6 +100,7 @@
     "i18next": "^24.2.1",
     "i18next-browser-languagedetector": "^8.0.2",
     "i18next-http-backend": "^3.0.1",
+    "i18next-resources-to-backend": "^1.2.1",
     "input-otp": "^1.4.2",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.473.0",
@@ -138,7 +139,7 @@
     "@types/google.maps": "^3.58.1",
     "@types/jsdom": "^21.1.7",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^22.9.0",
+    "@types/node": "^22.10.10",
     "@types/react": "^18.3.12",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-csv": "^1.1.10",

src/i18n.ts

@@ -1,6 +1,8 @@
+import careConfig from "@careConfig";
 import i18n from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import HttpApi from "i18next-http-backend";
+import resourcesToBackend from "i18next-resources-to-backend";
 import { initReactI18next } from "react-i18next";
 
 export const LANGUAGES = {
@@ -12,21 +14,63 @@ export const LANGUAGES = {
   hi: "हिन्दी",
 } as const;
 
+function toURL(input: string) {
+  input = input.trim();
+  if (!input.startsWith("http://") && !input.startsWith("https://")) {
+    if (input.startsWith("localhost")) {
+      return `http://${input}`;
+    } else {
+      return `https://${input}`;
+    }
+  }
+  return input;
+}
+
+const namespaceToUrl = (namespace: string) => {
+  const careApp = careConfig.careApps.find((app) => app.name === namespace);
+
+  if (!careApp) {
+    return "";
+  }
+
+  return toURL(careApp.branch);
+};
+
 i18n
   .use(HttpApi)
   .use(initReactI18next)
   .use(LanguageDetector)
+  .use(
+    resourcesToBackend((language, namespace, callback) => {
+      fetch(`${namespaceToUrl(namespace)}/locale/${language}.json`)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+          return response.json();
+        })
+        .then((resources) => {
+          callback(null, resources);
+        })
+        .catch((error) => {
+          console.error(
+            `Failed to load translations for ${language}/${namespace}:`,
+            error,
+          );
+          callback(error, null);
+        });
+    }),
+  )
   .init({
-    backend: {
-      loadPath: "/locale/{{lng}}.json",
-    },
     fallbackLng: "en",
+    ns: ["care_fe", ...careConfig.careApps.map((app) => app.name)],
     load: "currentOnly",
     supportedLngs: Object.keys(LANGUAGES),
     interpolation: {
       escapeValue: false,
       skipOnVariables: false,
     },
+    defaultNS: "care_fe",
   });
 
 export default i18n;