From c08c16012848b59e1a1abf4ba48dd992006d9700 Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <120543468+hamza-deriv@users.noreply.github.com>
Date: Wed, 18 Oct 2023 18:47:43 +0800
Subject: [PATCH] Hamza/cfds 1196/enable mt5 notification message (#10696)

* chore: update trade modal broker name + notifications content updated

* chore: updated boker name

* chore: notification popup for mt5 awareness

* chore: notification popup close on cta and change the color because of dark mode

* refactor: update the url and hardcoded values

* chore: revert the Broker Name changes
---
 .../mt5-notification-description.tsx          | 74 +++++++++----------
 .../mt5-notification/mt5-notification.scss    | 15 ++--
 .../mt5-notification/mt5-notification.tsx     |  8 +-
 .../Containers/app-notification-messages.jsx  |  1 +
 .../core/src/Stores/notification-store.js     |  5 +-
 packages/shared/src/utils/cfd/cfd.ts          |  3 +
 6 files changed, 52 insertions(+), 54 deletions(-)

diff --git a/packages/core/src/App/Containers/Modals/mt5-notification/mt5-notification-description.tsx b/packages/core/src/App/Containers/Modals/mt5-notification/mt5-notification-description.tsx
index 1ba514b12f80..469d6397c0eb 100644
--- a/packages/core/src/App/Containers/Modals/mt5-notification/mt5-notification-description.tsx
+++ b/packages/core/src/App/Containers/Modals/mt5-notification/mt5-notification-description.tsx
@@ -1,60 +1,52 @@
 import React from 'react';
 import { Text } from '@deriv/components';
 import { Localize } from '@deriv/translations';
+import { mt5_community_url } from '@deriv/shared';
 
-const MT5NotificationDescription = () => {
+type TMT5NotificationDescription = {
+    setMT5NotificationModal: (value: boolean) => void;
+};
+const MT5NotificationDescription = ({ setMT5NotificationModal }: TMT5NotificationDescription) => {
     return (
         <div className={'mt5-notification-modal-description'}>
-            <Text as='p' size='xs'>
-                <Localize i18n_default_text='Follow these simple steps to fix it:' />
-            </Text>
             <ol className='mt5-notification-list-container'>
-                <li className='mt5-notification-list-container-item'>
-                    <Text as='p' size='xs'>
-                        <Localize i18n_default_text='On your MT5 mobile app, delete your existing Deriv account:' />
-                    </Text>
-                    <ul>
-                        <li className='mt5-notification-list'>
-                            <Text as='p' size='xs'>
-                                <Localize
-                                    i18n_default_text='- iOS: Swipe left on the account and tap <0>Delete</0>.'
-                                    components={[<strong key={0} />]}
-                                />
-                            </Text>
-                        </li>
-                        <li className='mt5-notification-list'>
-                            <Text as='p' size='xs'>
-                                <Localize
-                                    i18n_default_text='- Android: Tap the account, open <0>Options</0>, and tap <0>Delete</0>.'
-                                    components={[<strong key={0} />]}
-                                />
-                            </Text>
-                        </li>
-                    </ul>
-                </li>
-                <li className='mt5-notification-list-container-item'>
+                <li className='mt5-notification-list'>
                     <Text as='p' size='xs'>
                         <Localize
-                            i18n_default_text='Search for the broker <0>Deriv Holdings (Guernsey) Limited</0> and select it.'
-                            components={[<strong key={0} />]}
+                            i18n_default_text='Log back in to MT5 after 7:30 GMT on 20 Oct 2023 if you’re having difficulty logging in to MT5 as we’re making some updates to our MT5 platform. <0>Follow these steps</0> to log back in to MT5.'
+                            components={[
+                                <a
+                                    className='mt5-notification-list__link'
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                    href={mt5_community_url}
+                                    key={0}
+                                    onClick={() => {
+                                        setMT5NotificationModal(false);
+                                    }}
+                                />,
+                            ]}
                         />
                     </Text>
                 </li>
-                <li className='mt5-notification-list-container-item'>
+                <li className='mt5-notification-list'>
                     <Text as='p' size='xs'>
-                        <Localize i18n_default_text='Re-add your MT5 account using the same log in credentials.' />
+                        <Localize
+                            i18n_default_text='If you need further assistance, let us know via <0>live chat</0>.'
+                            components={[
+                                <a
+                                    className='mt5-notification-list__link'
+                                    onClick={() => {
+                                        window.LC_API.open_chat_window();
+                                        setMT5NotificationModal(false);
+                                    }}
+                                    key={0}
+                                />,
+                            ]}
+                        />
                     </Text>
                 </li>
             </ol>
-            <Text as='p' size='xs'>
-                <Localize
-                    i18n_default_text='If this doesn’t work, uninstall and re-install the MT5 app. Then redo steps <0>2</0> and <0>3</0>.'
-                    components={[<strong key={0} />]}
-                />
-            </Text>
-            <Text as='p' size='xs' className='mt5-notification-list-contact'>
-                <Localize i18n_default_text='Need more help? Contact us through live chat for assistance.' />
-            </Text>
         </div>
     );
 };
diff --git a/packages/core/src/App/Containers/Modals/mt5-notification/mt5-notification.scss b/packages/core/src/App/Containers/Modals/mt5-notification/mt5-notification.scss
index edd1b80f08b0..5b7dd19d46dd 100644
--- a/packages/core/src/App/Containers/Modals/mt5-notification/mt5-notification.scss
+++ b/packages/core/src/App/Containers/Modals/mt5-notification/mt5-notification.scss
@@ -16,17 +16,16 @@
     }
 }
 .mt5-notification-list {
-    list-style: none;
+    list-style: disc;
+    margin-top: 0.4rem;
     &-container {
-        list-style: auto;
-        padding: 1.5rem;
+        padding-left: 1.5rem;
         font-size: 1.6rem;
         color: var(--text-general);
-        &-item {
-            list-style: decimal;
-        }
     }
-    &-contact {
-        margin-top: 1rem;
+    &__link {
+        color: var(--text-red);
+        cursor: pointer;
+        text-decoration: underline;
     }
 }
diff --git a/packages/core/src/App/Containers/Modals/mt5-notification/mt5-notification.tsx b/packages/core/src/App/Containers/Modals/mt5-notification/mt5-notification.tsx
index adec8a48f760..0c4e89e104fc 100644
--- a/packages/core/src/App/Containers/Modals/mt5-notification/mt5-notification.tsx
+++ b/packages/core/src/App/Containers/Modals/mt5-notification/mt5-notification.tsx
@@ -17,13 +17,13 @@ const MT5Notification = observer(() => {
                 <Modal
                     has_close_icon={false}
                     is_open={is_mt5_notification_modal_visible}
-                    title={localize('Trouble accessing Deriv MT5 on your mobile?')}
+                    title={localize('Deriv MT5: Your action is needed')}
                     toggleModal={clickHandler}
                     className='mt5-notification-modal'
                     width='510px'
                 >
                     <Modal.Body className='mt5-notification-modal-body'>
-                        <MT5NotificationDescription />
+                        <MT5NotificationDescription setMT5NotificationModal={setMT5NotificationModal} />
                     </Modal.Body>
                     <Modal.Footer has_separator>
                         <Button
@@ -41,7 +41,7 @@ const MT5Notification = observer(() => {
                 <MobileDialog
                     portal_element_id='modal_root'
                     wrapper_classname='mt5-notification-modal-description'
-                    title={localize('Trouble accessing Deriv MT5 on your mobile?')}
+                    title={localize('Deriv MT5: Your action is needed')}
                     visible={is_mt5_notification_modal_visible}
                     onClose={() => {
                         setMT5NotificationModal(false);
@@ -60,7 +60,7 @@ const MT5Notification = observer(() => {
                         </div>
                     }
                 >
-                    <MT5NotificationDescription />
+                    <MT5NotificationDescription setMT5NotificationModal={setMT5NotificationModal} />
                 </MobileDialog>
             </MobileWrapper>
         </React.Suspense>
diff --git a/packages/core/src/App/Containers/app-notification-messages.jsx b/packages/core/src/App/Containers/app-notification-messages.jsx
index 98dcceb5a2e7..531e809942df 100644
--- a/packages/core/src/App/Containers/app-notification-messages.jsx
+++ b/packages/core/src/App/Containers/app-notification-messages.jsx
@@ -118,6 +118,7 @@ const AppNotificationMessages = ({
                   'trustpilot',
                   'unwelcome',
                   'additional_kyc_info',
+                  'mt5_notification',
               ].includes(message.key) || message.type === 'p2p_completed_order'
             : true;
 
diff --git a/packages/core/src/Stores/notification-store.js b/packages/core/src/Stores/notification-store.js
index f0d1a644b32f..20327ded52e4 100644
--- a/packages/core/src/Stores/notification-store.js
+++ b/packages/core/src/Stores/notification-store.js
@@ -545,6 +545,9 @@ export default class NotificationStore extends BaseStore {
                     this.addNotificationMessage(this.client_notifications.svg_poi_expired);
                 }
             }
+            if (client && this.root_store.client.mt5_login_list.length > 0) {
+                this.addNotificationMessage(this.client_notifications.mt5_notification);
+            }
         }
 
         if (!is_eu && isMultiplierContract(selected_contract_type) && current_language === 'EN' && is_logged_in) {
@@ -1430,7 +1433,7 @@ export default class NotificationStore extends BaseStore {
             },
             mt5_notification: {
                 key: 'mt5_notification',
-                header: localize('Trouble accessing Deriv MT5 on your mobile?'),
+                header: localize('Deriv MT5: Your action is needed'),
                 message: localize('Follow these simple instructions to fix it.'),
                 action: {
                     text: localize('Learn more'),
diff --git a/packages/shared/src/utils/cfd/cfd.ts b/packages/shared/src/utils/cfd/cfd.ts
index 2c3f03474c41..5f9fa5bbbd10 100644
--- a/packages/shared/src/utils/cfd/cfd.ts
+++ b/packages/shared/src/utils/cfd/cfd.ts
@@ -462,3 +462,6 @@ export const getAuthenticationStatusInfo = (account_status: GetAccountStatus): T
         is_idv_revoked,
     };
 };
+
+export const mt5_community_url =
+    'https://community.deriv.com/t/log-in-using-mt5-pc-or-mobile-app-application-guideline/49622';