From 925907c072b7a6e36a6e68dbe45c779a29506efa Mon Sep 17 00:00:00 2001 From: Sui Sin <103026762+suisin-deriv@users.noreply.github.com> Date: Fri, 17 Jan 2025 15:06:35 +0800 Subject: [PATCH] [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 --- package-lock.json | 1 + packages/cfd/package.json | 1 + .../__tests__/dmt5-trade-modal.spec.tsx | 26 ++++++++++++++ .../cfd/src/Containers/dmt5-trade-modal.tsx | 18 ++++++++-- .../components/information-banner/index.tsx | 4 +++ .../information-banner.scss | 29 +++++++++++++++ .../information-banner/information-banner.tsx | 34 ++++++++++++++++++ packages/components/src/index.ts | 1 + .../InformationBanner/InformationBanner.scss | 29 +++++++++++++++ .../InformationBanner/InformationBanner.tsx | 35 +++++++++++++++++++ .../components/InformationBanner/index.tsx | 1 + packages/wallets/src/components/index.ts | 1 + .../screens/MT5TradeScreen/MT5TradeScreen.tsx | 35 +++++++++++++++++-- 13 files changed, 209 insertions(+), 6 deletions(-) create mode 100644 packages/components/src/components/information-banner/index.tsx create mode 100644 packages/components/src/components/information-banner/information-banner.scss create mode 100644 packages/components/src/components/information-banner/information-banner.tsx create mode 100644 packages/wallets/src/components/InformationBanner/InformationBanner.scss create mode 100644 packages/wallets/src/components/InformationBanner/InformationBanner.tsx create mode 100644 packages/wallets/src/components/InformationBanner/index.tsx diff --git a/package-lock.json b/package-lock.json index 8dd671d20a7e..017a1b45dfc0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51179,6 +51179,7 @@ "@deriv/api-types": "1.0.172", "@deriv/components": "^1.0.0", "@deriv/hooks": "^1.0.0", + "@deriv/quill-icons": "2.2.1", "@deriv/shared": "^1.0.0", "@deriv/stores": "^1.0.0", "@deriv/translations": "^1.0.0", diff --git a/packages/cfd/package.json b/packages/cfd/package.json index 791515caffd2..f9f592c1145d 100644 --- a/packages/cfd/package.json +++ b/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", diff --git a/packages/cfd/src/Containers/__tests__/dmt5-trade-modal.spec.tsx b/packages/cfd/src/Containers/__tests__/dmt5-trade-modal.spec.tsx index 01bb3c903c35..8209ced6da93 100644 --- a/packages/cfd/src/Containers/__tests__/dmt5-trade-modal.spec.tsx +++ b/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('', () => { 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(); + }); }); diff --git a/packages/cfd/src/Containers/dmt5-trade-modal.tsx b/packages/cfd/src/Containers/dmt5-trade-modal.tsx index 37c7e68bd65c..946ae97b31fd 100644 --- a/packages/cfd/src/Containers/dmt5-trade-modal.tsx +++ b/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 (
@@ -207,6 +208,17 @@ const DMT5TradeModal = observer(
+ {isDesktop && is_window && mt5_trade_account.product !== PRODUCT.GOLD && ( + } + title={} + description={ + + } + redirect_icon={} + link='https://docs.deriv.com/misc/alpha_generation_guide.pdf' + /> + )} {is_eligible_to_migrate && } diff --git a/packages/components/src/components/information-banner/index.tsx b/packages/components/src/components/information-banner/index.tsx new file mode 100644 index 000000000000..6b4f492c9ae6 --- /dev/null +++ b/packages/components/src/components/information-banner/index.tsx @@ -0,0 +1,4 @@ +import InformationBanner from './information-banner'; +import './information-banner.scss'; + +export default InformationBanner; diff --git a/packages/components/src/components/information-banner/information-banner.scss b/packages/components/src/components/information-banner/information-banner.scss new file mode 100644 index 000000000000..4764ac2c718b --- /dev/null +++ b/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; + } +} diff --git a/packages/components/src/components/information-banner/information-banner.tsx b/packages/components/src/components/information-banner/information-banner.tsx new file mode 100644 index 000000000000..f156994b76cf --- /dev/null +++ b/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 ( +
+
+ {information_icon} +
+ + {title} + + + {description} + +
+
+ {redirect_icon} +
+ ); +}; + +export default InformationBanner; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 825fc14340c1..60fb783e6a26 100644 --- a/packages/components/src/index.ts +++ b/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'; diff --git a/packages/wallets/src/components/InformationBanner/InformationBanner.scss b/packages/wallets/src/components/InformationBanner/InformationBanner.scss new file mode 100644 index 000000000000..6eb486c41142 --- /dev/null +++ b/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; + } +} diff --git a/packages/wallets/src/components/InformationBanner/InformationBanner.tsx b/packages/wallets/src/components/InformationBanner/InformationBanner.tsx new file mode 100644 index 000000000000..e6d2bf48e969 --- /dev/null +++ b/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 ( +
+
+ {informationIcon} +
+ + {title} + + + {description} + +
+
+ {redirectIcon} +
+ ); +}; + +export default InformationBanner; diff --git a/packages/wallets/src/components/InformationBanner/index.tsx b/packages/wallets/src/components/InformationBanner/index.tsx new file mode 100644 index 000000000000..6f3e04365ae0 --- /dev/null +++ b/packages/wallets/src/components/InformationBanner/index.tsx @@ -0,0 +1 @@ +export { default as InformationBanner } from './InformationBanner'; diff --git a/packages/wallets/src/components/index.ts b/packages/wallets/src/components/index.ts index 866d00a87c5a..a4ad5897a2fa 100644 --- a/packages/wallets/src/components/index.ts +++ b/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'; diff --git a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx b/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx index b0c7439a083d..88f072b08ea3 100644 --- a/packages/wallets/src/features/cfd/screens/MT5TradeScreen/MT5TradeScreen.tsx +++ b/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 = ({ 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 = ({ mt5Account }) => { } + + {isDesktop && + details?.platform === mt5Platform && + isWindows && + marketTypeTitle.toLowerCase() !== PRODUCT.GOLD && ( + + } + informationIcon={} + link='https://docs.deriv.com/misc/alpha_generation_guide.pdf' + redirectIcon={} + title={} + /> + )}
{platform === mt5Platform && (