From 7966d0d569c9491b48d4f71da24c63ecc642aa3b Mon Sep 17 00:00:00 2001
From: Aizad Ridzo <103104395+aizad-deriv@users.noreply.github.com>
Date: Tue, 21 Mar 2023 16:14:43 +0800
Subject: [PATCH] Aizad/88786/mt5 redirection modal fix (#7663)

* chore: fix mt5 redirection modal closing on trade

* fix: modal and dialog close seperately after clicking outside

* fix: re-add dialog_status condition back to redirect-notice-modal

* fix: reverted the previous changes

* fix: remove useclickoutside for page overlay

* fix: update deriv/api package to latest version

* fix: updated package version to match with master

* Merge branch 'develop' of github.com:binary-com/deriv-app into aizad/88786/mt5-redirection-modal-fix

* fix: codecov and circleci

* fix: upgrade package
---
 .../cfd/src/Containers/mt5-trade-modal.tsx    | 10 +------
 .../components/src/components/modal/modal.tsx |  2 +-
 .../components/page-overlay/page-overlay.tsx  |  1 -
 .../RedirectNotice/redirect-notice-modal.jsx  | 26 +++++++++----------
 4 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/packages/cfd/src/Containers/mt5-trade-modal.tsx b/packages/cfd/src/Containers/mt5-trade-modal.tsx
index 855abff2abb2..0aff425da892 100644
--- a/packages/cfd/src/Containers/mt5-trade-modal.tsx
+++ b/packages/cfd/src/Containers/mt5-trade-modal.tsx
@@ -10,8 +10,6 @@ import DerivXTradeModal from './derivx-trade-modal';
 
 type TMT5TradeModalProps = {
     mt5_trade_account: Required<DetailsOfEachMT5Loginid>;
-    disableApp: () => void;
-    enableApp: () => void;
     is_eu_user: boolean;
     is_open: boolean;
     onPasswordManager: (
@@ -30,8 +28,6 @@ type TMT5TradeModalProps = {
 
 const MT5TradeModal = ({
     mt5_trade_account,
-    disableApp,
-    enableApp,
     is_eu_user,
     is_open,
     onPasswordManager,
@@ -69,8 +65,6 @@ const MT5TradeModal = ({
         <React.Suspense fallback={<UILoader />}>
             <DesktopWrapper>
                 <Modal
-                    disableApp={disableApp}
-                    enableApp={enableApp}
                     is_open={is_open}
                     title={localize('Trade')}
                     toggleModal={toggleModal}
@@ -98,11 +92,9 @@ const MT5TradeModal = ({
     );
 };
 
-export default connect(({ modules: { cfd }, modules, ui, common, traders_hub }: RootStore) => ({
+export default connect(({ modules: { cfd }, modules, common, traders_hub }: RootStore) => ({
     dxtrade_tokens: cfd.dxtrade_tokens,
     platform: common.platform,
-    disableApp: ui.disableApp,
-    enableApp: ui.enableApp,
     mt5_trade_account: modules.cfd.mt5_trade_account,
     show_eu_related_content: traders_hub.show_eu_related_content,
 }))(MT5TradeModal);
diff --git a/packages/components/src/components/modal/modal.tsx b/packages/components/src/components/modal/modal.tsx
index bffd44929b78..526640ed61bd 100644
--- a/packages/components/src/components/modal/modal.tsx
+++ b/packages/components/src/components/modal/modal.tsx
@@ -82,7 +82,7 @@ const ModalElement = ({
         modal_root_ref.current?.querySelectorAll(portal_elements_selector.join(', ')).length;
 
     const validateClickOutside = (e: IClickEvent): boolean => {
-        const is_absolute_modal_visible = document.getElementById('modal_root_absolute')?.hasChildNodes();
+        const is_absolute_modal_visible = document.getElementById('popup_root')?.hasChildNodes();
         const path = e.path ?? e.composedPath?.();
         return (
             has_close_icon &&
diff --git a/packages/components/src/components/page-overlay/page-overlay.tsx b/packages/components/src/components/page-overlay/page-overlay.tsx
index 9f0a1e0a80c7..399cc1934289 100644
--- a/packages/components/src/components/page-overlay/page-overlay.tsx
+++ b/packages/components/src/components/page-overlay/page-overlay.tsx
@@ -26,7 +26,6 @@ const PageOverlay = ({
     header_classname,
 }: React.PropsWithChildren<TPageOverlay>) => {
     const page_overlay_ref = React.useRef<HTMLDivElement>(null);
-    useOnClickOutside(page_overlay_ref, onClickClose, () => !!(is_open && portal_id));
 
     const el_page_overlay = (
         <div
diff --git a/packages/core/src/App/Components/Elements/Modals/RedirectNotice/redirect-notice-modal.jsx b/packages/core/src/App/Components/Elements/Modals/RedirectNotice/redirect-notice-modal.jsx
index d2d3dcbad47e..362a2a951294 100644
--- a/packages/core/src/App/Components/Elements/Modals/RedirectNotice/redirect-notice-modal.jsx
+++ b/packages/core/src/App/Components/Elements/Modals/RedirectNotice/redirect-notice-modal.jsx
@@ -53,20 +53,18 @@ const RedirectNoticeModal = ({ is_logged_in, is_eu, portal_id }) => {
     }, [is_logged_in, is_eu]);
 
     return ReactDOM.createPortal(
-        dialog_status ? (
-            <Dialog
-                className='redirect-notice'
-                is_visible={dialog_status}
-                title='Redirect notice'
-                is_open={dialog_status}
-                cancel_button_text={localize('Cancel')}
-                confirm_button_text={localize('Proceed')}
-                onCancel={onCancelDialog}
-                onConfirm={onConfirmDialog}
-            >
-                {localize('You are being redirected to an external website.')}
-            </Dialog>
-        ) : null,
+        <Dialog
+            className='redirect-notice'
+            is_visible={dialog_status}
+            title='Redirect notice'
+            cancel_button_text={localize('Cancel')}
+            confirm_button_text={localize('Proceed')}
+            onCancel={onCancelDialog}
+            onConfirm={onConfirmDialog}
+            dismissable={onCancelDialog}
+        >
+            {localize('You are being redirected to an external website.')}
+        </Dialog>,
         document.getElementById(portal_id)
     );
 };