Allows configuring available languages through env and adds Hindi to CARE

.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_AVAILABLE_LOCALES="EN,HI,TA,ML,MR,KN"

.example.env

@@ -77,3 +77,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_AVAILABLE_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_AVAILABLE_LOCALES || "")
+    .split(",")
+    .map((l) => l.trim().toLowerCase()),
 
   gmapsApiKey:
     env.REACT_GMAPS_API_KEY || "AIzaSyDsBAc3y7deI5ZO3NtK5GuzKwtUzQNJNUk",

src/Components/Common/LanguageSelector.tsx

@@ -3,6 +3,7 @@ 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";
 
 export const LanguageSelector = (props: any) => {
   const { i18n } = useTranslation();
@@ -19,6 +20,10 @@ export const LanguageSelector = (props: any) => {
     }
   };
 
+  const availableLocales = Object.keys(LANGUAGE_NAMES).filter(
+    (l) => l === "en" || careConfig.availableLocales?.includes(l),
+  );
+
   return (
     <div className="relative flex w-full items-center justify-end">
       <select
@@ -31,7 +36,7 @@ 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]}
           </option>

src/Components/Common/LanguageSelectorLogin.tsx

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { LANGUAGE_NAMES } from "../../Locale/config";
 import { classNames } from "../../Utils/utils";
+import careConfig from "@careConfig";
 
 export const LanguageSelectorLogin = () => {
   const { i18n, t } = useTranslation();
@@ -17,12 +18,16 @@ export const LanguageSelectorLogin = () => {
     }
   };
 
+  const availableLocales = Object.keys(LANGUAGE_NAMES).filter(
+    (l) => l === "en" || 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)}

src/Locale/config.ts

@@ -4,4 +4,5 @@ export const LANGUAGE_NAMES: { [key: string]: any } = {
   ml: "മലയാളം",
   mr: "मराठी",
   kn: "ಕನ್ನಡ",
+  hi: "हिन्दी",
 };

src/Locale/hi/HCX.json

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

src/Locale/hi/Patient.json

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

src/Locale/hi/index.js

@@ -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/i18n.ts

@@ -6,13 +6,15 @@ 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";
 
 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_AVAILABLE_LOCALES?: string;
 
   // Plugins related envs...
   readonly REACT_PLAUSIBLE_SERVER_URL?: string;