Farhan/Lock Dtrader Tablet View on Landscape Mode

packages/core/src/App/AppContent.tsx

@@ -20,6 +20,7 @@ import AppModals from './Containers/Modals';
 import PlatformContainer from './Containers/PlatformContainer/PlatformContainer.jsx';
 import Routes from './Containers/Routes/routes.jsx';
 import Devtools from './Devtools';
+import LandscapeBlocker from './Components/Elements/LandscapeBlocker';
 import initDatadog from '../Utils/Datadog';
 
 const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough }) => {
@@ -72,6 +73,7 @@ const AppContent: React.FC<{ passthrough: unknown }> = observer(({ passthrough }
 
     return (
         <PlatformContainer>
+            <LandscapeBlocker />
             <Header />
             <ErrorBoundary root_store={store}>
                 <AppContents>

packages/core/src/App/Components/Elements/LandscapeBlocker/index.ts

@@ -0,0 +1,3 @@
+import LandscapeBlocker from './landscape-blocker';
+
+export default LandscapeBlocker;

packages/core/src/App/Components/Elements/LandscapeBlocker/landscape-blocker.scss

@@ -0,0 +1,50 @@
+.landscape-blocker {
+    /* enable temporary landscape blocker UI in landscape */
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    background: var(--general-main-1);
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: var(--text-prominent);
+    font-size: 1.6rem;
+    z-index: 9999;
+    font-weight: bold;
+    gap: 2.4rem;
+
+    &__icon {
+        width: 8rem;
+        height: 6.2rem;
+    }
+    &__message {
+        padding: 1.6rem 11rem;
+        &--landscape {
+            @media screen and (orientation: portrait) {
+                display: none;
+            }
+        }
+
+        &--portrait {
+            text-align: center;
+            line-height: var(--text-lh-m);
+            @media screen and (orientation: landscape) {
+                display: none;
+            }
+        }
+    }
+
+    @include desktop-screen {
+        display: none;
+    }
+
+    @include mobile-screen {
+        @media screen and (max-aspect-ratio: 13/9) {
+            display: none;
+        }
+    }
+}

packages/core/src/App/Components/Elements/LandscapeBlocker/landscape-blocker.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { isDisabledLandscapeRoute, isTabletOs, routes } from '@deriv/shared';
+import './landscape-blocker.scss';
+
+const LandscapeBlocker = () => {
+    const location = useLocation();
+    const pathname = location?.pathname;
+    const is_hidden_landscape_blocker = isDisabledLandscapeRoute(pathname);
+    const shouldShowDtraderTabletView = pathname === routes.trade && isTabletOs;
+
+    if (is_hidden_landscape_blocker || shouldShowDtraderTabletView) return null;
+
+    return (
+        <div id='landscape_blocker' className='landscape-blocker'>
+            <div className='landscape-blocker__icon'>
+                <svg xmlns='http://www.w3.org/2000/svg' width='80' height='62' fill='none'>
+                    <path
+                        fill='#85ACB0'
+                        d='M52.308 62H9.23a9.204 9.204 0 0 1-6.524-2.727A9.345 9.345 0 0 1 0 52.7V9.3a9.344 9.344 0 0 1 2.707-6.573A9.205 9.205 0 0 1 9.23 0h61.538a9.204 9.204 0 0 1 6.524 2.727A9.345 9.345 0 0 1 80 9.3v24.8a3.104 3.104 0 0 1-1.538 2.685 3.058 3.058 0 0 1-3.077 0 3.104 3.104 0 0 1-1.539-2.685V9.3a3.117 3.117 0 0 0-.902-2.19 3.07 3.07 0 0 0-2.175-.91H9.231a3.07 3.07 0 0 0-2.175.91 3.116 3.116 0 0 0-.902 2.19v43.4c.001.822.325 1.61.902 2.19a3.07 3.07 0 0 0 2.175.91h43.077c1.1 0 2.115.59 2.664 1.55.55.959.55 2.14 0 3.1A3.073 3.073 0 0 1 52.308 62Z'
+                    />
+                    <path
+                        fill='#FF444F'
+                        d='M76.923 62H64.615c-1.1 0-2.115-.592-2.664-1.55a3.121 3.121 0 0 1 0-3.1 3.073 3.073 0 0 1 2.664-1.55h9.231v-9.3c0-1.109.587-2.132 1.539-2.686a3.058 3.058 0 0 1 3.076 0A3.104 3.104 0 0 1 80 46.5v12.4c0 .822-.324 1.611-.901 2.192a3.066 3.066 0 0 1-2.176.908ZM52.352 31.045h12.307c1.1 0 2.116.59 2.665 1.55.55.96.55 2.14 0 3.1a3.072 3.072 0 0 1-2.665 1.55h-9.23v9.3a3.104 3.104 0 0 1-1.539 2.685 3.058 3.058 0 0 1-3.077 0 3.104 3.104 0 0 1-1.538-2.685v-12.4c0-.822.324-1.61.9-2.192a3.066 3.066 0 0 1 2.177-.908Z'
+                    />
+                    <path
+                        fill='#85ACB0'
+                        d='M33.846 18.6H3.077c-1.1 0-2.115-.591-2.665-1.55-.55-.96-.55-2.141 0-3.1a3.073 3.073 0 0 1 2.665-1.55h30.77a3.07 3.07 0 0 0 2.174-.91 3.117 3.117 0 0 0 .902-2.19V3.1c0-1.108.587-2.131 1.539-2.685a3.058 3.058 0 0 1 3.076 0A3.104 3.104 0 0 1 43.078 3.1v6.2a9.344 9.344 0 0 1-2.707 6.573 9.205 9.205 0 0 1-6.524 2.727Z'
+                    />
+                    <path
+                        fill='#FF444F'
+                        d='M76.923 62a3.055 3.055 0 0 1-2.175-.909L54.66 40.852c-.755-.787-1.042-1.917-.755-2.973a3.092 3.092 0 0 1 2.154-2.17c1.048-.29 2.17 0 2.951.76l20.088 20.24a3.114 3.114 0 0 1 0 4.384 3.064 3.064 0 0 1-2.175.907Z'
+                    />
+                </svg>
+            </div>
+            <div className='landscape-blocker__message--landscape'>
+                Please adjust your screen size for optimal viewing.
+            </div>
+            <div className='landscape-blocker__message--portrait'>
+                Please adjust your <br />
+                screen size for <br />
+                optimal viewing.
+            </div>
+        </div>
+    );
+};
+
+export default LandscapeBlocker;

packages/core/src/App/Components/Layout/Header/toggle-notifications.jsx

@@ -1,8 +1,9 @@
 import classNames from 'classnames';
 import React from 'react';
-import { Counter, DesktopWrapper, Icon, MobileWrapper, Popover } from '@deriv/components';
+import { Counter, Icon, Popover } from '@deriv/components';
 import NotificationsDialog from 'App/Containers/NotificationsDialog';
 import 'Sass/app/modules/notifications-dialog.scss';
+import { useDevice } from '@deriv-com/ui';
 
 const ToggleNotificationsDrawer = ({
     count,
@@ -11,6 +12,7 @@ const ToggleNotificationsDrawer = ({
     tooltip_message,
     should_disable_pointer_events = false,
 }) => {
+    const { isMobile } = useDevice();
     const notifications_toggler_el = (
         <div
             className={classNames('notifications-toggle__icon-wrapper', {
@@ -23,28 +25,35 @@ const ToggleNotificationsDrawer = ({
         </div>
     );
 
+    if (isMobile) {
+        return (
+            <div
+                className={classNames('notifications-toggle', {
+                    'notifications-toggle--active': is_visible,
+                })}
+            >
+                {notifications_toggler_el}
+                <NotificationsDialog is_visible={is_visible} toggleDialog={toggleDialog} />
+            </div>
+        );
+    }
+
     return (
         <div
             className={classNames('notifications-toggle', {
                 'notifications-toggle--active': is_visible,
             })}
         >
-            <DesktopWrapper>
-                <Popover
-                    classNameBubble='notifications-toggle__tooltip'
-                    alignment='bottom'
-                    message={tooltip_message}
-                    should_disable_pointer_events={should_disable_pointer_events}
-                    zIndex={9999}
-                >
-                    {notifications_toggler_el}
-                </Popover>
-                <NotificationsDialog is_visible={is_visible} toggleDialog={toggleDialog} />
-            </DesktopWrapper>
-            <MobileWrapper>
+            <Popover
+                classNameBubble='notifications-toggle__tooltip'
+                alignment='bottom'
+                message={tooltip_message}
+                should_disable_pointer_events={should_disable_pointer_events}
+                zIndex={9999}
+            >
                 {notifications_toggler_el}
-                <NotificationsDialog is_visible={is_visible} toggleDialog={toggleDialog} />
-            </MobileWrapper>
+            </Popover>
+            <NotificationsDialog is_visible={is_visible} toggleDialog={toggleDialog} />
         </div>
     );
 };

packages/core/src/App/Containers/NotificationsDialog/__tests__/notifications-dialog.spec.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
-import { isDesktop, isMobile } from '@deriv/shared';
 import { StoreProvider, mockStore } from '@deriv/stores';
 import { render, screen } from '@testing-library/react';
 import NotificationsDialog from '../notifications-dialog';
+import { useDevice } from '@deriv-com/ui';
 
 jest.mock('react-transition-group', () => ({ CSSTransition: () => 'MockedCSSTransition' }));
 jest.mock('@deriv/components', () => ({
     ...jest.requireActual('@deriv/components'),
     MobileDialog: () => 'MockedMobileDialog',
 }));
-jest.mock('@deriv/shared', () => ({
-    ...jest.requireActual('@deriv/shared'),
-    isDesktop: jest.fn(() => true),
-    isMobile: jest.fn(() => false),
+jest.mock('@deriv-com/ui', () => ({
+    useDevice: jest.fn(() => ({ isMobile: false })),
 }));
 
 describe('NotificationsDialog', () => {
@@ -50,8 +48,7 @@ describe('NotificationsDialog', () => {
     });
 
     it('should render the component MobileDialog in mobile mode', () => {
-        (isDesktop as jest.Mock).mockReturnValue(false);
-        (isMobile as jest.Mock).mockReturnValue(true);
+        (useDevice as jest.Mock).mockReturnValue({ isMobile: true });
         renderComponent();
         expect(screen.getByText('MockedMobileDialog')).toBeInTheDocument();
         expect(screen.queryByText('MockedCSSTransition')).not.toBeInTheDocument();

packages/core/src/App/Containers/NotificationsDialog/notifications-dialog.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
-import { DesktopWrapper, MobileDialog, MobileWrapper, useOnClickOutside } from '@deriv/components';
+import { MobileDialog, useOnClickOutside } from '@deriv/components';
 import { LocalStore } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
 import NotificationListWrapper from './notification-list-wrapper';
+import { useDevice } from '@deriv-com/ui';
 
 const NotificationsDialog = observer(() => {
     const { client, notifications } = useStore();
@@ -19,6 +20,7 @@ const NotificationsDialog = observer(() => {
     } = notifications;
 
     const wrapper_ref = React.useRef<HTMLDivElement>(null);
+    const { isMobile } = useDevice();
 
     const handleClickOutside = (event: MouseEvent) => {
         const notifications_toggle_btn = !(event?.target as Element)?.classList.contains(
@@ -52,34 +54,33 @@ const NotificationsDialog = observer(() => {
 
     useOnClickOutside(wrapper_ref, handleClickOutside);
 
+    if (isMobile) {
+        return (
+            <MobileDialog
+                portal_element_id='modal_root'
+                title={<Localize i18n_default_text='Notifications' />}
+                wrapper_classname='notifications-mobile-dialog'
+                visible={is_notifications_visible}
+                onClose={toggleNotificationsModal}
+            >
+                <NotificationListWrapper clearNotifications={clearNotifications} ref={wrapper_ref} />
+            </MobileDialog>
+        );
+    }
+
     return (
-        <React.Fragment>
-            <MobileWrapper>
-                <MobileDialog
-                    portal_element_id='modal_root'
-                    title={<Localize i18n_default_text='Notifications' />}
-                    wrapper_classname='notifications-mobile-dialog'
-                    visible={is_notifications_visible}
-                    onClose={toggleNotificationsModal}
-                >
-                    <NotificationListWrapper clearNotifications={clearNotifications} ref={wrapper_ref} />
-                </MobileDialog>
-            </MobileWrapper>
-            <DesktopWrapper>
-                <CSSTransition
-                    in={is_notifications_visible}
-                    classNames={{
-                        enter: 'notifications-dialog--enter',
-                        enterDone: 'notifications-dialog--enter-done',
-                        exit: 'notifications-dialog--exit',
-                    }}
-                    timeout={150}
-                    unmountOnExit
-                >
-                    <NotificationListWrapper clearNotifications={clearNotifications} ref={wrapper_ref} />
-                </CSSTransition>
-            </DesktopWrapper>
-        </React.Fragment>
+        <CSSTransition
+            in={is_notifications_visible}
+            classNames={{
+                enter: 'notifications-dialog--enter',
+                enterDone: 'notifications-dialog--enter-done',
+                exit: 'notifications-dialog--exit',
+            }}
+            timeout={150}
+            unmountOnExit
+        >
+            <NotificationListWrapper clearNotifications={clearNotifications} ref={wrapper_ref} />
+        </CSSTransition>
     );
 });
 

packages/core/src/index.html

@@ -250,37 +250,6 @@
         <div id="modal_root_absolute" class="modal-root modal-root--absolute"></div>
         <!-- modal_root has background color. So, it cannot be used for toast messages. For those cases popup_root is used -->
         <div id="popup_root" class="popup-root"></div>
-        <!-- Temporary Mobile Landscape UI Blocker -->
-        <div id="landscape_blocker" class="landscape-blocker">
-            <div class="landscape-blocker__icon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="80" height="62" fill="none">
-                    <path
-                        fill="#85ACB0"
-                        d="M52.308 62H9.23a9.204 9.204 0 0 1-6.524-2.727A9.345 9.345 0 0 1 0 52.7V9.3a9.344 9.344 0 0 1 2.707-6.573A9.205 9.205 0 0 1 9.23 0h61.538a9.204 9.204 0 0 1 6.524 2.727A9.345 9.345 0 0 1 80 9.3v24.8a3.104 3.104 0 0 1-1.538 2.685 3.058 3.058 0 0 1-3.077 0 3.104 3.104 0 0 1-1.539-2.685V9.3a3.117 3.117 0 0 0-.902-2.19 3.07 3.07 0 0 0-2.175-.91H9.231a3.07 3.07 0 0 0-2.175.91 3.116 3.116 0 0 0-.902 2.19v43.4c.001.822.325 1.61.902 2.19a3.07 3.07 0 0 0 2.175.91h43.077c1.1 0 2.115.59 2.664 1.55.55.959.55 2.14 0 3.1A3.073 3.073 0 0 1 52.308 62Z"
-                    />
-                    <path
-                        fill="#FF444F"
-                        d="M76.923 62H64.615c-1.1 0-2.115-.592-2.664-1.55a3.121 3.121 0 0 1 0-3.1 3.073 3.073 0 0 1 2.664-1.55h9.231v-9.3c0-1.109.587-2.132 1.539-2.686a3.058 3.058 0 0 1 3.076 0A3.104 3.104 0 0 1 80 46.5v12.4c0 .822-.324 1.611-.901 2.192a3.066 3.066 0 0 1-2.176.908ZM52.352 31.045h12.307c1.1 0 2.116.59 2.665 1.55.55.96.55 2.14 0 3.1a3.072 3.072 0 0 1-2.665 1.55h-9.23v9.3a3.104 3.104 0 0 1-1.539 2.685 3.058 3.058 0 0 1-3.077 0 3.104 3.104 0 0 1-1.538-2.685v-12.4c0-.822.324-1.61.9-2.192a3.066 3.066 0 0 1 2.177-.908Z"
-                    />
-                    <path
-                        fill="#85ACB0"
-                        d="M33.846 18.6H3.077c-1.1 0-2.115-.591-2.665-1.55-.55-.96-.55-2.141 0-3.1a3.073 3.073 0 0 1 2.665-1.55h30.77a3.07 3.07 0 0 0 2.174-.91 3.117 3.117 0 0 0 .902-2.19V3.1c0-1.108.587-2.131 1.539-2.685a3.058 3.058 0 0 1 3.076 0A3.104 3.104 0 0 1 43.078 3.1v6.2a9.344 9.344 0 0 1-2.707 6.573 9.205 9.205 0 0 1-6.524 2.727Z"
-                    />
-                    <path
-                        fill="#FF444F"
-                        d="M76.923 62a3.055 3.055 0 0 1-2.175-.909L54.66 40.852c-.755-.787-1.042-1.917-.755-2.973a3.092 3.092 0 0 1 2.154-2.17c1.048-.29 2.17 0 2.951.76l20.088 20.24a3.114 3.114 0 0 1 0 4.384 3.064 3.064 0 0 1-2.175.907Z"
-                    />
-                </svg>
-            </div>
-            <!-- Since its temporary blocker and landscape will be designed with multilingual support, we can ignore localization for text below -->
-            <div class="landscape-blocker__message--landscape">Please adjust your screen size for optimal viewing.</div>
-            <div class="landscape-blocker__message--portrait">
-                Please adjust your <br />
-                screen size for <br />
-                optimal viewing.
-            </div>
-        </div>
-        <!-- End Temporary Mobile Landscape UI Blocker -->
         <!-- LiveChat script -->
         <script type="text/javascript">
             window.__lc = window.__lc || {};

packages/core/src/sass/app/_common/layout/app-layouts.scss

@@ -93,56 +93,6 @@
     }
 }
 
-/** @define landscape-blocker; weak */
-.landscape-blocker {
-    /* enable temporary landscape blocker UI in landscape */
-    display: flex;
-    position: fixed;
-    top: 0;
-    left: 0;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    background: var(--general-main-1);
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    color: var(--text-prominent);
-    font-size: 1.6rem;
-    z-index: 9999;
-    font-weight: bold;
-    gap: 2.4rem;
-
-    &__icon {
-        width: 8rem;
-        height: 6.2rem;
-    }
-    &__message {
-        padding: 1.6rem 11rem;
-        &--landscape {
-            @media screen and (orientation: portrait) {
-                display: none;
-            }
-        }
-
-        &--portrait {
-            text-align: center;
-            line-height: var(--text-lh-m);
-            @media screen and (orientation: landscape) {
-                display: none;
-            }
-        }
-    }
-
-    @include desktop {
-        display: none;
-    }
-
-    @include mobile-screen {
-        display: none;
-    }
-}
-
 /** @define app-contents; weak */
 .app-contents {
     margin: $HEADER_HEIGHT 0 $FOOTER_HEIGHT;