[DTRA] henry/webrel-3029/hotfix: hide recent positions modal and show…

… landscape blocker for contract details and reports (#16220) * fix: hide recent positions modal and show landscape blocker for contract details and reports * fix: snakecase
binary-com · Jul 26, 2024 · d84a0d6 · d84a0d6
1 parent d3b11bd
commit d84a0d6
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 45 deletions.
diff --git a/packages/core/src/App/Components/Elements/LandscapeBlocker/landscape-blocker.tsx b/packages/core/src/App/Components/Elements/LandscapeBlocker/landscape-blocker.tsx
@@ -15,16 +15,16 @@ const LandscapeBlocker = observer(() => {
     const location = useLocation();
     const pathname = location?.pathname;
     const is_hidden_landscape_blocker = isDisabledLandscapeBlockerRoute(pathname);
-    const shouldShowDtraderTabletView = pathname === routes.trade && isTabletOs;
-    const showBlockerDtraderMobileLandscapeView =
+    const should_show_dtrader_tablet_view = pathname === routes.trade && isTabletOs;
+    const show_blocker_dtrader_mobile_landscape_view =
         !isMobile &&
         isMobileOs() &&
-        (pathname.startsWith(routes.trade) || pathname.startsWith(routes.reports || pathname.startsWith('/contract/')));
+        (pathname.startsWith(routes.trade) || pathname.startsWith(routes.reports) || pathname.startsWith('/contract'));
 
     if (
         !has_wallet &&
-        !showBlockerDtraderMobileLandscapeView &&
-        (is_hidden_landscape_blocker || shouldShowDtraderTabletView)
+        !show_blocker_dtrader_mobile_landscape_view &&
+        (is_hidden_landscape_blocker || should_show_dtrader_tablet_view)
     )
         return null;
 

diff --git a/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.tsx b/packages/trader/src/App/Components/Elements/TogglePositions/toggle-positions-mobile.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { Icon, Div100vhContainer, Modal, Text } from '@deriv/components';
-import { routes } from '@deriv/shared';
+import { isDisabledLandscapeBlockerRoute, isMobileOs, isTabletOs, routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import EmptyPortfolioMessage from '../EmptyPortfolioMessage';
 import PositionsModalCard from 'App/Components/Elements/PositionsDrawer/positions-modal-card';
 import TogglePositions from './toggle-positions';
@@ -32,9 +32,27 @@ const TogglePositionsMobile = observer(
         onClickCancel,
     }: TTogglePositionsMobile) => {
         const { togglePositionsDrawer, is_positions_drawer_on } = useStore().ui;
+        const { has_wallet } = useStore().client;
         const [hidden_positions_ids, setHiddenPositionsIds] = React.useState<THiddenPositionsId[]>([]);
         const { isMobile, isTablet } = useDevice();
 
+        const location = useLocation();
+        const pathname = location?.pathname;
+        const is_hidden_landscape_blocker = isDisabledLandscapeBlockerRoute(pathname);
+        const should_show_dtrader_tablet_view = pathname === routes.trade && isTabletOs;
+
+        const show_blocker_dtrader_mobile_landscape_view =
+            !isMobile &&
+            isMobileOs() &&
+            (pathname.startsWith(routes.trade) ||
+                pathname.startsWith(routes.reports) ||
+                pathname.startsWith('/contract'));
+
+        const hide_landscape_blocker =
+            !has_wallet &&
+            !show_blocker_dtrader_mobile_landscape_view &&
+            (is_hidden_landscape_blocker || should_show_dtrader_tablet_view);
+
         const displayed_positions = filtered_positions
             .filter(p =>
                 hidden_positions_ids.every(hidden_position_id => hidden_position_id !== p.contract_info.contract_id)
@@ -87,45 +105,47 @@ const TogglePositionsMobile = observer(
                     togglePositions={togglePositionsDrawer}
                     positions_count={active_positions_count}
                 />
-                <Modal
-                    is_open={is_positions_drawer_on}
-                    toggleModal={closeModal}
-                    id='dt_mobile_positions'
-                    is_vertical_top
-                    has_close_icon
-                    width={isMobile ? 'calc(100vw - 32px)' : undefined}
-                    className='toggle-positions'
-                >
-                    <Div100vhContainer className='positions-modal' height_offset={isTablet ? '16rvh' : '48px'}>
-                        <div className='positions-modal__header'>
-                            <Text size='xxxs' className='positions-modal__title'>
-                                <Icon icon='IcPortfolio' className='positions-modal__title-icon' />
-                                {localize('Recent positions')}
-                            </Text>
-                            <div className='positions-modal__close-btn' onClick={closeModal}>
-                                <Icon data_testid='dt_modal_header_close' icon='IcMinusBold' />
-                            </div>
-                        </div>
-                        <div className='positions-modal__body'>
-                            {is_empty || !displayed_positions.length || error ? (
-                                <EmptyPortfolioMessage error={error} />
-                            ) : (
-                                body_content
-                            )}
-                        </div>
-                        <div className='positions-modal__footer'>
-                            <NavLink
-                                onClick={closeModal}
-                                className='dc-btn dc-btn--secondary dc-btn__large positions-modal__footer-btn'
-                                to={routes.positions}
-                            >
-                                <Text size='xs' weight='bold'>
-                                    {localize('Go to Reports')}
+                {hide_landscape_blocker && (
+                    <Modal
+                        is_open={is_positions_drawer_on}
+                        toggleModal={closeModal}
+                        id='dt_mobile_positions'
+                        is_vertical_top
+                        has_close_icon
+                        width={isMobile ? 'calc(100vw - 32px)' : undefined}
+                        className='toggle-positions'
+                    >
+                        <Div100vhContainer className='positions-modal' height_offset={isTablet ? '16rvh' : '48px'}>
+                            <div className='positions-modal__header'>
+                                <Text size='xxxs' className='positions-modal__title'>
+                                    <Icon icon='IcPortfolio' className='positions-modal__title-icon' />
+                                    {localize('Recent positions')}
                                 </Text>
-                            </NavLink>
-                        </div>
-                    </Div100vhContainer>
-                </Modal>
+                                <div className='positions-modal__close-btn' onClick={closeModal}>
+                                    <Icon data_testid='dt_modal_header_close' icon='IcMinusBold' />
+                                </div>
+                            </div>
+                            <div className='positions-modal__body'>
+                                {is_empty || !displayed_positions.length || error ? (
+                                    <EmptyPortfolioMessage error={error} />
+                                ) : (
+                                    body_content
+                                )}
+                            </div>
+                            <div className='positions-modal__footer'>
+                                <NavLink
+                                    onClick={closeModal}
+                                    className='dc-btn dc-btn--secondary dc-btn__large positions-modal__footer-btn'
+                                    to={routes.positions}
+                                >
+                                    <Text size='xs' weight='bold'>
+                                        {localize('Go to Reports')}
+                                    </Text>
+                                </NavLink>
+                            </div>
+                        </Div100vhContainer>
+                    </Modal>
+                )}
             </React.Fragment>
         );
     }