diff --git a/__mocks__/LocalizeMock.js b/__mocks__/LocalizeMock.js index 0d9e1719..7b08c3ed 100644 --- a/__mocks__/LocalizeMock.js +++ b/__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 }; diff --git a/package-lock.json b/package-lock.json index 39bd0aa6..ea858910 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,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", @@ -3854,9 +3854,9 @@ } }, "node_modules/@deriv-com/translations": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/@deriv-com/translations/-/translations-1.2.4.tgz", - "integrity": "sha512-LA6ZVNRhigN+wFQsfNzCCWdF0u4saud/AtnDDDlUo1pioKNckXoMv8RxvodiiSbnU4BvChaar/wvPeR3c+O3oA==", + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/@deriv-com/translations/-/translations-1.3.5.tgz", + "integrity": "sha512-KIUQp9UgO87puFM45dJz76gSoSxAskQTHYMbOXvThG07UcjBhU3MRYAJUWKrJWE4WcdGhkJbH1CIDkqzRjHhxQ==", "dependencies": { "@xmldom/xmldom": "^0.8.10", "commander": "^12.0.0", diff --git a/package.json b/package.json index 7bf34585..4ba64d6f 100644 --- a/package.json +++ b/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", diff --git a/src/components/AppFooter/__tests__/LanguageSettings.spec.tsx b/src/components/AppFooter/__tests__/LanguageSettings.spec.tsx index 34248a4d..189b82d6 100644 --- a/src/components/AppFooter/__tests__/LanguageSettings.spec.tsx +++ b/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(), })); diff --git a/src/components/AppHeader/MobileMenu/__tests__/MenuHeader.spec.tsx b/src/components/AppHeader/MobileMenu/__tests__/MenuHeader.spec.tsx index 6bb74d85..05b8eda6 100644 --- a/src/components/AppHeader/MobileMenu/__tests__/MenuHeader.spec.tsx +++ b/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(), })); diff --git a/src/components/AppHeader/MobileMenu/__tests__/MobileMenu.spec.tsx b/src/components/AppHeader/MobileMenu/__tests__/MobileMenu.spec.tsx index 787a3795..e3499e3f 100644 --- a/src/components/AppHeader/MobileMenu/__tests__/MobileMenu.spec.tsx +++ b/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), diff --git a/src/constants/languages.tsx b/src/constants/languages.tsx index bbf76afa..fd8e8f50 100644 --- a/src/constants/languages.tsx +++ b/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: , - placeholderIcon: , - placeholderIconInMobile: , - }, - { - code: 'AR', - displayName: 'العربية', - icon: , - placeholderIcon: , - placeholderIconInMobile: , - }, - { - code: 'ES', - displayName: 'Español', - icon: , - placeholderIcon: , - placeholderIconInMobile: , - }, +type TFlagComponent = { + [key: string]: ComponentType>; +}; - { - code: 'DE', - displayName: 'Deutsch', - icon: , - placeholderIcon: , - placeholderIconInMobile: , - }, - { - code: 'PT', - displayName: 'Português', - icon: , - placeholderIcon: , - placeholderIconInMobile: , - }, - { - code: 'PL', - displayName: 'Polish', - icon: , - placeholderIcon: , - placeholderIconInMobile: , - }, - { - code: 'RU', - displayName: 'Русский', - icon: , - placeholderIcon: , - placeholderIconInMobile: , - }, - { - code: 'FR', - displayName: 'Français', - icon: , - placeholderIcon: , - placeholderIconInMobile: , - }, - { - code: 'IT', - displayName: 'Italiano', - icon: , - placeholderIcon: , - placeholderIconInMobile: , - }, - { - code: 'TH', - displayName: 'ไทย', - icon: , - placeholderIcon: , - placeholderIconInMobile: , - }, - { - code: 'TR', - displayName: 'Türkçe', - icon: , - placeholderIcon: , - placeholderIconInMobile: , - }, - { - code: 'VI', - displayName: 'Tiếng Việt', - icon: , - placeholderIcon: , - placeholderIconInMobile: , - }, -]; +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: , + placeholderIcon: , + placeholderIconInMobile: , + }; + }); +}; + +export const LANGUAGES = createFlagData(); diff --git a/src/routes/AppContent/index.scss b/src/routes/AppContent/index.scss index 3855fe5b..be9130b7 100644 --- a/src/routes/AppContent/index.scss +++ b/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; +}