[DTRA] henry/dtra-1448/enable-landscape-blocker-dtrader (#16119)

* fix: test

* fix: show blocker for dtrader mobile landscape view

* fix: add console log for browserstack

* fix: remove logic that was blocking on tablet

* fix: remove console log

* fix: console.log

* fix: remove ipad from checking for mobileOS

* fix: add checkfor android mobile check

* fix: console log useragent

* fix: put exclusive check for mobile when os is android

* fix: remove console log

* fix: remove mobile from regex

* fix: change link filtering logic

* fix: add blocker for reports and contract details

* fix: add blocker for reports and contract details

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

@@ -1,21 +1,32 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
-import { isDisabledLandscapeBlockerRoute, isTabletOs, routes } from '@deriv/shared';
+import { isDisabledLandscapeBlockerRoute, isMobileOs, isTabletOs, routes } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import LandscapeBlockerSvg from 'Assets/SvgComponents/settings/landscape-blocker.svg';
 import './landscape-blocker.scss';
+import { useDevice } from '@deriv-com/ui';
 
 const LandscapeBlocker = observer(() => {
     // need to check for wallet account and don't hide landscape blocker for users migrated to wallets
     const {
         client: { has_wallet },
     } = useStore();
+    const { isMobile } = useDevice();
     const location = useLocation();
     const pathname = location?.pathname;
     const is_hidden_landscape_blocker = isDisabledLandscapeBlockerRoute(pathname);
     const shouldShowDtraderTabletView = pathname === routes.trade && isTabletOs;
+    const showBlockerDtraderMobileLandscapeView =
+        !isMobile &&
+        isMobileOs() &&
+        (pathname.startsWith(routes.trade) || pathname.startsWith(routes.reports || pathname.startsWith('/contract/')));
 
-    if (!has_wallet && (is_hidden_landscape_blocker || shouldShowDtraderTabletView)) return null;
+    if (
+        !has_wallet &&
+        !showBlockerDtraderMobileLandscapeView &&
+        (is_hidden_landscape_blocker || shouldShowDtraderTabletView)
+    )
+        return null;
 
     return (
         <div id='landscape_blocker' className='landscape-blocker'>

packages/shared/src/utils/os/os_detect.ts

@@ -58,7 +58,8 @@ export const isDesktopOs = () => {
 };
 
 export const isMobileOs = () =>
-    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    (/android/i.test(navigator.userAgent.toLowerCase()) && /mobile/i.test(navigator.userAgent.toLowerCase())) ||
+    /webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 
 export const isTabletOs =
     /ipad|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase()) ||