From 6d9cd1499e02b4434185c6f006ea484b6e3aaeca Mon Sep 17 00:00:00 2001 From: ektaghag-eaton Date: Fri, 8 Sep 2023 17:31:32 +0530 Subject: [PATCH 1/3] Fix overwrite context keys from example i18n setup --- login-workflow/example/src/App.tsx | 2 +- .../example/src/translations/i18n.ts | 18 +++ .../contexts/AuthContext/i18nAuthInstance.ts | 113 +++++++++--------- .../src/contexts/AuthContext/provider.tsx | 24 ++-- .../i18nRegistrationInstance.ts | 113 +++++++++--------- .../contexts/RegistrationContext/provider.tsx | 24 ++-- login-workflow/src/testUtils/index.ts | 4 +- 7 files changed, 155 insertions(+), 143 deletions(-) diff --git a/login-workflow/example/src/App.tsx b/login-workflow/example/src/App.tsx index 49d70c60..9b68d6dd 100644 --- a/login-workflow/example/src/App.tsx +++ b/login-workflow/example/src/App.tsx @@ -38,7 +38,7 @@ export const App = (): JSX.Element => { const [showChangePasswordDialog, setShowChangePasswordDialog] = useState(false); const [isLoading, setIsLoading] = useState(true); - + i18nAppInstance.addResourceBundle('en', 'bluiCommon', { ACTIONS: { CREATE_ACCOUNT: 'Register now!' } }, true, true); // handle initialization of auth data on first load useEffect(() => { const initialize = async (): Promise => { diff --git a/login-workflow/example/src/translations/i18n.ts b/login-workflow/example/src/translations/i18n.ts index bd510ef2..e2750b1b 100644 --- a/login-workflow/example/src/translations/i18n.ts +++ b/login-workflow/example/src/translations/i18n.ts @@ -25,6 +25,24 @@ void i18next app: { ...AppDictionaries.english.translation, }, + bluiRegistration: { + SELF_REGISTRATION: { + INSTRUCTIONS: `Test To register for an Eaton account, enter the required information below. You will need to verify your email address to continue.`, + VERIFY_EMAIL: { + MESSAGE: + 'Test A verification code has been sent to the email address you provided. Click the link or enter the code below to continue. This code is valid for 30 minutes.', + RESEND: 'Test Resend Verification Email', + VERIFICATION_CODE_PROMPT: "Test Didn't receive an email?", + VERIFICATION: 'Test Verification Code', + CODE_VALIDATOR_ERROR: 'Test You must provide a valid code', + }, + }, + }, + bluiAuth: { + HEADER: { + FORGOT_PASSWORD: 'Test Forgot Password', + }, + }, }, fr: { app: { diff --git a/login-workflow/src/contexts/AuthContext/i18nAuthInstance.ts b/login-workflow/src/contexts/AuthContext/i18nAuthInstance.ts index dee3d856..b663b0d5 100644 --- a/login-workflow/src/contexts/AuthContext/i18nAuthInstance.ts +++ b/login-workflow/src/contexts/AuthContext/i18nAuthInstance.ts @@ -1,71 +1,68 @@ import i18next from 'i18next'; import { AuthDictionaries } from './AuthDictionaries'; import { SharedDictionaries } from '../SharedDictionaries'; -import { initReactI18next } from 'react-i18next'; -void i18next - .use(initReactI18next) // passes i18n down to react-i18next - .init( - { - fallbackLng: 'en', - ns: ['bluiAuth', 'bluiCommon'], - defaultNS: 'bluiAuth', - load: 'languageOnly', - detection: { - order: ['querystring', 'localStorage', 'navigator'], - caches: ['localStorage'], +export const i18nAuthInstance = i18next.createInstance( + { + fallbackLng: 'en', + ns: ['bluiAuth', 'bluiCommon'], + defaultNS: 'bluiAuth', + load: 'languageOnly', + detection: { + order: ['querystring', 'localStorage', 'navigator'], + caches: ['localStorage'], + }, + react: { useSuspense: false }, + interpolation: { escapeValue: false }, + resources: { + en: { + bluiAuth: { + ...AuthDictionaries.english.translation, + }, + bluiCommon: { + ...SharedDictionaries.english.translation, + }, }, - react: { useSuspense: false }, - interpolation: { escapeValue: false }, - resources: { - en: { - bluiAuth: { - ...AuthDictionaries.english.translation, - }, - bluiCommon: { - ...SharedDictionaries.english.translation, - }, + fr: { + bluiAuth: { + ...AuthDictionaries.french.translation, }, - fr: { - bluiAuth: { - ...AuthDictionaries.french.translation, - }, - bluiCommon: { - ...SharedDictionaries.french.translation, - }, + bluiCommon: { + ...SharedDictionaries.french.translation, + }, + }, + es: { + bluiAuth: { + ...AuthDictionaries.spanish.translation, }, - es: { - bluiAuth: { - ...AuthDictionaries.spanish.translation, - }, - bluiCommon: { - ...SharedDictionaries.spanish.translation, - }, + bluiCommon: { + ...SharedDictionaries.spanish.translation, }, - zh: { - bluiAuth: { - ...AuthDictionaries.chinese.translation, - }, - bluiCommon: { - ...SharedDictionaries.chinese.translation, - }, + }, + zh: { + bluiAuth: { + ...AuthDictionaries.chinese.translation, + }, + bluiCommon: { + ...SharedDictionaries.chinese.translation, + }, + }, + pt: { + bluiAuth: { + ...AuthDictionaries.portuguese.translation, }, - pt: { - bluiAuth: { - ...AuthDictionaries.portuguese.translation, - }, - bluiCommon: { - ...SharedDictionaries.portuguese.translation, - }, + bluiCommon: { + ...SharedDictionaries.portuguese.translation, }, }, }, - // We must provide a function as second parameter, otherwise i18next errors - // eslint-disable-next-line @typescript-eslint/no-unused-vars - (err, _t) => { - // eslint-disable-next-line no-console - if (err) return console.log(err); - } - ); + }, + // We must provide a function as second parameter, otherwise i18next errors + // eslint-disable-next-line @typescript-eslint/no-unused-vars + (err, _t) => { + // eslint-disable-next-line no-console + if (err) return console.log(err); + } +); -export default i18next; +export default { i18nAuthInstance }; diff --git a/login-workflow/src/contexts/AuthContext/provider.tsx b/login-workflow/src/contexts/AuthContext/provider.tsx index afb7d709..9e796229 100644 --- a/login-workflow/src/contexts/AuthContext/provider.tsx +++ b/login-workflow/src/contexts/AuthContext/provider.tsx @@ -7,7 +7,7 @@ import React, { useEffect } from 'react'; import { AuthContextProviderProps } from './types'; import { AuthContext } from './context'; import { I18nextProvider } from 'react-i18next'; -import i18nAuthInstance from './i18nAuthInstance'; +import { i18nAuthInstance } from './i18nAuthInstance'; import { ErrorContext } from '../ErrorContext'; import { AuthDictionaries } from './AuthDictionaries'; import { SharedDictionaries } from '../SharedDictionaries'; @@ -22,16 +22,16 @@ export const AuthContextProvider: React.FC< const { language, i18n = i18nInstance, errorConfig } = props; if (props.i18n) { - i18n.addResourceBundle('zh', 'bluiAuth', AuthDictionaries.chinese.translation, true, true); - i18n.addResourceBundle('zh', 'bluiCommon', SharedDictionaries.chinese.translation, true, true); - i18n.addResourceBundle('en', 'bluiAuth', AuthDictionaries.english.translation, true, true); - i18n.addResourceBundle('en', 'bluiCommon', SharedDictionaries.english.translation, true, true); - i18n.addResourceBundle('fr', 'bluiAuth', AuthDictionaries.french.translation, true, true); - i18n.addResourceBundle('fr', 'bluiCommon', SharedDictionaries.french.translation, true, true); - i18n.addResourceBundle('pt', 'bluiAuth', AuthDictionaries.portuguese.translation, true, true); - i18n.addResourceBundle('pt', 'bluiCommon', SharedDictionaries.portuguese.translation, true, true); - i18n.addResourceBundle('es', 'bluiAuth', AuthDictionaries.spanish.translation, true, true); - i18n.addResourceBundle('es', 'bluiCommon', SharedDictionaries.spanish.translation, true, true); + i18n.addResourceBundle('zh', 'bluiAuth', AuthDictionaries.chinese.translation, true, false); + i18n.addResourceBundle('zh', 'bluiCommon', SharedDictionaries.chinese.translation, true, false); + i18n.addResourceBundle('en', 'bluiAuth', AuthDictionaries.english.translation, true, false); + i18n.addResourceBundle('en', 'bluiCommon', SharedDictionaries.english.translation, true, false); + i18n.addResourceBundle('fr', 'bluiAuth', AuthDictionaries.french.translation, true, false); + i18n.addResourceBundle('fr', 'bluiCommon', SharedDictionaries.french.translation, true, false); + i18n.addResourceBundle('pt', 'bluiAuth', AuthDictionaries.portuguese.translation, true, false); + i18n.addResourceBundle('pt', 'bluiCommon', SharedDictionaries.portuguese.translation, true, false); + i18n.addResourceBundle('es', 'bluiAuth', AuthDictionaries.spanish.translation, true, false); + i18n.addResourceBundle('es', 'bluiCommon', SharedDictionaries.spanish.translation, true, false); } useEffect(() => { @@ -39,7 +39,7 @@ export const AuthContextProvider: React.FC< }, [i18n, language]); return ( - + {children} diff --git a/login-workflow/src/contexts/RegistrationContext/i18nRegistrationInstance.ts b/login-workflow/src/contexts/RegistrationContext/i18nRegistrationInstance.ts index ddf333c6..4526a54a 100644 --- a/login-workflow/src/contexts/RegistrationContext/i18nRegistrationInstance.ts +++ b/login-workflow/src/contexts/RegistrationContext/i18nRegistrationInstance.ts @@ -1,71 +1,68 @@ import i18next from 'i18next'; import { RegistrationDictionaries } from './RegistrationDictionaries'; import { SharedDictionaries } from '../SharedDictionaries'; -import { initReactI18next } from 'react-i18next'; -void i18next - .use(initReactI18next) // passes i18n down to react-i18next - .init( - { - fallbackLng: 'en', - ns: ['bluiRegistration', 'bluiCommon'], - defaultNS: 'bluiRegistration', - load: 'languageOnly', - detection: { - order: ['querystring', 'localStorage', 'navigator'], - caches: ['localStorage'], +export const i18nRegistrationInstance = i18next.createInstance( + { + fallbackLng: 'en', + ns: ['bluiRegistration', 'bluiCommon'], + defaultNS: 'bluiRegistration', + load: 'languageOnly', + detection: { + order: ['querystring', 'localStorage', 'navigator'], + caches: ['localStorage'], + }, + react: { useSuspense: false }, + interpolation: { escapeValue: false }, + resources: { + en: { + bluiRegistration: { + ...RegistrationDictionaries.english.translation, + }, + bluiCommon: { + ...SharedDictionaries.english.translation, + }, }, - react: { useSuspense: false }, - interpolation: { escapeValue: false }, - resources: { - en: { - bluiRegistration: { - ...RegistrationDictionaries.english.translation, - }, - bluiCommon: { - ...SharedDictionaries.english.translation, - }, + fr: { + bluiRegistration: { + ...RegistrationDictionaries.french.translation, }, - fr: { - bluiRegistration: { - ...RegistrationDictionaries.french.translation, - }, - bluiCommon: { - ...SharedDictionaries.french.translation, - }, + bluiCommon: { + ...SharedDictionaries.french.translation, + }, + }, + es: { + bluiRegistration: { + ...RegistrationDictionaries.spanish.translation, }, - es: { - bluiRegistration: { - ...RegistrationDictionaries.spanish.translation, - }, - bluiCommon: { - ...SharedDictionaries.spanish.translation, - }, + bluiCommon: { + ...SharedDictionaries.spanish.translation, }, - zh: { - bluiRegistration: { - ...RegistrationDictionaries.chinese.translation, - }, - bluiCommon: { - ...SharedDictionaries.chinese.translation, - }, + }, + zh: { + bluiRegistration: { + ...RegistrationDictionaries.chinese.translation, + }, + bluiCommon: { + ...SharedDictionaries.chinese.translation, + }, + }, + pt: { + bluiRegistration: { + ...RegistrationDictionaries.portuguese.translation, }, - pt: { - bluiRegistration: { - ...RegistrationDictionaries.portuguese.translation, - }, - bluiCommon: { - ...SharedDictionaries.portuguese.translation, - }, + bluiCommon: { + ...SharedDictionaries.portuguese.translation, }, }, }, - // We must provide a function as second parameter, otherwise i18next errors - // eslint-disable-next-line @typescript-eslint/no-unused-vars - (err, _t) => { - // eslint-disable-next-line no-console - if (err) return console.log(err); - } - ); + }, + // We must provide a function as second parameter, otherwise i18next errors + // eslint-disable-next-line @typescript-eslint/no-unused-vars + (err, _t) => { + // eslint-disable-next-line no-console + if (err) return console.log(err); + } +); -export default i18next; +export default { i18nRegistrationInstance }; diff --git a/login-workflow/src/contexts/RegistrationContext/provider.tsx b/login-workflow/src/contexts/RegistrationContext/provider.tsx index 864f2d42..a32354bd 100644 --- a/login-workflow/src/contexts/RegistrationContext/provider.tsx +++ b/login-workflow/src/contexts/RegistrationContext/provider.tsx @@ -7,7 +7,7 @@ import React, { useEffect } from 'react'; import { RegistrationContextProviderProps } from './types'; import { RegistrationContext } from './context'; import { I18nextProvider } from 'react-i18next'; -import i18nRegistrationInstance from './i18nRegistrationInstance'; +import { i18nRegistrationInstance } from './i18nRegistrationInstance'; import { ErrorContext } from '../ErrorContext'; import { SharedDictionaries } from '../SharedDictionaries'; import { RegistrationDictionaries } from './RegistrationDictionaries'; @@ -20,16 +20,16 @@ export const RegistrationContextProvider: React.FC { @@ -37,7 +37,7 @@ export const RegistrationContextProvider: React.FC + {children} diff --git a/login-workflow/src/testUtils/index.ts b/login-workflow/src/testUtils/index.ts index dacba006..1a8fe662 100644 --- a/login-workflow/src/testUtils/index.ts +++ b/login-workflow/src/testUtils/index.ts @@ -3,8 +3,8 @@ import { RegistrationContextProviderProps, RegistrationWorkflowContextProps, } from '../contexts'; -import i18nAuthInstance from '../contexts/AuthContext/i18nAuthInstance'; -import i18nRegistrationInstance from '../contexts/RegistrationContext/i18nRegistrationInstance'; +import { i18nAuthInstance } from '../contexts/AuthContext/i18nAuthInstance'; +import { i18nRegistrationInstance } from '../contexts/RegistrationContext/i18nRegistrationInstance'; export const authContextProviderProps: AuthContextProviderProps = { language: 'en', From f27f71ba0e77e7dcd1b23c64ec2ffe358e824de0 Mon Sep 17 00:00:00 2001 From: ektaghag-eaton Date: Fri, 8 Sep 2023 23:13:41 +0530 Subject: [PATCH 2/3] Fix App translation when not passing to context --- .../example/src/navigation/AppRouter.tsx | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/login-workflow/example/src/navigation/AppRouter.tsx b/login-workflow/example/src/navigation/AppRouter.tsx index 3d384b4b..e4d9abf9 100644 --- a/login-workflow/example/src/navigation/AppRouter.tsx +++ b/login-workflow/example/src/navigation/AppRouter.tsx @@ -74,34 +74,34 @@ export const AppRouter: React.FC = () => { } /> - {/* USER APPLICATION ROUTES */} - - - {app.showChangePasswordDialog && } - - } - > - - - - } - /> - } /> - + + {/* USER APPLICATION ROUTES */} + + + {app.showChangePasswordDialog && } + + } + > - + } /> + } /> + + + + } + /> {/* REGISTRATION ROUTES */} Date: Wed, 13 Sep 2023 15:31:12 +0530 Subject: [PATCH 3/3] Test updated package --- login-workflow/example/package.json | 2 +- login-workflow/example/yarn.lock | 8 ++++---- login-workflow/package.json | 4 ++-- login-workflow/yarn.lock | 24 ++++++++++++++++++------ 4 files changed, 25 insertions(+), 13 deletions(-) diff --git a/login-workflow/example/package.json b/login-workflow/example/package.json index ddc83ec7..1b3a3e96 100644 --- a/login-workflow/example/package.json +++ b/login-workflow/example/package.json @@ -48,7 +48,7 @@ "react": "^18.2.0", "react-app-polyfill": "^3.0.0", "react-dom": "^18.0.0", - "react-i18next": "^13.0.3", + "react-i18next": "^13.2.2", "react-router-dom": "^6.8.0", "react-scripts": "^5.0.0", "typescript": "^4.3.2" diff --git a/login-workflow/example/yarn.lock b/login-workflow/example/yarn.lock index 56d36f2d..4cf9d8ed 100644 --- a/login-workflow/example/yarn.lock +++ b/login-workflow/example/yarn.lock @@ -8649,10 +8649,10 @@ react-error-overlay@^6.0.11: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb" integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg== -react-i18next@^13.0.3: - version "13.0.3" - resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-13.0.3.tgz#8eedc5c2ab57f4641540778cc7373c8ed891523c" - integrity sha512-/t4kt4Y2o+21hbvx+o9zpVnmoiud7KLDncyZFGN0U6TGAWYaXdTsp/ytAHFcKKSAODg4noIMaOO3X7bMgCqLHw== +react-i18next@^13.2.2: + version "13.2.2" + resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-13.2.2.tgz#b1e78ed66a54f4bc819616f68b98221e1b1a1936" + integrity sha512-+nFUkbRByFwnrfDcYqvzBuaeZb+nACHx+fAWN/pZMddWOCJH5hoc21+Sa/N/Lqi6ne6/9wC/qRGOoQhJa6IkEQ== dependencies: "@babel/runtime" "^7.22.5" html-parse-stringify "^3.0.1" diff --git a/login-workflow/package.json b/login-workflow/package.json index 9433f710..75355972 100644 --- a/login-workflow/package.json +++ b/login-workflow/package.json @@ -36,7 +36,7 @@ "i18next": "^22.0.0", "react": "^16.13.1 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0", - "react-i18next": "^11.3.4" + "react-i18next": "^13.2.2" }, "optionalDependencies": { "react-router-dom": "^6.8.0" @@ -102,7 +102,7 @@ "prettier": "^2.3.1", "react": "^18.0.0", "react-dom": "^18.0.0", - "react-i18next": "^11.10.0", + "react-i18next": "^13.0.0", "react-router-dom": "^6.8.0", "regenerator-runtime": "^0.13.7", "ts-jest": "^29.0.0-next.1", diff --git a/login-workflow/yarn.lock b/login-workflow/yarn.lock index 2dae5079..d2740cb5 100644 --- a/login-workflow/yarn.lock +++ b/login-workflow/yarn.lock @@ -1192,13 +1192,20 @@ resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310" integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA== -"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.0", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.0", "@babel/runtime@^7.21.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.21.5" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.5.tgz#8492dddda9644ae3bda3b45eabe87382caee7200" integrity sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q== dependencies: regenerator-runtime "^0.13.11" +"@babel/runtime@^7.22.5": + version "7.22.15" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.15.tgz#38f46494ccf6cf020bd4eed7124b425e83e523b8" + integrity sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.20.7", "@babel/template@^7.3.3": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8" @@ -7838,12 +7845,12 @@ react-dom@^18.0.0: loose-envify "^1.1.0" scheduler "^0.23.0" -react-i18next@^11.10.0: - version "11.18.6" - resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.18.6.tgz#e159c2960c718c1314f1e8fcaa282d1c8b167887" - integrity sha512-yHb2F9BiT0lqoQDt8loZ5gWP331GwctHz9tYQ8A2EIEUu+CcEdjBLQWli1USG3RdWQt3W+jqQLg/d4rrQR96LA== +react-i18next@^13.0.0: + version "13.2.2" + resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-13.2.2.tgz#b1e78ed66a54f4bc819616f68b98221e1b1a1936" + integrity sha512-+nFUkbRByFwnrfDcYqvzBuaeZb+nACHx+fAWN/pZMddWOCJH5hoc21+Sa/N/Lqi6ne6/9wC/qRGOoQhJa6IkEQ== dependencies: - "@babel/runtime" "^7.14.5" + "@babel/runtime" "^7.22.5" html-parse-stringify "^3.0.1" react-is@^16.13.1, react-is@^16.7.0: @@ -8006,6 +8013,11 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.7: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg== +regenerator-runtime@^0.14.0: + version "0.14.0" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45" + integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA== + regenerator-transform@^0.15.1: version "0.15.1" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"