Sergei / wall - 1140 / Limited functionality in Trader's Hub for "in_progress" & "migrated"

packages/appstore/src/components/cfds-listing/index.tsx

@@ -10,6 +10,7 @@ import PlatformLoader from 'Components/pre-loader/platform-loader';
 import GetMoreAccounts from 'Components/get-more-accounts';
 import { Actions } from 'Components/containers/trading-app-card-actions';
 import { getHasDivider } from 'Constants/utils';
+import { useWalletMigration } from '@deriv/hooks';
 import { useStores } from 'Stores/index';
 import { AvailableAccount, TDetailsOfEachMT5Loginid } from 'Types';
 import './cfds-listing.scss';
@@ -53,9 +54,15 @@ const CFDsListing = () => {
         CFDs_restricted_countries,
         financial_restricted_countries,
     } = traders_hub;
+    const { is_in_progress } = useWalletMigration();
 
     const { toggleCompareAccountsModal, setAccountType } = cfd;
-    const { is_landing_company_loaded, real_account_creation_unlock_date, account_status } = client;
+    const {
+        is_landing_company_loaded,
+        real_account_creation_unlock_date,
+        account_status,
+        setWalletsMigrationInProgressPopup,
+    } = client;
     const { setAppstorePlatform } = common;
     const { openDerivRealAccountNeededModal, setShouldShowCooldownModal } = ui;
     const has_no_real_account = !has_any_real_account;
@@ -133,6 +140,11 @@ const CFDsListing = () => {
         return null;
     };
 
