[Wallets] Sergei / wall 2131 / Dropdown for DTrader & Dbot (binary-co…

…m#11048)

* feat: add types

* feat: add account-info component

* feat: add account-switcher styles

* feat: add account-switcher-wallet

* feat: add dtrader-header-wallets

* feat: fix some imports and type

* feat: add some logic

* feat: account-info-wallets works now

* feat: looks like it works now

* feat: add default value for linked_wallets_accounts

* feat: add linked_wallets_accounts to computed properties list

* fix: fix one test suite, left 3 more

* fix: fix tests for account-info-wallets

* fix: fix tests for account_switcher_wallet

* fix: fix tests for account-switcher-wallet-item

* fix: fix one code smell

* feat: change looking for CFDs section

* feat: use getCurrencyDisplayCode

* fix: fix tests after button change to div

* feat: implement review suggestions and add fix plug for SonarCloud bugs

* feat: move the logic from the store to hooks

* refactor: forgot to delete type

* refactor: delete React.Suspense

* feat: add wallet sort and sync store and useQuery data

* feat: change setLoginId to switchAccount

* feat: get back newAccount.currency

* feat: add should_show_wallets

* chore: empty

* feat: update useStoreLinkedWalletsAccount hook type

* feat: add ctrader array to the hook test result

* feat: reduce width of dropdown

* feat: change right property

* feat: fix test case after update from master

packages/core/src/App/Components/Layout/Header/__tests__/account-info-icon.spec.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AccountInfoIcon from '../account-info-icon';
+
+describe('AccountInfoIcon component', () => {
+    it('should render icon with testid', () => {
+        render(<AccountInfoIcon />);
+        expect(screen.queryByTestId('dt_icon')).toBeInTheDocument();
+    });
+
+    it('should render icon for virtual', () => {
+        render(<AccountInfoIcon is_virtual={true} currency='usd' />);
+        const icon = screen.queryByTestId('dt_icon');
+        expect(icon).toHaveClass('acc-info__id-icon--virtual');
+        expect(icon).not.toHaveClass('acc-info__id-icon--usd');
+    });
+
+    it('should render icon for not virtual and usd currency', () => {
+        render(<AccountInfoIcon currency='usd' />);
+        const icon = screen.queryByTestId('dt_icon');
+        expect(icon).toHaveClass('acc-info__id-icon--usd');
+        expect(icon).not.toHaveClass('acc-info__id-icon--virtual');
+    });
+});

packages/core/src/App/Components/Layout/Header/__tests__/account-info-wallets.spec.tsx

@@ -0,0 +1,276 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import AccountInfoWallets from '../wallets/account-info-wallets';
+
+describe('AccountInfoWallets component', () => {
+    const wrapper = (mock: ReturnType<typeof mockStore>) => {
+        const Component = ({ children }: { children: JSX.Element }) => {
+            return <StoreProvider store={mock}>{children}</StoreProvider>;
+        };
+        return Component;
+    };
+
+    const default_mock: Partial<typeof mockStore> = {
+        client: {
+            accounts: {
+                CRW909900: {
+                    account_category: 'wallet',
+                    currency: 'USD',
+                    is_virtual: 0,
+                    is_disabled: 0,
+                    linked_to: [{ loginid: 'CR123', platform: 'dtrade' }],
+                    balance: 0,
+                },
+                CR123: {
+                    account_category: 'trading',
+                    currency: 'USD',
+                    is_virtual: 0,
+                    is_disabled: 0,
+                    balance: 1234.56,
+                },
+            },
+            loginid: 'CR123',
+        },
+    };
+
+    it('should show "disabled_message" when "is_disabled" property is "true"', () => {
+        const mock = mockStore({
+            client: {
+                accounts: {
+                    CRW909900: {
+                        account_category: 'wallet',
+                        currency: 'USD',
+                        is_virtual: 0,
+                        is_disabled: 1,
+                        linked_to: [{ loginid: 'CR123', platform: 'dtrade' }],
+                    },
+                    CR123: {
+                        account_category: 'trading',
+                        currency: 'USD',
+                        is_virtual: 0,
+                        is_disabled: 1,
+                    },
+                },
+                loginid: 'CR123',
+            },
+            ui: {
+                account_switcher_disabled_message: 'test disabled message',
+            },
+        });
+
+        const toggleDialog = jest.fn();
+        render(<AccountInfoWallets is_dialog_on={false} toggleDialog={toggleDialog} />, { wrapper: wrapper(mock) });
+
+        const popover = screen.getByTestId('dt_popover_wrapper');
+        userEvent.hover(popover);
+        const disabled_message = screen.getByText(/test disabled message/i);
+        expect(disabled_message).toBeInTheDocument();
+    });
+
+    it('should have "acc-info--is-disabled" class when "is_disabled" property is "true"', () => {
+        const mock = mockStore({
+            client: {
+                accounts: {
+                    CRW909900: {
+                        account_category: 'wallet',
+                        currency: 'USD',
+                        is_virtual: 0,
+                        is_disabled: 1,
+                        linked_to: [{ loginid: 'CR123', platform: 'dtrade' }],
+                    },
+                    CR123: {
+                        account_category: 'trading',
+                        currency: 'USD',
+                        is_virtual: 0,
+                        is_disabled: 1,
+                    },
+                },
+                loginid: 'CR123',
+            },
+        });
+
+        const toggleDialog = jest.fn();
+        render(<AccountInfoWallets is_dialog_on={false} toggleDialog={toggleDialog} />, { wrapper: wrapper(mock) });
+
+        const div_element = screen.getByTestId('dt_acc_info');
+        expect(div_element).toHaveClass('acc-info--is-disabled');
+    });
+
+    it('should not have "acc-info--show" class when "is_dialog_on" property is "false"', () => {
+        const mock = mockStore(default_mock);
+
+        const toggleDialog = jest.fn();
+        render(<AccountInfoWallets is_dialog_on={false} toggleDialog={toggleDialog} />, { wrapper: wrapper(mock) });
+
+        const div_element = screen.getByTestId('dt_acc_info');
+        expect(div_element).not.toHaveClass('acc-info--show');
+    });
+
+    it('can not "toggleDialog" when "is_disabled" property is "true"', () => {
+        const mock = mockStore({
+            client: {
+                accounts: {
+                    CRW909900: {
+                        account_category: 'wallet',
+                        currency: 'USD',
+                        is_virtual: 0,
+                        is_disabled: 1,
+                        linked_to: [{ loginid: 'CR123', platform: 'dtrade' }],
+                    },
+                    CR123: {
+                        account_category: 'trading',
+                        currency: 'USD',
+                        is_virtual: 0,
+                        is_disabled: 1,
+                    },
+                },
+                loginid: 'CR123',
+            },
+        });
+
+        const toggleDialog = jest.fn();
+        render(<AccountInfoWallets is_dialog_on={false} toggleDialog={toggleDialog} />, { wrapper: wrapper(mock) });
+
+        const div_element = screen.getByTestId('dt_acc_info');
+        userEvent.click(div_element);
+        expect(toggleDialog).toHaveBeenCalledTimes(0);
+    });
+
+    it('should render "Options" icon and "WalletIcon"', () => {
+        const mock = mockStore(default_mock);
+
+        const toggleDialog = jest.fn();
+        render(<AccountInfoWallets is_dialog_on={false} toggleDialog={toggleDialog} />, { wrapper: wrapper(mock) });
+
+        expect(screen.getByTestId('dt_ic_wallet_options')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_wallet_icon')).toBeInTheDocument();
+    });
+
+    it('should render "DEMO" label', () => {
+        const mock = mockStore({
+            client: {
+                accounts: {
+                    CRW909900: {
+                        account_category: 'wallet',
+                        currency: 'USD',
+                        is_virtual: 1,
+                        is_disabled: 0,
+                        linked_to: [{ loginid: 'CR123', platform: 'dtrade' }],
+                    },
+                    CR123: {
+                        account_category: 'trading',
+                        currency: 'USD',
+                        is_virtual: 1,
+                        is_disabled: 0,
+                    },
+                },
+                loginid: 'CR123',
+            },
+        });
+
+        const toggleDialog = jest.fn();
+        render(<AccountInfoWallets is_dialog_on={false} toggleDialog={toggleDialog} />, { wrapper: wrapper(mock) });
+
+        expect(screen.getByText(/demo/i)).toBeInTheDocument();
+    });
+
+    it('should NOT render "SVG" label', () => {
+        const mock = mockStore(default_mock);
+
+        const toggleDialog = jest.fn();
+        render(<AccountInfoWallets is_dialog_on={false} toggleDialog={toggleDialog} />, { wrapper: wrapper(mock) });
+
+        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: {
+                accounts: {
+                    CRW909900: {
+                        account_category: 'wallet',
+                        currency: 'USD',
+                        is_virtual: 0,
+                        is_disabled: 1,
+                        linked_to: [{ loginid: 'CR123', platform: 'dtrade' }],
+                    },
+                    CR123: {
+                        account_category: 'trading',
+                        currency: 'USD',
+                        is_virtual: 0,
+                        is_disabled: 1,
+                    },
+                },
+                loginid: 'CR123',
+            },
+        });
+
+        const toggleDialog = jest.fn();
+        render(<AccountInfoWallets is_dialog_on={false} toggleDialog={toggleDialog} />, { wrapper: wrapper(mock) });
+
+        const icon = screen.getByTestId('dt_lock_icon');
+        expect(icon).toBeInTheDocument();
+    });
+
+    it('should render "IcChevronDownBold" icon when "is_disabled" property is "false"', () => {
+        const mock = mockStore(default_mock);
+
+        const toggleDialog = jest.fn();
+        render(<AccountInfoWallets is_dialog_on={false} toggleDialog={toggleDialog} />, { wrapper: wrapper(mock) });
+
+        const icon = screen.getByTestId('dt_select_arrow');
+        expect(icon).toBeInTheDocument();
+    });
+
+    it('should render balance section when currency exists', () => {
+        const mock = mockStore(default_mock);
+
+        const toggleDialog = jest.fn();
+        render(<AccountInfoWallets is_dialog_on={false} toggleDialog={toggleDialog} />, { wrapper: wrapper(mock) });
+
+        const balance_wrapper = screen.queryByTestId('dt_balance');
+        expect(balance_wrapper).toBeInTheDocument();
+    });
+
+    it('should have "1.234.56 USD" text', () => {
+        const mock = mockStore(default_mock);
+
+        const toggleDialog = jest.fn();
+        render(<AccountInfoWallets is_dialog_on={false} toggleDialog={toggleDialog} />, { wrapper: wrapper(mock) });
+
+        const text = screen.getByText('1,234.56 USD');
+        expect(text).toBeInTheDocument();
+        expect(screen.queryByText(/no currency assigned/i)).not.toBeInTheDocument();
+    });
+});

