[COJ]/Amina/coj 465/upgrade banner on trade modal (deriv-com#13068)

* feat: intiail_draft * fix: margin * fix: test case * fix: test case * fix: test case * fix: test case * fix: test case * fix: component
heorhi-deriv · Jan 24, 2024 · c9b2083 · c9b2083
1 parent f6a6a26
commit c9b2083
Show file tree

Hide file tree

Showing 13 changed files with 74 additions and 56 deletions.
diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
@@ -409,7 +409,7 @@
 
 .cfd-trade-modal {
     display: flex;
-    margin: 2.4rem;
+    margin: 1.2rem 2.4rem;
     align-items: center;
     gap: 0.8rem;
     &__acc_status {

diff --git a/packages/appstore/src/components/cfds-listing/index.tsx b/packages/appstore/src/components/cfds-listing/index.tsx
@@ -12,7 +12,7 @@ import GetMoreAccounts from 'Components/get-more-accounts';
 import { getHasDivider } from 'Constants/utils';
 import './cfds-listing.scss';
 import { useCFDCanGetMoreMT5Accounts, useMT5SVGEligibleToMigrate } from '@deriv/hooks';
-import MigrationBanner from 'Components/migration-banner';
+import MigrationBanner from '@deriv/cfd/src/Containers/migration-banner/migration-banner';
 
 const CFDsListing = observer(() => {
     const {

diff --git a/packages/cfd/package.json b/packages/cfd/package.json
@@ -84,6 +84,7 @@
     "dependencies": {
         "@deriv/api": "^1.0.0",
         "@deriv/account": "^1.0.0",
+        "@deriv/analytics": "^1.4.8",
         "@deriv/api-types": "^1.0.118",
         "@deriv/components": "^1.0.0",
         "@deriv/deriv-api": "^1.0.13",

diff --git a/.../assets/svgs/banner/migrate-card-dark.svg → ...d/src/Assets/banner/migrate-card-dark.svg b/.../assets/svgs/banner/migrate-card-dark.svg → ...d/src/Assets/banner/migrate-card-dark.svg
diff --git a/...e/src/assets/svgs/banner/migrate-card.svg → ...es/cfd/src/Assets/banner/migrate-card.svg b/...e/src/assets/svgs/banner/migrate-card.svg → ...es/cfd/src/Assets/banner/migrate-card.svg
diff --git a/...src/Components/migration-success-modal/__tests__/migration-success-modal-content.spec.tsx b/...src/Components/migration-success-modal/__tests__/migration-success-modal-content.spec.tsx
@@ -16,7 +16,7 @@ describe('<MigrationSuccessModal />', () => {
     const props: React.ComponentProps<typeof MigrationSuccessModalContent> = {
         has_open_positions: false,
         icon: 'icon',
-        eligible_account_migrate: 'SVG',
+        eligible_account_to_migrate: 'BVI',
         directToCashier: jest.fn(),
     };
     it('component should be rendered', () => {

diff --git a/packages/cfd/src/Containers/__tests__/dmt5-trade-modal.spec.tsx b/packages/cfd/src/Containers/__tests__/dmt5-trade-modal.spec.tsx
@@ -15,6 +15,8 @@ jest.mock('@deriv/shared', () => ({
 
 jest.mock('../../Assets/svgs/trading-platform', () => jest.fn(() => 'MockTradingPlatformIcon'));
 
+jest.mock('../migration-banner', () => jest.fn(() => <div>MockMigrateBanner</div>));
+
 describe('<DMT5TradeModal/>', () => {
     const mock_props: React.ComponentProps<typeof DMT5TradeModal> = {
         mt5_trade_account: {
@@ -130,4 +132,20 @@ describe('<DMT5TradeModal/>', () => {
         expect(screen.queryByText(/No new positions/)).not.toBeInTheDocument();
         expect(screen.queryByText(/Account closed/)).not.toBeInTheDocument();
     });
+
+    it('should not render migration banner if account is not eligible to migrate', () => {
+        renderComponent({ props: mock_props });
+        expect(screen.queryByText(/MockMigrateBanner/)).not.toBeInTheDocument();
+    });
+
+    it('should render migration banner if account is eligible to migrate', () => {
+        const new_mock_props = {
+            ...mock_props,
+            mt5_trade_account: {
+                eligible_to_migrate: { financial: 'bvi' },
+            },
+        };
+        renderComponent({ props: new_mock_props });
+        expect(screen.queryByText(/MockMigrateBanner/)).toBeInTheDocument();
+    });
 });
diff --git a/packages/cfd/src/Containers/dmt5-trade-modal.tsx b/packages/cfd/src/Containers/dmt5-trade-modal.tsx
@@ -21,6 +21,7 @@ import { TTradingPlatformAccounts } from '../Components/props.types';
 
 import { TCFDPasswordReset } from './props.types';
 import { CATEGORY, CFD_PLATFORMS, MARKET_TYPE, JURISDICTION } from '../Helpers/cfd-config';
+import MigrationBanner from './migration-banner';
 
 type TMT5TradeModalProps = {
     mt5_trade_account: DetailsOfEachMT5Loginid & {
@@ -49,7 +50,7 @@ const DMT5TradeModal = observer(
         const {
             account_status: { authentication },
         } = client;
-
+        const is_eligible_to_migrate = mt5_trade_account.eligible_to_migrate;
         const getCompanyShortcode = () => {
             if (
                 (mt5_trade_account.account_type === CATEGORY.DEMO &&
@@ -211,6 +212,7 @@ const DMT5TradeModal = observer(
                         </div>
                     </div>
                 </div>
+                {is_eligible_to_migrate && <MigrationBanner is_trade_modal />}
                 <div className='cfd-trade-modal__download-center-app'>
                     <div className='cfd-trade-modal__download-center-app--option'>
                         <Icon icon='IcRebrandingMt5Logo' size={32} />

diff --git a/...banner/__test__/migration-banner.spec.tsx → ...banner/__test__/migration-banner.spec.tsx b/...banner/__test__/migration-banner.spec.tsx → ...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,14 +18,17 @@ const mock_store = mockStore({});
 const mockUseMT5SVGEligibleToMigrate = useMT5SVGEligibleToMigrate as jest.MockedFunction<
     typeof useMT5SVGEligibleToMigrate
 >;
+jest.mock('../migration-banner-image', () => jest.fn(() => <div>MigrationBannerImage</div>));
 
 describe('MigrationBanner', () => {
     let response: ReturnType<typeof useMT5SVGEligibleToMigrate>;
 
     const renderComponent = () => {
         const wrapper = ({ children }: { children: JSX.Element }) => (
             <APIProvider>
-                <StoreProvider store={mock_store}>{children}</StoreProvider>
+                <StoreProvider store={mock_store}>
+                    <CFDStoreProvider>{children} </CFDStoreProvider>
+                </StoreProvider>
             </APIProvider>
         );
         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,18 +83,11 @@ 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);
         expect(Analytics.trackEvent).toHaveBeenCalledWith('ce_upgrade_mt5_banner', {
             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/.../src/components/migration-banner/index.ts → .../src/Containers/migration-banner/index.ts b/.../src/components/migration-banner/index.ts → .../src/Containers/migration-banner/index.ts
diff --git a/...gration-banner/migration-banner-image.tsx → ...gration-banner/migration-banner-image.tsx b/...gration-banner/migration-banner-image.tsx → ...gration-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<TMigrationBannerListProps> = {
     image: TMigrationBannerListProps;
@@ -16,7 +16,7 @@ const MigrationBannerList = {
 const MigrationBannerImage = ({ image }: TBannerImageProps<TMigrationBannerListProps>) => {
     const Component = MigrationBannerList[image];
 
-    return <Component className='traders-hub-banner__migrate-banner__image' data-testid={`dt_${image}`} />;
+    return <Component className='mt5-migration-banner__image' data-testid={`dt_${image}`} />;
 };
 
 export default MigrationBannerImage;
diff --git a/...ts/migration-banner/migration-banner.scss → ...rs/migration-banner/migration-banner.scss b/...ts/migration-banner/migration-banner.scss → ...rs/migration-banner/migration-banner.scss
@@ -1,43 +1,35 @@
-.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;
         height: 100%;
         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/...nts/migration-banner/migration-banner.tsx → ...ers/migration-banner/migration-banner.tsx b/...nts/migration-banner/migration-banner.tsx → ...ers/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 (
-        <div className='traders-hub-banner__migrate-banner'>
-            <div className='traders-hub-banner__migrate-banner-description'>
-                <div className='traders-hub-banner__migrate-banner-description__text'>
+        <div
+            className={classNames('mt5-migration-banner', {
+                'mt5-migration-banner__trade-modal': is_trade_modal,
+            })}
+        >
+            <div
+                className={classNames('mt5-migration-banner__description', {
+                    'mt5-migration-banner__description--trade-modal': is_desktop_trade_modal,
+                })}
+            >
+                <div className='mt5-migration-banne__description-text'>
                     {has_derived_and_financial_mt5 ? (
                         <Text size='xs'>
                             <Localize
@@ -43,7 +52,7 @@ const MigrationBanner = observer(() => {
                                     account_2: getFormattedJurisdictionMarketTypes(JURISDICTION_MARKET_TYPES.FINANCIAL),
                                     platform: getCFDPlatformNames(CFD_PLATFORMS.MT5),
                                 }}
-                                components={[<strong key={0} />, <br key={1} />]}
+                                components={[<strong key={0} />, is_desktop_trade_modal ? null : <br key={1} />]}
                             />
                         </Text>
                     ) : (
@@ -58,7 +67,7 @@ const MigrationBanner = observer(() => {
                                     ),
                                     platform: getCFDPlatformNames(CFD_PLATFORMS.MT5),
                                 }}
-                                components={[<br key={0} />, <strong key={1} />]}
+                                components={[is_desktop_trade_modal ? null : <br key={0} />, <strong key={1} />]}
                             />
                         </Text>
                     )}