+    const compareAccountsModalHandle = () => {
+        if (is_in_progress) setWalletsMigrationInProgressPopup(true);
+        else toggleCompareAccountsModal();
+    };
+
     return (
         <ListingContainer
             title={
@@ -141,7 +153,7 @@ const CFDsListing = () => {
                         <Text size='sm' line_height='m' weight='bold' color='prominent'>
                             {localize('CFDs')}
                         </Text>
-                        <div className='cfd-accounts__compare-table-title' onClick={toggleCompareAccountsModal}>
+                        <div className='cfd-accounts__compare-table-title' onClick={compareAccountsModalHandle}>
                             <Text key={0} color='red' size='xxs' weight='bold' styles={{ marginLeft: '1rem' }}>
                                 <Localize i18n_default_text={accounts_sub_text} />
                             </Text>
@@ -161,7 +173,7 @@ const CFDsListing = () => {
             }
         >
             {isMobile() && (
-                <div className='cfd-accounts__compare-table-title' onClick={toggleCompareAccountsModal}>
+                <div className='cfd-accounts__compare-table-title' onClick={compareAccountsModalHandle}>
                     <Text size='xs' color='red' weight='bold' line_height='s'>
                         <Localize i18n_default_text={accounts_sub_text} />
                     </Text>
@@ -182,7 +194,7 @@ const CFDsListing = () => {
                         const has_mt5_account_status =
                             existing_account.status || is_idv_revoked
                                 ? getMT5AccountAuthStatus(
-                                      existing_account.status,
+                                      existing_account.status ?? '',
                                       existing_account?.short_code_and_region?.toLowerCase()
                                   )
                                 : null;
@@ -240,10 +252,15 @@ const CFDsListing = () => {
                     })}
                     {can_get_more_cfd_mt5_accounts && (
                         <GetMoreAccounts
-                            onClick={toggleAccountTypeModalVisibility}
+                            onClick={
+                                is_in_progress
+                                    ? () => setWalletsMigrationInProgressPopup(true)
+                                    : toggleAccountTypeModalVisibility
+                            }
                             icon='IcAppstoreGetMoreAccounts'
                             title={localize('Get more')}
                             description={localize('Get more Deriv MT5 account with different type and jurisdiction.')}
+                            is_disabled={is_in_progress}
                         />
                     )}
                 </React.Fragment>

packages/appstore/src/components/containers/trading-app-card-actions.tsx

@@ -2,7 +2,6 @@ import { Button } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import TradeButton from 'Components/trade-button/trade-button';
 import React from 'react';
-import { observer } from 'mobx-react-lite';
 import MultiActionButtonGroup from 'Components/multi-action-button-group';
 
 export type Actions = {
@@ -16,6 +15,7 @@ export type Actions = {
     is_buttons_disabled?: boolean;
     is_account_being_created?: boolean;
     is_real?: boolean;
+    as_disabled?: boolean;
 };
 
 const TradingAppCardActions = ({
@@ -27,11 +27,12 @@ const TradingAppCardActions = ({
     is_account_being_created,
     is_buttons_disabled,
     is_real,
+    as_disabled,
 }: Actions) => {
     switch (action_type) {
         case 'get':
             return (
-                <Button disabled={is_account_being_created} primary_light onClick={() => onAction?.()}>
+                <Button disabled={is_account_being_created} primary_light onClick={onAction} as_disabled={as_disabled}>
                     {localize('Get')}
                 </Button>
             );
@@ -46,6 +47,7 @@ const TradingAppCardActions = ({
                     onAction={onAction}
                     is_buttons_disabled={is_buttons_disabled}
                     is_real={is_real}
+                    as_disabled_deposit_button={as_disabled}
                 />
             );
         case 'none':
@@ -54,4 +56,4 @@ const TradingAppCardActions = ({
     }
 };
 
-export default observer(TradingAppCardActions);
+export default TradingAppCardActions;

packages/appstore/src/components/containers/trading-app-card.tsx

@@ -15,6 +15,7 @@ import { useStores } from 'Stores/index';
 import { observer } from 'mobx-react-lite';
 import { localize } from '@deriv/translations';
 import { CFD_PLATFORMS, ContentFlag, getStaticUrl, getUrlSmartTrader, getUrlBinaryBot } from '@deriv/shared';
+import { useWalletMigration } from '@deriv/hooks';
 import './trading-app-card.scss';
 
 type TWalletsProps = {
@@ -42,13 +43,16 @@ const TradingAppCard = ({
     is_wallet_demo,
 }: Actions & BrandConfig & AvailableAccount & TDetailsOfEachMT5Loginid & TWalletsProps) => {
     const {
+        client,
         common,
         traders_hub,
         modules: { cfd },
     } = useStores();
     const { is_eu_user, is_demo_low_risk, content_flag, is_real } = traders_hub;
     const { current_language } = common;
     const { is_account_being_created } = cfd;
+    const { setWalletsMigrationInProgressPopup } = client;
+    const { is_in_progress } = useWalletMigration();
 
     const low_risk_cr_non_eu = content_flag === ContentFlag.LOW_RISK_CR_NON_EU;
 
@@ -96,6 +100,11 @@ const TradingAppCard = ({
         else;
     };
 
+    const onButtonAction = () => {
+        if (is_in_progress) setWalletsMigrationInProgressPopup(true);
+        else onAction?.();
+    };
+
     return (
         <div className='trading-app-card' key={`trading-app-card__${current_language}`}>
             <div
@@ -165,12 +174,13 @@ const TradingAppCard = ({
                     <TradingAppCardActions
                         action_type={action_type}
                         link_to={link_to}
-                        onAction={onAction}
+                        onAction={onButtonAction}
                         is_external={is_external}
                         new_tab={new_tab}
                         is_buttons_disabled={!!mt5_acc_auth_status}
                         is_account_being_created={!!is_account_being_created}
                         is_real={is_real}
+                        as_disabled={is_in_progress}
                     />
                 </div>
             </div>

packages/appstore/src/components/currency-switcher-card/demo/__tests__/demo-account-card.spec.tsx

@@ -2,6 +2,14 @@ import React from 'react';
 import DemoAccountCard from '../demo-account-card';
 import { render, screen } from '@testing-library/react';
 import { StoreProvider, mockStore } from '@deriv/stores';
+import { APIProvider, useFetch } from '@deriv/api';
+
+jest.mock('@deriv/api', () => ({
+    ...jest.requireActual('@deriv/api'),
+    useFetch: jest.fn(),
+}));
+
+const mockUseFetch = useFetch as jest.MockedFunction<typeof useFetch<'wallet_migration'>>;
 
 describe('DemoAccountCard', () => {
     it('should render correctly', () => {
@@ -29,8 +37,13 @@ describe('DemoAccountCard', () => {
             },
         });
 
+        // @ts-expect-error need to come up with a way to mock the return type of useFetch
+        mockUseFetch.mockReturnValue({ data: { wallet_migration: { state: 'eligible' } } });
+
         const wrapper = ({ children }: { children: JSX.Element }) => (
-            <StoreProvider store={mock}>{children}</StoreProvider>
+            <APIProvider>
+                <StoreProvider store={mock}>{children}</StoreProvider>
+            </APIProvider>
         );
 
         const { container } = render(<DemoAccountCard />, {
@@ -65,8 +78,13 @@ describe('DemoAccountCard', () => {
             },
         });
 
+        // @ts-expect-error need to come up with a way to mock the return type of useFetch
+        mockUseFetch.mockReturnValue({ data: { wallet_migration: { state: 'eligible' } } });
+
         const wrapper = ({ children }: { children: JSX.Element }) => (
-            <StoreProvider store={mock}>{children}</StoreProvider>
+            <APIProvider>
+                <StoreProvider store={mock}>{children}</StoreProvider>
+            </APIProvider>
         );
 
         const { container } = render(<DemoAccountCard />, {
@@ -103,8 +121,13 @@ describe('DemoAccountCard', () => {
             },
         });
 
+        // @ts-expect-error need to come up with a way to mock the return type of useFetch
+        mockUseFetch.mockReturnValue({ data: { wallet_migration: { state: 'eligible' } } });
+
         const wrapper = ({ children }: { children: JSX.Element }) => (
-            <StoreProvider store={mock}>{children}</StoreProvider>
+            <APIProvider>
+                <StoreProvider store={mock}>{children}</StoreProvider>
+            </APIProvider>
         );
 
         const { container } = render(<DemoAccountCard />, {

packages/appstore/src/components/currency-switcher-card/demo/demo-account-card.tsx

@@ -4,14 +4,15 @@ import CurrencySwitcherContainer from 'Components/containers/currency-switcher-c
 import BalanceText from 'Components/elements/text/balance-text';
 import './demo-account-card.scss';
 import { localize } from '@deriv/translations';
-import { usePlatformAccounts } from '@deriv/hooks';
+import { usePlatformAccounts, useWalletMigration } from '@deriv/hooks';
 import { useStore, observer } from '@deriv/stores';
 
 const DemoAccountCard = observer(() => {
     const { client, traders_hub, common } = useStore();
-    const { accounts, loginid, resetVirtualBalance, default_currency } = client;
+    const { accounts, loginid, resetVirtualBalance, default_currency, setWalletsMigrationInProgressPopup } = client;
     const { selected_account_type } = traders_hub;
     const { demo: platform_demo_account } = usePlatformAccounts();
+    const { is_in_progress } = useWalletMigration();
 
     const canResetBalance = () => {
         return loginid && (accounts[loginid]?.balance || 0) !== 10000;
@@ -33,8 +34,9 @@ const DemoAccountCard = observer(() => {
                     <Button
                         key={`currency-switcher__button--key-${current_language}`}
                         secondary
-                        onClick={resetVirtualBalance}
+                        onClick={is_in_progress ? () => setWalletsMigrationInProgressPopup(true) : resetVirtualBalance}
                         className='currency-switcher__button'
+                        as_disabled={is_in_progress}
                     >
                         {localize('Reset Balance')}
                     </Button>

packages/appstore/src/components/currency-switcher-card/real/__tests__/real-account-card.spec.tsx

@@ -4,6 +4,14 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { StoreProvider, mockStore } from '@deriv/stores';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
+import { APIProvider, useFetch } from '@deriv/api';
+
+jest.mock('@deriv/api', () => ({
+    ...jest.requireActual('@deriv/api'),
+    useFetch: jest.fn(),
+}));
+
+const mockUseFetch = useFetch as jest.MockedFunction<typeof useFetch<'wallet_migration'>>;
 
 describe('RealAccountCard', () => {
     it('should render the component', () => {
@@ -18,8 +26,14 @@ describe('RealAccountCard', () => {
                 },
             },
         });
+
+        // @ts-expect-error need to come up with a way to mock the return type of useFetch
+        mockUseFetch.mockReturnValue({ data: { wallet_migration: { state: 'eligible' } } });
+
         const wrapper = ({ children }: { children: JSX.Element }) => (
-            <StoreProvider store={mock}>{children}</StoreProvider>
+            <APIProvider>
+                <StoreProvider store={mock}>{children}</StoreProvider>
+            </APIProvider>
         );
 
         const { container } = render(<RealAccountCard />, { wrapper });
@@ -47,8 +61,14 @@ describe('RealAccountCard', () => {
                 },
             },
         });
+
+        // @ts-expect-error need to come up with a way to mock the return type of useFetch
+        mockUseFetch.mockReturnValue({ data: { wallet_migration: { state: 'eligible' } } });
+
         const wrapper = ({ children }: { children: JSX.Element }) => (
-            <StoreProvider store={mock}>{children}</StoreProvider>
+            <APIProvider>
+                <StoreProvider store={mock}>{children}</StoreProvider>
+            </APIProvider>
         );
 
         const { container } = render(<RealAccountCard />, { wrapper });
@@ -78,8 +98,14 @@ describe('RealAccountCard', () => {
                 },
             },
         });
+
+        // @ts-expect-error need to come up with a way to mock the return type of useFetch
+        mockUseFetch.mockReturnValue({ data: { wallet_migration: { state: 'eligible' } } });
+
         const wrapper = ({ children }: { children: JSX.Element }) => (
-            <StoreProvider store={mock}>{children}</StoreProvider>
+            <APIProvider>
+                <StoreProvider store={mock}>{children}</StoreProvider>
+            </APIProvider>
         );
 
         const { container } = render(<RealAccountCard />, { wrapper });
@@ -88,7 +114,7 @@ describe('RealAccountCard', () => {
         expect(screen.getByText('EUR')).toBeInTheDocument();
     });
 
-    it('should redirect the user to cashier_deposit page after clicking deposit', () => {
+    it('should redirect the user to cashier_deposit page after clicking deposit', async () => {
         const history = createMemoryHistory();
         const mock = mockStore({
             client: {
@@ -110,10 +136,16 @@ describe('RealAccountCard', () => {
                 },
             },
         });
+
+        // @ts-expect-error need to come up with a way to mock the return type of useFetch
+        mockUseFetch.mockReturnValue({ data: { wallet_migration: { state: 'eligible' } } });
+
         const wrapper = ({ children }: { children: JSX.Element }) => (
-            <Router history={history}>
-                <StoreProvider store={mock}>{children}</StoreProvider>
-            </Router>
+            <APIProvider>
+                <Router history={history}>
+                    <StoreProvider store={mock}>{children}</StoreProvider>
+                </Router>
+            </APIProvider>
         );
 
         const { container } = render(<RealAccountCard />, { wrapper });
@@ -144,8 +176,14 @@ describe('RealAccountCard', () => {
                 },
             },
         });
+
+        // @ts-expect-error need to come up with a way to mock the return type of useFetch
+        mockUseFetch.mockReturnValue({ data: { wallet_migration: { state: 'eligible' } } });
+
         const wrapper = ({ children }: { children: JSX.Element }) => (
-            <StoreProvider store={mock}>{children}</StoreProvider>
+            <APIProvider>
+                <StoreProvider store={mock}>{children}</StoreProvider>
+            </APIProvider>
         );
 
         const { container } = render(<RealAccountCard />, { wrapper });