Skip to content

Commit ba48580

Browse files
suisin-derivsuisin-deriv
authored
chore: add alpha generation guide to mt5 except gold (#17976)
1 parent 211e172 commit ba48580

File tree

13 files changed

+198
-4
lines changed

13 files changed

+198
-4
lines changed

‎package-lock.json

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/cfd/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@
8888
"@deriv-com/ui": "1.36.4",
8989
"@deriv-com/analytics": "1.28.2",
9090
"@deriv-com/translations": "1.3.9",
91+
"@deriv/quill-icons": "2.2.1",
9192
"@deriv-com/utils": "^0.0.42",
9293
"@deriv/account": "^1.0.0",
9394
"@deriv/api": "^1.0.0",

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,4 +154,27 @@ describe('<DMT5TradeModal/>', () => {
154154
renderComponent({ props: new_mock_props });
155155
expect(screen.queryByText(/MockMigrateBanner/)).toBeInTheDocument();
156156
});
157+
158+
it('should render information banner for non-gold account', () => {
159+
const new_mock_props = {
160+
...mock_props,
161+
mt5_trade_account: {
162+
product: 'svg',
163+
},
164+
};
165+
renderComponent({ props: new_mock_props });
166+
expect(screen.getByText(/Alpha Generation guide/)).toBeInTheDocument();
167+
expect(screen.getByText(/Tailor your indicators with expert-driven trend analysis./)).toBeInTheDocument();
168+
});
169+
170+
it('should not render information banner for gold account', () => {
171+
const new_mock_props = {
172+
...mock_props,
173+
mt5_trade_account: {
174+
product: 'gold',
175+
},
176+
};
177+
renderComponent({ props: new_mock_props });
178+
expect(screen.queryByText(/Alpha Generation guide/)).not.toBeInTheDocument();
179+
});
157180
});

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { TAdditionalDetailsOfEachMT5Loginid } from '@deriv/stores/types';
33
import { useDevice } from '@deriv-com/ui';
4-
import { Text, Icon, Money, StatusBadge } from '@deriv/components';
4+
import { Text, Icon, Money, StatusBadge, InformationBanner } from '@deriv/components';
55
import getMT5StatusBadgeConfig from '@deriv/account/src/Configs/get-mt5-status-badge-config';
66
import { getCFDAccountKey, MT5_ACCOUNT_STATUS, PRODUCT, Jurisdiction } from '@deriv/shared';
77
import { observer, useStore } from '@deriv/stores';
@@ -15,6 +15,7 @@ import PasswordBox from '../Components/passwordbox';
1515
import SpecBox from '../Components/specbox';
1616
import { TCFDPasswordReset } from './props.types';
1717
import { TProducts, TTradingPlatformAccounts } from '../Components/props.types';
18+
import { StandaloneChartAreaRegularIcon, StandaloneArrowUpRightRegularIcon } from '@deriv/quill-icons';
1819

