Jim/WALL-4600/TH for EU clients (#17249)

* chore: tradershub for eu * ci: fix failing tests * style: make the learn more link dark for eu * chore: show multipliers for eu and options for non-eu * ci: fix failing test cases * revert: undo link related styles * ci: fix failing test * revert: undo stylelint auto fix * revert: undo stylelint auto fix * style: extract conditional to a variable * chore: add more testcases * chore: remove logic to hide add more wallets based on disabled wallets * chore: add more test cases * ci: fix failing test case * ci: fix failing test cases * chore: resolve translation issues * chore: address comments * ci: fix failing test * feat: add account information and modal * ci: fix failing tests * ci: resolve typescript error * fix: resolve banner issues on small resolution devices * fix: fix safari issue * chore: replace ieuuser with iseuregion and adjust padding * ci: fix failing build * revert: undo unintended code formatting
deriv-com · Nov 13, 2024 · b0d9f3f · b0d9f3f
1 parent dc8895f
commit b0d9f3f
Show file tree

Hide file tree

Showing 60 changed files with 953 additions and 346 deletions.
diff --git a/packages/core/src/App/Components/Layout/Header/__tests__/account-info-wallets.spec.tsx b/packages/core/src/App/Components/Layout/Header/__tests__/account-info-wallets.spec.tsx
@@ -185,35 +185,6 @@ describe('AccountInfoWallets component', () => {
         expect(screen.queryByText('SVG')).not.toBeInTheDocument();
     });
 
-    it('should render "MALTA" label', () => {
-        const mock = mockStore({
-            client: {
-                accounts: {
-                    CRW909900: {
-                        account_category: 'wallet',
-                        currency: 'USD',
-                        is_virtual: 0,
-                        is_disabled: 0,
-                        landing_company_name: 'maltainvest',
-                        linked_to: [{ loginid: 'CR123', platform: 'dtrade' }],
-                    },
-                    CR123: {
-                        account_category: 'trading',
-                        currency: 'USD',
-                        is_virtual: 0,
-                        is_disabled: 0,
-                    },
-                },
-                loginid: 'CR123',
-            },
-        });
-
-        const toggleDialog = jest.fn();
-        render(<AccountInfoWallets is_dialog_on={false} toggleDialog={toggleDialog} />, { wrapper: wrapper(mock) });
-
-        expect(screen.queryByText('MALTA')).toBeInTheDocument();
-    });
-
     it('should render "IcLock" icon when "is_disabled" property is "true"', () => {
         const mock = mockStore({
             client: {

diff --git a/packages/core/src/App/Components/Layout/Header/wallets/account-info-wallets.tsx b/packages/core/src/App/Components/Layout/Header/wallets/account-info-wallets.tsx
@@ -138,7 +138,7 @@ const AccountInfoWallets = observer(({ is_dialog_on, toggleDialog }: TAccountInf
 
     if (!linked_wallet) return <AccountsInfoLoader is_logged_in={is_logged_in} is_mobile={!isDesktop} speed={3} />;
 
-    const show_badge = linked_wallet.is_malta_wallet || linked_wallet.is_virtual;
+    const show_badge = linked_wallet.is_virtual;
 
     return (
         <div className='acc-info__wrapper'>

diff --git a/.../src/App/Containers/AccountSwitcherWallet/__tests__/account-switcher-wallet-item.spec.tsx b/.../src/App/Containers/AccountSwitcherWallet/__tests__/account-switcher-wallet-item.spec.tsx
@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { StoreProvider, mockStore } from '@deriv/stores';
 import { AccountSwitcherWalletItem } from '../account-switcher-wallet-item';
 
+// @ts-expect-error - This is a mock account
 const account: React.ComponentProps<typeof AccountSwitcherWalletItem>['account'] = {
     currency: 'USD',
     dtrade_balance: 100,
@@ -45,31 +46,20 @@ const AccountSwitcherWalletItemComponent = ({
 };
 
 describe('AccountSwitcherWalletItem', () => {
-    it('should render the component', () => {
+    it('renders the component', () => {
         const store = mockStore({});
         render(<AccountSwitcherWalletItemComponent props={props} store={store} />);
         expect(screen.getByText('USD Wallet')).toBeInTheDocument();
         expect(screen.getByText('100.00 USD')).toBeInTheDocument();
     });
 
-    it('should NOT show SVG badge', () => {
+    it('does not show SVG badge', () => {
         const store = mockStore({});
         render(<AccountSwitcherWalletItemComponent props={props} store={store} />);
         expect(screen.queryByText('SVG')).not.toBeInTheDocument();
     });
 
-    it('should show MALTA badge if show_badge is true', () => {
-        const store = mockStore({});
-        const tempProps = {
-            ...props,
-            account: { ...account, is_malta_wallet: true, landing_company_name: 'malta' },
-            show_badge: true,
-        };
-        render(<AccountSwitcherWalletItemComponent props={tempProps} store={store} />);
-        expect(screen.getByText('MALTA')).toBeInTheDocument();
-    });
-
-    it('should render Demo Badge if show_badge is true', () => {
+    it('renders Demo Badge if show_badge is true', () => {
         const store = mockStore({});
         const tempProps = { ...props, account: { ...account, is_virtual: true }, show_badge: true };
         render(<AccountSwitcherWalletItemComponent props={tempProps} store={store} />);
@@ -78,14 +68,14 @@ describe('AccountSwitcherWalletItem', () => {
         expect(screen.getByText('Demo')).toBeInTheDocument();
     });
 
-    it('should call closeAccountsDialog when clicked', () => {
+    it('calls closeAccountsDialog when clicked', () => {
         const store = mockStore({});
         render(<AccountSwitcherWalletItemComponent props={props} store={store} />);
         userEvent.click(screen.getByTestId('account-switcher-wallet-item'));
         expect(props.closeAccountsDialog).toHaveBeenCalled();
     });
 
-    it('should call switchAccount when clicked not selected', async () => {
+    it('calls switchAccount when clicked not selected', async () => {
         const switchAccount = jest.fn();
         const store = mockStore({ client: { switchAccount, loginid: 'CR008' } });
         render(<AccountSwitcherWalletItemComponent props={props} store={store} />);
@@ -94,12 +84,34 @@ describe('AccountSwitcherWalletItem', () => {
         expect(props.closeAccountsDialog).toHaveBeenCalled();
     });
 
-    it('should not call switchAccount when clicked the already selected', async () => {
+    it('does not call switchAccount when clicked the already selected', async () => {
         const switchAccount = jest.fn();
         const store = mockStore({ client: { switchAccount, loginid: 'CR007' } });
         render(<AccountSwitcherWalletItemComponent props={props} store={store} />);
         userEvent.click(screen.getByTestId('account-switcher-wallet-item'));
         expect(switchAccount).not.toHaveBeenCalled();
         expect(props.closeAccountsDialog).toHaveBeenCalled();
     });
+
+    it('shows Options when is_eu is false', () => {
+        const store = mockStore({
+            client: {
+                is_eu: false,
+            },
+        });
+        const tempProps = { ...props, account };
+        render(<AccountSwitcherWalletItemComponent props={tempProps} store={store} />);
+        expect(screen.getByText('Options')).toBeInTheDocument();
+    });
+
+    it('shows Multipliers when is_eu is true', () => {
+        const store = mockStore({
+            client: {
+                is_eu: true,
+            },
+        });
+        const tempProps = { ...props, account };
+        render(<AccountSwitcherWalletItemComponent props={tempProps} store={store} />);
+        expect(screen.getByText('Multipliers')).toBeInTheDocument();
+    });
 });
diff --git a/packages/core/src/App/Containers/AccountSwitcherWallet/account-switcher-wallet-item.tsx b/packages/core/src/App/Containers/AccountSwitcherWallet/account-switcher-wallet-item.tsx
@@ -30,7 +30,7 @@ export const AccountSwitcherWalletItem = observer(
 
         const {
             ui: { is_dark_mode_on },
-            client: { switchAccount, loginid: active_loginid },
+            client: { switchAccount, loginid: active_loginid, is_eu },
         } = useStore();
 
         const theme = is_dark_mode_on ? 'dark' : 'light';
@@ -70,7 +70,11 @@ export const AccountSwitcherWalletItem = observer(
                 </div>
                 <div className='acc-switcher-wallet-item__content'>
                     <Text size='xxxs'>
-                        <Localize i18n_default_text='Options' />
+                        {is_eu ? (
+                            <Localize i18n_default_text='Multipliers' />
+                        ) : (
+                            <Localize i18n_default_text='Options' />
+                        )}
                     </Text>
                     <Text size='xxxs'>
                         {is_virtual ? (

diff --git a/packages/core/src/App/Containers/AccountSwitcherWallet/account-switcher-wallet-list.tsx b/packages/core/src/App/Containers/AccountSwitcherWallet/account-switcher-wallet-list.tsx
@@ -12,13 +12,12 @@ export const AccountSwitcherWalletList = ({ wallets, closeAccountsDialog }: TAcc
     <div className='account-switcher-wallet-list'>
         {wallets?.map(account => {
             if (account.is_dtrader_account_disabled) return null;
-            const show_badge = account?.is_malta_wallet || account?.is_virtual;
             return (
                 <AccountSwitcherWalletItem
                     key={account.dtrade_loginid}
                     account={account}
                     closeAccountsDialog={closeAccountsDialog}
-                    show_badge={show_badge}
+                    show_badge={account?.is_virtual}
                 />
             );
         })}

diff --git a/packages/wallets/src/AppContent.scss b/packages/wallets/src/AppContent.scss
@@ -9,7 +9,11 @@
     height: calc(100vh - 8.4rem); // 100vh - (4.8rem header + 3.6rem footer)
     /* stylelint-disable-next-line declaration-no-important */
     overflow-y: auto !important; //override overflow: initial from core app content
-
+    &--with-banner {
+        @include desktop-screen {
+            height: 100vh;
+        }
+    }
     @include mobile-or-tablet-screen {
         height: calc(var(--wallets-vh, 1vh) * 100 - 4rem); // 100vh - 4rem (header)
         min-height: calc(var(--wallets-vh, 1vh) * 100 - 8.4rem); // 100vh - (4.8rem header + 3.6rem footer)

diff --git a/packages/wallets/src/AppContent.tsx b/packages/wallets/src/AppContent.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
-import { useDerivAccountsList, useSettings } from '@deriv/api-v2';
+import classNames from 'classnames';
+import { useActiveWalletAccount, useDerivAccountsList, useIsEuRegion, useSettings } from '@deriv/api-v2';
 import { Analytics } from '@deriv-com/analytics';
 import useAllBalanceSubscription from './hooks/useAllBalanceSubscription';
 import { defineViewportHeight } from './utils/utils';
@@ -15,8 +16,10 @@ type AppContentProps = {
 const AppContent: React.FC<AppContentProps> = ({ isWalletsOnboardingTourGuideVisible, setPreferredLanguage }) => {
     const { isSubscribed, subscribeToAllBalance, unsubscribeFromAllBalance } = useAllBalanceSubscription();
     const { data: derivAccountList } = useDerivAccountsList();
-    const previousDerivAccountListLenghtRef = useRef(0);
+    const previousDerivAccountListLengthRef = useRef(0);
     const appRef = useRef<HTMLDivElement>(null);
+    const { data: isEuRegion } = useIsEuRegion();
+    const { data: activeWallet } = useActiveWalletAccount();
     const {
         data: { preferred_language: preferredLanguage },
     } = useSettings();
@@ -31,9 +34,9 @@ const AppContent: React.FC<AppContentProps> = ({ isWalletsOnboardingTourGuideVis
 
     useEffect(() => {
         if (!derivAccountList?.length) return;
-        if (previousDerivAccountListLenghtRef.current !== derivAccountList.length || !isSubscribed) {
+        if (previousDerivAccountListLengthRef.current !== derivAccountList.length || !isSubscribed) {
             subscribeToAllBalance();
-            previousDerivAccountListLenghtRef.current = derivAccountList.length;
+            previousDerivAccountListLengthRef.current = derivAccountList.length;
         }
         return () => {
             if (isSubscribed) {
@@ -64,7 +67,12 @@ const AppContent: React.FC<AppContentProps> = ({ isWalletsOnboardingTourGuideVis
     }, [isWalletsOnboardingTourGuideVisible]);
 
     return (
-        <div className='wallets-app' ref={appRef}>
+        <div
+            className={classNames('wallets-app', {
+                'wallets-app--with-banner': isEuRegion && !activeWallet?.is_virtual,
+            })}
+            ref={appRef}
+        >
             <div className='wallets-modal-show-header-root' id='wallets_modal_show_header_root' />
             <Router />
         </div>

diff --git a/packages/wallets/src/components/AccountsList/AccountsList.tsx b/packages/wallets/src/components/AccountsList/AccountsList.tsx
@@ -1,8 +1,10 @@
 import React, { FC, useCallback } from 'react';
+import { useIsEuRegion } from '@deriv/api-v2';
 import { useTranslations } from '@deriv-com/translations';
 import { Divider, Tab, Tabs, useDevice } from '@deriv-com/ui';
 import { CFDPlatformsList } from '../../features';
 import { OptionsAndMultipliersListing } from '../OptionsAndMultipliersListing';
+import { WalletsTabsLoader } from '../SkeletonLoader';
 import './AccountsList.scss';
 
 type TProps = {
@@ -13,7 +15,11 @@ type TProps = {
 const AccountsList: FC<TProps> = ({ accountsActiveTabIndex, onTabClickHandler }) => {
     const { isDesktop } = useDevice();
     const { localize } = useTranslations();
-    const tabs = [localize('CFDs'), localize('Options')];
+    const { data: isEuRegion, isLoading: isEuRegionLoading } = useIsEuRegion();
+
+    const optionsAndMultipliersTabTitle = isEuRegion ? localize('Multipliers') : localize('Options');
+
+    const tabs = [localize('CFDs'), optionsAndMultipliersTabTitle];
 
     const onChangeTabHandler = useCallback((activeTab: number) => onTabClickHandler?.(activeTab), [onTabClickHandler]);
 
@@ -29,6 +35,14 @@ const AccountsList: FC<TProps> = ({ accountsActiveTabIndex, onTabClickHandler })
             </div>
         );
 
+    if (isEuRegionLoading && !isDesktop) {
+        return (
+            <div className='wallets-accounts-list'>
+                <WalletsTabsLoader />
+            </div>
+        );
+    }
+
     return (
         <Tabs
             activeTab={tabs[accountsActiveTabIndex ?? 0]}
@@ -40,7 +54,7 @@ const AccountsList: FC<TProps> = ({ accountsActiveTabIndex, onTabClickHandler })
                 <CFDPlatformsList />
                 <Divider className='wallets-accounts-list__divider' color='var(--wallets-banner-border-color)' />
             </Tab>
-            <Tab className='wallets-accounts-list__tab' title={localize('Options')}>
+            <Tab className='wallets-accounts-list__tab' title={optionsAndMultipliersTabTitle}>
                 <OptionsAndMultipliersListing />
                 <Divider className='wallets-accounts-list__divider' color='var(--wallets-banner-border-color)' />
             </Tab>