packages/core/src/App/Components/Layout/Header/__tests__/account-info-wrapper.spec.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AccountInfoWrapper from '../account-info-wrapper';
+
+jest.mock('@deriv/components', () => ({
+    ...jest.requireActual('@deriv/components'),
+    Popover: jest.fn(({ children }) => <div>Popover: {children}</div>),
+}));
+
+describe('AccountInfoWrapper component', () => {
+    it('should render children when is_disabled and disabled_message are undefined', () => {
+        render(<AccountInfoWrapper>children</AccountInfoWrapper>);
+        expect(screen.queryByText(/children/i)).toBeInTheDocument();
+        expect(screen.queryByText(/Popover: children/i)).not.toBeInTheDocument();
+    });
+
+    it('should render children when is_disabled = true and disabled_message is undefined', () => {
+        render(<AccountInfoWrapper is_disabled={true}>children</AccountInfoWrapper>);
+        expect(screen.queryByText(/children/i)).toBeInTheDocument();
+        expect(screen.queryByText(/Popover: children/i)).not.toBeInTheDocument();
+    });
+
+    it('should render children when is_disabled = false and disabled_message is test', () => {
+        render(
+            <AccountInfoWrapper is_disabled={false} disabled_message='test'>
+                children
+            </AccountInfoWrapper>
+        );
+        expect(screen.queryByText(/children/i)).toBeInTheDocument();
+        expect(screen.queryByText(/Popover: children/i)).not.toBeInTheDocument();
+    });
+
+    it('should render children inside of Popover when is_disabled = true and disabled_message is test', () => {
+        render(
+            <AccountInfoWrapper is_disabled={true} disabled_message='test'>
+                children
+            </AccountInfoWrapper>
+        );
+        expect(screen.queryByText(/Popover: children/i)).toBeInTheDocument();
+    });
+});

