[MODIFIED] verification_screen i18n lang in diff place (#408)

Signed-off-by: Zeeshan Mehboob <[email protected]>
mosip · Nov 4, 2024 · e4e4bc9 · e4e4bc9
1 parent 1b54e50
commit e4e4bc9
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 21 deletions.
diff --git a/signup-ui/src/pages/EkycVerificationPage/TermsAndCondition/TermsAndCondition.tsx b/signup-ui/src/pages/EkycVerificationPage/TermsAndCondition/TermsAndCondition.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
 import purify from "dompurify";
-import i18next from "i18next";
 import { Detector } from "react-detect-offline";
 import { useTranslation } from "react-i18next";
 
@@ -17,13 +16,9 @@ import {
   StepHeader,
   StepTitle,
 } from "~components/ui/step";
-import { convertToI18nData } from "~utils/conversion";
 import { useTermsAndConditions } from "~pages/shared/queries";
 import langConfigService from "~services/langConfig.service";
-import {
-  DefaultEkyVerificationProp,
-  KeyValueStringObject,
-} from "~typings/types";
+import { DefaultEkyVerificationProp } from "~typings/types";
 import LoadingIndicator from "~/common/LoadingIndicator";
 
 import {
@@ -127,19 +122,6 @@ export const TermsAndCondition = ({
       // setting kyc provider detail in the store
       setKycProviderDetail(kycDetail.response);
       if (kycDetail.errors === null || kycDetail.errors.length === 0) {
-        convertToI18nData(kycDetail.response as KeyValueStringObject).then(
-          (data) => {
-            for (const langCode in data) {
-              i18next.addResourceBundle(
-                langCode,
-                "translation",
-                { verification_screen: data[langCode] },
-                true,
-                true
-              );
-            }
-          }
-        );
         setTermsAndCondition(kycDetail.response["terms&Conditions"]);
       } else {
         setCriticalError(kycDetail.errors[0]);
@@ -200,7 +182,7 @@ export const TermsAndCondition = ({
                   disabled={!termsAndCondition || !tncMessage}
                   className="h-5 w-5 rounded-[2px] text-white data-[state=checked]:border-primary data-[state=checked]:bg-primary"
                 />
-                <p className="tnc-consent-text ml-2">{t("agree_text")}</p>
+                <p className="tnc-consent-text ml-2 cursor-pointer" onClick={() => changeAgreeTerms(!agreeTerms)}>{t("agree_text")}</p>
               </ActionMessage>
             </StepAlert>
             <StepDivider />

diff --git a/signup-ui/src/pages/EkycVerificationPage/VerificationScreen/VerificationScreen.tsx b/signup-ui/src/pages/EkycVerificationPage/VerificationScreen/VerificationScreen.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import Webcam from "react-webcam";
 
 import { PUBLISH_TOPIC, SUBSCRIBE_TOPIC, WS_URL } from "~constants/routes";
+import { convertToI18nData } from "~utils/conversion";
 import useStompClient from "~pages/shared/stompWs";
 import { WS_BASE_URL } from "~services/api.service";
 import langConfigService from "~services/langConfig.service";
@@ -14,13 +15,15 @@ import {
   IdentityVerificationState,
   IdvFeedbackEnum,
   IdvFrames,
+  KeyValueStringObject,
 } from "~typings/types";
 import LoadingIndicator from "~/common/LoadingIndicator";
 
 import {
   EkycVerificationStep,
   EkycVerificationStore,
   errorBannerMessageSelector,
+  kycProviderDetailSelector,
   setErrorBannerMessageSelector,
   setIsNoBackgroundSelector,
   setSlotIdSelector,
@@ -34,7 +37,7 @@ export const VerificationScreen = ({
   cancelPopup,
   settings,
 }: DefaultEkyVerificationProp) => {
-  const { t } = useTranslation("translation", {
+  const { t, i18n } = useTranslation("translation", {
     keyPrefix: "verification_screen",
   });
   const webcamRef = useRef(null);
@@ -70,6 +73,7 @@ export const VerificationScreen = ({
     slotId,
     setStep,
     setSlotId,
+    kycProviderDetail,
   } = useEkycVerificationStore(
     useCallback(
       (state: EkycVerificationStore) => ({
@@ -79,6 +83,7 @@ export const VerificationScreen = ({
         slotId: slotIdSelector(state),
         setStep: setStepSelector(state),
         setSlotId: setSlotIdSelector(state),
+        kycProviderDetail: kycProviderDetailSelector(state),
       }),
       []
     )
@@ -126,7 +131,31 @@ export const VerificationScreen = ({
     setStep(EkycVerificationStep.IdentityVerificationStatus);
   }, []);
 
+  // adding translation of verification in a specific
+  // language from kycProviderDetail object
+  const addTranslation = (lang: string) => {
+    convertToI18nData(kycProviderDetail as KeyValueStringObject).then(
+      (data) => {
+        i18n.addResourceBundle(
+          lang,
+          "translation",
+          { verification_screen: data[lang] },
+          true,
+          true
+        );
+      }
+    );
+  };
+
   useEffect(() => {
+    // adding translation for the current language
+    addTranslation(i18n.language);
+
+    i18n.on("languageChanged", (lang) => {
+      // adding translation for the new language
+      addTranslation(lang);
+    });
+
     const checkWebcamInputSource = () => {
       if (webcamRef && webcamRef.current) {
         const webcamStreamState = (webcamRef.current as Webcam).stream?.active;