Matin/Aizad: Acuity Social Trading

packages/cfd/src/Components/cfd-account-card.tsx

@@ -175,17 +175,18 @@ const CFDAccountCardComponent = ({
     is_eu,
     isEligibleForMoreDemoMt5Svg,
     isEligibleForMoreRealMt5,
-    platform,
-    title,
-    type,
-    specs,
-    onSelectAccount,
     onClickFund,
     onPasswordManager,
+    onSelectAccount,
+    platform,
+    setIsAcuityModalOpen,
+    setMT5TradeAccount,
+    specs,
+    title,
     toggleAccountsDialog,
     toggleMT5TradeModal,
     toggleShouldShowRealAccountsList,
-    setMT5TradeAccount,
+    type,
 }: 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>
+                {platform === CFD_PLATFORMS.MT5 && type.type === 'financial' && !is_eu && !isMobile() && is_logged_in && (
+                    <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' } : {}}>
@@ -676,10 +693,11 @@ const CFDAccountCardComponent = ({
     );
 };
 
-const CFDAccountCard = connect(({ modules: { cfd }, client }: RootStore) => ({
+const CFDAccountCard = connect(({ modules: { cfd }, client, ui }: RootStore) => ({
     dxtrade_tokens: cfd.dxtrade_tokens,
     isEligibleForMoreDemoMt5Svg: client.isEligibleForMoreDemoMt5Svg,
     isEligibleForMoreRealMt5: client.isEligibleForMoreRealMt5,
+    setIsAcuityModalOpen: ui.setIsAcuityModalOpen,
     setMT5TradeAccount: cfd.setMT5TradeAccount,
 }))(CFDAccountCardComponent);
 

packages/cfd/src/Components/cfd-mt5-demo-account-display.tsx

@@ -107,7 +107,7 @@ const CFDMT5DemoAccountDisplay = ({
     }, [is_logged_in, is_eu, is_eu_country, residence, platform]);
 
     return (
-        <div className='cfd-demo-accounts-display' data-testid='dt_cfd_demo_accounts_display'>
+        <React.Fragment>
             {is_loading ? (
                 <Loading />
             ) : (
@@ -176,7 +176,7 @@ const CFDMT5DemoAccountDisplay = ({
                     )}
                 </div>
             )}
-        </div>
+        </React.Fragment>
     );
 };
 

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}
         />
     );
 

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 = {

packages/cfd/src/Containers/__tests__/cfd-dashboard.spec.tsx

@@ -142,6 +142,7 @@ describe('<CFDDashboard />', () => {
         onUnmount: jest.fn(),
         openAccountNeededModal: jest.fn(),
         openDerivRealAccountNeededModal: jest.fn(),
+        refreshNotifications: jest.fn(),
         openPasswordModal: jest.fn(),
         openTopUpModal: jest.fn(),
         platform: CFD_PLATFORMS.MT5,
@@ -179,6 +180,7 @@ describe('<CFDDashboard />', () => {
         ],
         setAccountType: jest.fn(),
         setCFDPasswordResetModal: jest.fn(),
+        setIsAcuityModalOpen: jest.fn(),
         setCurrentAccount: jest.fn(),
         standpoint: {
             financial_company: 'svg',

packages/cfd/src/Containers/cfd-dashboard.tsx

@@ -173,6 +173,8 @@ export type TCFDDashboardProps = RouteComponentProps & {
         getRealSyntheticAccountsExistingData: DetailsOfEachMT5Loginid[] | undefined
     ) => void;
     openDerivRealAccountNeededModal: () => void;
+    setIsAcuityModalOpen: (value: boolean) => void;
+    refreshNotifications: () => void;
 };
 
 const CFDDashboard = (props: TCFDDashboardProps) => {
@@ -200,6 +202,7 @@ const CFDDashboard = (props: TCFDDashboardProps) => {
     React.useEffect(() => {
         updateActiveIndex(getIndexToSet());
         openResetPassword();
+        props.refreshNotifications();
         props.onMount();
         return () => {
             props.onUnmount();
@@ -393,6 +396,7 @@ const CFDDashboard = (props: TCFDDashboardProps) => {
         getRealSyntheticAccountsExistingData,
         getRealFinancialAccountsExistingData,
         openDerivRealAccountNeededModal,
+        setIsAcuityModalOpen,
     } = props;
 
     const should_show_missing_real_account =
@@ -524,6 +528,7 @@ const CFDDashboard = (props: TCFDDashboardProps) => {
                                                 residence={residence}
                                                 openDerivRealAccountNeededModal={openDerivRealAccountNeededModal}
                                                 should_enable_add_button={should_enable_add_button}
+                                                setIsAcuityModalOpen={setIsAcuityModalOpen}
                                             />
                                         </React.Fragment>
                                     </div>
@@ -668,7 +673,7 @@ const CFDDashboard = (props: TCFDDashboardProps) => {
 };
 
 export default withRouter(
-    connect(({ client, modules, ui }: RootStore) => ({
+    connect(({ client, modules, notifications, ui }: RootStore) => ({
         beginRealSignupForMt5: modules.cfd.beginRealSignupForMt5,
         checkShouldOpenAccount: modules.cfd.checkShouldOpenAccount,
         country: client.account_settings.residence,
@@ -716,6 +721,7 @@ export default withRouter(
         NotificationMessages: ui.notification_messages_ui,
         onMount: modules.cfd.onMount,
         onUnmount: modules.cfd.onUnmount,
+        refreshNotifications: notifications.refreshNotifications,
         toggleAccountsDialog: ui.toggleAccountsDialog,
         toggleShouldShowRealAccountsList: ui.toggleShouldShowRealAccountsList,
         upgradeable_landing_companies: client.upgradeable_landing_companies,
@@ -728,5 +734,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)
 );

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: 1.6rem;
+            right: 1.6rem;
+        }
+
+        &--wrapper {
+            display: flex;
+            flex-direction: row;
+            gap: 2.4rem;
+            align-items: center;
+            justify-content: center;
+            padding: 0.8rem 0;
+            margin-inline: 2.4rem;
+
+            &__image {
+                width: 16rem;
+                height: 12rem;
+            }
+
+            &__button {
+                float: right;
+                padding: 0.8rem;
+            }
+        }
+    }
+
     &__download-container {
         border-top: 2px solid var(--general-section-1);
         padding-top: 2rem;
@@ -440,7 +475,7 @@
     grid-gap: 2.4rem;
     justify-content: center;
     padding-top: 2.4em;
-    height: 100%;
+    height: fit-content;
 
     @include mobile {
         display: flex;
@@ -451,12 +486,6 @@
     }
 }
 
-.cfd-demo-accounts-display .cfd-account-card__wrapper {
-    @include desktop {
-        height: auto;
-    }
-}
-
 .cfd-jurisdiction-card--synthetic,
 .cfd-jurisdiction-card--financial {
     border: solid 1px var(--border-normal);
@@ -698,11 +727,10 @@
         display: grid;
         grid-template-rows: 1fr;
         justify-content: center;
-        height: 100%;
+        height: fit-content;
 
         @include mobile {
             grid-template-rows: 1fr;
-            height: fit-content;
 
             &:not(:last-child) {
                 margin-bottom: 2.4rem;
@@ -1057,6 +1085,22 @@
             }
         }
     }
+
+    &__acuity-banner {
+        background: var(--general-section-1);
+        height: 3.4rem;
+        border-radius: 0.8rem;
+        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;

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';

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',

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;

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,