packages/core/src/App/Components/Layout/Header/__tests__/display-account-type.spec.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import DisplayAccountType from '../display-account-type';
+
+describe('DisplayAccountType component', () => {
+    it('should render "Multipliers"', () => {
+        render(<DisplayAccountType account_type='financial' country_standpoint={{}} is_eu={false} />);
+        expect(screen.getByText(/multipliers/i)).toBeInTheDocument();
+    });
+
+    it('should render "Gaming" if is_united_kingdom = true', () => {
+        render(
+            <DisplayAccountType account_type='gaming' country_standpoint={{ is_united_kingdom: true }} is_eu={false} />
+        );
+        expect(screen.getByText(/gaming/i)).toBeInTheDocument();
+    });
+
+    it('should render "Options" for Belgium', () => {
+        render(<DisplayAccountType account_type='gaming' country_standpoint={{ is_belgium: true }} is_eu={true} />);
+        expect(screen.getByText(/options/i)).toBeInTheDocument();
+    });
+
+    it('should render "Options" when is_isle_of_man = false', () => {
+        render(
+            <DisplayAccountType account_type='gaming' country_standpoint={{ is_isle_of_man: false }} is_eu={true} />
+        );
+        expect(screen.getByText(/options/i)).toBeInTheDocument();
+    });
+
+    it('should render "Derived" when is_isle_of_man = false', () => {
+        render(
+            <DisplayAccountType account_type='gaming' country_standpoint={{ is_isle_of_man: false }} is_eu={true} />
+        );
+        expect(screen.getByText(/options/i)).toBeInTheDocument();
+    });
+});