thisyahlen/fix: add back notifications in traders hub (#7603)

* fix: add back notifications in traders hub

* fix: notification blinking

* fix: move notifications up a bit in traders hub

---------

Co-authored-by: Jim Daniels Wasswa <104334373+jim-deriv@users.noreply.github.com>

packages/appstore/src/modules/traders-hub/index.tsx

@@ -15,7 +15,8 @@ import classNames from 'classnames';
 import './traders-hub.scss';
 
 const TradersHub = () => {
-    const { traders_hub, client } = useStores();
+    const { traders_hub, client, ui } = useStores();
+    const { notification_messages_ui: Notifications } = ui;
     const { is_landing_company_loaded, is_logged_in } = client;
     const { selected_platform_type, setTogglePlatformType, is_tour_open, content_flag, is_eu_user } = traders_hub;
     const traders_hub_ref = React.useRef() as React.MutableRefObject<HTMLDivElement>;
@@ -79,6 +80,7 @@ const TradersHub = () => {
                 height_offset='50px'
                 is_disabled={isDesktop()}
             >
+                <Notifications />
                 <div id='traders-hub' className='traders-hub' ref={traders_hub_ref}>
                     <MainTitleBar />
                     <DesktopWrapper>

packages/core/src/App/Containers/app-notification-messages.jsx

@@ -10,13 +10,15 @@ import Notification, {
     max_display_notifications_mobile,
 } from '../Components/Elements/NotificationMessage';
 import 'Sass/app/_common/components/app-notification-message.scss';
+import classNames from 'classnames';
 
 const Portal = ({ children }) =>
     isMobile() ? ReactDOM.createPortal(children, document.getElementById('deriv_app')) : children;
 
 const NotificationsContent = ({
     is_notification_loaded,
     style,
+    is_pre_appstore,
     notifications,
     removeNotificationMessage,
     markNotificationMessage,
@@ -41,11 +43,16 @@ const NotificationsContent = ({
     }, [window_location]);
 
     return (
-        <div className='notification-messages' style={style}>
+        <div
+            className={classNames('notification-messages', {
+                'notification-messages--traders-hub': is_pre_appstore,
+            })}
+            style={style}
+        >
             <TransitionGroup component='div'>
                 {notifications.map(notification => (
                     <CSSTransition
-                        appear={!is_notification_loaded}
+                        appear={!!is_notification_loaded}
                         key={notification.key}
                         in={!!notification.header}
                         timeout={150}
@@ -68,6 +75,7 @@ const NotificationsContent = ({
 const AppNotificationMessages = ({
     is_notification_loaded,
     is_mt5,
+    is_pre_appstore,
     marked_notifications,
     notification_messages,
     removeNotificationMessage,
@@ -158,6 +166,7 @@ const AppNotificationMessages = ({
                     has_iom_account={has_iom_account}
                     has_malta_account={has_malta_account}
                     is_logged_in={is_logged_in}
+                    is_pre_appstore={is_pre_appstore}
                 />
             </Portal>
         </div>
@@ -196,6 +205,7 @@ AppNotificationMessages.propTypes = {
     removeNotificationMessage: PropTypes.func,
     should_show_popups: PropTypes.bool,
     stopNotificationLoading: PropTypes.func,
+    is_pre_appstore: PropTypes.bool,
 };
 
 export default connect(({ client, notifications }) => ({
@@ -208,4 +218,5 @@ export default connect(({ client, notifications }) => ({
     has_malta_account: client.has_malta_account,
     is_logged_in: client.is_logged_in,
     should_show_popups: notifications.should_show_popups,
+    is_pre_appstore: client.is_pre_appstore,
 }))(AppNotificationMessages);

packages/core/src/sass/app/_common/components/app-notification-message.scss

@@ -16,6 +16,10 @@
         left: 1.6rem;
         right: 1.6rem;
     }
+
+    &--traders-hub {
+        margin: 1rem 1rem 0 0;
+    }
 }
 
 /** @define notification; weak */