Nada/fix: languages

__mocks__/LocalizeMock.js

@@ -1,6 +1,6 @@
-const Localize = ({ i18n_default_text, values }) => {
+const Localize = ({ i18n_default_text: i18Text, values }) => {
     // Replace placeholders in the default text with actual values
-    const localizedText = i18n_default_text.replace(/\{\{(\w+)\}\}/g, (match, key) => values[key] || match);
+    const localizedText = i18Text.replace(/\{\{(\w+)\}\}/g, (match, key) => values[key] || match);
 
     return localizedText || null;
 };
@@ -15,5 +15,6 @@ const useTranslations = () => ({
 });
 
 const localize = mockFn;
+const getAllowedLanguages = jest.fn(() => ({ EN: 'English' }));
 
-export { Localize, localize, useTranslations };
+export { getAllowedLanguages, Localize, localize, useTranslations };

package.json

@@ -19,7 +19,7 @@
         "@chakra-ui/react": "^2.8.2",
         "@deriv-com/analytics": "^1.10.1",
         "@deriv-com/api-hooks": "^1.4.9",
-        "@deriv-com/translations": "^1.2.4",
+        "@deriv-com/translations": "^1.3.5",
         "@deriv-com/ui": "^1.29.0",
         "@deriv-com/utils": "^0.0.28",
         "@deriv/quill-icons": "^1.23.8",

src/components/AppFooter/__tests__/LanguageSettings.spec.tsx

@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import LanguageSettings from '../LanguageSettings';
 
 jest.mock('@deriv-com/translations', () => ({
+    getAllowedLanguages: jest.fn(() => ({ EN: 'English' })),
     useTranslations: jest.fn(),
 }));
 

src/components/AppHeader/MobileMenu/__tests__/MenuHeader.spec.tsx

@@ -12,6 +12,7 @@ jest.mock('@deriv-com/ui', () => ({
 }));
 
 jest.mock('@deriv-com/translations', () => ({
+    getAllowedLanguages: jest.fn(() => ({ EN: 'English' })),
     useTranslations: jest.fn(),
 }));
 

src/components/AppHeader/MobileMenu/__tests__/MobileMenu.spec.tsx

@@ -29,6 +29,7 @@ jest.mock('@deriv-com/api-hooks', () => ({
 }));
 
 jest.mock('@deriv-com/translations', () => ({
+    getAllowedLanguages: jest.fn(() => ({ EN: 'English' })),
     useTranslations: jest.fn().mockReturnValue({
         currentLang: 'EN',
         localize: jest.fn(text => text),

src/constants/languages.tsx

@@ -1,102 +1,68 @@
+import { ComponentType, SVGProps } from 'react';
 import {
     FlagArabLeagueIcon,
+    FlagBangladeshIcon,
+    FlagCambodiaIcon,
+    FlagChinaSimplifiedIcon,
+    FlagChinaTraditionalIcon,
     FlagFranceIcon,
     FlagGermanyIcon,
+    FlagIndonesiaIcon,
     FlagItalyIcon,
+    FlagMongoliaIcon,
     FlagPolandIcon,
     FlagPortugalIcon,
     FlagRussiaIcon,
+    FlagSouthKoreaIcon,
     FlagSpainIcon,
+    FlagSriLankaIcon,
+    FlagTanzaniaIcon,
     FlagThailandIcon,
     FlagTurkeyIcon,
     FlagUnitedKingdomIcon,
     FlagVietnamIcon,
 } from '@deriv/quill-icons';
+import { getAllowedLanguages } from '@deriv-com/translations';
 
-export const LANGUAGES = [
-    {
-        code: 'EN',
-        displayName: 'English',
-        icon: <FlagUnitedKingdomIcon height={24} width={36} />,
-        placeholderIcon: <FlagUnitedKingdomIcon height={12} width={18} />,
-        placeholderIconInMobile: <FlagUnitedKingdomIcon height={14.67} width={22} />,
-    },
-    {
-        code: 'AR',
-        displayName: 'العربية',
-        icon: <FlagArabLeagueIcon height={24} width={36} />,
-        placeholderIcon: <FlagArabLeagueIcon height={12} width={18} />,
-        placeholderIconInMobile: <FlagArabLeagueIcon height={14.67} width={22} />,
-    },
-    {
-        code: 'ES',
-        displayName: 'Español',
-        icon: <FlagSpainIcon height={24} width={36} />,
-        placeholderIcon: <FlagSpainIcon height={12} width={18} />,
-        placeholderIconInMobile: <FlagSpainIcon height={14.67} width={22} />,
-    },
+type TFlagComponent = {
+    [key: string]: ComponentType<SVGProps<SVGSVGElement>>;
+};
 
-    {
-        code: 'DE',
-        displayName: 'Deutsch',
-        icon: <FlagGermanyIcon height={24} width={36} />,
-        placeholderIcon: <FlagGermanyIcon height={12} width={18} />,
-        placeholderIconInMobile: <FlagGermanyIcon height={14.67} width={22} />,
-    },
-    {
-        code: 'PT',
-        displayName: 'Português',
-        icon: <FlagPortugalIcon height={24} width={36} />,
-        placeholderIcon: <FlagPortugalIcon height={12} width={18} />,
-        placeholderIconInMobile: <FlagPortugalIcon height={14.67} width={22} />,
-    },
-    {
-        code: 'PL',
-        displayName: 'Polish',
-        icon: <FlagPolandIcon height={24} width={36} />,
-        placeholderIcon: <FlagPolandIcon height={12} width={18} />,
-        placeholderIconInMobile: <FlagPolandIcon height={14.67} width={22} />,
-    },
-    {
-        code: 'RU',
-        displayName: 'Русский',
-        icon: <FlagRussiaIcon height={24} width={36} />,
-        placeholderIcon: <FlagRussiaIcon height={12} width={18} />,
-        placeholderIconInMobile: <FlagRussiaIcon height={14.67} width={22} />,
-    },
-    {
-        code: 'FR',
-        displayName: 'Français',
-        icon: <FlagFranceIcon height={24} width={36} />,
-        placeholderIcon: <FlagFranceIcon height={12} width={18} />,
-        placeholderIconInMobile: <FlagFranceIcon height={14.67} width={22} />,
-    },
-    {
-        code: 'IT',
-        displayName: 'Italiano',
-        icon: <FlagItalyIcon height={24} width={36} />,
-        placeholderIcon: <FlagItalyIcon height={12} width={18} />,
-        placeholderIconInMobile: <FlagItalyIcon height={14.67} width={22} />,
-    },
-    {
-        code: 'TH',
-        displayName: 'ไทย',
-        icon: <FlagThailandIcon height={24} width={36} />,
-        placeholderIcon: <FlagThailandIcon height={12} width={18} />,
-        placeholderIconInMobile: <FlagThailandIcon height={14.67} width={22} />,
-    },
-    {
-        code: 'TR',
-        displayName: 'Türkçe',
-        icon: <FlagTurkeyIcon height={24} width={36} />,
-        placeholderIcon: <FlagTurkeyIcon height={12} width={18} />,
-        placeholderIconInMobile: <FlagTurkeyIcon height={14.67} width={22} />,
-    },
-    {
-        code: 'VI',
-        displayName: 'Tiếng Việt',
-        icon: <FlagVietnamIcon height={24} width={36} />,
-        placeholderIcon: <FlagVietnamIcon height={12} width={18} />,
-        placeholderIconInMobile: <FlagVietnamIcon height={14.67} width={22} />,
-    },
-];
+const flagComponents: TFlagComponent = {
+    AR: FlagArabLeagueIcon,
+    BN: FlagBangladeshIcon,
+    DE: FlagGermanyIcon,
+    EN: FlagUnitedKingdomIcon,
+    ES: FlagSpainIcon,
+    FR: FlagFranceIcon,
+    ID: FlagIndonesiaIcon,
+    IT: FlagItalyIcon,
+    KM: FlagCambodiaIcon,
+    KO: FlagSouthKoreaIcon,
+    MN: FlagMongoliaIcon,
+    PL: FlagPolandIcon,
+    PT: FlagPortugalIcon,
+    RU: FlagRussiaIcon,
+    SI: FlagSriLankaIcon,
+    SW: FlagTanzaniaIcon,
+    TH: FlagThailandIcon,
+    TR: FlagTurkeyIcon,
+    VI: FlagVietnamIcon,
+    ZH_CN: FlagChinaSimplifiedIcon,
+    ZH_TW: FlagChinaTraditionalIcon,
+};
+
+const createFlagData = () => {
+    return Object.entries(getAllowedLanguages(['ID', 'AR'])).map(([code, displayName]) => {
+        const IconComponent = flagComponents[code];
+        return {
+            code,
+            displayName,
+            icon: <IconComponent height={24} width={36} />,
+            placeholderIcon: <IconComponent height={12} width={18} />,
+            placeholderIconInMobile: <IconComponent height={14.67} width={22} />,
+        };
+    });
+};
+
+export const LANGUAGES = createFlagData();

src/routes/AppContent/index.scss

@@ -51,3 +51,8 @@
         border-bottom: 1px solid #f2f3f4;
     }
 }
+
+//TODO: remove when deriv-com/ui version is updated
+.languages-modal__body {
+    margin: 1.6rem;
+}