From b69c77d72401230d9fb9b2789879bc406a719023 Mon Sep 17 00:00:00 2001
From: "denys.oblohin" <denys.oblohin@okta.com>
Date: Fri, 23 Aug 2024 15:10:30 +0300
Subject: [PATCH] fix for default language

---
 src/v3/src/components/Widget/index.tsx | 12 ++++++++++--
 src/v3/src/util/languageUtils.ts       | 26 ++++++++++++++++++++++----
 src/v3/src/util/locUtil.ts             |  2 +-
 src/v3/src/util/settingsUtils.ts       |  4 ++++
 4 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/v3/src/components/Widget/index.tsx b/src/v3/src/components/Widget/index.tsx
index bc0936d12e9..a24ff528905 100644
--- a/src/v3/src/components/Widget/index.tsx
+++ b/src/v3/src/components/Widget/index.tsx
@@ -63,15 +63,18 @@ import {
   extractPageTitle,
   getLanguageCode,
   getLanguageDirection,
+  getOdyLanguageCode,
   getOdysseyTranslationOverrides,
   isAndroidOrIOS,
   isAuthClientSet,
   isConfigRegisterFlow,
   isConsentStep,
   isOauth2Enabled,
+  loadDefaultLanguage,
   loadLanguage,
   SessionStorage,
   triggerEmailVerifyCallback,
+  unloadLanguage,
 } from '../../util';
 import { getEventContext } from '../../util/getEventContext';
 import { stylisPlugins } from '../../util/stylisPlugins';
@@ -135,8 +138,7 @@ export const Widget: FunctionComponent<WidgetProps> = (widgetProps) => {
   const { stateHandle, unsetStateHandle } = useStateHandle(widgetProps);
   const [odyTranslationOverrides, setOdyTranslationOverrides] = useState<
   TranslationOverrides<string> | undefined>();
-  // Odyssey language codes use '_' instead of '-' (e.g. zh-CN -> zh_CN)
-  const odyLanguageCode: string = languageCode.replace('-', '_');
+  const odyLanguageCode = getOdyLanguageCode(languageCode);
 
   const { theme, tokens } = useMemo(() => {
     const { themeOverride, tokensOverride } = createThemeAndTokens(
@@ -149,10 +151,16 @@ export const Widget: FunctionComponent<WidgetProps> = (widgetProps) => {
     };
   }, [brandColors, customTheme, languageDirection]);
 
+  // init default language
+  if (!Bundles.isLoaded(languageCode)) {
+    loadDefaultLanguage();
+  }
+
   // on unmount, remove the language
   useEffect(() => () => {
     if (Bundles.isLoaded(languageCode)) {
       Bundles.remove();
+      unloadLanguage(languageCode);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
diff --git a/src/v3/src/util/languageUtils.ts b/src/v3/src/util/languageUtils.ts
index 957fe06f82e..693a6cca320 100644
--- a/src/v3/src/util/languageUtils.ts
+++ b/src/v3/src/util/languageUtils.ts
@@ -15,18 +15,29 @@ import { OdysseyI18nResourceKeys, odysseyI18nResourceKeysList } from '@okta/odys
 // eslint-disable-next-line import/no-extraneous-dependencies
 import i18next from 'i18next';
 
+import { LanguageCode } from '../../../types';
 import Bundles from '../../../util/Bundles';
 import { WidgetProps } from '../types';
-import { getLanguageCode, getSupportedLanguages } from './settingsUtils';
+import { getDefaultLanguage, getLanguageCode, getSupportedLanguages } from './settingsUtils';
+
+export const loadDefaultLanguage = () => {
+  const defaultLanguage = getDefaultLanguage();
+  if (!Bundles.currentLanguage && !i18next.hasResourceBundle(defaultLanguage, 'login')) {
+    i18next.addResourceBundle(defaultLanguage, 'login', Bundles.login);
+    i18next.addResourceBundle(defaultLanguage, 'country', Bundles.country);
+  }
+};
+
+export const getOdyLanguageCode = (languageCode: LanguageCode): string => {
+  // Odyssey language codes use '_' instead of '-' (e.g. zh-CN -> zh_CN)
+  return languageCode.replace('-', '_');
+};
 
 export const loadLanguage = async (widgetProps: WidgetProps): Promise<void> => {
   const { i18n = {}, assets: { baseUrl, rewrite } = {} } = widgetProps;
   const languageCode = getLanguageCode(widgetProps);
   const supportedLanguages = getSupportedLanguages(widgetProps);
 
-  // Odyssey language codes use '_' instead of '-' (e.g. zh-CN -> zh_CN)
-  const odyLanguageCode: string = languageCode.replace('-', '_');
-
   // NOTE: If assets.baseUrl equals "/", SIW will incorrectly try to load language files
   // from URL http://labels/json/login_xx.json
   // Remove trailing slashes to match Gen2 behavior
@@ -40,10 +51,17 @@ export const loadLanguage = async (widgetProps: WidgetProps): Promise<void> => {
     rewrite: rewrite ?? ((val) => val),
   }, supportedLanguages);
 
+  const odyLanguageCode: string = getOdyLanguageCode(languageCode);
   i18next.addResourceBundle(odyLanguageCode, 'login', Bundles.login);
   i18next.addResourceBundle(odyLanguageCode, 'country', Bundles.country);
 };
 
+export const unloadLanguage = (languageCode: LanguageCode) => {
+  const odyLanguageCode: string = getOdyLanguageCode(languageCode);
+  i18next.removeResourceBundle(odyLanguageCode, 'login');
+  i18next.removeResourceBundle(odyLanguageCode, 'country');
+};
+
 export const getOdysseyTranslationOverrides = (): Partial<OdysseyI18nResourceKeys> => (
   odysseyI18nResourceKeysList
     .reduce((overrides: Partial<OdysseyI18nResourceKeys>,
diff --git a/src/v3/src/util/locUtil.ts b/src/v3/src/util/locUtil.ts
index 802436f2989..1b190e0ed26 100644
--- a/src/v3/src/util/locUtil.ts
+++ b/src/v3/src/util/locUtil.ts
@@ -40,7 +40,7 @@ export const loc = (
     && Object.keys(Bundles.login).findIndex((k) => k.startsWith(`${key}_`)) > 0;
   const localizedText: string = odysseyTranslate(`${bundleName}:${key}`, {
     ...paramsObj,
-    count: hasPluralForms ? count : undefined,
+    ...(hasPluralForms ? { count } : {}),
     interpolation: {
       prefix: '{',
       suffix: '}',
diff --git a/src/v3/src/util/settingsUtils.ts b/src/v3/src/util/settingsUtils.ts
index 31a163ef5ed..895dff05a4c 100644
--- a/src/v3/src/util/settingsUtils.ts
+++ b/src/v3/src/util/settingsUtils.ts
@@ -49,6 +49,10 @@ export const getSupportedLanguages = (widgetProps: WidgetProps): string[] => {
   );
 };
 
+export const getDefaultLanguage = (): LanguageCode => {
+  return config.defaultLanguage as LanguageCode;
+};
+
 export const getLanguageCode = (widgetProps: WidgetProps): LanguageCode => {
   const { language } = widgetProps;
   const supportedLanguages = getSupportedLanguages(widgetProps);