[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, useLiveChat, 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();
@@ -55,7 +56,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 is_wallets_unsupported_language = WALLETS_UNSUPPORTED_LANGUAGES.includes(current_language);
 
     const livechat_client_information: Parameters<typeof useLiveChat>[0] = {
         is_client_store_initialized,
@@ -110,11 +111,18 @@ const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough }
             if (is_dark_mode_on) {
                 setDarkMode(false);
             }
-            if (!wallets_allowed_languages) {
+            if (is_wallets_unsupported_language) {
                 changeSelectedLanguage('EN');
             }
         }
-    }, [has_wallet, current_language, changeSelectedLanguage, is_dark_mode_on, setDarkMode, wallets_allowed_languages]);
+    }, [
+        has_wallet,
+        current_language,
+        changeSelectedLanguage,
+        is_dark_mode_on,
+        setDarkMode,
+        is_wallets_unsupported_language,
+    ]);
 
     return (
         <ThemeProvider theme={is_dark_mode_on ? 'dark' : 'light'}>

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 = [
+    ...UNSUPPORTED_LANGUAGES,
+    'BN',
+    'DE',
+    'ES',
+    'ID',
+    'IT',
+    'SW',
+    'KM',
+    'KO',
+    'PL',
+    'PT',
+    'RU',
+    'SI',
+    'TH',
+    'TR',
+    'UZ',
+    'VI',
+    'ZH_CN',
+    'ZH_TW',
+];

packages/wallets/src/components/Base/ATMAmountInput/ATMAmountInput.scss

@@ -4,6 +4,12 @@
     padding-inline-end: 0.8rem;
     width: 100%;
 
+    &__label {
+        @include mobile-or-tablet-screen {
+            max-width: 14rem;
+        }
+    }
+
     &__input {
         all: unset;
         position: absolute;

packages/wallets/src/components/Base/ATMAmountInput/ATMAmountInput.tsx

@@ -61,7 +61,7 @@ const WalletTransferFormInputField: React.FC<TProps> = ({
 
     return (
         <div className='wallets-atm-amount-input'>
-            <Text align='start' size='sm'>
+            <Text align='start' className='wallets-atm-amount-input__label' size='sm'>
                 {label}
             </Text>
             <div className='wallets-atm-amount-input__input-container'>

packages/wallets/src/components/Base/Tabs/TabTitle.tsx

@@ -24,7 +24,7 @@ const TabTitle: FC<TabTitleProps> = ({ icon, index, isActive, setSelectedTab, si
             onClick={handleOnClick}
         >
             {icon}
-            <Text size={size} weight={isActive ? 'bold' : 'normal'}>
+            <Text align='center' size={size} weight={isActive ? 'bold' : 'normal'}>
                 {title}
             </Text>
         </button>

packages/wallets/src/components/Base/Tabs/Tabs.scss

@@ -14,12 +14,13 @@
         background: none;
         padding: 1rem 0;
         cursor: pointer;
+
         &--active {
             width: 50%;
             border: none;
             border-bottom: 0.2rem solid var(--brand-coral, #ff444f);
             background: none;
-            padding: 1rem 0;
+            padding: 1rem;
         }
     }
 }

packages/wallets/src/components/Base/WalletAlertMessage/WalletAlertMessage.scss

@@ -16,7 +16,7 @@
             position: absolute;
             height: 100%;
             top: 50%;
-            inset-inline-start: 50%;
+            left: 50%;
             transform: translate(-50%, -50%);
         }
 

packages/wallets/src/components/Base/WalletLink/WalletLink.tsx

@@ -1,25 +1,34 @@
 import React from 'react';
-import { getStaticUrl } from '../../../helpers/urls';
+import { getInitialLanguage } from '@deriv-com/translations';
+import { getStaticUrl, setUrlLanguage } from '../../../helpers/urls';
 import './WalletLink.scss';
 
 type TVariant = 'bold' | 'normal';
 
 interface LinkProps {
     children?: React.ReactNode;
     href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];
+    language?: string;
     staticUrl?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];
     variant?: TVariant;
 }
 
-const WalletLink: React.FC<LinkProps> = ({ children, href, staticUrl, variant = 'normal' }) => (
-    <a
-        className={`wallets-link wallets-link__variant--${variant}`}
-        href={href ?? (staticUrl ? getStaticUrl(staticUrl) : '#')}
-        rel='noopener noreferrer'
-        target='_blank'
-    >
-        {children}
-    </a>
-);
+const WalletLink: React.FC<LinkProps> = ({ children, href, language, staticUrl, variant = 'normal' }) => {
+    const getHref = () => {
+        setUrlLanguage(getInitialLanguage());
+        return getStaticUrl(staticUrl, language);
+    };
+
+    return (
+        <a
+            className={`wallets-link wallets-link__variant--${variant}`}
+            href={href ?? (staticUrl ? getHref() : '#')}
+            rel='noopener noreferrer'
+            target='_blank'
+        >
+            {children}
+        </a>
+    );
+};
 
 export default WalletLink;

packages/wallets/src/components/Dropzone/Dropzone.scss

@@ -26,6 +26,10 @@
         border: 0.1rem solid var(--status-danger, #ec3f3f);
     }
 
+    &__button {
+        height: auto;
+    }
+
     &__content {
         width: 100%;
         height: 100%;

packages/wallets/src/components/Dropzone/Dropzone.tsx

@@ -149,6 +149,7 @@ const Dropzone: React.FC<TProps> = ({
                                 <div className='wallets-dropzone__placeholder-text'>
                                     <Button
                                         borderWidth='sm'
+                                        className='wallets-dropzone__button'
                                         color='black'
                                         onClick={open}
                                         textSize={isDesktop ? 'sm' : 'md'}

packages/wallets/src/components/OptionsAndMultipliersListing/OptionsAndMultipliersListing.tsx

@@ -33,7 +33,7 @@ const OptionsAndMultipliersListing = () => {
                         </Text>
                     )}
                     <Text align='start' size={isDesktop ? 'md' : 'sm'}>
-                        <Localize i18n_default_text='Predict the market, profit if you’re right, risk only what you put in. ' />
+                        <Localize i18n_default_text='Predict the market, profit if you’re right, risk only what you put in.' />{' '}
                         <WalletLink staticUrl='/trade-types/options/digital-options/up-and-down/'>
                             <Localize i18n_default_text='Learn more' />
                         </WalletLink>

packages/wallets/src/components/WalletCard/WalletCard.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentProps } from 'react';
 import classNames from 'classnames';
-import { useTranslations } from '@deriv-com/translations';
+import { Localize } from '@deriv-com/translations';
 import { Text } from '@deriv-com/ui';
 import useAllBalanceSubscription from '../../hooks/useAllBalanceSubscription';
 import { WalletCurrencyIcon } from '../WalletCurrencyIcon';
@@ -25,7 +25,7 @@ const WalletCard: React.FC<TProps> = ({
     onClick,
 }) => {
     const { isLoading: isBalanceLoading } = useAllBalanceSubscription();
-    const { localize } = useTranslations();
+    const isDemoCarouselContent = isDemo && isCarouselContent;
 
     return (
         <button
@@ -57,7 +57,11 @@ const WalletCard: React.FC<TProps> = ({
                         </div>
                         <div className='wallets-card__details-bottom'>
                             <Text color={isDemo ? 'white' : 'general'} size={isCarouselContent ? 'md' : '2xs'}>
-                                {currency} {isDemo && isCarouselContent ? localize('Demo') : ''} Wallet
+                                {isDemoCarouselContent ? (
+                                    <Localize i18n_default_text='{{currency}} Demo Wallet' values={{ currency }} />
+                                ) : (
+                                    <Localize i18n_default_text='{{currency}} Wallet' values={{ currency }} />
+                                )}
                             </Text>
                             {isBalanceLoading ? (
                                 <div

packages/wallets/src/components/WalletListCardActions/WalletListCardActions.tsx

@@ -102,7 +102,7 @@ const WalletListCardActions: React.FC<TProps> = ({ accountsActiveTabIndex }) =>
                             }}
                             size='lg'
                         />
-                        <Text size='sm' weight={button.text === localize('Deposit') ? 'bold' : 'normal'}>
+                        <Text align='center' size='xs' weight={button.text === localize('Deposit') ? 'bold' : 'normal'}>
                             {button.text}
                         </Text>
                     </div>

packages/wallets/src/components/WalletListCardDropdown/WalletListCardDropdown.tsx

@@ -4,7 +4,7 @@ import { useEventListener, useOnClickOutside } from 'usehooks-ts';
 import { useActiveWalletAccount, useWalletAccountsList } from '@deriv/api-v2';
 import { displayMoney } from '@deriv/api-v2/src/utils';
 import { LabelPairedChevronDownLgFillIcon } from '@deriv/quill-icons';
-import { Localize } from '@deriv-com/translations';
+import { Localize, useTranslations } from '@deriv-com/translations';
 import { Text } from '@deriv-com/ui';
 import useAllBalanceSubscription from '../../hooks/useAllBalanceSubscription';
 import useWalletAccountSwitcher from '../../hooks/useWalletAccountSwitcher';
@@ -18,6 +18,7 @@ const WalletListCardDropdown = () => {
     const { data: wallets } = useWalletAccountsList();
     const { data: activeWallet } = useActiveWalletAccount();
     const switchWalletAccount = useWalletAccountSwitcher();
+    const { localize } = useTranslations();
     const dropdownRef = useRef<HTMLDivElement>(null);
 
     const { data: balanceData, isLoading: isBalanceLoading } = useAllBalanceSubscription();
@@ -26,9 +27,12 @@ const WalletListCardDropdown = () => {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedText, setSelectedText] = useState('');
 
-    const generateTitleText = useCallback((wallet: THooks.WalletAccountsList) => {
-        return `${wallet?.currency} Wallet`;
-    }, []);
+    const generateTitleText = useCallback(
+        (wallet: THooks.WalletAccountsList) => {
+            return localize('{{currency}} Wallet', { currency: wallet?.currency });
+        },
+        [localize]
+    );
 
     const walletList = useMemo(() => {
         return (

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

@@ -5,7 +5,7 @@
         gap: 2.4rem;
         padding: 1.6rem;
         width: 23.2rem;
-        height: 28.2rem;
+        height: 100%;
         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%;