Merge pull request #33 from aizad-deriv/aizad/social-trading-acquity

task: implement components in mt5 dashboard
aizad-deriv · Oct 27, 2022 · ac5e0af · ac5e0af
2 parents 31df5d7 + ff2d0cf
commit ac5e0af
Show file tree

Hide file tree

Showing 18 changed files with 256 additions and 7 deletions.
diff --git a/packages/cfd/src/Components/cfd-account-card.tsx b/packages/cfd/src/Components/cfd-account-card.tsx
@@ -186,6 +186,7 @@ const CFDAccountCardComponent = ({
     toggleMT5TradeModal,
     toggleShouldShowRealAccountsList,
     setMT5TradeAccount,
+    setIsAcuityModalOpen,
 }: TCFDAccountCard) => {
     const existing_data = existing_accounts_data?.length ? existing_accounts_data?.[0] : existing_accounts_data;
     const all_svg_acc: DetailsOfEachMT5Loginid[] = [];
@@ -329,6 +330,22 @@ const CFDAccountCardComponent = ({
                             )}
                     </div>
                 </div>
+                {has_real_account && type.type === 'financial' && !is_eu && !isMobile() && (
+                    <Button
+                        onClick={() => setIsAcuityModalOpen(true)}
+                        className='cfd-account-card__acuity-banner'
+                        type='button'
+                        transparent
+                    >
+                        <div className='cfd-account-card__acuity-banner--wrapper'>
+                            <Icon icon='icMt5Acuity' />
+                            <Text as='p' size='xxs' weight='bold' color='prominent'>
+                                <Localize i18n_default_text='Get Acuity trading tools' />
+                            </Text>
+                            <Icon icon='IcAddOutline' color='secondary' />
+                        </div>
+                    </Button>
+                )}
                 {existing_data && <div className='cfd-account-card__divider' />}
 
                 <div className='cfd-account-card__cta' style={!existing_data?.login ? { marginTop: 'auto' } : {}}>

diff --git a/packages/cfd/src/Components/cfd-real-account-display.tsx b/packages/cfd/src/Components/cfd-real-account-display.tsx
@@ -61,6 +61,7 @@ type TCFDRealAccountDisplayProps = {
     account_status?: object;
     openDerivRealAccountNeededModal: () => void;
     should_enable_add_button?: boolean;
+    setIsAcuityModalOpen: (value: boolean) => void;
 };
 
 const CFDRealAccountDisplay = ({
@@ -88,6 +89,7 @@ const CFDRealAccountDisplay = ({
     residence,
     openDerivRealAccountNeededModal,
     should_enable_add_button,
+    setIsAcuityModalOpen,
 }: TCFDRealAccountDisplayProps) => {
     const is_eu_user = (is_logged_in && is_eu) || (!is_logged_in && is_eu_country);
 
@@ -231,6 +233,7 @@ const CFDRealAccountDisplay = ({
             toggleShouldShowRealAccountsList={toggleShouldShowRealAccountsList}
             toggleAccountsDialog={toggleAccountsDialog}
             toggleMT5TradeModal={toggleMT5TradeModal}
+            setIsAcuityModalOpen={setIsAcuityModalOpen}
         />
     );
 

diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts
@@ -108,6 +108,7 @@ export type TCFDAccountCard = {
     toggleMT5TradeModal: (arg?: boolean) => void;
     toggleShouldShowRealAccountsList?: (arg?: boolean) => void;
     setMT5TradeAccount: (arg: any) => void;
+    setIsAcuityModalOpen: (value: boolean) => void;
 };
 
 export type TTradingPlatformAccounts = {

diff --git a/packages/cfd/src/Containers/acuity-download-modal.tsx b/packages/cfd/src/Containers/acuity-download-modal.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Button, Modal, Text, Icon } from '@deriv/components';
+import { Localize, localize } from '@deriv/translations';
+import { connect } from 'Stores/connect';
+import { getUrlBase } from '@deriv/shared';
+import RootStore from 'Stores/index';
+
+type TAcuityDownloadModal = {
+    is_acuity_modal_open: boolean;
+    setIsAcuityModalOpen: (value: boolean) => void;
+};
+
+const AcuityDownloadModal = ({ is_acuity_modal_open, setIsAcuityModalOpen }: TAcuityDownloadModal) => {
+    const closeModal = () => setIsAcuityModalOpen(false);
+
+    const openDownloadLink = () => {
+        window.open(
+            'https://dashboard.acuitytrading.com/metatrader/DownloadMt5Installer?apiKey=2713b8d0-43ed-4194-b5d7-b1ff60dbdae0&isFull=true',
+            '_blank',
+            'noopener,noreferrer'
+        );
+        closeModal();
+    };
+
+    return (
+        <Modal
+            is_open={is_acuity_modal_open}
+            title=' '
+            has_close_icon={true}
+            className='acuity-download-modal'
+            width='44rem'
+            toggleModal={closeModal}
+        >
+            <div className='acuity-download-modal__body'>
+                <div className='acuity-download-modal__body--image'>
+                    <img src={getUrlBase('/public/images/common/acuity_modal.png')} />
+                </div>
+                <Text as='p' size='s' weight='bold' align='center'>
+                    <Localize i18n_default_text='Power up your trades with cool new tools' />
+                </Text>
+                <div className='acuity-download-modal__body--description'>
+                    <Text as='p' size='s' line_height='m' align='center'>
+                        <Localize
+                            i18n_default_text="We/'ve partnered with Acuity to give you a suite of intuitive trading tools for MT5 so you can keep track of market events and trends, free of charge! <0/><0/>
+                    Download the Acuity suite and take advantage of the <1>Macroeconomic Calendar, Market Alerts, Research Terminal,</1> and <1>Signal Centre Trade Ideas</1> without leaving your MT5 terminal.<0/><0/>
+                    This suite is only available for Windows, and is most recommended for financial assets."
+                            components={[<br key={0} />, <Text key={1} size='s' weight='bold' />]}
+                        />
+                    </Text>
+                </div>
+                <div className='acuity-download-modal__body--info'>
+                    <Icon icon='ic-info-blue' />
+                    <Text as='p' size='xxxs' line_height='s'>
+                        <Localize i18n_default_text='Disclaimer: The trading services and information provided by Acuity should not be construed as a solicitation to invest and/or trade. Deriv does not offer investment advice. The past is not a guide to future performance, and strategies that have worked in the past may not work in the future.' />
+                    </Text>
+                </div>
+                <div className='acuity-download-modal__body--button'>
+                    <Button type='button' text={localize('Download Acuity')} primary large onClick={openDownloadLink} />
+                </div>
+            </div>
+        </Modal>
+    );
+};
+
+export default connect(({ ui }: RootStore) => ({
+    is_acuity_modal_open: ui.is_acuity_modal_open,
+    setIsAcuityModalOpen: ui.setIsAcuityModalOpen,
+}))(AcuityDownloadModal);
diff --git a/packages/cfd/src/Containers/cfd-dashboard.tsx b/packages/cfd/src/Containers/cfd-dashboard.tsx
@@ -35,6 +35,7 @@ import { DetailsOfEachMT5Loginid, LandingCompany, ResidenceList } from '@deriv/a
 import CFDDxtradeDemoAccountDisplay from '../Components/cfd-dxtrade-demo-account-display';
 import CFDMT5DemoAccountDisplay from '../Components/cfd-mt5-demo-account-display';
 import { CFDRealAccountDisplay } from '../Components/cfd-real-account-display';
+import AcuityDownloadModal from './acuity-download-modal';
 
 declare module 'react' {
     interface HTMLAttributes<T> extends React.AriaAttributes, React.DOMAttributes<T> {
@@ -172,6 +173,7 @@ export type TCFDDashboardProps = RouteComponentProps & {
         getRealSyntheticAccountsExistingData: DetailsOfEachMT5Loginid[] | undefined
     ) => void;
     openDerivRealAccountNeededModal: () => void;
+    setIsAcuityModalOpen: (value: boolean) => void;
 };
 
 const CFDDashboard = (props: TCFDDashboardProps) => {
@@ -392,6 +394,7 @@ const CFDDashboard = (props: TCFDDashboardProps) => {
         getRealSyntheticAccountsExistingData,
         getRealFinancialAccountsExistingData,
         openDerivRealAccountNeededModal,
+        setIsAcuityModalOpen,
     } = props;
 
     const should_show_missing_real_account =
@@ -461,6 +464,7 @@ const CFDDashboard = (props: TCFDDashboardProps) => {
                             </div>
                         )}
                         <div className='cfd-dashboard__accounts-display'>
+                            <AcuityDownloadModal />
                             <CFDPasswordManagerModal
                                 is_visible={password_manager.is_visible}
                                 platform={platform}
@@ -522,6 +526,7 @@ const CFDDashboard = (props: TCFDDashboardProps) => {
                                                 residence={residence}
                                                 openDerivRealAccountNeededModal={openDerivRealAccountNeededModal}
                                                 should_enable_add_button={should_enable_add_button}
+                                                setIsAcuityModalOpen={setIsAcuityModalOpen}
                                             />
                                         </React.Fragment>
                                     </div>
@@ -724,5 +729,6 @@ export default withRouter(
         dxtrade_verification_code: client.verification_code.trading_platform_dxtrade_password_reset,
         mt5_status_server: client.website_status.mt5_status,
         openDerivRealAccountNeededModal: ui.openDerivRealAccountNeededModal,
+        setIsAcuityModalOpen: ui.setIsAcuityModalOpen,
     }))(CFDDashboard)
 );
diff --git a/packages/cfd/src/sass/cfd-dashboard.scss b/packages/cfd/src/sass/cfd-dashboard.scss
@@ -120,6 +120,41 @@
         }
     }
 
+    &__social-banner {
+        width: 100%;
+        background-color: var(--general-section-1);
+        opacity: 95%;
+        top: 0;
+        position: absolute;
+        z-index: 1;
+
+        &--close-icon {
+            position: absolute;
+            top: 16px;
+            right: 16px;
+        }
+
+        &--wrapper {
+            display: flex;
+            flex-direction: row;
+            gap: 2.4rem;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 0px;
+            margin-inline: 2.4rem;
+
+            &__image {
+                width: 160px;
+                height: 120px;
+            }
+
+            &__button {
+                float: right;
+                padding: 8px;
+            }
+        }
+    }
+
     &__download-container {
         border-top: 2px solid var(--general-section-1);
         padding-top: 2rem;
@@ -1057,6 +1092,22 @@
             }
         }
     }
