Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TRAH-4715/show_account_settings_header_when_redirected_from_low_Code_to_account_settings_high_sode #17878

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+363 −44
Open

TRAH-4715/show_account_settings_header_when_redirected_from_low_Code_to_account_settings_high_sode #17878

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dc90af2
fix: header
amina-deriv Dec 23, 2024
54f31b0
fix: header
amina-deriv Dec 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion packages/components/src/components/mobile-drawer/mobile-drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,9 @@
position: relative;
overflow: hidden;
background-color: var(--general-main-2);
box-shadow: 0 16px 16px 0 var(--shadow-menu), 0 0 16px 0 var(--shadow-menu);
box-shadow:
0 16px 16px 0 var(--shadow-menu),
0 0 16px 0 var(--shadow-menu);
}

&-header {
Expand Down Expand Up @@ -242,6 +244,10 @@
&.no-padding {
padding-top: 0;
}

&.tradershub-os-header {
padding-top: 2.4rem;
}
}
&__item {
padding: 0 1.6rem 0 4.8rem;
Expand Down
37 changes: 13 additions & 24 deletions packages/components/src/components/page-overlay/page-overlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import React, { MouseEventHandler } from 'react';
import ReactDOM from 'react-dom';
import { CSSTransition } from 'react-transition-group';
import Icon from '../icon/icon';
import Button from '../button';
import { localize } from '@deriv/translations';
import { platforms } from '@deriv/shared';

type TPageOverlay = {
Expand Down Expand Up @@ -39,28 +37,19 @@ const PageOverlay = ({
window.location.href = platforms.tradershub_os.url ?? '';
};

const RedirectionComponent = () => {
if (is_from_tradershub_os) {
return (
<Button
className='dc-page-overlay__header-redirect'
has_effect
onClick={onClickTraderHub}
text={localize(`Back to Trader's Hub`)}
primary
/>
);
}
return (
<div
data-testid='dt_page_overlay_header_close'
className='dc-page-overlay__header-close'
onClick={(onClickClose as unknown as MouseEventHandler<HTMLDivElement>) || window.history.back}
>
<Icon icon='IcCross' />
</div>
);
};
const RedirectionComponent = () => (
<div
data-testid='dt_page_overlay_header_close'
className='dc-page-overlay__header-close'
onClick={
is_from_tradershub_os
? onClickTraderHub
: (onClickClose as unknown as MouseEventHandler<HTMLDivElement>) || window.history.back
}
>
<Icon icon='IcCross' />
</div>
);

const el_page_overlay = (
<div
Expand Down
290 changes: 290 additions & 0 deletions packages/core/src/App/Components/Layout/Header/toggle-menu-drawer-accounts-os.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,290 @@
import React from 'react';
import { useHistory, useLocation } from 'react-router-dom';

import { Div100vhContainer, Icon, MobileDrawer } from '@deriv/components';
import {
useAccountTransferVisible,
useAuthorize,
useIsP2PEnabled,
useOauth2,
useOnrampVisible,
useP2PSettings,
usePaymentAgentTransferVisible,
} from '@deriv/hooks';
import { getOSNameWithUAParser, routes } from '@deriv/shared';
import { observer, useStore } from '@deriv/stores';
import { localize } from '@deriv/translations';
import { Analytics } from '@deriv-com/analytics';

import getRoutesConfig from 'App/Constants/routes-config';

import MenuLink from './menu-link';

const ToggleMenuDrawerAccountsOS = observer(() => {
const { ui, client, modules } = useStore();
const {
disableApp,
enableApp,
is_mobile,
is_mobile_language_menu_open,
setMobileLanguageMenuOpen,
setIsForcedToExitPnv,
} = ui;
const {
account_status,
has_wallet,
is_authorize,
is_logged_in,
is_virtual,
logout: logoutClient,
should_allow_authentication,
should_allow_poinc_authentication,
landing_company_shortcode: active_account_landing_company,
is_proof_of_ownership_enabled,
is_passkey_supported,
} = client;
const { cashier } = modules;
const { payment_agent } = cashier;
const { is_payment_agent_visible } = payment_agent;
const is_account_transfer_visible = useAccountTransferVisible();
const { isSuccess } = useAuthorize();
const is_onramp_visible = useOnrampVisible();
const { data: is_payment_agent_transfer_visible } = usePaymentAgentTransferVisible();
const { is_p2p_enabled } = useIsP2PEnabled();

const { pathname: route } = useLocation();

const is_trading_hub_category =
route === routes.traders_hub || route.startsWith(routes.cashier) || route.startsWith(routes.account);

const [is_open, setIsOpen] = React.useState(false);
const [transitionExit, setTransitionExit] = React.useState(false);
const [primary_routes_config, setPrimaryRoutesConfig] = React.useState([]);

const timeout = React.useRef();
const history = useHistory();
const {
subscribe,
rest: { isSubscribed },
p2p_settings,
} = useP2PSettings();

React.useEffect(() => {
if (isSuccess && !isSubscribed && is_authorize) {
subscribe();
}
}, [isSuccess, p2p_settings, subscribe, isSubscribed, is_authorize]);

React.useEffect(() => {
const processRoutes = () => {
const routes_config = getRoutesConfig();
setPrimaryRoutesConfig(getFilteredRoutesConfig(routes_config, [routes.account]));
};

if (account_status || should_allow_authentication) {
processRoutes();
}

return () => clearTimeout(timeout.current);
}, [
account_status,
should_allow_authentication,
has_wallet,
is_trading_hub_category,
is_mobile,
is_passkey_supported,
is_p2p_enabled,
]);

const toggleDrawer = React.useCallback(() => {
if (is_mobile_language_menu_open) setMobileLanguageMenuOpen(false);
if (!is_open) setIsOpen(!is_open);
else {
setTransitionExit(true);
timeout.current = setTimeout(() => {
setIsOpen(false);
setTransitionExit(false);
}, 400);
}
}, [is_open, is_mobile_language_menu_open, setMobileLanguageMenuOpen]);

const handleLogout = React.useCallback(async () => {
toggleDrawer();
if (window.location.pathname.startsWith(routes.phone_verification)) {
setIsForcedToExitPnv(true);
// Add a small delay to ensure state is updated before navigation because adding await doesn't work here
await new Promise(resolve => setTimeout(resolve, 0));
}
history.push(routes.traders_hub);
await logoutClient();
}, [history, logoutClient, toggleDrawer]);

const { oAuthLogout } = useOauth2({ handleLogout });

const passkeysMenuOpenActionEventTrack = React.useCallback(() => {
Analytics.trackEvent('ce_passkey_account_settings_form', {
action: 'open',
form_name: 'ce_passkey_account_settings_form',
operating_system: getOSNameWithUAParser(),
});
}, []);

const getFilteredRoutesConfig = (all_routes_config, routes_to_filter) => {
const subroutes_config = all_routes_config.flatMap(i => i.routes || []);

return routes_to_filter
.map(path => all_routes_config.find(r => r.path === path) || subroutes_config.find(r => r.path === path))
.filter(route => route);
};

const getRoutesWithSubMenu = (route_config, idx) => {
const has_access = route_config.is_authenticated ? is_logged_in : true;
if (!has_access) return null;

if (!route_config.routes) {
return (
<MobileDrawer.Item key={idx}>
<MenuLink
link_to={route_config.path}
icon={route_config.icon_component}
text={route_config.getTitle()}
onClickLink={toggleDrawer}
/>
</MobileDrawer.Item>
);
}

const has_subroutes = route_config.routes.some(route => route.subroutes);
const should_hide_passkeys_route = !is_mobile || !is_passkey_supported;

const disableRoute = route_path => {
if (/financial-assessment/.test(route_path)) {
return is_virtual;
} else if (/trading-assessment/.test(route_path)) {
return is_virtual || active_account_landing_company !== 'maltainvest';
} else if (/proof-of-address/.test(route_path) || /proof-of-identity/.test(route_path)) {
return !should_allow_authentication;
} else if (/proof-of-income/.test(route_path)) {
return !should_allow_poinc_authentication;
} else if (/proof-of-ownership/.test(route_path)) {
return is_virtual || !is_proof_of_ownership_enabled;
}
return false;
};

const hideRoute = route_path => {
if (/passkeys/.test(route_path)) {
return should_hide_passkeys_route;
} else if (/languages/.test(route_path)) {
return has_wallet;
}
return false;
};

return (
<React.Fragment key={idx}>
{!has_subroutes &&
route_config.routes.map((route, index) => {
if (
!route.is_invisible &&
(route.path !== routes.cashier_pa || is_payment_agent_visible) &&
(route.path !== routes.cashier_pa_transfer || is_payment_agent_transfer_visible) &&
(route.path !== routes.cashier_p2p || is_p2p_enabled) &&
(route.path !== routes.cashier_onramp || is_onramp_visible) &&
(route.path !== routes.cashier_acc_transfer || is_account_transfer_visible)
) {
return (
<MobileDrawer.Item key={index}>
<MenuLink
link_to={route.path}
icon={route.icon_component}
text={route.getTitle()}
onClickLink={toggleDrawer}
/>
</MobileDrawer.Item>
);
}
return undefined;
})}
{has_subroutes &&
route_config.routes.map((route, index) => {
return route.subroutes ? (
<MobileDrawer.SubMenuSection
key={index}
section_icon={route.icon}
section_title={route.getTitle()}
>
{route.subroutes.map((subroute, subindex) => (
<MenuLink
key={subindex}
is_disabled={disableRoute(subroute.path) || subroute.is_disabled}
link_to={subroute.path}
text={subroute.getTitle()}
onClickLink={() => {
toggleDrawer();
if (subroute.path === routes.passkeys) {
passkeysMenuOpenActionEventTrack();
}
}}
is_hidden={hideRoute(subroute.path)}
/>
))}
</MobileDrawer.SubMenuSection>
) : (
<MobileDrawer.Item key={index}>
<MenuLink
link_to={route.path}
icon={route.icon_component}
text={route.getTitle()}
onClickLink={toggleDrawer}
/>
</MobileDrawer.Item>
);
})}
</React.Fragment>
);
};
return (
<React.Fragment>
<a id='dt_mobile_drawer_toggle' onClick={toggleDrawer} className='header__mobile-drawer-toggle'>
<Icon icon='IcHamburger' width='16px' height='16px' className='header__mobile-drawer-icon' />
</a>
<MobileDrawer
alignment='left'
icon_class='header__menu-toggle'
is_open={is_open}
transitionExit={transitionExit}
toggle={toggleDrawer}
id='dt_mobile_drawer'
enableApp={enableApp}
disableApp={disableApp}
title={<div>{localize('Account settings')}</div>}
height='100vh'
width='295px'
className='pre-appstore'
>
<Div100vhContainer height_offset='40px'>
<div className='header__menu-mobile-body-wrapper'>
<React.Fragment>
<MobileDrawer.Body className='tradershub-os-header'>
<div className='header__menu-mobile-platform-switcher' id='mobile_platform_switcher' />
{primary_routes_config.map((route_config, idx) =>
getRoutesWithSubMenu(route_config, idx)
)}
{is_logged_in && (
<MobileDrawer.Item onClick={oAuthLogout} className='dc-mobile-drawer__item'>
<MenuLink icon='IcLogout' text={localize('Log out')} />
</MobileDrawer.Item>
)}
</MobileDrawer.Body>
</React.Fragment>
</div>
</Div100vhContainer>
</MobileDrawer>
</React.Fragment>
);
});

ToggleMenuDrawerAccountsOS.displayName = 'ToggleMenuDrawerAccountsOS';

export default ToggleMenuDrawerAccountsOS;
4 changes: 2 additions & 2 deletions packages/core/src/App/Containers/Layout/app-contents.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const AppContents = observer(({ children }) => {
const [is_gtm_tracking, setIsGtmTracking] = React.useState(false);
const {
client,
common: { platform },
common: { platform, is_from_tradershub_os },
gtm: { pushDataLayer },
ui,
} = useStore();
Expand Down Expand Up @@ -124,7 +124,7 @@ const AppContents = observer(({ children }) => {
'app-contents--is-mobile': isMobile,
'app-contents--is-route-modal': is_route_modal_on,
'app-contents--is-scrollable': is_cfd_page || is_cashier_visible,
'app-contents--is-hidden': platforms[platform],
'app-contents--is-hidden': platforms[platform] && !(is_from_tradershub_os && isMobile),
'app-contents--is-onboarding': window.location.pathname === routes.onboarding,
'app-contents--is-dtrader-v2': dtrader_v2_enabled_mobile || dtrader_v2_enabled_desktop,
})}
Expand Down
Loading
Loading