User Profile, Countries, Language Switch

Author: FalkWolsky

client/packages/lowcoder-core/lib/index.d.ts

@@ -648,7 +648,9 @@ declare const i18n: {
     region?: string | undefined;
     locales: string[];
 };
+
 declare function getValueByLocale<T>(defaultValue: T, func: (info: LocaleInfo) => T | undefined): T;
+
 type AddDot<T extends string> = T extends "" ? "" : `.${T}`;
 type ValidKey<T> = Exclude<keyof T, symbol>;
 type NestedKey<T> = (T extends object ? {
@@ -658,6 +660,7 @@ type AddPrefix<T, P extends string> = {
     [K in keyof T as K extends string ? `${P}${K}` : never]: T[K];
 };
 declare const globalMessages: AddPrefix<{}, "@">;
+
 type GlobalMessageKey = NestedKey<typeof globalMessages>;
 type VariableValue = string | number | boolean | Date | React.ReactNode;
 

client/packages/lowcoder-core/src/i18n/index.tsx

@@ -3,7 +3,7 @@ import IntlMessageFormat from "intl-messageformat";
 import log from "loglevel";
 import { Fragment } from "react";
 
-const defaultLocale = "en";
+const defaultLocale = "de";
 
 let locales = [defaultLocale];
 

client/packages/lowcoder/src/app.tsx

@@ -44,12 +44,11 @@ import { loadComps } from "comps";
 import { initApp } from "util/commonUtils";
 import { favicon } from "assets/images";
 import { hasQueryParam } from "util/urlUtils";
-import { isFetchUserFinished } from "redux/selectors/usersSelectors";
+import { getCurrentUser, isFetchUserFinished } from "redux/selectors/usersSelectors";
 import { SystemWarning } from "./components/SystemWarning";
 import { getBrandingConfig } from "./redux/selectors/configSelectors";
 import { buildMaterialPreviewURL } from "./util/materialUtils";
 import GlobalInstances from 'components/GlobalInstances';
-// import { LanguageProvider } from './i18n/LanguageContext';
 
 const LazyUserAuthComp = React.lazy(() => import("pages/userAuth"));
 const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding"));
@@ -61,10 +60,10 @@ const LazyApplicationHome = React.lazy(() => import("pages/ApplicationV2"));
 const LazyDebugComp = React.lazy(() => import("./debug"));
 const LazyDebugNewComp = React.lazy(() => import("./debugNew"));
 
-const Wrapper = (props: { children: React.ReactNode }) => (
+const Wrapper = (props: { children: React.ReactNode, language: string }) => (
   <ConfigProvider
     theme={{ hashed: false }}
-    locale={getAntdLocale(language)}
+    locale={getAntdLocale(props.language)}
   >
     <App>
       <GlobalInstances />
@@ -82,6 +81,7 @@ type AppIndexProps = {
   getCurrentUser: () => void;
   favicon: string;
   brandName: string;
+  uiLanguage: string;
 };
 
 class AppIndex extends React.Component<AppIndexProps, any> {
@@ -107,8 +107,9 @@ class AppIndex extends React.Component<AppIndexProps, any> {
       const hideLoadingHeader = isTemplate || isAuthUnRequired(pathname);
       return <ProductLoading hideHeader={hideLoadingHeader} />;
     }
+
     return (
-      <Wrapper>
+      <Wrapper language={this.props.uiLanguage}>
         <Helmet>
           {<title>{this.props.brandName}</title>}
           {<link rel="icon" href={this.props.favicon} />}
@@ -196,6 +197,7 @@ const mapStateToProps = (state: AppState) => ({
     ? buildMaterialPreviewURL(getBrandingConfig(state)?.favicon!)
     : favicon,
   brandName: getBrandingConfig(state)?.brandName ?? trans("productName"),
+  uiLanguage: state.ui.users.user.uiLanguage,
 });
 
 const mapDispatchToProps = (dispatch: any) => ({
@@ -214,7 +216,7 @@ export function bootstrap() {
   const root = createRoot(container!);
   root.render(
     <Provider store={reduxStore}>
-        <AppIndexWithProps />
+      <AppIndexWithProps />
     </Provider>
   );
 }

client/packages/lowcoder/src/assets/images/Lowcoder-Logo.svg

@@ -1,4 +1,4 @@
-import { trans } from "@lowcoder-ee/i18n";
+import { trans } from "i18n";
 
 const indicatorsRenderExample = `(current, total) => (
   <span>

client/packages/lowcoder/src/comps/comps/tourComp/tourTooltips.tsx

@@ -61,6 +61,7 @@ export const defaultUser: User = {
 export type CurrentUser = {
   id: string;
   name: string;
+  uiLanguage: string;
   avatarUrl: string;
   email: string;
   ip: string;
@@ -74,6 +75,7 @@ export type CurrentUser = {
 export const defaultCurrentUser: CurrentUser = {
   id: "",
   name: ANONYMOUS_USERNAME,
+  uiLanguage: "en",
   avatarUrl: "",
   email: "",
   ip: "",

client/packages/lowcoder/src/constants/userConstants.ts

@@ -1,32 +1,128 @@
-import en_GB from "antd/es/locale/en_GB";
 import en_US from "antd/es/locale/en_US";
 import zh_CN from "antd/es/locale/zh_CN";
 import zh_HK from "antd/es/locale/zh_HK";
 import zh_TW from "antd/es/locale/zh_TW";
+import es_ES from "antd/es/locale/es_ES";
+import fr_CA from "antd/es/locale/fr_CA";
+import fr_FR from "antd/es/locale/fr_FR";
+import de_DE from "antd/es/locale/de_DE";
+import it_IT from "antd/es/locale/it_IT";
+import ar_EG from "antd/es/locale/ar_EG";
+import th_TH from "antd/es/locale/th_TH";
+import vi_VN from "antd/es/locale/vi_VN";
+import ms_MY from "antd/es/locale/ms_MY";
+import id_ID from "antd/es/locale/id_ID";
+import hi_IN from "antd/es/locale/hi_IN";
+import ta_IN from "antd/es/locale/ta_IN";
+import kn_IN from "antd/es/locale/kn_IN";
+import ml_IN from "antd/es/locale/ml_IN";
+import ru_RU from "antd/es/locale/ru_RU";
+import pl_PL from "antd/es/locale/pl_PL";
+import cs_CZ from "antd/es/locale/cs_CZ";
+import uk_UA from "antd/es/locale/uk_UA";
+import bg_BG from "antd/es/locale/bg_BG";
+import sr_RS from "antd/es/locale/sr_RS";
+import hr_HR from "antd/es/locale/hr_HR";
+import sk_SK from "antd/es/locale/sk_SK";
+import sl_SI from "antd/es/locale/sl_SI";
+import mk_MK from "antd/es/locale/mk_MK";
+
+
 import { getValueByLocale } from "lowcoder-core";
 
 export function getAntdLocale(language?: string) {
+
   if (language) {
     return selectAntdLocale(language, "");
   }
   return getValueByLocale(en_US, (locale) => selectAntdLocale(locale.language, locale.region));
 }
 
 function selectAntdLocale(language: string, region?: string) {
+  
   switch (language) {
-    case "en":
-      switch (region) {
-        case "GB":
-          return en_GB;
-      }
-      return en_US;
     case "zh":
       switch (region) {
         case "HK":
           return zh_HK;
         case "TW":
           return zh_TW;
+        default:
+          return zh_CN;
+      }
+    case "es":
+      switch (region) {
+        case "ES":
+          return es_ES;
+        default:
+          return es_ES; 
       }
-      return zh_CN;
+    case "fr":
+      switch (region) {
+        case "CA":
+          return fr_CA;
+        case "FR":
+          return fr_FR;
+        default:
+          return fr_FR; 
+      }
+    case "it":
+      return it_IT;
+    case "de":
+      switch (region) {
+        case "DE":
+          return de_DE;
+        default:
+          return de_DE; 
+      }
+    case "ru": // Russian
+      return ru_RU; 
+    case "pl": // Polish
+      return pl_PL; 
+    case "cs": // Czech
+      return cs_CZ; 
+    case "uk": // Ukrainian
+      return uk_UA; 
+    case "bg": // Bulgarian
+      return bg_BG; 
+    case "sr": // Serbian
+      return sr_RS;
+    case "hr": // Croatian
+      return hr_HR; 
+    case "sk": // Slovak
+      return sk_SK; 
+    case "sl": // Slovenian
+      return sl_SI; 
+    case "mk": // Macedonian
+      return mk_MK; 
+    case "ar":
+      switch (region) {
+        case "SA":
+          return ar_EG;
+        case "EG":
+          return ar_EG;
+        default:
+          return ar_EG;
+      }
+    case "th": // Thai
+      return th_TH;
+    case "vi": 
+      return vi_VN; // Vietnamese (Vietnam)
+    case "ms": 
+      return ms_MY; // Malay (Malaysia)
+    case "id": 
+      return id_ID; // Indonesian (Indonesia)
+    case "hi": // Hindi
+      return hi_IN; // Hindi (India)
+    case "ta": // Tamil
+      return ta_IN; // Tamil (India)
+    case "kn": // Kannada
+      return kn_IN; // Kannada (India)
+    case "ml": // Malayalam
+      return ml_IN; // Malayalam (India)
+
+    // Additional languages would follow this pattern
+    default:
+      return en_US; // Fallback to English (US) if language is not recognized
   }
 }

client/packages/lowcoder/src/i18n/antdLocale.ts

@@ -2,14 +2,12 @@ import { getI18nObjects, Translator } from "lowcoder-core";
 import * as localeData from "./locales";
 import { I18nObjects } from "./locales/types";
 import { languagesMetadata } from "./languagesMeta";
-import { useSelector } from "react-redux";
-
 
 export const { trans, transToNode, language } = new Translator<typeof localeData.en>(
   localeData,
   REACT_APP_LANGUAGES,
-  ["de"]
 );
+
 export const i18nObjs = getI18nObjects<I18nObjects>(localeData, REACT_APP_LANGUAGES);
 
 export const languageList = Object.keys(languagesMetadata).map(code => ({