added langu component

micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/individual/components/GoogleTranslateComponent.js

@@ -0,0 +1,33 @@
+import React, { useEffect } from "react";
+
+const GoogleTranslateComponent = ({ pageLanguage = "en" }) => {
+ useEffect(() => {
+ const loadGoogleTranslate = () => {
+ // Initialize the Google Translate element
+ window.googleTranslateElementInit = () => {
+ new window.google.translate.TranslateElement(
+ {
+ pageLanguage: pageLanguage, // Set the default language of the page
+ layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE,
+ },
+ "google_translate_element"
+ );
+ };
+
+ // Add the Google Translate script after the page is fully loaded
+ const script = document.createElement("script");
+ script.type = "text/javascript";
+ script.src =
+ "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
+ document.body.appendChild(script);
+ };
+
+ // Wait until the window is fully loaded
+ window.onload = loadGoogleTranslate;
+ console.info(pageLanguage,'Language Updated');
+ }, [pageLanguage]);
+
+ return <div id="google_translate_element"></div>;
+};
+
+export default GoogleTranslateComponent;

micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/individual/index.js

@@ -5,6 +5,7 @@ import ErrorBoundary from "../../components/ErrorBoundaries";
 import ErrorComponent from "../../components/ErrorComponent";
 import Program from "./pages";
 import { Dropdown, TopBar } from "@egovernments/digit-ui-components";
+import GoogleTranslateComponent from "./components/GoogleTranslateComponent";
 
 // import CitizenHome from "./Home";
 // import LanguageSelection from "./Home/LanguageSelection";
@@ -32,7 +33,7 @@ const IndividualApp = ({
  const { t } = useTranslation();
  const { path } = useRouteMatch();
  const history = useHistory();
- const options=stateInfo?.hasLocalisation && stateInfo?.languages? stateInfo?.languages : [{ label: "ENGLISH", value: Digit.Utils.getDefaultLanguage() }];
+ const [formData, setFormData] = React.useState("en");
  return (
  <div className={"employee"}>
  <ErrorBoundary initData={initData}>
@@ -46,15 +47,16 @@ const IndividualApp = ({
  <TopBar
  className=""
  img=""
- language="English"
+ language={formData}
  logo=""
  actionFields={[
  <Dropdown
  customSelector="Language"
- option={options?.map(obj=>({name:obj?.label,code:obj?.value}))}
+ option={[{name:"English",code:"en"},{name:"हिन्दी",code:"hi"},{name:"Français",code:"fr"},{name:"Español",code:"es"}]}
  optionKey="name"
- select={function noRefCheck() {}}
+ select={(updated)=>setFormData(updated?.code)}
  theme="light"
+ value={formData}
  />,
  ]}
  props={{}}
@@ -77,7 +79,7 @@ const IndividualApp = ({
  </Route>
  </Switch>
  </ErrorBoundary>
-
+ <GoogleTranslateComponent pageLanguage= {formData}></GoogleTranslateComponent>
  <div className="employee-login-home-footer" style={{ backgroundColor: "unset" }}>
  <img
  alt="Powered by DIGIT"