[WALL] Lubega / WALL-4791 / Wallets RTL support for اللغة العربية (AR) (deriv-com#16660)

* feat: wallets arabic language

* fix: retrigger

* Update trade-type-list.spec.jsx

* Update account-wizard.jsx

* fix: unit test

* fix: cfd and options arrow direction

* fix: transfer rtl support

* fix: reformat with css logical properties

* chore: useIsRtl unit test

* fix: added remaining rtl support

* fix: update default language in wallets app

* fix: translations scroll issue

* chore: filter language for mobile and accounts language switcher

* fix: applied comments

* fix: text alignment

* fix: app card badge border radius

* fix: applied comments

* fix: crypto transaction alignment

* fix: withdrawal crypto receipt padding

* fix: deriv apps get accounts header

* fix: sent email content alignment

* fix: switching logic

* fix: remove local storage dependency

* fix: useIsRtl hook

* fix: default language for numbers

* fix: reformat displayMoney

* fix: missing translations

* fix: mt5 zero spread translations

* fix: compare accounts header

* fix: jurisdiction card alignment

* fix: enter password alignment

* fix: cashier translation fixes

* fix: wallet action modal alignment

* fix: api provider language reconnection

* fix: update deriv-com/translations version

* fix: update api-v2 jest config

* fix: compare accounts header title

* fix: subtasks

* fix: arrow direction

* fix: trader account switcher icon

* fix: test case

* fix: added language loader

* fix: remove language loader

* fix: debug language loading

* fix: added initial language switch

* fix: initial language switching logic

* fix: debug

* fix: POI/POA alignment issues

* fix: revert language change

* fix: change default language source

* fix: added preferred language

* fix: added language switch

* fix: remove switch language

* fix: remove preferred language

* fix: subtasks

* fix: add preferred language

* fix: revert webpack update

* fix: added useLanguage hook

* fix: update useLanguage hook

* fix: failing test

* fix: add preferred language to core app content

* fix: mock store

* fix: update api provider websocket url language source

* fix: update WS url language settings

* fix: remove preferred language from core app content

* fix: reorder apiprovider language

* fix: deriv mt5 investor

* fix(wallets): 🚑 align positive/negative sign for rtl language

* fix(wallets): 🧪 fix test, add rtl support for pending transactions

* fix: test case

* fix: sonarcloud smell

---------

Co-authored-by: heorhi-deriv <[email protected]>

Author: lubega-deriv

__mocks__/translation.mock.js

@@ -46,4 +46,6 @@ const localize = mockFn;
 
 const getAllowedLanguages = jest.fn(() => ({ EN: 'English', VI: 'Tiếng Việt' }));
 
-export { Localize, localize, useTranslations, getAllowedLanguages };
+const getInitialLanguage = jest.fn(() => 'EN');
+
+export { Localize, localize, useTranslations, getAllowedLanguages, getInitialLanguage };

packages/account/src/Containers/Account/account.tsx

@@ -23,7 +23,6 @@ type TAccountProps = RouteComponentProps & {
 const Account = observer(({ history, location, routes }: TAccountProps) => {
     const { client, ui } = useStore();
     const {
-        has_wallet,
         is_virtual,
         is_logged_in,
         is_logging_in,
@@ -70,10 +69,6 @@ const Account = observer(({ history, location, routes }: TAccountProps) => {
                 if (route.path === shared_routes.passkeys) {
                     route.is_hidden = should_remove_passkeys_route;
                 }
-
-                if (route.path === shared_routes.languages) {
-                    route.is_hidden = has_wallet;
-                }
             });
         }
     });

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

@@ -42,6 +42,9 @@ describe('LanguageSettings', () => {
             common: {
                 current_language: 'lang_1',
             },
+            client: {
+                has_wallet: false,
+            },
         });
         (useTranslations as jest.Mock).mockReturnValue({
             currentLang: 'EN',
@@ -56,7 +59,7 @@ describe('LanguageSettings', () => {
         });
     };
 
-    it('should render LanguageSettings', () => {
+    it('should render LanguageSettings with all allowed languages for non-wallets accounts', () => {
         renderLanguageSettings();
 
         expect(screen.getByText('Select language')).toBeInTheDocument();
@@ -70,6 +73,22 @@ describe('LanguageSettings', () => {
         expect(lang_2).toBeInTheDocument();
     });
 
+    it('should render LanguageSettings with only wallets-allowed languages for wallets accounts', () => {
+        mockRootStore.client.has_wallet = true;
+
+        renderLanguageSettings();
+
+        expect(screen.getByText('Select language')).toBeInTheDocument();
+
+        const lang_1 = screen.getByText('English');
+        const lang_2 = screen.queryByText('Tiếng Việt');
+
+        expect(screen.getByText(/Language 1 Flag/)).toBeInTheDocument();
+        expect(screen.queryByText(/Language 2 Flag/)).not.toBeInTheDocument();
+        expect(lang_1).toBeInTheDocument();
+        expect(lang_2).not.toBeInTheDocument();
+    });
+
     it('should trigger language change', () => {
         renderLanguageSettings();
 

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

@@ -9,12 +9,12 @@ import { useDevice } from '@deriv-com/ui';
 const LanguageSettings = observer(() => {
     const { client, common } = useStore();
     const { switchLanguage, currentLang, localize } = useTranslations();
-    const { has_wallet } = client;
     // [TODO]: Remove changeSelectedLanguage() when whole app starts to use @deriv-com/translations
     const { changeSelectedLanguage } = common;
+    const { has_wallet } = client;
     const { isDesktop } = useDevice();
 
-    if (!isDesktop || has_wallet) {
+    if (!isDesktop) {
         return <Redirect to={routes.traders_hub} />;
     }
 
@@ -25,7 +25,14 @@ const LanguageSettings = observer(() => {
         switchLanguage(language_key);
     };
 
-    const allowed_languages: Record<string, string> = getAllowedLanguages(UNSUPPORTED_LANGUAGES);
+    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))
+        );
+    }
+
     return (
         <div className='settings-language'>
             <FormSubHeader title={localize('Select language')} />

packages/api-v2/jest.config.js

@@ -2,4 +2,7 @@ const baseConfigForPackages = require('../../jest.config.base');
 
 module.exports = {
     ...baseConfigForPackages,
+    moduleNameMapper: {
+        '@deriv-com/translations': '<rootDir>/../../__mocks__/translation.mock.js',
+    },
 };

packages/api-v2/package.json

@@ -5,6 +5,7 @@
     "main": "src/index.ts",
     "dependencies": {
         "@deriv-com/utils": "^0.0.34",
+        "@deriv-com/translations": "1.3.9",
         "@deriv/deriv-api": "^1.0.15",
         "@deriv/shared": "^1.0.0",
         "@deriv/utils": "^1.0.0",

packages/api-v2/src/APIProvider.tsx

@@ -1,5 +1,6 @@
 import React, { PropsWithChildren, createContext, useContext, useEffect, useRef, useState, useCallback } from 'react';
 import { getAppId, getSocketURL } from '@deriv/shared';
+import { getInitialLanguage } from '@deriv-com/translations';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { TSocketRequestPayload, TSocketResponseData, TSocketSubscribableEndpointNames } from '../types';
 import { hashObject } from './utils';
@@ -35,7 +36,11 @@ type APIContextData = {
 const getWebSocketURL = () => {
     const endpoint = getSocketURL();
     const app_id = getAppId();
-    const language = localStorage.getItem('i18n_language');
+    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';
+
     return `wss://${endpoint}/websockets/v3?app_id=${app_id}&l=${language}&brand=deriv`;
 };
 
@@ -84,6 +89,9 @@ const APIProvider = ({ children }: PropsWithChildren<TAPIProviderProps>) => {
     const isOpenRef = useRef<boolean>(false);
     const wsClientRef = useRef<WSClient>(new WSClient());
 
+    const language = getInitialLanguage();
+    const [prevLanguage, setPrevLanguage] = useState<string>(language);
+
     useEffect(() => {
         isMounted.current = true;
         return () => {
@@ -218,6 +226,15 @@ const APIProvider = ({ children }: PropsWithChildren<TAPIProviderProps>) => {
         return () => clearTimeout(reconnectTimerId);
     }, [reconnect]);
 
+    // reconnects to latest WS url for new language only when language changes
+    useEffect(() => {
+        if (prevLanguage !== language) {
+            setReconnect(true);
+            setPrevLanguage(language);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [language]);
+
     return (
         <APIContext.Provider
             value={{

packages/api-v2/src/hooks/useCryptoTransactions.ts

@@ -1,8 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import useSubscription from '../useSubscription';
-import useActiveAccount from './useActiveAccount';
-import useAuthorize from './useAuthorize';
-import { displayMoney } from '../utils';
 
 type TTransaction = NonNullable<
     NonNullable<ReturnType<typeof useSubscription<'cashier_payments'>>['data']>['cashier_payments']
@@ -26,13 +23,6 @@ type TModifiedTransaction = Omit<TTransaction, 'status_code' | 'transaction_type
 const useCryptoTransactions = () => {
     const { subscribe, data, ...rest } = useSubscription('cashier_payments');
     const [transactions, setTransactions] = useState<TModifiedTransaction[]>();
-    const {
-        data: { preferred_language },
-    } = useAuthorize();
-
-    const { data: account } = useActiveAccount();
-    const display_code = account?.currency_config?.display_code || 'USD';
-    const fractional_digits = account?.currency_config?.fractional_digits || 2;
 
     // Reset transactions data
     const resetData = useCallback(() => setTransactions(undefined), []);
@@ -72,17 +62,12 @@ const useCryptoTransactions = () => {
 
         return transactions.map(transaction => ({
             ...transaction,
-            /** Formatted amount */
-            formatted_amount: displayMoney(transaction.amount || 0, display_code, {
-                fractional_digits,
-                preferred_language,
-            }),
             /** Determine if the transaction is a deposit or not. */
             is_deposit: transaction.transaction_type === 'deposit',
             /** Determine if the transaction is a withdrawal or not. */
             is_withdrawal: transaction.transaction_type === 'withdrawal',
         }));
-    }, [display_code, fractional_digits, preferred_language, transactions]);
+    }, [transactions]);
 
     // Sort transactions by submit time.
     const sorted_transactions = useMemo(

packages/api-v2/src/hooks/useCtraderAccountsList.ts

@@ -8,7 +8,7 @@ import useTradingAccountsList from './useTradingAccountsList';
 
 /** A custom hook that gets the list of created cTrader accounts. */
 const useCtraderAccountsList = () => {
-    const { data: authorize_data, isSuccess } = useAuthorize();
+    const { isSuccess } = useAuthorize();
     const { data: ctrader_accounts, ...rest } = useQuery('trading_platform_accounts', {
         payload: { platform: 'ctrader' },
         options: { enabled: isSuccess },
@@ -35,20 +35,12 @@ const useCtraderAccountsList = () => {
                     /** The platform of the account */
                     platform: 'ctrader' as const,
                     /** Formatted display balance */
-                    display_balance: displayMoney(account.balance || 0, account.currency || 'USD', {
-                        preferred_language: authorize_data?.preferred_language,
-                    }),
+                    display_balance: displayMoney(account.balance || 0, account.currency || 'USD'),
                     /** Converted balance from the exchange rate */
                     converted_balance: getExchangeRate(fiat_account, account.currency ?? 'USD') * balance,
                 };
             }),
-        [
-            authorize_data?.preferred_language,
-            fiat_account,
-            getConfig,
-            getExchangeRate,
-            ctrader_accounts?.trading_platform_accounts,
-        ]
+        [fiat_account, getConfig, getExchangeRate, ctrader_accounts?.trading_platform_accounts]
     );
     return {
         /** List of all created cTrader accounts */

packages/api-v2/src/hooks/useDxtradeAccountsList.ts

@@ -8,7 +8,7 @@ import useExchangeRates from './useExchangeRates';
 
 /** A custom hook that gets the list of created Deriv X accounts. */
 const useDxtradeAccountsList = () => {
-    const { data: authorize_data, isSuccess } = useAuthorize();
+    const { isSuccess } = useAuthorize();
     const { data: dxtrade_accounts, ...rest } = useQuery('trading_platform_accounts', {
         payload: { platform: 'dxtrade' },
         options: { enabled: isSuccess },
@@ -27,9 +27,7 @@ const useDxtradeAccountsList = () => {
                     /** Account's currency config information */
                     currency_config: account.currency ? getConfig(account.currency) : undefined,
                     /** The balance of the account in currency format. */
-                    display_balance: displayMoney(account?.balance || 0, account?.currency || 'USD', {
-                        preferred_language: authorize_data?.preferred_language,
-                    }),
+                    display_balance: displayMoney(account?.balance || 0, account?.currency || 'USD'),
                     /** indicating whether the account is a virtual-money account. */
                     is_virtual: account.account_type === 'demo',
                     /** Landing company shortcode the account belongs to. */
@@ -42,13 +40,7 @@ const useDxtradeAccountsList = () => {
                     converted_balance: getExchangeRate(fiat_account, account.currency ?? 'USD') * balance,
                 };
             }),
-        [
-            authorize_data?.preferred_language,
-            dxtrade_accounts?.trading_platform_accounts,
-            fiat_account,
-            getConfig,
-            getExchangeRate,
-        ]
+        [dxtrade_accounts?.trading_platform_accounts, fiat_account, getConfig, getExchangeRate]
     );
 
     return {

packages/api-v2/src/hooks/useInfiniteTransactions.ts

@@ -10,11 +10,7 @@ type TFilter = NonNullable<TSocketRequestPayload<'statement'>['payload']>['actio
 
 /** A custom hook to get the summary of account transactions */
 const useInfiniteTransactions = () => {
-    const {
-        data: { preferred_language },
-        isFetching,
-        isSuccess,
-    } = useAuthorize();
+    const { isFetching, isSuccess } = useAuthorize();
 
     const { data: account } = useActiveAccount();
     const display_code = account?.currency_config?.display_code || 'USD';
@@ -58,18 +54,10 @@ const useInfiniteTransactions = () => {
 
         return flatten_data?.map(transaction => ({
             ...transaction,
-            /** The transaction amount in currency format. */
-            display_amount: displayMoney(transaction?.amount || 0, display_code, {
-                fractional_digits,
-                preferred_language,
-            }),
             /** The balance of account after the transaction in currency format. */
-            display_balance_after: displayMoney(transaction?.balance_after || 0, display_code, {
-                fractional_digits,
-                preferred_language,
-            }),
+            display_balance_after: displayMoney(transaction?.balance_after || 0, display_code, { fractional_digits }),
         }));
-    }, [flatten_data, preferred_language, fractional_digits, display_code]);
+    }, [flatten_data, fractional_digits, display_code]);
 
     return {
         /** List of account transactions */

packages/api-v2/src/hooks/useMT5AccountsList.ts

@@ -8,7 +8,7 @@ import useExchangeRates from './useExchangeRates';
 
 /** A custom hook that gets the list created MT5 accounts of the user. */
 const useMT5AccountsList = () => {
-    const { data: authorize_data, isSuccess } = useAuthorize();
+    const { isSuccess } = useAuthorize();
     const { getConfig } = useCurrencyConfig();
     const { fiat_account } = useTradingAccountsList();
     const { getExchangeRate } = useExchangeRates();
@@ -34,9 +34,7 @@ const useMT5AccountsList = () => {
                 /** The id of the account */
                 loginid: account.login,
                 /** The balance of the account in currency format. */
-                display_balance: displayMoney(account.balance || 0, account.currency || 'USD', {
-                    preferred_language: authorize_data?.preferred_language,
-                }),
+                display_balance: displayMoney(account.balance || 0, account.currency || 'USD'),
                 /** indicating whether the account is a virtual-money account. */
                 is_virtual: account.account_type === 'demo',
                 /** The platform of the account */
@@ -45,7 +43,7 @@ const useMT5AccountsList = () => {
                 converted_balance: getExchangeRate(fiat_account, account.currency ?? 'USD') * balance,
             };
         });
-    }, [authorize_data?.preferred_language, fiat_account, getConfig, getExchangeRate, mt5_accounts?.mt5_login_list]);
+    }, [fiat_account, getConfig, getExchangeRate, mt5_accounts?.mt5_login_list]);
 
     return {
         /** The list of created MT5 accounts */

packages/api-v2/src/hooks/useTransactions.ts

@@ -10,11 +10,7 @@ type TFilter = NonNullable<TSocketRequestPayload<'statement'>['payload']>['actio
 
 /** A custom hook to get the summary of account transactions */
 const useTransactions = () => {
-    const {
-        data: { preferred_language },
-        isFetching,
-        isSuccess,
-    } = useAuthorize();
+    const { isFetching, isSuccess } = useAuthorize();
 
     const { data: account } = useActiveAccount();
     const display_code = account?.currency_config?.display_code || 'USD';
@@ -52,17 +48,11 @@ const useTransactions = () => {
         return data?.statement?.transactions?.map(transaction => ({
             ...transaction,
             /** The transaction amount in currency format. */
-            display_amount: displayMoney(transaction?.amount || 0, display_code, {
-                fractional_digits,
-                preferred_language,
-            }),
+            display_amount: displayMoney(transaction?.amount || 0, display_code, { fractional_digits }),
             /** The balance of account after the transaction in currency format. */
-            display_balance_after: displayMoney(transaction?.balance_after || 0, display_code, {
-                fractional_digits,
-                preferred_language,
-            }),
+            display_balance_after: displayMoney(transaction?.balance_after || 0, display_code, { fractional_digits }),
         }));
-    }, [data?.statement?.transactions, display_code, fractional_digits, preferred_language]);
+    }, [data?.statement?.transactions, display_code, fractional_digits]);
 
     return {
         /** List of account transactions */