+
+    &__acuity-banner {
+        background: var(--general-section-1);
+        height: 34px;
+        border-radius: 8px;
+        margin: 1.6rem;
+
+        &--wrapper {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 1.6rem;
+            padding: 0.8rem 2.65rem;
+        }
+    }
+
     &__divider {
         width: calc(100% - 3.2rem);
         margin-left: 1.6rem;

diff --git a/packages/cfd/src/sass/cfd.scss b/packages/cfd/src/sass/cfd.scss
@@ -176,6 +176,37 @@
     }
 }
 
+.acuity-download-modal {
+    &__body {
+        padding: 0rem 2.4rem 2.4rem;
+
+        &--image {
+            padding-bottom: 1.6rem;
+            text-align: center;
+        }
+
+        &--description {
+            padding: 0.8rem 0rem 1.6rem;
+        }
+
+        &--info {
+            display: flex;
+            flex-direction: row;
+            padding: 0.8rem;
+            gap: 0.8rem;
+            background-color: var(--transparent-info);
+
+            p {
+                width: 352px;
+            }
+        }
+        &--button {
+            text-align: center;
+            padding-top: 1.6rem;
+        }
+    }
+}
+
 .dc-modal__container_top-up-virtual {
     width: 384px;
     min-height: 367px;

diff --git a/packages/components/src/components/icon/common/ic-close-dark.svg b/packages/components/src/components/icon/common/ic-close-dark.svg
diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js
@@ -273,6 +273,7 @@ import './common/ic-clock-outline.svg';
 import './common/ic-clock.svg';
 import './common/ic-close-circle-red.svg';
 import './common/ic-close-circle.svg';
+import './common/ic-close-dark.svg';
 import './common/ic-close-light.svg';
 import './common/ic-cloud-upload.svg';
 import './common/ic-confirm-details.svg';
@@ -537,6 +538,7 @@ import './flag/ic-flag-uk.svg';
 import './flag/ic-flag-vi.svg';
 import './flag/ic-flag-zh-cn.svg';
 import './flag/ic-flag-zh-tw.svg';
+import './mt5/ic-mt5-acuity.svg';
 import './mt5/ic-mt5-cfd-platform.svg';
 import './mt5/ic-mt5-cfds.svg';
 import './mt5/ic-mt5-derived.svg';

diff --git a/packages/components/src/components/icon/mt5/ic-mt5-acuity.svg b/packages/components/src/components/icon/mt5/ic-mt5-acuity.svg
diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js
@@ -281,6 +281,7 @@ export const icons =
         'IcClock',
         'IcCloseCircleRed',
         'IcCloseCircle',
+        'IcCloseDark',
         'IcCloseLight',
         'IcCloudUpload',
         'IcConfirmDetails',
@@ -555,6 +556,7 @@ export const icons =
         'IcFlagZhTw',
     ],
     'mt5': [
+        'IcMt5Acuity',
         'IcMt5CfdPlatform',
         'IcMt5Cfds',
         'IcMt5Derived',

diff --git a/packages/core/src/App/Components/Elements/NotificationMessage/notification-banner.jsx b/packages/core/src/App/Components/Elements/NotificationMessage/notification-banner.jsx
@@ -4,7 +4,17 @@ import classNames from 'classnames';
 import { isMobile } from '@deriv/shared';
 import { Button, Icon, Text } from '@deriv/components';
 
-const NotificationBanner = ({ className, header, message, primary_btn, secondary_btn, img_src, img_alt, onClose }) => (
+const NotificationBanner = ({
+    className,
+    header,
+    message,
+    primary_btn,
+    secondary_btn,
+    img_src,
+    img_alt,
+    onClose,
+    icon,
+}) => (
     <div
         className={classNames('notification-banner', {
             [`notification-banner__${className}`]: className,
@@ -35,7 +45,7 @@ const NotificationBanner = ({ className, header, message, primary_btn, secondary
         <div className='notification-banner--right'>
             <div className='notification-banner__bg' />
             <img className='notification-banner__img' src={img_src} alt={img_alt} />
-            <Icon className='notification-banner__close-icon' icon='IcCloseLight' onClick={onClose} />
+            <Icon className='notification-banner__close-icon' icon={icon ?? 'IcCloseLight'} onClick={onClose} />
         </div>
     </div>
 );
@@ -52,6 +62,7 @@ NotificationBanner.propTypes = {
         text: PropTypes.string,
         onClick: PropTypes.func,
     }),
+    icon: PropTypes.string,
 };
 
 export default NotificationBanner;
diff --git a/packages/core/src/App/Components/Elements/NotificationMessage/notification.jsx b/packages/core/src/App/Components/Elements/NotificationMessage/notification.jsx
@@ -42,6 +42,7 @@ const Notification = ({ data, removeNotificationMessage }) => {
                     img_src={data.img_src}
                     img_alt={data.img_alt}
                     onClose={destroy}
+                    icon={data.icon}
                 />
             );
         case 'trustpilot':
@@ -176,6 +177,7 @@ Notification.propTypes = {
         img_src: PropTypes.string,
         is_auto_close: PropTypes.bool,
         key: PropTypes.string,
+        icon: PropTypes.string,
         message: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
         message_popup: PropTypes.string,
         primary_btn: PropTypes.object,