diff --git a/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/individual/components/GoogleTranslateComponent.js b/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/individual/components/GoogleTranslateComponent.js new file mode 100644 index 0000000000..99426ca300 --- /dev/null +++ b/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
; +}; + +export default GoogleTranslateComponent; diff --git a/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/individual/index.js b/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/individual/index.js index 859217ec8b..5c5c704d4a 100644 --- a/micro-ui/web/micro-ui-internals/packages/modules/core/src/pages/individual/index.js +++ b/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 (
@@ -46,15 +47,16 @@ const IndividualApp = ({ ({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 = ({ - +