[WALL] Lubega / WALL-4977 / Enable wallets translations for Français (FR)

__mocks__/translation.mock.js

@@ -44,7 +44,12 @@ const useTranslations = () => ({
 
 const localize = mockFn;
 
-const getAllowedLanguages = jest.fn(() => ({ EN: 'English', VI: 'Tiếng Việt' }));
+const getAllowedLanguages = jest.fn(unsupported_languages => {
+    if (unsupported_languages.includes('VI')) {
+        return { EN: 'English' };
+    }
+    return { EN: 'English', VI: 'Tiếng Việt' };
+});
 
 const getInitialLanguage = jest.fn(() => 'EN');
 

packages/account/src/Sections/Profile/LanguageSettings/language-settings.tsx

@@ -1,5 +1,5 @@
 import { Redirect } from 'react-router-dom';
-import { UNSUPPORTED_LANGUAGES, routes } from '@deriv/shared';
+import { UNSUPPORTED_LANGUAGES, WALLETS_UNSUPPORTED_LANGUAGES, routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { useTranslations, getAllowedLanguages } from '@deriv-com/translations';
 import FormSubHeader from '../../../Components/form-sub-header';
@@ -25,13 +25,9 @@ const LanguageSettings = observer(() => {
         switchLanguage(language_key);
     };
 
-    let allowed_languages: Record<string, string> = getAllowedLanguages(UNSUPPORTED_LANGUAGES);
-
-    if (has_wallet) {
-        allowed_languages = Object.fromEntries(
-            Object.entries(allowed_languages).filter(([language_key]) => ['EN', 'AR'].includes(language_key))
-        );
-    }
+    const allowed_languages: Record<string, string> = getAllowedLanguages(
+        has_wallet ? WALLETS_UNSUPPORTED_LANGUAGES : UNSUPPORTED_LANGUAGES
+    );
 
     return (
         <div className='settings-language'>

packages/api-v2/src/APIProvider.tsx

@@ -36,11 +36,7 @@ type APIContextData = {
 const getWebSocketURL = () => {
     const endpoint = getSocketURL();
     const app_id = getAppId();
-    const initial_language = getInitialLanguage();
-    const wallet_allowed_languages = initial_language === 'EN' || initial_language === 'AR';
-    // fallback to EN if language on initial load is not EN/AR
-    const language = wallet_allowed_languages ? initial_language : 'EN';
-
+    const language = getInitialLanguage();
     return `wss://${endpoint}/websockets/v3?app_id=${app_id}&l=${language}&brand=deriv`;
 };
 

packages/core/src/App/AppContent.tsx

@@ -19,6 +19,7 @@ import { ThemeProvider } from '@deriv-com/quill-ui';
 import { useGrowthbookGetFeatureValue, useGrowthbookIsOn, useOauth2 } from '@deriv/hooks';
 import { useTranslations } from '@deriv-com/translations';
 import initHotjar from '../Utils/Hotjar';
+import { WALLETS_UNSUPPORTED_LANGUAGES } from '@deriv/shared';
 
 const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough }) => {
     const store = useStore();
@@ -41,7 +42,7 @@ const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough }
     const { data } = useRemoteConfig(true);
     const { tracking_datadog } = data;
     const is_passkeys_supported = browserSupportsWebAuthn();
-    const wallets_allowed_languages = current_language === 'EN' || current_language === 'AR';
+    const wallets_allowed_languages = !WALLETS_UNSUPPORTED_LANGUAGES.includes(current_language);
 
     React.useEffect(() => {
         switchLanguage(current_language);

packages/core/src/App/Components/Layout/Header/Components/ToggleMenu/mobile-language-menu.tsx

@@ -5,7 +5,7 @@ import { observer, useStore } from '@deriv/stores';
 import { getAllowedLanguages } from '@deriv-com/translations';
 import { localize } from '@deriv/translations'; // [TODO:] Remove this once deriv-app is configured to use the new translation lib
 import { LanguageLink } from 'App/Components/Routes';
-import { UNSUPPORTED_LANGUAGES } from '@deriv/shared';
+import { UNSUPPORTED_LANGUAGES, WALLETS_UNSUPPORTED_LANGUAGES } from '@deriv/shared';
 
 type TMobileLanguageMenu = {
     expandSubMenu: (prop: boolean) => void;
@@ -18,11 +18,9 @@ const MobileLanguageMenu = observer(({ expandSubMenu, toggleDrawer }: TMobileLan
     const { has_wallet } = client;
     const { is_mobile_language_menu_open, setMobileLanguageMenuOpen } = ui;
 
-    const allowed_languages = Object.keys(getAllowedLanguages(UNSUPPORTED_LANGUAGES));
-
-    const filtered_languages = has_wallet
-        ? allowed_languages.filter(lang => lang === 'EN' || lang === 'AR')
-        : allowed_languages;
+    const allowed_languages = Object.keys(
+        getAllowedLanguages(has_wallet ? WALLETS_UNSUPPORTED_LANGUAGES : UNSUPPORTED_LANGUAGES)
+    );
 
     return (
         <MobileDrawer.SubMenu
@@ -40,7 +38,7 @@ const MobileLanguageMenu = observer(({ expandSubMenu, toggleDrawer }: TMobileLan
                     'settings-language__language-container--disabled': is_language_changing,
                 })}
             >
-                {filtered_languages.map(lang => (
+                {allowed_languages.map(lang => (
                     <LanguageLink
                         key={lang}
                         is_clickable

packages/core/src/App/Containers/SettingsModal/settings-language.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { observer, useStore } from '@deriv/stores';
 import { getAllowedLanguages, useTranslations } from '@deriv-com/translations';
 import { LanguageLink } from 'App/Components/Routes';
-import { UNSUPPORTED_LANGUAGES } from '@deriv/shared';
+import { UNSUPPORTED_LANGUAGES, WALLETS_UNSUPPORTED_LANGUAGES } from '@deriv/shared';
 
 const isCurrentLanguage = (lang, current_language) => lang === current_language;
 
@@ -12,16 +12,14 @@ const LanguageSettings = observer(() => {
     const { toggleLanguageSettingsModal } = ui;
     const { currentLang } = useTranslations();
 
-    const allowed_languages = Object.keys(getAllowedLanguages(UNSUPPORTED_LANGUAGES));
-
-    const filtered_languages = has_wallet
-        ? allowed_languages.filter(lang => lang === 'EN' || lang === 'AR')
-        : allowed_languages;
+    const allowed_languages = Object.keys(
+        getAllowedLanguages(has_wallet ? WALLETS_UNSUPPORTED_LANGUAGES : UNSUPPORTED_LANGUAGES)
+    );
 
     return (
         <div className='settings-language'>
             <div className='settings-language__language-container'>
-                {filtered_languages.map(lang =>
+                {allowed_languages.map(lang =>
                     isCurrentLanguage(lang, currentLang) ? (
                         <LanguageLink key={lang} lang={lang} />
                     ) : (

packages/shared/src/utils/constants/default-options.ts

@@ -4,3 +4,28 @@ import { isProduction } from '../config/config';
  * Returns List of unsupported languages based on the environment.
  */
 export const UNSUPPORTED_LANGUAGES = isProduction() ? ['ID', 'MN'] : ['MN'];
+
+/**
+ * Returns List of unsupported languages for Wallets.
+ */
+export const WALLETS_UNSUPPORTED_LANGUAGES = [
+    'BN',
+    'DE',
+    'ES',
+    'ID',
+    'IT',
+    'SW',
+    'KM',
+    'KO',
+    'MN',
+    'PL',
+    'PT',
+    'RU',
+    'SI',
+    'TH',
+    'TR',
+    'UZ',
+    'VI',
+    'ZH_CN',
+    'ZH_TW',
+];

packages/wallets/src/components/WalletsAddMoreCard/WalletsAddMoreCard.scss

@@ -5,7 +5,7 @@
         gap: 2.4rem;
         padding: 1.6rem;
         width: 23.2rem;
-        height: 28.2rem;
+        height: 30.8rem;
         border-radius: 1.6rem;
         flex-shrink: 0;
         border: 0.1rem solid var(--system-light-5-active-background, #d6dadb);

packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.scss

@@ -21,7 +21,7 @@
     }
 
     &__success-footer {
-        width: 24rem;
+        width: 26rem;
 
         @include mobile-or-tablet-screen {
             width: 100%;

packages/wallets/src/types.ts

@@ -116,4 +116,4 @@ export type TProductForMarketDetails = NonNullable<
 
 export type TTranslations = ReturnType<typeof useTranslations>;
 
-export type TLanguageType = 'AR' | 'EN';
+export type TLanguageType = 'AR' | 'EN' | 'FR';