[WALL] george / WALL-5075 / EU migration banner for existing clients

packages/appstore/src/components/banners/wallets-banner/__tests__/wallets-banner.spec.tsx

@@ -1,36 +1,45 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
+
 import { mockStore, StoreProvider } from '@deriv/stores';
+import { useTranslations } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
+import { render, screen } from '@testing-library/react';
+
 import WalletsBannerUpgrade from '../wallets-banner-upgrade';
 import WalletsBannerUpgrading from '../wallets-banner-upgrading';
 
+import '@testing-library/jest-dom';
+
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
     useDevice: jest.fn(() => ({ isDesktop: true })),
 }));
 
+jest.mock('@deriv-com/translations', () => ({
+    ...jest.requireActual('@deriv-com/translations'),
+    useTranslations: jest.fn(() => ({ instance: { dir: jest.fn() } })),
+}));
+
 describe('<WalletsBanner />', () => {
     const mockRootStore = mockStore({
         traders_hub: {
             toggleWalletsUpgrade: jest.fn(),
         },
     });
 
-    describe('Should render properly with right banner if status is eligible: <WalletsBannerUpgrade />', () => {
+    describe('renders properly with right banner if status is eligible: <WalletsBannerUpgrade />', () => {
         const desktop_test_id = 'dt_wallets_upgrade_coins_horizontal';
         const mobile_test_id = 'dt_wallets_upgrade_coins';
 
-        it('Should render upgrade now button', async () => {
+        it('renders upgrade now button', async () => {
             render(<WalletsBannerUpgrade is_upgrading={false} />, {
                 wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
             });
             const btn = screen.getByRole('button', { name: /Let's go/i });
             expect(btn).toBeInTheDocument();
         });
 
-        it('Should render image properly for desktop', () => {
+        it('renders image properly for desktop', () => {
             render(<WalletsBannerUpgrade is_upgrading={false} />, {
                 wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
             });
@@ -41,7 +50,7 @@ describe('<WalletsBanner />', () => {
             expect(mobile_image).not.toBeInTheDocument();
         });
 
-        it('Should render image properly for mobile', () => {
+        it('renders image properly for mobile', () => {
             (useDevice as jest.Mock).mockReturnValueOnce({ isMobile: true });
             render(<WalletsBannerUpgrade is_upgrading={false} />, {
                 wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
@@ -63,11 +72,14 @@ describe('<WalletsBanner />', () => {
         });
     });
 
-    describe('Should render properly with right banner if status is in_progress: <WalletsBannerUpgrading />', () => {
-        const desktop_test_id = 'dt_wallets_upgrade_coins_horizontal';
-        const mobile_test_id = 'dt_wallets_upgrade_coins';
+    describe('renders properly with right banner if status is in_progress: <WalletsBannerUpgrading />', () => {
+        const desktop_non_eu_test_id = 'dt_wallets_upgrade_coins_horizontal';
+        const mobile_non_eu_test_id = 'dt_wallets_upgrade_coins';
+        const desktop_eu_test_id = 'dt_wallets_eu_upgrade_coins_horizontal';
+        const mobile_eu_test_id_ltr = 'dt_wallets_eu_upgrade_coins_ltr';
+        const mobile_eu_test_id_rtl = 'dt_wallets_eu_upgrade_coins_rtl';
 
-        it('Should render right title', () => {
+        it('renders right title', () => {
             render(<WalletsBannerUpgrading />, {
                 wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
             });
@@ -76,7 +88,7 @@ describe('<WalletsBanner />', () => {
             expect(title).toBeInTheDocument();
         });
 
-        it('Should render loading dots', () => {
+        it('renders loading dots', () => {
             render(<WalletsBannerUpgrading />, {
                 wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
             });
@@ -85,27 +97,83 @@ describe('<WalletsBanner />', () => {
             expect(loading_dots).toBeInTheDocument();
         });
 
-        it('Should render image properly for desktop', () => {
+        it('renders image properly for desktop non eu client', () => {
             render(<WalletsBannerUpgrading />, {
                 wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
             });
-            const desktop_image = screen.queryByTestId(desktop_test_id);
-            const mobile_image = screen.queryByTestId(mobile_test_id);
+            const desktop_image = screen.queryByTestId(desktop_non_eu_test_id);
+            const mobile_image = screen.queryByTestId(mobile_non_eu_test_id);
 
             expect(desktop_image).toBeInTheDocument();
             expect(mobile_image).not.toBeInTheDocument();
         });
 
-        it('Should render image properly for mobile', () => {
+        it('renders image properly for mobile non eu client', () => {
             (useDevice as jest.Mock).mockReturnValueOnce({ isMobile: true });
             render(<WalletsBannerUpgrading />, {
                 wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
             });
-            const desktop_image = screen.queryByTestId(desktop_test_id);
-            const mobile_image = screen.queryByTestId(mobile_test_id);
+            const desktop_image = screen.queryByTestId(desktop_non_eu_test_id);
+            const mobile_image = screen.queryByTestId(mobile_non_eu_test_id);
 
             expect(mobile_image).toBeInTheDocument();
             expect(desktop_image).not.toBeInTheDocument();
         });
+
+        it('renders image properly for desktop eu client', () => {
+            const mockedStore = {
+                ...mockRootStore,
+                client: {
+                    is_eu: true,
+                },
+            };
+            render(<WalletsBannerUpgrading />, {
+                //@ts-expect-error - we need only partial client mock
+                wrapper: ({ children }) => <StoreProvider store={mockedStore}>{children}</StoreProvider>,
+            });
+            const desktop_image = screen.getByTestId(desktop_eu_test_id);
+            const mobile_image_ltr = screen.queryByTestId(mobile_eu_test_id_ltr);
+            const mobile_image_rtl = screen.queryByTestId(mobile_eu_test_id_rtl);
+
+            expect(desktop_image).toBeInTheDocument();
+            expect(mobile_image_ltr).not.toBeInTheDocument();
+            expect(mobile_image_rtl).not.toBeInTheDocument();
+        });
+
+        it('renders image properly for mobile eu client in rtl language', () => {
+            const mockedStore = {
+                ...mockRootStore,
+                client: {
+                    is_eu: true,
+                },
+            };
+            (useDevice as jest.Mock).mockReturnValueOnce({ isMobile: true });
+            (useTranslations as jest.Mock).mockReturnValueOnce({ instance: { dir: jest.fn(() => 'rtl') } });
+            render(<WalletsBannerUpgrading />, {
+                //@ts-expect-error - we need only partial client mock
+                wrapper: ({ children }) => <StoreProvider store={mockedStore}>{children}</StoreProvider>,
+            });
+            const mobile_image_rtl = screen.getByTestId(mobile_eu_test_id_rtl);
+
+            expect(mobile_image_rtl).toBeInTheDocument();
+        });
+
+        it('renders image properly for mobile eu client in ltr language', () => {
+            const mockedStore = {
+                ...mockRootStore,
+                client: {
+                    is_eu: true,
+                },
+            };
+            (useDevice as jest.Mock).mockReturnValueOnce({ isMobile: true });
+            (useTranslations as jest.Mock).mockReturnValueOnce({ instance: { dir: jest.fn(() => 'ltr') } });
+            render(<WalletsBannerUpgrading />, {
+                //@ts-expect-error - we need only partial client mock
+                wrapper: ({ children }) => <StoreProvider store={mockedStore}>{children}</StoreProvider>,
+            });
+            const mobile_image_ltr = screen.getByTestId(mobile_eu_test_id_ltr);
+
+            expect(mobile_image_ltr).toBeInTheDocument();
+        });
     });
 });

packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrading.tsx

@@ -1,15 +1,43 @@
 import React from 'react';
-import { Analytics } from '@deriv-com/analytics';
+import classNames from 'classnames';
+
 import { Icon, Text } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
+import { Analytics } from '@deriv-com/analytics';
+import { useTranslations } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 
+const getIconName = (is_eu: boolean, is_mobile: boolean, is_rtl: boolean) => {
+    if (is_eu) {
+        if (is_mobile) {
+            return is_rtl ? 'IcAppstoreWalletsEuUpgradeCoinsRtl' : 'IcAppstoreWalletsEuUpgradeCoinsLtr';
+        }
+        return 'IcAppstoreWalletsEuUpgradeCoinsHorizontal';
+    }
+
+    return is_mobile ? 'IcAppstoreWalletsUpgradeCoins' : 'IcAppstoreWalletsUpgradeCoinsHorizontal';
+};
+
+const getDataTestId = (is_eu: boolean, is_mobile: boolean, is_rtl: boolean) => {
+    if (is_eu) {
+        if (is_mobile) {
+            return is_rtl ? 'dt_wallets_eu_upgrade_coins_rtl' : 'dt_wallets_eu_upgrade_coins_ltr';
+        }
+        return 'dt_wallets_eu_upgrade_coins_horizontal';
+    }
+    return is_mobile ? 'dt_wallets_upgrade_coins' : 'dt_wallets_upgrade_coins_horizontal';
+};
+
 const WalletsBannerUpgrading = observer(() => {
-    const { traders_hub, common } = useStore();
+    const { traders_hub, client, common } = useStore();
     const { is_demo } = traders_hub;
     const { current_language } = common;
+    const { is_eu } = client;
     const { isDesktop, isMobile, isTablet } = useDevice();
+    const { instance: i18n } = useTranslations();
+    const is_rtl = i18n.dir(i18n.language?.toLowerCase()) === 'rtl';
+
     let titleFontSize, descriptionFontSize, iconHeight, iconWidth;
 
     if (isTablet) {
@@ -66,11 +94,13 @@ const WalletsBannerUpgrading = observer(() => {
                 />
             </div>
             <Icon
-                icon={`IcAppstoreWalletsUpgradeCoins${isMobile ? '' : 'Horizontal'}`}
+                icon={getIconName(is_eu, isMobile, is_rtl)}
                 width={iconWidth}
                 height={iconHeight}
-                className='wallets-banner-upgrading__image'
-                data_testid={`dt_wallets_upgrade_coins${isMobile ? '' : '_horizontal'}`}
+                className={classNames('wallets-banner-upgrading__image', {
+                    'wallets-banner-upgrading__image--eu': is_eu,
+                })}
+                data_testid={getDataTestId(is_eu, isMobile, is_rtl)}
             />
         </div>
     );

packages/appstore/src/components/banners/wallets-banner/wallets-banner.scss

@@ -181,6 +181,10 @@
         min-width: 15.6rem;
         margin-block-start: 0.4rem;
         margin-inline-end: unset;
+
+        &--eu {
+            min-width: 10.8rem;
+        }
     }
 
     @include tablet-screen {

packages/appstore/src/components/modals/modal-manager.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+
+import { DetailsOfEachMT5Loginid } from '@deriv/api-types';
+import CFDResetPasswordModal from '@deriv/cfd/src/Containers/cfd-reset-password-modal';
+import { Loading } from '@deriv/components';
 import { useWalletMigration } from '@deriv/hooks';
 import { makeLazyLoader, moduleLoader } from '@deriv/shared';
-import { Loading } from '@deriv/components';
-import { TTradingPlatformAvailableAccount } from './account-type-modal/types';
+
 import { useStores } from 'Stores';
-import { DetailsOfEachMT5Loginid } from '@deriv/api-types';
-import CFDResetPasswordModal from '@deriv/cfd/src/Containers/cfd-reset-password-modal';
+
+import { TTradingPlatformAvailableAccount } from './account-type-modal/types';
 
 const VerificationDocsListModal = makeLazyLoader(
     () =>
@@ -48,6 +51,12 @@ const WalletsUpgradeModal = makeLazyLoader(
     () => <Loading />
 )();
 
+const WalletsEUUpgradeModal = makeLazyLoader(
+    () =>
+        moduleLoader(() => import(/* webpackChunkName: "modal_wallets-upgrade-modal" */ './wallets-eu-upgrade-modal')),
+    () => <Loading />
+)();
+
 const CFDServerErrorDialog = makeLazyLoader(
     () =>
         moduleLoader(
@@ -175,7 +184,14 @@ const ModalManager = () => {
     const { is_eligible, is_in_progress } = useWalletMigration();
     const store = useStores();
     const { common, client, modules, traders_hub, ui } = store;
-    const { is_logged_in, is_eu, is_eu_country, is_populating_mt5_account_list, verification_code } = client;
+    const {
+        is_logged_in,
+        is_eu,
+        is_eu_country,
+        is_populating_mt5_account_list,
+        verification_code,
+        is_trading_experience_incomplete,
+    } = client;
     const { platform } = common;
     const {
         current_list,
@@ -203,6 +219,7 @@ const ModalManager = () => {
         is_top_up_virtual_open,
         is_top_up_virtual_success,
         is_mt5_migration_modal_open,
+        should_show_assessment_complete_modal,
     } = ui;
     const {
         is_demo,
@@ -277,6 +294,12 @@ const ModalManager = () => {
         is_mt5_password_invalid_format_modal_visible ||
         is_sent_email_modal_enabled;
 
+    const should_show_wallets_non_eu_upgrade_modal =
+        !is_eu && (is_eligible || is_real_wallets_upgrade_on || is_in_progress);
+
+    const should_show_wallets_eu_upgrade_modal =
+        is_eu && !is_trading_experience_incomplete && !should_show_assessment_complete_modal && is_eligible;
+
     return (
         <React.Fragment>
             {is_server_maintenance_modal_visible && <CFDServerMaintenanceModal />}
@@ -331,7 +354,8 @@ const ModalManager = () => {
             {is_verification_docs_list_modal_visible && <VerificationDocsListModal />}
             <React.Fragment>
                 {is_wallet_migration_failed && <WalletsMigrationFailed />}
-                {(is_eligible || is_real_wallets_upgrade_on || is_in_progress) && <WalletsUpgradeModal />}
+                {should_show_wallets_non_eu_upgrade_modal && <WalletsUpgradeModal />}
+                {should_show_wallets_eu_upgrade_modal && <WalletsEUUpgradeModal />}
             </React.Fragment>
             {is_setup_real_account_or_go_to_demo_modal_visible && <SetupRealAccountOrGoToDemoModal />}
         </React.Fragment>