Fixes for svg migration

packages/account/src/Configs/get-status-badge-config.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Text } from '@deriv/components';
-import { MT5AccountStatus } from '@deriv/shared';
+import { MT5_ACCOUNT_STATUS } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
 
 const getStatusBadgeConfig = (
-    account_status: string | undefined | null,
+    account_status: typeof MT5_ACCOUNT_STATUS[keyof typeof MT5_ACCOUNT_STATUS],
     openFailedVerificationModal?: (selected_account_type: string) => void,
     selected_account_type?: string
 ) => {
     const BadgeTextComponent = <Text key={0} weight='bold' size='xxxs' color='warning' />;
 
     switch (account_status) {
-        case 'pending':
+        case MT5_ACCOUNT_STATUS.PENDING:
             return {
                 text: (
                     <Localize
@@ -22,7 +22,7 @@ const getStatusBadgeConfig = (
                 ),
                 icon: 'IcAlertWarning',
             };
-        case 'failed':
+        case MT5_ACCOUNT_STATUS.FAILED:
             return {
                 text: (
                     <Localize
@@ -41,7 +41,7 @@ const getStatusBadgeConfig = (
                 ),
                 icon: 'IcRedWarning',
             };
-        case 'need_verification':
+        case MT5_ACCOUNT_STATUS.NEED_VERIFICATION:
             return {
                 text: (
                     <Localize
@@ -54,12 +54,12 @@ const getStatusBadgeConfig = (
                 ),
                 icon: 'IcAlertInfo',
             };
-        case MT5AccountStatus.MIGRATED_WITH_POSITION:
+        case MT5_ACCOUNT_STATUS.MIGRATED_WITH_POSITION:
             return {
                 text: <Localize i18n_default_text='<0>No new positions</0>' components={[BadgeTextComponent]} />,
                 icon: 'IcAlertWarning',
             };
-        case MT5AccountStatus.MIGRATED_WITHOUT_POSITION:
+        case MT5_ACCOUNT_STATUS.MIGRATED_WITHOUT_POSITION:
             return {
                 text: <Localize i18n_default_text='<0>Account closed</0>' components={[BadgeTextComponent]} />,
                 icon: 'IcAlertWarning',

packages/api/src/hooks/useMT5AccountsList.ts

@@ -52,7 +52,7 @@ const useMT5AccountsList = () => {
 
     return {
         /** The list of created MT5 accounts */
-        data: modified_mt5_accounts ?? [],
+        data: modified_mt5_accounts,
         ...mt5_accounts_rest,
     };
 };

packages/appstore/package.json

@@ -26,7 +26,6 @@
     "dependencies": {
         "@deriv/api": "^1.0.0",
         "@deriv/account": "^1.0.0",
-        "@deriv/api": "^1.0.0",
         "@deriv/api-types": "^1.0.118",
         "@deriv/cashier": "^1.0.0",
         "@deriv/cfd": "^1.0.0",

packages/appstore/src/components/app.tsx

@@ -4,7 +4,6 @@ import CFDStoreProvider from '@deriv/cfd/src/cfd-providers';
 import { StoreProvider } from '@deriv/stores';
 import AppContent from './app-content';
 import './app.scss';
-import { APIProvider } from '@deriv/api';
 
 type TProps = {
     passthrough: {
@@ -16,9 +15,7 @@ const App: React.FC<TProps> = ({ passthrough: { root_store } }) => (
     <CashierStoreProvider store={root_store}>
         <CFDStoreProvider store={root_store}>
             <StoreProvider store={root_store}>
-                <APIProvider>
-                    <AppContent />
-                </APIProvider>
+                <AppContent />
             </StoreProvider>
         </CFDStoreProvider>
     </CashierStoreProvider>

packages/appstore/src/components/appstore-banner/__test__/svg-migration-banner.spec.tsx

@@ -16,15 +16,8 @@ const mockUseMT5SVGEligibleToMigrate = useMT5SVGEligibleToMigrate as jest.Mocked
     typeof useMT5SVGEligibleToMigrate
 >;
 
-type TUseMT5SVGEligibleToMigrateReturnValue = {
-    eligible_svg_to_bvi_derived_accounts: boolean;
-    eligible_svg_to_bvi_financial_accounts: boolean;
-    eligible_svg_to_vanuatu_derived_accounts: boolean;
-    eligible_svg_to_vanuatu_financial_accounts: boolean;
-};
-
 describe('SVGMigrationBanner', () => {
-    let response: TUseMT5SVGEligibleToMigrateReturnValue;
+    let response: ReturnType<typeof useMT5SVGEligibleToMigrate>;
 
     const renderComponent = () => {
         const wrapper = ({ children }: { children: JSX.Element }) => (
@@ -38,10 +31,17 @@ describe('SVGMigrationBanner', () => {
 
     beforeEach(() => {
         response = {
+            getEligibleAccountToMigrate: jest.fn(),
+            svg_accounts_to_migrate: [],
+            no_of_svg_accounts_to_migrate: 0,
+            has_svg_accounts_to_migrate: false,
+            eligible_account_to_migrate_label: false,
             eligible_svg_to_bvi_derived_accounts: false,
             eligible_svg_to_bvi_financial_accounts: false,
             eligible_svg_to_vanuatu_derived_accounts: false,
             eligible_svg_to_vanuatu_financial_accounts: false,
+            has_derived_and_financial_mt5: true,
+            has_derived_mt5_to_migrate: true,
         };
     });
 

packages/appstore/src/components/appstore-banner/appstore-banner-image.tsx

@@ -5,7 +5,7 @@ import SVGMigrateMobileImage from 'Assets/svgs/banner/svg-migrate-mobile.svg';
 export type TBannerImageProps<T> = {
     image: T;
     class_name?: string;
-    width?: number;
+    width?: React.CSSProperties['width'];
 };
 
 type TAppstoreBannerImageListProps = keyof typeof AppstoreBannerImageList;

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

@@ -4,15 +4,9 @@
         margin-bottom: 2.4rem;
         overflow: hidden;
         background-color: var(--general-main-1);
-
         border: 1px solid var(--appstore-banner-border-color);
         border-radius: $BORDER_RADIUS * 4;
 
-        @include desktop {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-        }
-
         @include mobile {
             padding: 1.4rem 1.6rem;
             border-radius: $BORDER_RADIUS * 2;
@@ -28,8 +22,9 @@
         border-bottom-right-radius: $BORDER_RADIUS * 4;
 
         @include mobile {
-            border-top-right-radius: $BORDER_RADIUS * 2;
-            border-bottom-right-radius: $BORDER_RADIUS * 2;
+            right: -0.1rem;
+            bottom: -0.1rem;
+            border-radius: $BORDER_RADIUS * 2;
         }
     }
 
@@ -49,12 +44,10 @@
             flex-direction: column;
             justify-content: center;
             align-items: baseline;
-
-            @include desktop {
-                padding-left: 4.8rem;
-            }
+            padding-left: 4.8rem;
 
             @include mobile {
+                padding-left: 0;
                 &__text {
                     width: 90%;
                 }
@@ -69,20 +62,5 @@
                 padding-inline: 1.6rem;
             }
         }
-
-        &-overlay {
-            position: absolute;
-            z-index: 1;
-            width: 62.2rem;
-            height: 18rem;
-            right: 0;
-            background: var(--mt5-migration-banner-desktop);
-            @include mobile {
-                width: 16.1rem;
-                height: 10.6rem;
-                bottom: 0;
-                background: var(--mt5-migration-banner-mobile);
-            }
-        }
     }
 }

packages/appstore/src/components/appstore-banner/svg-migration-banner.tsx

@@ -11,20 +11,13 @@ const SVGMigrationBanner = observer(() => {
         ui,
         modules: { cfd },
     } = useStore();
-    const {
-        eligible_svg_to_bvi_derived_accounts,
-        eligible_svg_to_bvi_financial_accounts,
-        eligible_svg_to_vanuatu_derived_accounts,
-        eligible_svg_to_vanuatu_financial_accounts,
-    } = useMT5SVGEligibleToMigrate();
     const { is_mobile, toggleMT5MigrationModal } = ui;
     const { setMT5MigrationError } = cfd;
-    const has_derived_mt5_to_migrate = eligible_svg_to_bvi_derived_accounts || eligible_svg_to_vanuatu_derived_accounts;
-    const has_financial_mt5_to_migrate =
-        eligible_svg_to_bvi_financial_accounts || eligible_svg_to_vanuatu_financial_accounts;
-    const has_derived_and_financial_mt5 = has_derived_mt5_to_migrate && has_financial_mt5_to_migrate;
+
+    const { has_derived_mt5_to_migrate, has_derived_and_financial_mt5 } = useMT5SVGEligibleToMigrate();
+
     const image = is_mobile ? 'svg_migrate_mobile' : 'svg_migrate_desktop';
-    const size: string = is_mobile ? 'xs' : 'm';
+    const size = is_mobile ? 'xs' : 'm';
 
     const openMT5MigrationModal = () => {
         setMT5MigrationError('');
@@ -78,7 +71,6 @@ const SVGMigrationBanner = observer(() => {
                     <Localize i18n_default_text='Upgrade now' />
                 </Button>
             </div>
-            <div className='appstore-banner__svg-migrate-banner-overlay' />
             <AppstoreBannerImage image={image} class_name='appstore-banner__image' />
         </div>
     );

packages/appstore/src/components/cfds-listing/cfds-listing.scss

@@ -1304,18 +1304,18 @@
 .dc-modal__container_cfd-success-dialog {
     .success {
         &-change__icon-area {
-            width: 128px;
+            width: 12.8rem;
             margin: 0 auto;
             position: relative;
 
             &--large .bottom-right-overlay {
                 position: absolute;
-                left: 76px;
-                top: 76px;
+                left: 7.6rem;
+                top: 7.6rem;
 
                 @include mobile {
-                    left: 78px;
-                    top: 58px;
+                    left: 7.8rem;
+                    top: 5.8rem;
                 }
             }
             &--xlarge .bottom-right-overlay {

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { APIProvider } from '@deriv/api';
 import { StoreProvider, mockStore } from '@deriv/stores';
 import TradingAppCard from '../trading-app-card';
 
@@ -69,9 +68,7 @@ describe('<TradingAppCard/>', () => {
     const renderComponent = ({ props = mock_props }) => {
         render(
             <StoreProvider store={store_config}>
-                <APIProvider>
-                    <TradingAppCard {...props} />
-                </APIProvider>
+                <TradingAppCard {...props} />
             </StoreProvider>
         );
     };
@@ -105,7 +102,7 @@ describe('<TradingAppCard/>', () => {
         expect(modal_content_bvi).toBeInTheDocument();
     });
 
-    it('should close OpenPositionsSVGModal when user clicks on the OK', () => {
+    it('should close OpenPositionsSVGModal when user clicks on the OK', async () => {
         renderComponent({ props: mock_props });
 
         const status_badge = screen.getByText('No new positions');
@@ -116,7 +113,9 @@ describe('<TradingAppCard/>', () => {
         );
         const okButton = screen.getByRole('button', { name: /OK/i });
         userEvent.click(okButton);
-        expect(modal_content_bvi).not.toBeInTheDocument();
+        await waitFor(() => {
+            expect(modal_content_bvi).not.toBeInTheDocument();
+        });
     });
 
     it('should not render status badge if mt5_acc_auth_status value is null', () => {

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

@@ -20,7 +20,7 @@ import {
     getStaticUrl,
     getUrlSmartTrader,
     getUrlBinaryBot,
-    MT5AccountStatus,
+    MT5_ACCOUNT_STATUS,
 } from '@deriv/shared';
 import OpenPositionsSVGModal from '../modals/open-positions-svg-modal';
 import './trading-app-card.scss';
@@ -81,8 +81,8 @@ const TradingAppCard = ({
 
     const handleStatusBadgeClick = (mt5_acc_auth_status: string) => {
         switch (mt5_acc_auth_status) {
-            case MT5AccountStatus.MIGRATED_WITH_POSITION:
-            case MT5AccountStatus.MIGRATED_WITHOUT_POSITION:
+            case MT5_ACCOUNT_STATUS.MIGRATED_WITH_POSITION:
+            case MT5_ACCOUNT_STATUS.MIGRATED_WITHOUT_POSITION:
                 return setIsOpenPositionSvgModalOpen(!is_open_position_svg_modal_open);
             default:
                 return null;
@@ -120,8 +120,8 @@ const TradingAppCard = ({
     };
 
     const migration_status =
-        mt5_acc_auth_status === MT5AccountStatus.MIGRATED_WITH_POSITION ||
-        mt5_acc_auth_status === MT5AccountStatus.MIGRATED_WITHOUT_POSITION;
+        mt5_acc_auth_status === MT5_ACCOUNT_STATUS.MIGRATED_WITH_POSITION ||
+        mt5_acc_auth_status === MT5_ACCOUNT_STATUS.MIGRATED_WITHOUT_POSITION;
     const is_disabled = !!(mt5_acc_auth_status && !migration_status);
 
     return (
@@ -183,15 +183,13 @@ const TradingAppCard = ({
                             onClick={() => handleStatusBadgeClick(mt5_acc_auth_status)}
                         />
                     )}
-                    {is_open_position_svg_modal_open && (
-                        <OpenPositionsSVGModal
-                            loginId={login ?? ''}
-                            market_type={market_type}
-                            status={mt5_acc_auth_status ?? ''}
-                            is_modal_open={is_open_position_svg_modal_open}
-                            setModalOpen={setIsOpenPositionSvgModalOpen}
-                        />
-                    )}
+                    <OpenPositionsSVGModal
+                        loginId={login ?? ''}
+                        market_type={market_type}
+                        status={mt5_acc_auth_status ?? ''}
+                        is_modal_open={is_open_position_svg_modal_open}
+                        setModalOpen={setIsOpenPositionSvgModalOpen}
+                    />
                 </div>
                 <div className='trading-app-card__actions'>
                     <TradingAppCardActions