1920
type TMT5TradeModalProps = {
2021
mt5_trade_account: TAdditionalDetailsOfEachMT5Loginid;
@@ -207,6 +208,17 @@ const DMT5TradeModal = observer(
207208
<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.' />
208209
</div>
209210
</div>
211+
{isDesktop && mt5_trade_account.product !== PRODUCT.GOLD && (
212+
<InformationBanner
213+
information_icon={<StandaloneChartAreaRegularIcon fill='#095A66' iconSize='sm' />}
214+
title={<Localize i18n_default_text='Alpha Generation guide' />}
215+
description={
216+
<Localize i18n_default_text='Tailor your indicators with expert-driven trend analysis.' />
217+
}
218+
redirect_icon={<StandaloneArrowUpRightRegularIcon fill='#000000' iconSize='sm' />}
219+
link='https://docs.deriv.com/misc/alpha_generation_guide.pdf'
220+
/>
221+
)}
210222
</div>
211223
{is_eligible_to_migrate && <MigrationBanner is_trade_modal />}
212224

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import InformationBanner from './information-banner';
2+
import './information-banner.scss';
3+
4+
export default InformationBanner;

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.information-banner {
2+
display: flex;
3+
padding: 1.6rem;
4+
background: #e7f2f4;
5+
border-radius: 2 * $BORDER_RADIUS;
6+
justify-content: space-between;
7+
margin-top: 1.6rem;
8+
cursor: pointer;
9+
10+
&__content {
11+
display: flex;
12+
13+
&-text {
14+
display: flex;
15+
margin-inline-start: 0.4rem;
16+
flex-direction: column;
17+
padding-top: 0.3rem;
18+
}
19+
}
20+
21+
&__title {
22+
font-weight: 700 !important;
23+
color: #095a66 !important;
24+
}
25+
26+
&__description {
27+
color: #095a66 !important;
28+
}
29+
}

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import { Text } from '@deriv-com/ui';
3+
4+
type TInformationBanner = {
5+
information_icon: React.ReactNode;
6+
title: React.ReactNode;
7+
description: React.ReactNode;
8+
redirect_icon: React.ReactNode;
9+
link: string;
10+
};
11+
12+
const InformationBanner = ({ information_icon, title, description, redirect_icon, link }: TInformationBanner) => {
13+
const handleClick = () => {
14+
window.open(link, '_blank');
15+
};
16+
return (
17+
<div className='information-banner' onClick={handleClick}>
18+
<div className='information-banner__content'>
19+
{information_icon}
20+
<div className='information-banner__content-text'>
21+
<Text size='sm' className='information-banner__title'>
22+
{title}
23+
</Text>
24+
<Text size='xs' className='information-banner__description'>
25+
{description}
26+
</Text>
27+
</div>
28+
</div>
29+
{redirect_icon}
30+
</div>
31+
);
32+
};
33+
34+
export default InformationBanner;

‎packages/components/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ export { default as UnhandledErrorModal } from './components/unhandled-error-mod
124124
export { default as VerticalTab } from './components/vertical-tab';
125125
export { default as Wizard } from './components/wizard';
126126
export { default as VideoPlayer } from './components/video-player';
127+
export { default as InformationBanner } from './components/information-banner';
127128
export * from './components/wallet-card';
128129
export * from './components/wallet-icon';
129130
export * from './components/app-linked-with-wallet-icon';

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.wallets-information-banner {
2+
display: flex;
3+
padding: 1.6rem;
4+
background: #e7f2f4;
5+
border-radius: 2 * $BORDER_RADIUS;
6+
justify-content: space-between;
7+
margin-top: 1.6rem;
8+
cursor: pointer;
9+
10+
&__content {
11+
display: flex;
12+
13+
&-text {
14+
display: flex;
15+
margin-inline-start: 0.4rem;
16+
flex-direction: column;
17+
padding-top: 0.3rem;
18+
}
19+
}
20+
21+
&__title {
22+
font-weight: 700;
23+
color: #095a66;
24+
}
25+
26+
&__description {
27+
color: #095a66;
28+
}
29+
}

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import { Text } from '@deriv-com/ui';
3+
import './InformationBanner.scss';
4+
5+
type TInformationBanner = {
6+
description: React.ReactNode;
7+
informationIcon: React.ReactNode;
8+
link: string;
9+
redirectIcon: React.ReactNode;
10+
title: React.ReactNode;
11+
};
12+
13+
const InformationBanner = ({ description, informationIcon, link, redirectIcon, title }: TInformationBanner) => {
14+
const handleClick = () => {
15+
window.open(link, '_blank');
16+
};
17+
return (
18+
<div className='wallets-information-banner' onClick={handleClick}>
19+
<div className='wallets-information-banner__content'>
20+
{informationIcon}
21+
<div className='wallets-information-banner__content-text'>
22+
<Text className='wallets-information-banner__title' size='sm'>
23+
{title}
24+
</Text>
25+
<Text className='wallets-information-banner__description' size='xs'>
26+
{description}
27+
</Text>
28+
</div>
29+
</div>
30+
{redirectIcon}
31+
</div>
32+
);
33+
};
34+
35+
export default InformationBanner;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as InformationBanner } from './InformationBanner';

‎packages/wallets/src/components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export * from './FadedAnimatedList';
1111
export * from './FlowProvider';
1212
export * from './FormDropdown';
1313
export * from './FormField';
14+
export * from './InformationBanner';
1415
export * from './OptionsAndMultipliersListing';
1516
export * from './SentEmailContent';
1617
export * from './SkeletonLoader';

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

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,24 @@
11
import React, { FC, Fragment, useMemo } from 'react';
22
import { useHistory } from 'react-router-dom';
33
import { useActiveWalletAccount, useCtraderAccountsList, useDxtradeAccountsList, useIsEuRegion } from '@deriv/api-v2';
4-
import { LabelPairedArrowUpArrowDownMdBoldIcon, LabelPairedCircleExclamationMdFillIcon } from '@deriv/quill-icons';
4+
import {
5+
LabelPairedArrowUpArrowDownMdBoldIcon,
6+
LabelPairedCircleExclamationMdFillIcon,
7+
StandaloneArrowUpRightRegularIcon,
8+
StandaloneChartAreaRegularIcon,
9+
} from '@deriv/quill-icons';
510
import { Localize, useTranslations } from '@deriv-com/translations';
611
import { Button, InlineMessage, Text, useDevice } from '@deriv-com/ui';
7-
import { WalletBadge, WalletListCardBadge } from '../../../../components';
12+
import { InformationBanner, WalletBadge, WalletListCardBadge } from '../../../../components';
813
import { useModal } from '../../../../components/ModalProvider';
914
import { TAddedMT5Account, THooks } from '../../../../types';
10-
import { CFD_PLATFORMS, getMarketTypeDetails, getServiceMaintenanceMessages, PlatformDetails } from '../../constants';
15+
import {
16+
CFD_PLATFORMS,
17+
getMarketTypeDetails,
18+
getServiceMaintenanceMessages,
19+
PlatformDetails,
20+
PRODUCT,
21+
} from '../../constants';
1122
import MT5DesktopRedirectOption from './MT5TradeLink/MT5DesktopRedirectOption';
1223
import MT5MobileRedirectOption from './MT5TradeLink/MT5MobileRedirectOption';
1324
import { MT5TradeDetailsItem } from './MT5TradeDetailsItem';
@@ -225,6 +236,18 @@ const MT5TradeScreen: FC<MT5TradeScreenProps> = ({ mt5Account }) => {
225236
}
226237
</Text>
227238
</div>
239+
240+
{isDesktop && details?.platform === mt5Platform && marketTypeTitle.toLowerCase() !== PRODUCT.GOLD && (
241+
<InformationBanner
242+
description={
243+
<Localize i18n_default_text='Tailor your indicators with expert-driven trend analysis.' />
244+
}
245+
informationIcon={<StandaloneChartAreaRegularIcon fill='#095A66' iconSize='sm' />}
246+
link='https://docs.deriv.com/misc/alpha_generation_guide.pdf'
247+
redirectIcon={<StandaloneArrowUpRightRegularIcon fill='#000000' iconSize='sm' />}
248+
title={<Localize i18n_default_text='Alpha Generation guide' />}
249+
/>
250+
)}
228251
</div>
229252
<div className='wallets-mt5-trade-screen__links'>
230253
{platform === mt5Platform && (

0 commit comments

Comments
 (0)