Allows configuring available languages through env and adds Hindi to …

…CARE (ohcnetwork#8692)

.env

@@ -12,3 +12,4 @@ REACT_CARE_API_URL=https://careapi.ohc.network
 # Dev envs
 ESLINT_NO_DEV_ERRORS=true
 CARE_CDN_URL="https://egov-s3-facility-10bedicu.s3.amazonaws.com https://egov-s3-patient-data-10bedicu.s3.amazonaws.com http://localhost:4566"
+REACT_ALLOWED_LOCALES="en,hi,ta,ml,mr,kn"

.example.env

@@ -76,3 +76,6 @@ REACT_JWT_TOKEN_REFRESH_INTERVAL=
 
 # Minimum encounter date (default: 2020-01-01)
 REACT_MIN_ENCOUNTER_DATE=
+
+# Available languages to switch between (2 Digit language code seperated by comas. See src->Locale->config.ts for available codes)
+REACT_ALLOWED_LOCALES="en,hi,ta,ml,mr,kn"

care.config.ts

@@ -38,6 +38,9 @@ const careConfig = {
   customLogo: logo(env.REACT_CUSTOM_LOGO),
   customLogoAlt: logo(env.REACT_CUSTOM_LOGO_ALT),
   customDescription: env.REACT_CUSTOM_DESCRIPTION,
+  availableLocales: (env.REACT_ALLOWED_LOCALES || "")
+    .split(",")
+    .map((l) => l.trim()),
 
   gmapsApiKey:
     env.REACT_GMAPS_API_KEY || "AIzaSyDsBAc3y7deI5ZO3NtK5GuzKwtUzQNJNUk",

src/Components/Common/LanguageSelector.tsx

@@ -1,8 +1,9 @@
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { LANGUAGE_NAMES } from "../../Locale/config";
 import { classNames } from "../../Utils/utils";
 import CareIcon from "../../CAREUI/icons/CareIcon";
+import careConfig from "@careConfig";
+import { LANGUAGES } from "../../i18n";
 
 export const LanguageSelector = (props: any) => {
   const { i18n } = useTranslation();
@@ -19,6 +20,10 @@ export const LanguageSelector = (props: any) => {
     }
   };
 
+  const availableLocales = Object.keys(LANGUAGES).filter((l) =>
+    careConfig.availableLocales?.includes(l),
+  );
+
   return (
     <div className="relative flex w-full items-center justify-end">
       <select
@@ -31,9 +36,9 @@ export const LanguageSelector = (props: any) => {
         value={i18n.language}
         onChange={(e: any) => handleLanguage(e.target.value)}
       >
-        {Object.keys(LANGUAGE_NAMES).map((e: string) => (
+        {availableLocales.map((e: string) => (
           <option key={e} value={e}>
-            {LANGUAGE_NAMES[e]}
+            {LANGUAGES[e]}
           </option>
         ))}
       </select>

src/Components/Common/LanguageSelectorLogin.tsx

@@ -1,7 +1,8 @@
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { LANGUAGE_NAMES } from "../../Locale/config";
 import { classNames } from "../../Utils/utils";
+import careConfig from "@careConfig";
+import { LANGUAGES } from "../../i18n";
 
 export const LanguageSelectorLogin = () => {
   const { i18n, t } = useTranslation();
@@ -17,12 +18,16 @@ export const LanguageSelectorLogin = () => {
     }
   };
 
+  const availableLocales = Object.keys(LANGUAGES).filter((l) =>
+    careConfig.availableLocales?.includes(l),
+  );
+
   return (
     <div className="mt-8 flex flex-col items-center text-sm text-secondary-800">
       {t("available_in")}
       <br />
-      <div className="inline-flex flex-wrap gap-3">
-        {Object.keys(LANGUAGE_NAMES).map((e: string) => (
+      <div className="inline-flex flex-wrap items-center justify-center gap-3">
+        {availableLocales.map((e: string) => (
           <button
             key={e}
             onClick={() => handleLanguage(e)}
@@ -33,7 +38,7 @@ export const LanguageSelectorLogin = () => {
                 "text-primary-600 underline",
             )}
           >
-            {LANGUAGE_NAMES[e]}
+            {LANGUAGES[e]}
           </button>
         ))}
       </div>

src/Locale/hi/HCX.json

@@ -0,0 +1 @@
+{}

src/Locale/hi/Patient.json

@@ -0,0 +1 @@
+{}

src/Locale/hi/index.ts

@@ -0,0 +1,45 @@
+import Asset from "./Asset.json";
+import Auth from "./Auth.json";
+import Bed from "./Bed.json";
+import Common from "./Common.json";
+import Consultation from "./Consultation.json";
+import CoverImageEdit from "./CoverImageEdit.json";
+import Diagnosis from "./Diagnosis.json";
+import Entities from "./Entities.json";
+import ErrorPages from "./ErrorPages.json";
+import ExternalResult from "./ExternalResult.json";
+import Facility from "./Facility.json";
+import FileUpload from "./FileUpload.json";
+import HCX from "./HCX.json";
+import Hub from "./Hub.json";
+import LogUpdate from "./LogUpdate.json";
+import Medicine from "./Medicine.json";
+import Notifications from "./Notifications.json";
+import Patient from "./Patient.json";
+import Resource from "./Resource.json";
+import Shifting from "./Shifting.json";
+import Users from "./Users.json";
+
+export default {
+  ...Auth,
+  ...Asset,
+  ...Common,
+  ...Consultation,
+  ...CoverImageEdit,
+  ...Entities,
+  ...ErrorPages,
+  ...ExternalResult,
+  ...Facility,
+  ...Hub,
+  ...Medicine,
+  ...Diagnosis,
+  ...Notifications,
+  ...Patient,
+  ...Resource,
+  ...Shifting,
+  ...Bed,
+  ...Users,
+  ...LogUpdate,
+  ...FileUpload,
+  ...HCX,
+};

src/Locale/kn/index.js → src/Locale/kn/index.ts

@@ -11,8 +11,10 @@ import ExternalResult from "./ExternalResult.json";
 import Facility from "./Facility.json";
 import FileUpload from "./FileUpload.json";
 import Hub from "./Hub.json";
+import LogUpdate from "./LogUpdate.json";
 import Medicine from "./Medicine.json";
 import Notifications from "./Notifications.json";
+import Resource from "./Resource.json";
 import Shifting from "./Shifting.json";
 import Users from "./Users.json";
 
@@ -30,8 +32,10 @@ export default {
   ...Medicine,
   ...Diagnosis,
   ...Notifications,
+  ...Resource,
   ...Shifting,
   ...Bed,
   ...Users,
+  ...LogUpdate,
   ...FileUpload,
 };

src/Locale/ml/index.ts

@@ -0,0 +1,41 @@
+import Asset from "./Asset.json";
+import Auth from "./Auth.json";
+import Bed from "./Bed.json";
+import Common from "./Common.json";
+import Consultation from "./Consultation.json";
+import CoverImageEdit from "./CoverImageEdit.json";
+import Diagnosis from "./Diagnosis.json";
+import Entities from "./Entities.json";
+import ErrorPages from "./ErrorPages.json";
+import ExternalResult from "./ExternalResult.json";
+import Facility from "./Facility.json";
+import FileUpload from "./FileUpload.json";
+import Hub from "./Hub.json";
+import LogUpdate from "./LogUpdate.json";
+import Medicine from "./Medicine.json";
+import Notifications from "./Notifications.json";
+import Resource from "./Resource.json";
+import Shifting from "./Shifting.json";
+import Users from "./Users.json";
+
+export default {
+  ...Auth,
+  ...Asset,
+  ...Common,
+  ...Consultation,
+  ...CoverImageEdit,
+  ...Entities,
+  ...ErrorPages,
+  ...ExternalResult,
+  ...Facility,
+  ...Hub,
+  ...Medicine,
+  ...Diagnosis,
+  ...Notifications,
+  ...Resource,
+  ...Shifting,
+  ...Bed,
+  ...Users,
+  ...LogUpdate,
+  ...FileUpload,
+};

src/Locale/ta/index.ts

@@ -0,0 +1,41 @@
+import Asset from "./Asset.json";
+import Auth from "./Auth.json";
+import Bed from "./Bed.json";
+import Common from "./Common.json";
+import Consultation from "./Consultation.json";
+import CoverImageEdit from "./CoverImageEdit.json";
+import Diagnosis from "./Diagnosis.json";
+import Entities from "./Entities.json";
+import ErrorPages from "./ErrorPages.json";
+import ExternalResult from "./ExternalResult.json";
+import Facility from "./Facility.json";
+import FileUpload from "./FileUpload.json";
+import Hub from "./Hub.json";
+import LogUpdate from "./LogUpdate.json";
+import Medicine from "./Medicine.json";
+import Notifications from "./Notifications.json";
+import Resource from "./Resource.json";
+import Shifting from "./Shifting.json";
+import Users from "./Users.json";
+
+export default {
+  ...Auth,
+  ...Asset,
+  ...Common,
+  ...Consultation,
+  ...CoverImageEdit,
+  ...Entities,
+  ...ErrorPages,
+  ...ExternalResult,
+  ...Facility,
+  ...Hub,
+  ...Medicine,
+  ...Diagnosis,
+  ...Notifications,
+  ...Resource,
+  ...Shifting,
+  ...Bed,
+  ...Users,
+  ...LogUpdate,
+  ...FileUpload,
+};

src/Locale/update_locale.js

@@ -21,7 +21,7 @@ if (lng === DEFAULT_LOCALE) {
   process.exit(1);
 }
 
-const defaultEntryFile = readFile(`./${DEFAULT_LOCALE}/index.js`);
+const defaultEntryFile = readFile(`./${DEFAULT_LOCALE}/index.ts`);
 const defaultAllJsonFiles = getAllJSONFiles(DEFAULT_LOCALE);
 
 if (existsSync(lng)) {
@@ -36,8 +36,8 @@ if (existsSync(lng)) {
     console.log(`Create: ${file}`);
   }
 
-  writeFile(`./${lng}/index.js`, defaultEntryFile);
-  console.log("Create: index.js");
+  writeFile(`./${lng}/index.ts`, defaultEntryFile);
+  console.log("Create: index.ts");
 }
 
 function compareBothFiles(defaultFile, newFile) {

src/i18n.ts

@@ -6,13 +6,24 @@ import ta from "./Locale/ta";
 import ml from "./Locale/ml";
 import mr from "./Locale/mr";
 import kn from "./Locale/kn";
+import hi from "./Locale/hi";
+
+export const LANGUAGES: { [key: string]: any } = {
+  en: "English",
+  ta: "தமிழ்",
+  ml: "മലയാളം",
+  mr: "मराठी",
+  kn: "ಕನ್ನಡ",
+  hi: "हिन्दी",
+};
 
 const resources = {
   en: { translation: en },
   ta: { translation: ta },
   ml: { translation: ml },
   mr: { translation: mr },
   kn: { translation: kn },
+  hi: { translation: hi },
 };
 
 i18n

src/vite-env.d.ts

@@ -31,6 +31,7 @@ interface ImportMetaEnv {
   readonly REACT_STILL_WATCHING_PROMPT_DURATION?: string;
   readonly REACT_JWT_TOKEN_REFRESH_INTERVAL?: string;
   readonly REACT_MIN_ENCOUNTER_DATE?: string;
+  readonly REACT_ALLOWED_LOCALES?: string;
 
   // Plugins related envs...
   readonly REACT_PLAUSIBLE_SERVER_URL?: string;