[TRAH5305] Suisin/chore: add alpha generation guide to mt5 except gold (

#17982)

* chore: add alpha generation guide to mt5 except gold

* chore: update to check windows only

* chore: fix test case

* fix: dmt5 test case fail issue

packages/cfd/package.json

@@ -88,6 +88,7 @@
         "@deriv-com/ui": "1.36.4",
         "@deriv-com/analytics": "1.27.1",
         "@deriv-com/translations": "1.3.9",
+        "@deriv/quill-icons": "2.2.1",
         "@deriv-com/utils": "^0.0.42",
         "@deriv/account": "^1.0.0",
         "@deriv/api": "^1.0.0",

packages/cfd/src/Containers/__tests__/dmt5-trade-modal.spec.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { StoreProvider, mockStore } from '@deriv/stores';
 import DMT5TradeModal from '../dmt5-trade-modal';
+import { OSDetect } from '@deriv/shared';
 
 jest.mock('@deriv/components', () => ({
     ...jest.requireActual('@deriv/components'),
@@ -11,6 +12,7 @@ jest.mock('@deriv/components', () => ({
 jest.mock('@deriv/shared', () => ({
     ...jest.requireActual('@deriv/shared'),
     getCFDAccountDisplay: jest.fn(),
+    OSDetect: jest.fn(),
 }));
 
 jest.mock('../../Assets/svgs/trading-platform', () => jest.fn(() => 'MockTradingPlatformIcon'));
@@ -154,4 +156,28 @@ describe('<DMT5TradeModal/>', () => {
         renderComponent({ props: new_mock_props });
         expect(screen.queryByText(/MockMigrateBanner/)).toBeInTheDocument();
     });
+
+    it('should render information banner for non-gold account', () => {
+        (OSDetect as jest.Mock).mockReturnValue('windows');
+        const new_mock_props = {
+            ...mock_props,
+            mt5_trade_account: {
+                product: 'svg',
+            },
+        };
+        renderComponent({ props: new_mock_props });
+        expect(screen.getByText(/Alpha Generation guide/)).toBeInTheDocument();
+        expect(screen.getByText(/Tailor your indicators with expert-driven trend analysis./)).toBeInTheDocument();
+    });
+
+    it('should not render information banner for gold account', () => {
+        const new_mock_props = {
+            ...mock_props,
+            mt5_trade_account: {
+                product: 'gold',
+            },
+        };
+        renderComponent({ props: new_mock_props });
+        expect(screen.queryByText(/Alpha Generation guide/)).not.toBeInTheDocument();
+    });
 });

packages/cfd/src/Containers/dmt5-trade-modal.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { TAdditionalDetailsOfEachMT5Loginid } from '@deriv/stores/types';
 import { useDevice } from '@deriv-com/ui';
-import { Text, Icon, Money, StatusBadge } from '@deriv/components';
+import { Text, Icon, Money, StatusBadge, InformationBanner } from '@deriv/components';
 import getMT5StatusBadgeConfig from '@deriv/account/src/Configs/get-mt5-status-badge-config';
-import { getCFDAccountKey, MT5_ACCOUNT_STATUS, PRODUCT, Jurisdiction } from '@deriv/shared';
+import { getCFDAccountKey, MT5_ACCOUNT_STATUS, PRODUCT, Jurisdiction, OSDetect } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize, localize } from '@deriv/translations';
 import { CFD_PLATFORMS, MARKET_TYPE } from '../Helpers/cfd-config';
@@ -15,6 +15,7 @@ import PasswordBox from '../Components/passwordbox';
 import SpecBox from '../Components/specbox';
 import { TCFDPasswordReset } from './props.types';
 import { TProducts, TTradingPlatformAccounts } from '../Components/props.types';
+import { StandaloneChartAreaRegularIcon, StandaloneArrowUpRightRegularIcon } from '@deriv/quill-icons';
 
 type TMT5TradeModalProps = {
     mt5_trade_account: TAdditionalDetailsOfEachMT5Loginid;
@@ -97,7 +98,7 @@ const DMT5TradeModal = observer(
                     return null;
             }
         };
-
+        const is_window = OSDetect() === 'windows';
         return (
             <div className='cfd-trade-modal-container'>
                 <div className='cfd-trade-modal'>
@@ -207,6 +208,17 @@ const DMT5TradeModal = observer(
                             <Localize i18n_default_text='Server maintenance starts at 01:00 GMT every Sunday, and this process may take up to 2 hours to complete. Service may be disrupted during this time.' />
                         </div>
                     </div>
+                    {isDesktop && is_window && mt5_trade_account.product !== PRODUCT.GOLD && (
+                        <InformationBanner
+                            information_icon={<StandaloneChartAreaRegularIcon fill='#095A66' iconSize='sm' />}
+                            title={<Localize i18n_default_text='Alpha Generation guide' />}
+                            description={
+                                <Localize i18n_default_text='Tailor your indicators with expert-driven trend analysis.' />
+                            }
+                            redirect_icon={<StandaloneArrowUpRightRegularIcon fill='#000000' iconSize='sm' />}
+                            link='https://docs.deriv.com/misc/alpha_generation_guide.pdf'
+                        />
+                    )}
                 </div>
                 {is_eligible_to_migrate && <MigrationBanner is_trade_modal />}
 

packages/components/src/components/information-banner/index.tsx

@@ -0,0 +1,4 @@
+import InformationBanner from './information-banner';
+import './information-banner.scss';
+
+export default InformationBanner;

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

@@ -0,0 +1,29 @@
+.information-banner {
+    display: flex;
+    padding: 1.6rem;
+    background: #e7f2f4;
+    border-radius: 2 * $BORDER_RADIUS;
+    justify-content: space-between;
+    margin-top: 1.6rem;
+    cursor: pointer;
+
+    &__content {
+        display: flex;
+
+        &-text {
+            display: flex;
+            margin-inline-start: 0.4rem;
+            flex-direction: column;
+            padding-top: 0.3rem;
+        }
+    }
+
+    &__title {
+        font-weight: 700 !important;
+        color: #095a66 !important;
+    }
+
+    &__description {
+        color: #095a66 !important;
+    }
+}

packages/components/src/components/information-banner/information-banner.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Text } from '@deriv-com/ui';
+
+type TInformationBanner = {
+    information_icon: React.ReactNode;
+    title: React.ReactNode;
+    description: React.ReactNode;
+    redirect_icon: React.ReactNode;
+    link: string;
+};
+
+const InformationBanner = ({ information_icon, title, description, redirect_icon, link }: TInformationBanner) => {
+    const handleClick = () => {
+        window.open(link, '_blank');
+    };
+    return (
+        <div className='information-banner' onClick={handleClick}>
+            <div className='information-banner__content'>
+                {information_icon}
+                <div className='information-banner__content-text'>
+                    <Text size='sm' className='information-banner__title'>
+                        {title}
+                    </Text>
+                    <Text size='xs' className='information-banner__description'>
+                        {description}
+                    </Text>
+                </div>
+            </div>
+            {redirect_icon}
+        </div>
+    );
+};
+
+export default InformationBanner;

packages/components/src/index.ts

@@ -124,6 +124,7 @@ export { default as UnhandledErrorModal } from './components/unhandled-error-mod
 export { default as VerticalTab } from './components/vertical-tab';
 export { default as Wizard } from './components/wizard';
 export { default as VideoPlayer } from './components/video-player';
+export { default as InformationBanner } from './components/information-banner';
 export * from './components/wallet-card';
 export * from './components/wallet-icon';
 export * from './components/app-linked-with-wallet-icon';

packages/wallets/src/components/InformationBanner/InformationBanner.scss

@@ -0,0 +1,29 @@
+.wallets-information-banner {
+    display: flex;
+    padding: 1.6rem;
+    background: #e7f2f4;
+    border-radius: 2 * $BORDER_RADIUS;
+    justify-content: space-between;
+    margin-top: 1.6rem;
+    cursor: pointer;
+
+    &__content {
+        display: flex;
+
+        &-text {
+            display: flex;
+            margin-inline-start: 0.4rem;
+            flex-direction: column;
+            padding-top: 0.3rem;
+        }
+    }
+
+    &__title {
+        font-weight: 700;
+        color: #095a66;
+    }
+
+    &__description {
+        color: #095a66;
+    }
+}

packages/wallets/src/components/InformationBanner/InformationBanner.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Text } from '@deriv-com/ui';
+import './InformationBanner.scss';
+
+type TInformationBanner = {
+    description: React.ReactNode;
+    informationIcon: React.ReactNode;
+    link: string;
+    redirectIcon: React.ReactNode;
+    title: React.ReactNode;
+};
+
+const InformationBanner = ({ description, informationIcon, link, redirectIcon, title }: TInformationBanner) => {
+    const handleClick = () => {
+        window.open(link, '_blank');
+    };
+    return (
+        <div className='wallets-information-banner' onClick={handleClick}>
+            <div className='wallets-information-banner__content'>
+                {informationIcon}
+                <div className='wallets-information-banner__content-text'>
+                    <Text className='wallets-information-banner__title' size='sm'>
+                        {title}
+                    </Text>
+                    <Text className='wallets-information-banner__description' size='xs'>
+                        {description}
+                    </Text>
+                </div>
+            </div>
+            {redirectIcon}
+        </div>
+    );
+};
+
+export default InformationBanner;

packages/wallets/src/components/InformationBanner/index.tsx

@@ -0,0 +1 @@
+export { default as InformationBanner } from './InformationBanner';

packages/wallets/src/components/index.ts

@@ -11,6 +11,7 @@ export * from './FadedAnimatedList';
 export * from './FlowProvider';
 export * from './FormDropdown';
 export * from './FormField';
+export * from './InformationBanner';
 export * from './OptionsAndMultipliersListing';
 export * from './SentEmailContent';
 export * from './SkeletonLoader';

packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx

@@ -1,18 +1,30 @@
 import React, { FC, Fragment, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useActiveWalletAccount, useCtraderAccountsList, useDxtradeAccountsList, useIsEuRegion } from '@deriv/api-v2';
-import { LabelPairedArrowUpArrowDownMdBoldIcon, LabelPairedCircleExclamationMdFillIcon } from '@deriv/quill-icons';
+import {
+    LabelPairedArrowUpArrowDownMdBoldIcon,
+    LabelPairedCircleExclamationMdFillIcon,
+    StandaloneArrowUpRightRegularIcon,
+    StandaloneChartAreaRegularIcon,
+} from '@deriv/quill-icons';
 import { Localize, useTranslations } from '@deriv-com/translations';
 import { Button, InlineMessage, Text, useDevice } from '@deriv-com/ui';
-import { WalletBadge, WalletListCardBadge } from '../../../../components';
+import { InformationBanner, WalletBadge, WalletListCardBadge } from '../../../../components';
 import { useModal } from '../../../../components/ModalProvider';
 import { TAddedMT5Account, THooks } from '../../../../types';
-import { CFD_PLATFORMS, getMarketTypeDetails, getServiceMaintenanceMessages, PlatformDetails } from '../../constants';
+import {
+    CFD_PLATFORMS,
+    getMarketTypeDetails,
+    getServiceMaintenanceMessages,
+    PlatformDetails,
+    PRODUCT,
+} from '../../constants';
 import MT5DesktopRedirectOption from './MT5TradeLink/MT5DesktopRedirectOption';
 import MT5MobileRedirectOption from './MT5TradeLink/MT5MobileRedirectOption';
 import { MT5TradeDetailsItem } from './MT5TradeDetailsItem';
 import { MT5TradeLink } from './MT5TradeLink';
 import './MT5TradeScreen.scss';
+import { OSDetect } from '@deriv/shared';
 
 type MT5TradeScreenProps = {
     mt5Account?: TAddedMT5Account;
@@ -83,6 +95,8 @@ const MT5TradeScreen: FC<MT5TradeScreenProps> = ({ mt5Account }) => {
         marketType,
     ]);
 
+    const isWindows = OSDetect() === 'windows';
+
     const loginId = useMemo(() => {
         if (platform === mt5Platform) {
             return (details as THooks.MT5AccountsList)?.display_login;
@@ -225,6 +239,21 @@ const MT5TradeScreen: FC<MT5TradeScreenProps> = ({ mt5Account }) => {
                         }
                     </Text>
                 </div>
+
+                {isDesktop &&
+                    details?.platform === mt5Platform &&
+                    isWindows &&
+                    marketTypeTitle.toLowerCase() !== PRODUCT.GOLD && (
+                        <InformationBanner
+                            description={
+                                <Localize i18n_default_text='Tailor your indicators with expert-driven trend analysis.' />
+                            }
+                            informationIcon={<StandaloneChartAreaRegularIcon fill='#095A66' iconSize='sm' />}
+                            link='https://docs.deriv.com/misc/alpha_generation_guide.pdf'
+                            redirectIcon={<StandaloneArrowUpRightRegularIcon fill='#000000' iconSize='sm' />}
+                            title={<Localize i18n_default_text='Alpha Generation guide' />}
+                        />
+                    )}
             </div>
             <div className='wallets-mt5-trade-screen__links'>
                 {platform === mt5Platform && (