diff --git a/packages/appstore/src/components/migration-banner/__test__/migration-banner.spec.tsx b/packages/cfd/src/Containers/migration-banner/__test__/migration-banner.spec.tsx
similarity index 86%
rename from packages/appstore/src/components/migration-banner/__test__/migration-banner.spec.tsx
rename to packages/cfd/src/Containers/migration-banner/__test__/migration-banner.spec.tsx
index 81c35e982d3c..e7e369288b78 100644
--- a/packages/appstore/src/components/migration-banner/__test__/migration-banner.spec.tsx
+++ b/packages/cfd/src/Containers/migration-banner/__test__/migration-banner.spec.tsx
@@ -3,6 +3,7 @@ import { screen, render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Analytics } from '@deriv/analytics';
import { StoreProvider, mockStore } from '@deriv/stores';
+import { CFDStoreProvider } from '../../../Stores/Modules/CFD/Helpers/useCfdStores';
import { useMT5SVGEligibleToMigrate } from '@deriv/hooks';
import { APIProvider } from '@deriv/api';
import MigrationBanner from '../migration-banner';
@@ -17,6 +18,7 @@ const mock_store = mockStore({});
const mockUseMT5SVGEligibleToMigrate = useMT5SVGEligibleToMigrate as jest.MockedFunction<
typeof useMT5SVGEligibleToMigrate
>;
+jest.mock('../migration-banner-image', () => jest.fn(() =>
MigrationBannerImage
));
describe('MigrationBanner', () => {
let response: ReturnType
;
@@ -24,7 +26,9 @@ describe('MigrationBanner', () => {
const renderComponent = () => {
const wrapper = ({ children }: { children: JSX.Element }) => (
- {children}
+
+ {children}
+
);
mockUseMT5SVGEligibleToMigrate.mockReturnValue(response);
@@ -49,12 +53,12 @@ describe('MigrationBanner', () => {
it('should render MigrationBanner with both MT5 Derived SVG and MT5 Financial SVG text', () => {
renderComponent();
+
const texts = [/Upgrade your/i, /Derived/i, /and/i, /Financial MT5/i, /account\(s\)/i];
texts.forEach(text => {
expect(screen.getByText(text)).toBeInTheDocument();
});
expect(screen.getByRole('button', { name: /upgrade/i })).toBeInTheDocument();
- expect(screen.getByTestId('dt_migrate_card')).toBeInTheDocument();
});
it('should render MigrationBanner with MT5 Derived SVG', () => {
@@ -65,7 +69,6 @@ describe('MigrationBanner', () => {
expect(screen.getByText(text)).toBeInTheDocument();
});
expect(screen.getByRole('button', { name: /upgrade/i })).toBeInTheDocument();
- expect(screen.getByTestId('dt_migrate_card')).toBeInTheDocument();
});
it('should render MigrationBanner with MT5 Financial SVG', () => {
@@ -80,7 +83,6 @@ describe('MigrationBanner', () => {
it('should call upgrade button tracking event on clicking upgrade now button ', () => {
renderComponent();
- expect(screen.getByTestId('dt_migrate_card')).toBeInTheDocument();
const upgrade_button = screen.getByRole('button', { name: /upgrade/i });
expect(upgrade_button).toBeInTheDocument();
userEvent.click(upgrade_button);
@@ -88,10 +90,4 @@ describe('MigrationBanner', () => {
action: 'push_cta_upgrade',
});
});
-
- it('should render MigrationBanner with migration in dark mode', () => {
- mock_store.ui.is_dark_mode_on = true;
- renderComponent();
- expect(screen.getByTestId('dt_migrate_card_dark')).toBeInTheDocument();
- });
});
diff --git a/packages/appstore/src/components/migration-banner/index.ts b/packages/cfd/src/Containers/migration-banner/index.ts
similarity index 100%
rename from packages/appstore/src/components/migration-banner/index.ts
rename to packages/cfd/src/Containers/migration-banner/index.ts
diff --git a/packages/appstore/src/components/migration-banner/migration-banner-image.tsx b/packages/cfd/src/Containers/migration-banner/migration-banner-image.tsx
similarity index 66%
rename from packages/appstore/src/components/migration-banner/migration-banner-image.tsx
rename to packages/cfd/src/Containers/migration-banner/migration-banner-image.tsx
index c3c24bfa6f69..9db03ffa0b3e 100644
--- a/packages/appstore/src/components/migration-banner/migration-banner-image.tsx
+++ b/packages/cfd/src/Containers/migration-banner/migration-banner-image.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import MigrateCard from 'Assets/svgs/banner/migrate-card.svg';
-import MigrateCardDark from 'Assets/svgs/banner/migrate-card-dark.svg';
+import MigrateCard from '../../Assets/banner/migrate-card.svg';
+import MigrateCardDark from '../../Assets/banner/migrate-card-dark.svg';
export type TBannerImageProps = {
image: TMigrationBannerListProps;
@@ -16,7 +16,7 @@ const MigrationBannerList = {
const MigrationBannerImage = ({ image }: TBannerImageProps) => {
const Component = MigrationBannerList[image];
- return ;
+ return ;
};
export default MigrationBannerImage;
diff --git a/packages/appstore/src/components/migration-banner/migration-banner.scss b/packages/cfd/src/Containers/migration-banner/migration-banner.scss
similarity index 55%
rename from packages/appstore/src/components/migration-banner/migration-banner.scss
rename to packages/cfd/src/Containers/migration-banner/migration-banner.scss
index faa20e429245..7a0ad1f9735f 100644
--- a/packages/appstore/src/components/migration-banner/migration-banner.scss
+++ b/packages/cfd/src/Containers/migration-banner/migration-banner.scss
@@ -1,16 +1,15 @@
-.traders-hub-banner__migrate-banner {
+.mt5-migration-banner {
position: relative;
margin-bottom: 2.4rem;
overflow: hidden;
background-color: var(--general-hover);
- border: 1px solid var(--traders-hub-banner-border-color);
- border-radius: $BORDER_RADIUS * 4;
-
- @include mobile {
- padding: 1.4rem 1.6rem;
- border: none;
+ border-radius: $BORDER_RADIUS * 2;
+ height: 7.2rem;
+ &__trade-modal {
+ margin: 2.4rem;
}
- &-description {
+
+ &__description {
position: relative;
z-index: 2;
max-width: 57.5rem;
@@ -18,26 +17,19 @@
display: flex;
align-items: center;
justify-content: space-between;
- margin: auto 1.6rem;
- padding-left: 1.4rem;
-
+ margin: auto 1.6rem auto 3.2rem;
+ &--trade-modal {
+ margin: auto 3.2rem;
+ padding-left: 3.8rem;
+ }
@include mobile {
- margin: unset;
- padding-left: 0;
- &__text {
+ margin: auto 0.8rem auto 3.2rem;
+ &-text {
width: 90%;
}
}
}
- &-button {
- margin-top: 0.8rem;
- padding-inline: 6.7rem;
-
- @include mobile {
- padding-inline: 1.6rem;
- }
- }
&__image {
position: absolute;
z-index: 0;
diff --git a/packages/appstore/src/components/migration-banner/migration-banner.tsx b/packages/cfd/src/Containers/migration-banner/migration-banner.tsx
similarity index 69%
rename from packages/appstore/src/components/migration-banner/migration-banner.tsx
rename to packages/cfd/src/Containers/migration-banner/migration-banner.tsx
index 3456e9b05b95..64cd68b9197c 100644
--- a/packages/appstore/src/components/migration-banner/migration-banner.tsx
+++ b/packages/cfd/src/Containers/migration-banner/migration-banner.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import { Analytics } from '@deriv/analytics';
+import classNames from 'classnames';
import { Button, Text } from '@deriv/components';
import { Localize } from '@deriv/translations';
import { observer, useStore } from '@deriv/stores';
@@ -10,30 +11,38 @@ import {
getCFDPlatformNames,
CFD_PLATFORMS,
} from '@deriv/shared';
+import { useCfdStore } from '../../Stores/Modules/CFD/Helpers/useCfdStores';
import MigrationBannerImage from './migration-banner-image';
-const MigrationBanner = observer(() => {
- const {
- ui,
- modules: { cfd },
- } = useStore();
- const { is_dark_mode_on, toggleMT5MigrationModal } = ui;
- const { setMT5MigrationError } = cfd;
-
+type TMigrationBannerProps = {
+ is_trade_modal?: boolean;
+};
+const MigrationBanner = observer(({ is_trade_modal = false }: TMigrationBannerProps) => {
+ const { ui } = useStore();
+ const { is_dark_mode_on, toggleMT5MigrationModal, is_mobile } = ui;
+ const { setMT5MigrationError, is_mt5_trade_modal_visible, toggleMT5TradeModal } = useCfdStore();
const { has_derived_mt5_to_migrate, has_derived_and_financial_mt5 } = useMT5SVGEligibleToMigrate();
-
const openMT5MigrationModal = () => {
+ if (is_mt5_trade_modal_visible) toggleMT5TradeModal();
setMT5MigrationError('');
Analytics.trackEvent('ce_upgrade_mt5_banner', {
action: 'push_cta_upgrade',
});
toggleMT5MigrationModal();
};
-
+ const is_desktop_trade_modal = is_trade_modal && !is_mobile;
return (
-
-
-
+
+
+
{has_derived_and_financial_mt5 ? (
{
account_2: getFormattedJurisdictionMarketTypes(JURISDICTION_MARKET_TYPES.FINANCIAL),
platform: getCFDPlatformNames(CFD_PLATFORMS.MT5),
}}
- components={[,
]}
+ components={[, is_desktop_trade_modal ? null :
]}
/>
) : (
@@ -58,7 +67,7 @@ const MigrationBanner = observer(() => {
),
platform: getCFDPlatformNames(CFD_PLATFORMS.MT5),
}}
- components={[
, ]}
+ components={[is_desktop_trade_modal ? null :
, ]}
/>
)}