feat: wallets in russian (#17407)

deriv-com · Nov 15, 2024 · 669e2d4 · 669e2d4
1 parent 2f3ad11
commit 669e2d4
Show file tree

Hide file tree

Showing 11 changed files with 116 additions and 42 deletions.
diff --git a/packages/appstore/src/constants/wallet-migration-video-translations.ts b/packages/appstore/src/constants/wallet-migration-video-translations.ts
@@ -3,6 +3,7 @@ export const WALLET_MIGRATION_VIDEO_TRANSLATIONS = {
     EN: '25df7df0d0af48090b086cd6f103d8f3',
     // ES: 'ef6e04a732ebf193106e62c4d9307637', TODO: Uncomment this when Spanish translations are ready
     FR: 'e444c765e24eaad80dcb1549d1018c0f',
+    RU: '932be9817e60bdaae87d657d609b38d2',
     // TODO: Add translations for other languages
 } as const;
 

diff --git a/packages/shared/src/utils/constants/default-options.ts b/packages/shared/src/utils/constants/default-options.ts
@@ -20,7 +20,6 @@ export const WALLETS_UNSUPPORTED_LANGUAGES = [
     'KO',
     'PL',
     'PT',
-    'RU',
     'SI',
     'TH',
     'TR',

diff --git a/packages/wallets/src/components/WalletListHeader/WalletListHeader.scss b/packages/wallets/src/components/WalletListHeader/WalletListHeader.scss
@@ -21,9 +21,11 @@
         pointer-events: none;
 
         &-item {
-            width: 5.6rem;
             display: flex;
             justify-content: center;
+            padding-inline-start: 1.2rem;
+            padding-inline-end: 0.8rem;
+
             &--disabled {
                 opacity: 0.7;
             }
@@ -35,7 +37,7 @@
         grid-row: 1;
         position: relative;
         display: flex;
-        width: 12rem;
+        width: var(--wallets-switcher-width);
         height: 4rem;
         margin: 0 1.6rem;
         background-color: var(--header-footer-bg-color, #0000000a);
@@ -52,7 +54,7 @@
                 position: absolute;
                 content: '';
                 height: 3.2rem;
-                width: 11.2rem;
+                inset-inline: 0.4rem;
                 background-color: var(--button-toggle-secondary, #d6dadb);
                 opacity: unset;
                 border-radius: 0.4rem;
@@ -76,7 +78,7 @@
             position: absolute;
             content: '';
             height: 3.2rem;
-            width: 5.6rem;
+            width: calc(var(--wallets-demo-width) + 0.4rem);
             background-color: var(--system-dark-1-prominent-text, #fff);
             transition: 0.2s;
             border-radius: 0.4rem;
@@ -86,15 +88,16 @@
 }
 
 .wallets-list-header__switcher-input:checked + .wallets-list-header__slider:before {
-    -webkit-transform: translateX(6rem);
-    -ms-transform: translateX(6rem);
-    transform: translateX(6rem);
-    margin-left: 0;
+    -webkit-transform: translateX(var(--wallets-demo-width));
+    -ms-transform: translateX(var(--wallets-demo-width));
+    transform: translateX(var(--wallets-demo-width));
+    width: calc(var(--wallets-real-width) + 0.8rem);
+    margin-inline-start: 0.4rem;
 
     @include rtl {
-        -webkit-transform: translateX(-6rem);
-        -ms-transform: translateX(-6rem);
-        transform: translateX(-6rem);
-        margin: 0.4rem 0;
+        -webkit-transform: translateX(calc(var(--wallets-demo-width) * -1));
+        -ms-transform: translateX(calc(var(--wallets-demo-width) * -1));
+        transform: translateX(calc(var(--wallets-demo-width) * -1));
+        margin-inline: 0.4rem;
     }
 }
diff --git a/packages/wallets/src/components/WalletListHeader/WalletListHeader.tsx b/packages/wallets/src/components/WalletListHeader/WalletListHeader.tsx
@@ -1,16 +1,19 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useActiveWalletAccount, useWalletAccountsList } from '@deriv/api-v2';
-import { Localize } from '@deriv-com/translations';
-import { Text, useDevice } from '@deriv-com/ui';
+import { getInitialLanguage, Localize } from '@deriv-com/translations';
+import { Text } from '@deriv-com/ui';
 import useWalletAccountSwitcher from '../../hooks/useWalletAccountSwitcher';
+import { defineSwitcherWidth } from '../../utils/utils';
 import './WalletListHeader.scss';
 
 const WalletListHeader: React.FC = () => {
-    const { isDesktop } = useDevice();
     const { data: wallets } = useWalletAccountsList();
     const { data: activeWallet } = useActiveWalletAccount();
     const switchWalletAccount = useWalletAccountSwitcher();
+    const demoTextRef = useRef<HTMLDivElement>(null);
+    const realTextRef = useRef<HTMLDivElement>(null);
+    const language = getInitialLanguage();
 
     const demoAccount = wallets?.find(wallet => wallet.is_virtual)?.loginid;
     const firstRealAccount = wallets?.find(wallet => !wallet.is_virtual && !wallet.is_disabled)?.loginid;
@@ -19,6 +22,26 @@ const WalletListHeader: React.FC = () => {
     const isDemo = activeWallet?.is_virtual;
     const [isChecked, setIsChecked] = useState(!isDemo);
 
+    useEffect(() => {
+        const updateWidths = () => {
+            if (demoTextRef.current && realTextRef.current) {
+                const demoWidth = demoTextRef.current.offsetWidth;
+                const realWidth = realTextRef.current.offsetWidth;
+                defineSwitcherWidth(realWidth, demoWidth);
+            }
+        };
+
+        updateWidths();
+
+        const resizeObserver = new ResizeObserver(updateWidths);
+        resizeObserver.observe(demoTextRef.current as Element);
+        resizeObserver.observe(realTextRef.current as Element);
+
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [language]);
+
     const handleToggle = () => {
         setIsChecked(prev => !prev);
         if (firstRealAccount && activeWallet?.loginid === demoAccount) {
@@ -32,8 +55,6 @@ const WalletListHeader: React.FC = () => {
         setIsChecked(!isDemo);
     }, [isDemo]);
 
-    if (!isDesktop) return null;
-
     return (
         <div className='wallets-list-header'>
             <Text align='start' size='xl' weight='bold'>
@@ -42,7 +63,7 @@ const WalletListHeader: React.FC = () => {
             {shouldShowSwitcher && (
                 <div className='wallets-list-header__switcher-container'>
                     <div className='wallets-list-header__label'>
-                        <div className='wallets-list-header__label-item'>
+                        <div className='wallets-list-header__label-item' ref={demoTextRef}>
                             <Text align='start' size='sm'>
                                 <Localize i18n_default_text='Demo' />
                             </Text>
@@ -52,6 +73,7 @@ const WalletListHeader: React.FC = () => {
                                 'wallets-list-header__label-item--disabled': !hasAnyActiveRealWallets,
                             })}
                             data-testid='dt_wallets_list_header__label_item_real'
+                            ref={realTextRef}
                         >
                             <Text align='start' size='sm'>
                                 <Localize i18n_default_text='Real' />

diff --git a/packages/wallets/src/components/WalletListHeader/__tests__/WalletListHeader.spec.tsx b/packages/wallets/src/components/WalletListHeader/__tests__/WalletListHeader.spec.tsx
@@ -1,17 +1,12 @@
 import React from 'react';
-import { useWalletAccountsList } from '@deriv/api-v2';
-import { useDevice } from '@deriv-com/ui';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { useActiveWalletAccount, useWalletAccountsList } from '@deriv/api-v2';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { defineSwitcherWidth } from '../../../utils/utils';
 import WalletListHeader from '../WalletListHeader';
-import '@testing-library/jest-dom';
-
-jest.mock('@deriv-com/ui', () => ({
-    ...jest.requireActual('@deriv-com/ui'),
-    useDevice: jest.fn(() => ({})),
-}));
 
 jest.mock('@deriv/api-v2', () => ({
-    useActiveWalletAccount: () => ({ data: { is_virtual: false, loginid: 'real1' } }),
+    useActiveWalletAccount: jest.fn(() => ({ data: { is_virtual: false, loginid: 'real1' } })),
     useWalletAccountsList: jest.fn(() => ({
         data: [
             { is_virtual: false, loginid: 'real1' },
@@ -27,38 +22,64 @@ jest.mock('../../../hooks/useWalletAccountSwitcher', () => ({
     default: jest.fn(() => mockSwitchWalletAccount),
 }));
 
+jest.mock('../../../utils/utils', () => ({
+    ...jest.requireActual('../../../utils/utils'),
+    defineSwitcherWidth: jest.fn(),
+}));
+
 describe('WalletListHeader', () => {
-    beforeEach(() => {
-        (useDevice as jest.Mock).mockReturnValue({ isDesktop: true });
+    beforeAll(() => {
+        global.ResizeObserver = class {
+            observe = () => jest.fn();
+            unobserve = () => jest.fn();
+            disconnect = () => jest.fn();
+        };
     });
 
     afterAll(() => {
         jest.clearAllMocks();
     });
 
-    it('should render header correctly', () => {
+    it('renders header content correctly', () => {
         render(<WalletListHeader />);
 
         expect(screen.getByText("Trader's Hub")).toBeInTheDocument();
         expect(screen.getByText('Demo')).toBeInTheDocument();
         expect(screen.getByText('Real')).toBeInTheDocument();
     });
 
-    it('should be checked if the real account is active', () => {
+    it('checks the checkbox if the real account is active', () => {
         render(<WalletListHeader />);
 
         const checkbox = screen.getByRole('checkbox');
         expect(checkbox).toBeChecked();
     });
 
-    it('should toggle accounts on checkbox change', () => {
+    it('toggles accounts on checkbox change', () => {
         render(<WalletListHeader />);
 
         const checkbox = screen.getByRole('checkbox');
-        fireEvent.click(checkbox);
+        userEvent.click(checkbox);
         expect(mockSwitchWalletAccount).toHaveBeenCalledWith('demo123');
     });
 
+    it('toggles to the first real account when the demo account is active', () => {
+        (useActiveWalletAccount as jest.Mock).mockReturnValue({ data: { is_virtual: true, loginid: 'demo123' } });
+        render(<WalletListHeader />);
+
+        const checkbox = screen.getByRole('checkbox');
+        expect(checkbox).not.toBeChecked();
+        userEvent.click(checkbox);
+
+        expect(mockSwitchWalletAccount).toHaveBeenCalledWith('real1');
+    });
+
+    it('calls defineSwitcherWidth on language change', () => {
+        render(<WalletListHeader />);
+
+        expect(defineSwitcherWidth).toHaveBeenCalled();
+    });
+
     it('renders the switcher with the correct class when all the real wallets are disabled', () => {
         (useWalletAccountsList as jest.Mock).mockReturnValue({
             data: [

diff --git a/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.scss b/packages/wallets/src/components/WalletsAddMoreCardBanner/WalletsAddMoreCardBanner.scss
@@ -21,10 +21,9 @@
     }
 
     &__success-footer {
-        width: 26rem;
+        width: 100%;
 
         @include mobile-or-tablet-screen {
-            width: 100%;
             max-width: 60rem;
             margin: 0 auto;
         }

diff --git a/packages/wallets/src/routes/WalletsListingRoute/WalletsListingRoute.tsx b/packages/wallets/src/routes/WalletsListingRoute/WalletsListingRoute.tsx
@@ -24,7 +24,7 @@ const WalletsListingRoute: React.FC = () => {
 
     return (
         <div className='wallets-listing-route'>
-            <WalletListHeader />
+            {isDesktop && <WalletListHeader />}
             {isDesktop ? (
                 <React.Suspense fallback={<WalletsCardLoader />}>
                     <LazyDesktopWalletsList />

diff --git a/packages/wallets/src/routes/WalletsListingRoute/__tests__/WalletsListingRoute.spec.tsx b/packages/wallets/src/routes/WalletsListingRoute/__tests__/WalletsListingRoute.spec.tsx
@@ -70,7 +70,7 @@ describe('WalletsListingRoute', () => {
         (useDevice as jest.Mock).mockReturnValue({ isMobile: true });
 
         render(<WalletsListingRoute />, { wrapper });
-        expect(screen.getByText('WalletListHeader')).toBeInTheDocument();
+        expect(screen.queryByText('WalletListHeader')).not.toBeInTheDocument();
         expect(screen.queryByText('DesktopWalletsList')).not.toBeInTheDocument();
         expect(await screen.findByText('WalletsCarousel')).toBeInTheDocument();
     });

diff --git a/packages/wallets/src/types.ts b/packages/wallets/src/types.ts
@@ -116,4 +116,4 @@ export type TProductForMarketDetails =
 
 export type TTranslations = ReturnType<typeof useTranslations>;
 
-export type TLanguageType = 'AR' | 'EN' | 'FR';
+export type TLanguageType = 'AR' | 'EN' | 'FR' | 'RU';
diff --git a/packages/wallets/src/utils/__tests__/utils.spec.ts b/packages/wallets/src/utils/__tests__/utils.spec.ts
@@ -1,4 +1,4 @@
-import { defineViewportHeight, isServerError } from '../utils';
+import { defineSwitcherWidth, defineViewportHeight, isServerError } from '../utils';
 import '@testing-library/jest-dom';
 
 describe('Wallets Utils', () => {
@@ -38,4 +38,27 @@ describe('Wallets Utils', () => {
             expect(CSSStyleDeclaration.prototype.setProperty).toHaveBeenCalledWith('--wallets-vh', '10px');
         });
     });
+
+    describe('defineSwitcherWidth', () => {
+        const originalSetProperty = CSSStyleDeclaration.prototype.setProperty;
+
+        beforeEach(() => {
+            CSSStyleDeclaration.prototype.setProperty = jest.fn();
+        });
+
+        afterEach(() => {
+            CSSStyleDeclaration.prototype.setProperty = originalSetProperty;
+        });
+
+        test('sets --wallets-real-width, --wallets-demo-width, and --wallets-switcher-width properties', () => {
+            const realWidth = 100;
+            const demoWidth = 80;
+
+            defineSwitcherWidth(realWidth, demoWidth);
+
+            expect(CSSStyleDeclaration.prototype.setProperty).toHaveBeenCalledWith('--wallets-real-width', '100px');
+            expect(CSSStyleDeclaration.prototype.setProperty).toHaveBeenCalledWith('--wallets-demo-width', '80px');
+            expect(CSSStyleDeclaration.prototype.setProperty).toHaveBeenCalledWith('--wallets-switcher-width', '196px');
+        });
+    });
 });
diff --git a/packages/wallets/src/utils/utils.ts b/packages/wallets/src/utils/utils.ts
@@ -12,3 +12,9 @@ export const defineViewportHeight = () => {
     const viewportHeight = window.innerHeight * 0.01;
     document.documentElement.style.setProperty('--wallets-vh', `${viewportHeight}px`);
 };
+
+export const defineSwitcherWidth = (realWidth: number, demoWidth: number) => {
+    document.documentElement.style.setProperty('--wallets-real-width', `${realWidth}px`);
+    document.documentElement.style.setProperty('--wallets-demo-width', `${demoWidth}px`);
+    document.documentElement.style.setProperty('--wallets-switcher-width', `${demoWidth + realWidth + 16}px`);
+};